javascript - Import from in Openlayers - Geographic Information Systems Stack Exchange
在浏览器中运行开放层示例
提供的示例无法在客户端（在浏览器上）运行。让我们看一个例子。
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
要在浏览器上运行这个非常简单的示例，您必须进行手动更改。
修改的文件
这些是相同的文件，具有在客户端上运行所需的更改：
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenStreepMap layer using OpenLayers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
索引.js
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 0
})
});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步