Stampa

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).