web-dev-qa-db-ja.com

なぜ例が機能しないのですか？ （輸入との闘い）

ページで https://openlayers.org/en/latest/examples/image-vector-layer.html HTMLコードをマップの下から/tmp/a.htmlにコピーし、firefox /tmp/a.html。

最初は、簡単に修正できる2つの問題がありました。

  1. SyntaxError：インポート宣言はモジュールのトップレベルでのみ表示される場合があります
  2. HTMLドキュメントの文字エンコーディングは宣言されていません。ドキュメント...

修正するには：

  1. <script>を<script type="module">に置き換えます
  2. <meta charset="UTF-8">を<head></head>に追加します

しかし、3番目のエラーをどうすればよいでしょうか？

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

Firefox 60.0.1があります。

それで、例のHTMLコードは私がしたように使用されることを意図していたのですか、それとも何かを誤解していましたか？

そして、import Map from ol/Map.jsにコードで何が必要ですか？

（質問を再定式化しようとしましたが、まだ否定的なランキングに値する場合は、その理由を説明してください。ありがとう）

openlayers
16
xhancar

OpenLayers（V5.0）の最新リリースによるいくつかの変更があるためです。サンプルはES6モジュールに基づいていますが、以前は別の方法がありました

"simple" v4.6.5サンプル と "simple"マスターサンプル を比較できます。

<script type="module">を使用すると、import Map from ol/Map.jsを実行するときに依存関係を解決できないため、十分ではありません。

少なくとも3つの方法があります。

  1. バージョン5.0.0を使用してOpenlayersサンプルを作成する通常の方法は、WebpackやParcelなどのBundlerを使用することです。 これのチュートリアル があります。

  2. また、JSPMを このサンプル で調査しました

  3. バージョン4.6.5のように、 この他の公式チュートリアル を使用して、importを使用せずに、常に古い方法を使用できます。

ソリューション1では、codesandbox.ioを使用して、 this Tweet で示されているようなローカルパーセル/ウェブパック環境の設定を回避できます。

サンプルのコードをリファクタリングするための進行中の作業があることを知っています。また、codesandbox.ioにいくつかの提案を提出しました。たとえば、 https://github.com/openlayers/openlayers/issues/8324

11
Thomas Gratier

同じ問題があった。 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で実行します。

5
lou

louの答えに基づいて、ここで マーカーアニメーションの例 に対して行った修正を示します。

<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 = [ ...

Bing Maps one（キーを必要とする）の代わりに ESRI sattelite map または OpenStreetMap （plain）マップを使用するには、この追加編集を行いますマーカーアニメーションの例：

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