Archivi categoria: Viaggi

Come creare una semplice mappa (con segnaposto) usando OpenLayers ?

Lascia una risposta

Questo tutorial si basasu OpenLayers Quick Start Guide e OpenLayers Popup Example ed è riferito alla versione 5.3.0 della libreria. Controlla se è presente una versione aggiornata.

Includi lo stylesheet di OpenLayers nella sezione <head> della tua pagina HTML.

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

Includ la libreria in Javascript di OpenLayers alla fine della sezione <body> del tuo HTML

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

Inserisci un elemento <div id="map"> dove deve trovarsi la mappa

 <div id="map" style="width: 600px; height: 400px;"></div>

Ora puoi aggiugere una sezione <script> alla fine della sezione <body>  (dopo lo <script> che carica la libreria JavaScript OpenLayers). Tutto il seguente JavaScript deve trovarsi nella sezione <script.

Inizializza la mappa con la base dei dati del Belgio

 var attribution = new ol.control.Attribution({
     collapsible: false
 });

 var map = new ol.Map({
     controls: ol.control.defaults({attribution: false}).extend([attribution]),
     layers: [
         new ol.layer.Tile({
             source: new ol.source.OSM({
                 url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
                 attributions: [ ol.source.OSM.ATTRIBUTION, 'Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>' ],
                 maxZoom: 18
             })
         })
     ],
     target: 'map',
     view: new ol.View({
         center: ol.proj.fromLonLat([4.35247, 50.84673]),
         maxZoom: 18,
         zoom: 12
     })
 });

Devi aggiungere un segnaposto per un luogo

 var layer = new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
                 geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
             })
         ]
     })
 });
 map.addLayer(layer);

Devi creare una nuova sezione <div id="popup"> dopo l’elemento <div id="map">

 <div id="popup" class="ol-popup">
     <a href="#" id="popup-closer" class="ol-popup-closer"></a>
     <div id="popup-content"></div>
 </div>

Inizializza il popup (il seguente codice JavaScript deve essere inserito nella sezione<script>)

 var container = document.getElementById('popup');
 var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');

 var overlay = new ol.Overlay({
     element: container,
     autoPan: true,
     autoPanAnimation: {
         duration: 250
     }
 });
 map.addOverlay(overlay);

 closer.onclick = function() {
     overlay.setPosition(undefined);
     closer.blur();
     return false;
 };

Add the function to open the popup when you click on the marker

 map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         var coordinate = event.coordinate;

         content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
         overlay.setPosition(coordinate);
     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });

Di default, il popup si aprirà clickando sl segnaposto. Se vuoi che il popup si apre non appena la mappa viene caricata, basterà aggiungere


 content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
 overlay.setPosition(ol.proj.fromLonLat([4.35247, 50.84673]));

Qui puoi vedere il risultato

Testo adattato con origine di : https://openstreetmap.be/en/projects/howto/openlayers.html