../../_images/logo_openlayers.png ../../_images/OSGeo_project.png

Guida rapida OpenLayers

Questa guida rapida descrive alcuni passi necessari per cominciare a lavorare con OpenLayers: la creazione di una mappa di base, l’aggiunta di livelli raster e vettoriali e lo styling delle caratteristiche.

OpenLayers permette in modo semplice di inserire una mappa dinamica in qualsiasi pagina web. Consente di visualizzare tile di mappe, dati vettoriali e marker provenienti da qualsiasi sorgente. OpenLayers è stato sviluppato per promuovere la diffusione di informazione geografica di ogni tipo. È una libreria JavaScript libera e open source, rilasciata sotto la licenza 2-clause BSD (anche conosciuta come FreeBSD).

Concetti fondamentali

Prima di iniziare a lavorare con OpenLayers aiuta a capire i concetti fondamentali di OpenLayers:

Map

Il map è il componente centrale di OpenLayers. Per rendere una mappa sono necessari una vista, uno o più layers e un contenitore di destinazione.

View

La view determina il modo in cui la mappa viene resa. Si usa per impostare la risoluzione, la posizione centrale, ecc. È come una telecamera attraverso la quale guardiamo il contenuto della mappa.

Layer

I Layer possono essere aggiunti alla mappa in un ordine sovrapposto. I layer possono essere sia raster (immagini), sia vettori (punti/linee/poligoni).

Sorgente

Ogni layer ha una fonte, che sa come caricare il contenuto del layer. Nel caso dei vettori, la sua sorgente legge i dati vettoriali usando una classe di formato (per esempio GeoJSON o KML) e fornisce al layer un insieme di elementi.

Caratteristiche

Le Features rappresentano cose del mondo reale e possono essere visualizzate usando diverse geometrie (come punto, linea o poligono) usando un dato stile, che determina il suo aspetto (spessore della linea, colore di riempimento, ecc.)

Crea una mappa di base

Crea un file ad esempio in /home/user/ chiamato basic-map.html e copia il seguente contenuto nel file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Basic map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <!-- OpenLayers CSS -->
        <link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">

        <!-- Custom styles -->
        <style>
          #map {
            width: 100%;
            height: 500px;
          }
        </style>
    </head>
    <body>
        <h1>Basic map</h1>

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

        <!-- OpenLayers JS-->
        <script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>

        <!-- App code -->
        <script>
          var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([2.1833, 41.3833]),
              zoom: 6
            })
          });
        </script>

    </body>
</html>

Ora prova ad aprire basic-map.html da un browser web usando File->Open File. Dovresti vedere quanto segue:

../../_images/openlayers-basic-map.png

Nota:

  • Il codice segue la migliore pratica di caricare il codice JavaScipt alla fine del file html.

  • Una mappa OpenLayers deve essere collegata ad un elemento DOM HTML, quindi abbiamo creato un elemento <div> identificato dall’id map.

  • La mappe sono rappresentate dalla classe ol.Map. Specifichiamo l’elemento DOM da disegnare nella mappa usando la proprietà target.

  • OpenLayers permette il rendering delle mappe utilizzando due diversi meccanismi: Canvas e WebGL. Il renderer predefinito è canvas.

  • Una mappa mostra dati contenuti all’interno di layer, quindi abbiamo creato un layer piastrellato, rappresentato dalla classe ol.layer.Tile, che carica il contenuto dal progetto OpenStreetMap, utilizzando la classe sorgente ol.source.OSM.

  • Infine, imposta la posizione iniziale della camera usando la classe ol.View, imposta il livello di zoom iniziale e la posizione centrale.

Aggiungi layer raster

I raster più usati sono i layer piastrellati, forniti da OpenStreetMap, Stamen, Bing, ecc. I layer piastrellati sono rappresentati dalla classe ol.layer.Tile e devono usare una sorgente che sappia come caricare i tasselli da un dato provider, come ol.source.OSM o ol.source.Stamen:

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var stamen = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'watercolor'
  })
});

I layer possono essere aggiunti alla mappa in due modi:

  • Quando si costruisce la ol.Map, usa la proprietà layers:

    var map = new ol.Map({
      ...
      layers: [osm, stamen]
      ...
    });
    
  • Aggiungili manualmente con il metodo map.addLayer():

    map.addLayer(osm);
    map.addLayer(stamen);
    

Aggiungi layer vettoriali

I vettori sono rappresentati dalla classe ol.layer.Vector e devono usare una sorgente adatta a leggere il formato vettoriale, come ol.source.GeoJSON, ol.source.KML o ol.source.TopoJSON.

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: 'url_to_geojson_file'
  })
});

// Add Vector layer to map
map.addLayer(vectorLayer);
../../_images/openlayers-vector.png

Nota, nel codice precedente devi cambiare il url_to_file per puntare a un file GeoJSON valido posto nel nostro server. Nota che la sicurezza di Javascript impedirà il sourcing di set di dati da un URL esterno su un diverso dominio / porta (a.k.a. same-origin policy).

Gli elementi possono anche essere creati manualmente. In questo caso devi creare una geometria che rappresenti l’elemento:

// Geometries
var point = new ol.geom.Point(
    ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
    ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
    1000000
);

// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);

// Source
var vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);

// Vector layer
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

// Add Vector layer to map
map.addLayer(vectorLayer);

Applica lo stile agli elementi

Gli elementi all’interno dei vettori possono essere stilizzati. Lo stile è determinato da una combinazione di riempimento, tratto, testo e immagine, che sono tutti opzionali. Inoltre, uno stile può essere applicato ad un layer, che determina lo stile di tutti gli elementi contenuti, o ad un singolo elemento.

Uno stile è rappresentato dalla classe ol.style.Style che ha proprietà per impostare il fill, stroke, text e image da applicare. Il prossimo esempio mostra il dataset World’s administrative limits stilizzato per usare un riempimento e un tratto verde:

../../_images/openlayers-styling.png
var limitsLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/world_limits.json',
    format: new ol.format.TopoJSON(),
    projection: 'EPSG:3857'
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(55, 155, 55, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'rgba(55, 155, 55, 0.8)',
      width: 1
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: 'rgba(55, 155, 55, 0.5)',
      })
    })
  })
});

Nel codice, abbiamo caricato un file TopoJSON e lo abbiamo stilizzato attraverso la proprietà style. Abbiamo impostato un fill` e un stroke, necessari per linee e poligoni, e un image (in questo caso un cerchio) usato per gli elementi dei punti.

Lavora con gli eventi

La maggior parte dei componenti, come la mappa, i layer o i controlli, attivano eventi per notificare i cambiamenti. Per esempio possiamo ricevere una notifica ogni volta che il mouse viene spostato sulla mappa, o quando un elemento viene aggiunto ad un vettore, ecc.

Gli eventi possono essere facilmente registrati su un oggetto con il metodo on() e non registrati con un().

Il codice seguente registra un evento su un’istanza della mappa, e sarà notificato ogni volta che il puntatore viene spostato. All’interno della funzione di callback otteniamo le coordinate del puntatore e le stampiamo nella console del browser in due diverse proiezioni.

map.on('pointermove', function(event) {
  var coord3857 = event.coordinate;
  var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');

  console.log(coord3857, coord4326);
});

E ora?

A volte il modo più veloce per capire come funziona OpenLayers è guardare gli esempi e il loro codice sorgente. Puoi trovare altre informazioni su OpenLayers qui: