Question

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

最初，两个问题似乎很容易解决：

SyntaxError：导入声明只能出现在模块的顶层
未声明HTML文档的字符编码。文件...

要修复它：

将<script>替换为<script type="module">
将<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的代码中需要什么？

（我试图重新表述这个问题，但是如果我仍然应该获得负面排名，请解释原因。谢谢）

Answer 1

这是因为由于最新版本的OpenLayers（V5.0）而导致的某些更改。现在，示例基于ES6模块，而以前有另一种方法

您可以将the "simple" v4.6.5 sample与"simple" master sample

进行比较

使用<script type="module">是不够的，因为这样做不能解决import Map from ol/Map.js时的依赖性

至少有3种方法：

使用5.0.0版创建Openlayers样本的常用方法是使用诸如Webpack或Parcel之类的捆绑器。有a tutorial for this。
我还用this sample
您始终可以使用旧的方式，例如在版本4.6.5中使用this other official tutorial而不使用import。

对于解决方案1，您可以使用codeandbox.io避免设置本地包裹/ Webpack环境，如this tweet所示。

我知道正在进行重构样本代码的工作，并且我还为codeandbox.io提出了一些建议，例如https://github.com/openlayers/openlayers/issues/8324

Answer 2

有同样的问题。 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';        
    // ...

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

Answer 3

根据lou的回答，这是我刚刚为Marker animation example做的一个修正：

<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

<body>
<div id="map" class="map"></div>

<label for="speed">
  speed:&nbsp;
  <input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>

<button id="start-animation">Start Animation</button>

<script>
  var Feature = ol.Feature; //import Feature from 'ol/Feature.js';
  var Map = ol.Map; //import Map from 'ol/Map.js';
  var View = ol.View; //import View from 'ol/View.js';
  var Polyline = ol.format.Polyline; //import Polyline from 'ol/format/Polyline.js';
  var Point = ol.geom.Point; //import Point from 'ol/geom/Point.js';
  var {Tile, Vector} = ol.layer; //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
  var TileLayer = Tile;
  var VectorLayer = Vector;

  //var BingMaps = ol.source.BingMaps; //import BingMaps from 'ol/source/BingMaps.js';

  var VectorSource = ol.source.Vector; //import VectorSource from 'ol/source/Vector.js';
  var {Circle, Fill, Icon, Stroke, Style} = ol.style; //import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';
  var CircleStyle = Circle;

  // This long string is placed here due to jsFiddle limitations.
  // It is usually loaded with AJAX.
  var polyline = [ ...

并使用ESRI sattelite map或OpenStreetMap（普通）贴图而不是Bing Maps（需要一个键），请对标记动画示例进行以下额外编辑：

  var map = new Map({
    target: document.getElementById('map'),
    loadTilesWhileAnimating: true,
    view: new View({
      center: center,
      zoom: 10,
      minZoom: 2,
      maxZoom: 19
    }),
    layers: [
      new TileLayer({
        source:
            //new ol.source.OSM()

            new ol.source.XYZ({
              attributions: ['Powered by Esri',
                             'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
              attributionsCollapsible: false,
              url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
              maxZoom: 23
            })

            /*
            new BingMaps({
              imagerySet: 'AerialWithLabels',
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
            })
            */
      }),
      vectorLayer
    ]
  });

Answer 4

The example doesn't work because of you maybe just copy past data from page and not look to DOC menu item
https://openlayers.org/en/latest/doc/tutorials/bundle.html
So step by step:
1. npm init (here u set your index.js as an entry point)
2. npm install ol (it adds OpenLayer to your application)
3. npm install --save-dev parcel-bundler
4. npm start (it run a web server on localhost:1234 and you will see your example working fine
If needed, then
5. npm build (it create /dist folder which you needed a copy to your web server, inside it will be converted js file.

为什么示例不起作用？（与进口斗争）

4 个答案:

为什么示例不起作用？ （与进口斗争）

4 个答案:

为什么示例不起作用？（与进口斗争）