Почему примеры не работают? (борьба с импортом)

На странице https://openlayers.org/en/latest/examples/image-vector-layer.html Я скопировал код HTML из карты в /tmp/a.html и запустил firefox/tmp/a.html.

Сначала две проблемы оказались легко исправлены:

СинтаксисError: объявления импорта могут отображаться только на верхнем уровне модуля
Кодировка символов 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?

(Я попытался переформулировать вопрос, но если я по-прежнему заслуживаю отрицательного рейтинга, объясните, почему. Спасибо)

Ответ 1

Это потому, что есть некоторые изменения из-за последней версии OpenLayers (V5.0). Теперь образцы основаны на модулях ES6, тогда как раньше был другой способ сделать

Вы можете сравнить "простой" образец v4.6.5 с "простым" мастер-образцом.

Использование <script type="module"> недостаточно, поскольку это не решает зависимости при import Map from ol/Map.js

Есть как минимум 3 способа сделать это:

Обычный способ создания образца Openlayers с использованием версии 5.0.0 - использование таких пакетов, как Webpack или Parcel. Для этого есть учебник.
Я также исследовал JSPM с этим образцом
Вы всегда можете использовать старый способ, как в версии 4.6.5, используя этот другой официальный учебник без import.

Для решения 1 вы можете использовать codesandbox.io, чтобы избежать настройки локальной среды посылки/веб-пакета, как показано в этом твите.

Я знаю, что есть работа над прогрессом по рефакторингу кода для образцов, и я также представил некоторые предложения для codesandbox.io, например, https://github.com/openlayers/openlayers/issues/8324

Ответ 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.

Ответ 3

на основании lou answer вот исправление, которое я только что сделал для примера анимации маркера:

<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href="#" onclick="location.href='https://openlayers.org/en/v5.3.0/css/ol.css'; return false;" 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 или карту OpenStreetMaps (plain) вместо карты BingMaps (для которой требуется ключ), выполните дополнительное редактирование примера анимации маркера:

  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
    ]
  });