Openlayers3 è una libreria JavaScript leggera, che permette di integrare mappe dinamiche nelle pagine web e nelle applicazioni mobile, utilizzando avanzate tecnologie di navigazione come HTML5, WebGL and CSS3.
Openlayers3 offre un insieme di funzionalità, sia di base che avanzate, per mappe web e sistemi informativi geografici.
Possiamo, ad esempio, inserire una mappa nel sito per indicare dove si trova un luogo, disegnare un percorso, evidenziare un terreno e le sue caratteristiche. Possiamo collegarci a servizi esterni in cui sono mappate le tematiche che più ci interessano. Qui ho pubblicato, come esempio, una mappa che riprende OpenStreetMap e che visualizza la Spagna con centro Barcellona (coordinate [2.032, 41.759]) e zoom livello 8: basic-map.html
Ecco il codice della pagina basic-map.html
<!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://openlayers.org/en/v3.18.2/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.032, 41.759], 'EPSG:4326', 'EPSG:3857'),
zoom: 8})
});
</script>
</body>
</html>Map
La map è un componente chiave di OpenLayers. Per un map da visualizzare, sono necessari una view, uno o più layers e un contenitore di destinazione.
View
La view determina come la mappa è renderizzata. È usata per impostare la risoluzione, le coordinate del centro, ecc. È come una camera attraverso il quale si accede al contenuto della mappa.
Layers
Layers possono essere alla mappa in ordine impilato, questo fa si che, i layers più in basso sono renderizzati prima dei layers più in alto. Layers possono essere sia layers raster (images), che layers vettoriali(punti/linee/poligoni).
Source
Ogni layer ha una source, che conosce come caricare il contenuto del layer. Nel caso di layers vettoriali, la sorgente è letta da dati vettoriali usando una classe format (per esempio GeoJSON o KML) e riempe il layer con un numero di features.
Features
Features rappresentano cose del mondo reale e possono essere renderizzate con differenti geometries (come punti, linee o poligoni) usando un dato style, che determina il suo aspetto (spessore delle linee, colore di riempiemento, etc).
