我正在尝试在本地环境中创建一个简单的示例。我想在我的网站上做一张地图,但一旦我下载了必要的文件,我就遇到了奇怪的问题。首先,我不得不为示例脚本链接添加'type="module"'代码,这已经让我抓狂了。没有人测试这些应用程序,或者我的环境如此特殊?如果import标签在最常用的浏览器中不起作用,他们为什么还要使用它?!在我扩展了示例代码并更改了导入链接以适应我的环境(从ol/Map.js到/ol/Map.js(之后,现在我得到了这个错误,您可以在标题中阅读。未能解析模块说明符"rbush"。我能做什么?我不知道。我一定遗漏了一个要点。示例(https://openlayers.org/en/latest/examples/simple.html)在openlayers.org上运行良好,但如果我按照说明操作,我就不会这么做。为什么?
OpenLayers 5.1.3旨在与npm包管理器一起使用,如下所述:
https://openlayers.org/en/latest/doc/tutorials/bundle.html
要在不包含依赖项和"构建"它的情况下使用它,请参阅文档中的快速入门页:
在页面上放置地图下面是一个完整的工作示例。创建一个新文件,复制下面的内容,然后在浏览器中打开:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
"简单"示例的工作示例