Questo tutorial descrive alcune passaggi base richiesti per iniziare a lavorare con OpenLayers3: creare una mappa base, aggiungere layer raster e vettoriali e stilizzare gli elementi.
OpenLayers3 è una libreria per mappe molto leggere per client web e mobile che usa le tecnologie dei browser moderni, tipo HTML5, WebGL e CSS3.
Contents
Prima di iniziare a lavorare con OpenLayers è bene capire i concetti chiave di OpenLayers:
In questo passaggio si creerà una mappa base.
Creare un file nella cartella /home/user/ denominato basic-map.html , e copia il testo seguente 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://ol3js.org/en/master/build/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://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<!-- App code -->
<script>
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Es. 1: Struttura codice basilare
Ora provate ad aprire basic-map.html da un browser web. Dovreste vedere questo:
Nota:
I layer raster più usati sono i layer di tiles, forniti per esempio da OpenStreetMap, MapQuest, Bing, ecc. Layers di tile sono rappresentati dalla classe ol.layer.Tile e devono usare una sorgente che conosce come caricare tile da un provider, tipo ol.source.OSM o ol.source.MapQuest:
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var mq = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
});
Es. 2: Creare layer raster
I layers possono essere aggiunti alla mappa in due modi:
var map = new ol.Map({
...
layers: [osm, mq]
...
});
Ex. 3: Aggiungere i layer all’inizializzazione della mappa
map.addLayer(osm);
map.addLayer(mq);
Ex. 4: Aggiungere i layer manualmente
I layers vettoriali sono rappresentati da ol.layer.Vector deve usare una sorgente adatta per 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'
})
});
Ex. 5: Leggere un layer vettoriale GeoJSON
Notare che nel precedente codice bisogna cambiare url_to_file in modo che punti ad un valido file GeoJSON situato nel vostro server. È da sapere che la sicurezza di Javascript non permetterà di caricare sorgenti di dataset da un URL esterno in un dominio differente.
Le features possono anche essere create manualmente. In questo caso bisogna creare una geometria che rappresenti la feature:
// 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
});
Ex. 6: Aggiungere features manualmente
Gle elementi con layer vettoriali possono essere vestiti. Lo stile è determinato da una combinazione di riempiemento, tratto, testo e immagine, che sono tutti opzionali. Inoltre, uno stile può essere applicato a un layer, che determina lo stile di tutte le features contenute, o ad un elemento individuale.
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 i limiti amministrativi del Mondo raffigurati utilizzando un verde per il riempiemento e il bordo:
var limitsLayer = new ol.layer.Vector({
source: new ol.source.StaticVector({
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)',
})
})
})
});
Ex. 7: Dare uno stile agli elementi
Nel codice, si carica un file TopoJSON e stilizzato attraverso la proprietà style. Si imposta fill e stroke, richiesto per linee e poligoni, e un image (in questo caso un cerchio) usato per le features puntuali.
La maggior parte dei componenti, tipo mappa, layers o controlli, innescano eventi per notificare cambiamenti. Per esempio si può ricevere notifiche ogni volta che il mouse è stato mosso sulla mappa, quando una feature è aggiunta ad un layer vettoriale, ecc.
Gli eventi possone essre registrati facilmente su un oggetto con il metodo on() e rimossi con un().
Il codice che segue registra un evento sulla mappa, ed è notificato ogni volta che il puntatore è mosso. Con la funzione callback si ottengono le coordinate del puntatore e stampate nella console del browser con due sistemi di proiezioni diversi.
map.on('pointermove', function(event) {
var coord3857 = event.coordinate;
var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
console.log(coord3857, coord4326);
});
Ex. 8: Stampare la posizione del puntatore.
Alcune volte la via più semplice per imparare come funziona OpenLayers è vedere gli esempi e il loro codice sorgente. È possibile trovare esempi su OpenLayers3 installati su: http://localhost/openlayers/examples.