web-dev-qa-db-fra.com

Pourquoi les exemples ne fonctionnent pas? (une lutte avec les importations)

Sur la page https://openlayers.org/en/latest/examples/image-vector-layer.html J'ai copié le code HTML situé sous la carte vers /tmp/a.html et courir firefox /tmp/a.html.

Au début, deux problèmes semblaient faciles à résoudre:

  1. SyntaxError: les déclarations d'importation ne peuvent apparaître qu'au niveau supérieur d'un module
  2. Le codage de caractères du document HTML n'a pas été déclaré. Le document...

Réparer:

  1. remplacer <script> par <script type="module">
  2. ajouter <meta charset="UTF-8"> en <head></head>

Mais que faire avec la troisième erreur?

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

J'ai Firefox 60.0.1.

Alors, les codes HTML dans les exemples sont-ils censés être utilisés comme je l'ai fait ou ai-je mal compris quelque chose?

Et de quoi ai-je besoin dans mon code pour import Map from ol/Map.js?

(J'ai essayé de reformuler la question, mais si je mérite toujours un classement négatif, veuillez expliquer pourquoi. Merci)

openlayers
16
xhancar

C'est parce qu'il y a des changements dus à la dernière version d'OpenLayers (V5.0). Maintenant, les échantillons sont basés sur des modules ES6 alors qu’il existait auparavant une autre façon de faire

Vous pouvez comparer l'exemple "simple" v4.6.5 avec échantillon maître "simple"

En utilisant <script type="module"> n'est pas suffisant car cela ne résout pas les dépendances lorsque vous faites import Map from ol/Map.js

Il y a au moins 3 façons de faire:

  1. La manière habituelle de créer un exemple Openlayers avec la version 5.0.0 consiste à utiliser un bundle tel que Webpack ou Parcel. Il y a n tutoriel pour cela .

  2. J'ai également étudié JSPM avec cet exemple

  3. Vous pouvez toujours utiliser l'ancienne méthode, comme dans la version 4.6.5, en utilisant cet autre tutoriel officiel sans utiliser import.

Pour la solution 1, vous pouvez utiliser codesandbox.io pour éviter de définir un environnement de colis/webpack local comme illustré avec this Tweet .

Je sais que des travaux sont en cours pour restructurer le code des échantillons et j'ai également soumis des suggestions pour codesandbox.io, par exemple https://github.com/openlayers/openlayers/issues/8324

11
Thomas Gratier

eu le même problème. openlayers est remarquable, les exemples v5 ne le sont pas :(

par exemple . https://openlayers.org/en/latest/examples/animation.html

mon correctif pour v5 (.3.0) exemples:

    <!-- 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';        
    // ...

processus: utilisez "copier" sur la page d'exemple, "coller" dans un nouveau fichier HTML. modifier comme ci-dessus. courir dans firefox.

5
lou

sur la base de la réponse de lou, voici un correctif que je viens de faire pour le exemple d'animation de marqueur :

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

et d'utiliser une carte carte satellite ESRI ou OpenStreetMap (carte simple) au lieu de Bing Maps une (qui nécessite une clé), effectuez cette modification supplémentaire à l'exemple d'animation Marker:

  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