Question

我正在尝试在本地环境中制作一个简单的示例。我想在自己的网站上做一张地图，但是一旦下载了必要的文件，我就会遇到奇怪的问题。首先，我必须为示例脚本链接添加'type =“ module”'代码，这已经让我发疯了。没有人测试这些应用程序，还是我的环境如此特别？如果它们无法像魅力一样在最常用的浏览器中运行，为什么他们甚至还要使用import标签？在扩展示例代码并将导入链接更改为适合我的环境（将ol / Map.js更改为/ol/Map.js）之后，现在出现了此错误，您可以在标题中阅读。无法解析模块说明符“ rbush”。我能做什么？我不知道。我必须错过一个要点。示例（https://openlayers.org/en/latest/examples/simple.html）在openlayers.org上可以很好地在线运行，但是如果我按照说明进行操作，那不是我的意思。为什么？

Answer 1

OpenLayers 5.1.3旨在与npm package manager一起使用，如下所述：

https://openlayers.org/en/latest/doc/tutorials/bundle.html

要使用它而不包含依赖项并“构建”它，请参见quick start page in the documentation：

将地图放在页面上在下面，您将找到一个完整的工作示例。创建一个新文件，复制以下内容，然后在浏览器中打开：

<!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>

working example of the "simple" example

使用OpenLayers 5示例，错误：无法解析模块说明符“ rbush”

1 个答案: