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).
Contenuti
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:
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 sorgenteol.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);
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:
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: