为什么示例不起作用?(与进口斗争)

xha*_*car 16 openlayers

在页面https://openlayers.org/en/latest/examples/image-vector-layer.html我将HTML代码从地图下复制到/tmp/a.html并运行firefox /tmp/a.html.

最初有两个问题很容易解决:

  1. SyntaxError:import声明只能出现在模块的顶层
  2. 未声明HTML文档的字符编码.文件......

要解决这个问题:

  1. 替换<script><script type="module">
  2. 添加<meta charset="UTF-8"><head></head>

但是第三个错误怎么办?

TypeError: Error resolving module specifier: ol/Map.js

我有Firefox 60.0.1.

那么,示例中的HTML代码是否可以像我一样使用,或者我误解了什么?

我的代码需要import Map from ol/Map.js什么?

(我试图重新提出问题,但如果我仍然应该得到负面排名,请解释原因.谢谢)

Tho*_*ier 13

这是因为最新发布的OpenLayers(V5.0)会有一些变化.现在样本基于ES6模块,而之前有另一种方法

您可以将"简单"v4.6.5样本"简单"主样本进行比较

使用<script type="module">是不够的,因为它在执行时不解决依赖关系import Map from ol/Map.js

至少有3种方法:

  1. 使用5.0.0版创建Openlayers示例的常用方法是使用像Webpack或Parcel这样的捆绑器.有一个教程.

  2. 我还用这个样本研究了JSPM

  3. 您可以随时使用旧的方式,例如在4.6.5版中使用此其他官方教程而不使用import.

对于解决方案1,您可以使用codesandbox.io来避免设置本地parcel/webpack环境,如此推文所示.

我知道有一些关于重构样本代码的进展工作,我还提交了一些关于codesandbox.io的建议,例如https://github.com/openlayers/openlayers/issues/8324


小智 7

有同样的问题。openlayers是杰出的,v5示例不是:(

例如https://openlayers.org/en/latest/examples/animation.html

我对v5(.3.0)示例的修复:

    <!-- ADD build-REFERENCE for v5(.3.0) // github.com/openlayers/openlayers/ -->
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

    <script>
    // CONVERT imports to var
    var Map                 = ol.Map;        //~ import Map from 'ol/Map.js';
    var View                = ol.View;       //~ import View from 'ol/View.js';
    var {easeIn, easeOut}   = ol.easing;     //~ import {easeIn, easeOut} from 'ol/easing.js';
    var TileLayer           = ol.layer.Tile; //~ import TileLayer from 'ol/layer/Tile.js';
    var {fromLonLat}        = ol.proj;       //~ import {fromLonLat} from 'ol/proj.js';
    var OSM                 = ol.source.OSM; //~ import OSM from 'ol/source/OSM.js';        
    // ...
Run Code Online (Sandbox Code Playgroud)

过程:在示例页面上使用“复制”,“粘贴”到新的html文件。像上面一样修改。在Firefox中运行。