Introduzione ad OpenLayer, la libreria JavaScript per la creazione di mappe all’interno di una pagina web

Verranno presi in considerazione concetti come: file geospaziali, map server, servizi wms, servizi wfs, projection, dati raster, dati vettoriali, layer, feature, style, cluster, etc…

Introduzione

Il presente articolo è un riassunto di 3 articoli pubblicati su LinkedIn e trattano OpenLayer e tutto ciò che gli ruota attorno (sotto potete vedere i links).

Introduzione ad OpenLayer (file geospaziali, map server, servizi wms, servizi wfs) — Parte 1

Introduzione ad OpenLayer (projection, layer, dati raster, dati vettoriali, feature, styles) — Parte 2

OpenLayer come creare un cluster di punti o icone, utilizzando l’oggetto “ol.source.Cluster”

OpenLayer è una libreria JavaScript che permette la creazione di mappe all’interno di una pagina web, è possibile utilizzare sia JavaScript che TypeScript. Per esempio potete inserire una mappa all’interno di una SPA sviluppata con Angular, React, Vue o al’interno di un WebComponent.

E’ conforme agli standard OGC (OGC è un’organizzazione internazionale noprofit, e si occupa di definire specifiche tecniche per servizi geospaziali -come il W3C).

OpenLayer è in grado di interfacciarsi con diversi “provider” per leggere i dati da visualizzare sulla mappa.

1. Leggere i dati in un nostro formato (con api classiche)

2. Tramite file geospaziali: GPX, KML, GML, WKT, GeoJson, ShapeFile, etc …

3. Tramite Servizi (erogati da server di mappe) che restituiscono immagini/tile. In questo caso parliamo di servizi WMS (in un contesto OCG)

4) Tramite Servizi (erogati da server di mappe) che restituiscono dati grezzi/json In questo caso parliamo di servizi WFS (in un contesto OCG)

Le sigle WMS e WFS appena menzionate, sono alcuni dei servizi erogati da un map server (geoserver, mapserver, etc…). Un server di mappe memorizzerà poi i dati all’interno di file piuttosto che in un database che supporta i dati di tipo geospaziale (PostgreSQL, SqlServer, MySql, etc). Per esempio, SqlServer supporta i dati di tipo geometry e geography (internamente usa WKT).

Quella mostrata nell’immagine sovrastante è la classica pila dei layer, dove al livello più basso troviamo una “mappa base (google,bing, etc…)”, man mano che saliamo troviamo i vari layer che mostrano ulteriori dettagli del territorio. Questi dettagli sono presi da molteplici fonti (dai servizi che abbiamo menzionato sopra, da file geospaziali, ritornati delle nostre api).

L’imagine sovrastante ricapitola alcuni dei concetti espressi. Abbiamo 3 layer: una mappa base, il layer degli ospedali WMS/tile, il layer delle farmacie WFS/json. Il layer degli ospedali essendo erogato da un servizio WMS ritorna una tile, il layer delle farmacie essendo erogato da un servizio WFS ritorna un json. Pertanto nel primo caso OpenLayer si limiterà a visualizzare l’immagine, nel secondo caso OpenLayer userà il json ritornato per creare un icona. Per questo motivo nel secondo caso è anche possibile avere un popup associato all’icona. Nel momento in cui clicco sull’icona il popup si aprirà, nel momento in cui clicco sulla mappa il popup si chiuderà.

Proiezioni, Geoidi, Ellissoidi e codici EPSG

Abbiamo 2 tipi di coordinate: le «coordinate geografiche» e le «coordinate di proiezione». Le prime sono espresse come latitudine e longitudine (e sono riferite alla terra), le seconde sono espresse come coordinate cartesiane in metri (e sono riferite alla superficie piana di proiezione). Latitudine e Longitudine sono coordinate angolari rispetto al centro della terra.

Il discorso è lungo e complicato, pertanto accenneremo solo le cose più importanti.

Una proiezione cartografica è il risultato di trasformazioni (geometriche, matematiche o empiriche) di punti espressi in coordinate geografiche in punti espressi in coordinate di proiezione.

Le proiezioni vengono usate in cartografia per rappresentare su un piano (carte geografiche) un fenomeno che nella realtà esiste sulla superficie della sfera (o ellissoide di riferimento).

Esistono diversi tipi di proiezione: cilindrica, conica, piana, webmercator*, mercator, etc…

Purtroppo la superficie della terra non è una sfera perfetta ma qualche cosa di deforme ed irregolare. Per questo motivo la superficie della Terra è approssimata da una figura geometrica matematicamente molto complessa chiamata «geoide» che a sua volta è approssimata da una figura più semplice chiamata «ellissoide di rotazione».

I moderni GPS usano l’ellissoide di rotazione WGS84 (1984) e la proiezione di webmercator (per creare le mappe di Google, Bing, OSM, etc).

OL di default utilizza metri come coordinate (EPSG:3857) ma è comunque possibile cambiare questo default.

Maggiori informazioni al riguardo e sui codici EPSG.

Dati raster e dati vettoriali (tile / Json)

Iniziamo ora ad esplorare OpenLayer, la libreria permette di gestire principalmente 2 tipi di dati: i “dati raster” e i “dati vettoriali”.

L’immagine sovrastante è stata suddivisa tramite una griglia un diversi quadranti (o celle). Ogni cella conterrà una tile in base alla risoluzione corrente, nel momento in cui aumentiamo o diminuiamo il livello di zoom le tile verranno aggiornate in base alla nuova risoluzione.

Il dato di tipo “raster” lo troviamo nelle mappe base (GoogleMap, BingMap. OSM, etc…) oppure nei servizi WMS (visto che ritornano delle immagini). in questo caso OpenLayer si limiterà a renderizzare l’immagine ritornata sulla mappa.

Il dato di tipo “vettoriale” è invece usato per rappresentare elementi del mondo reale sulla mappa. Le 3 componenti di un dato vettoriale sono: una «geometria» di tipo punto, linea, poligono, cerchio, etc — le relative coordinate — eventuali attributi. Mediante l’uso di attributi è possibile definire dati aggiuntivi quali: cognome. nome indirizzo, città, etc. Ogni geometria è definita poi in termini di vertici.

Vediamo ora quali sono le classi principali che permettono di creare una mappa

OpenLayer è una libreria all’interno della quale ci sono molte classi (un po’ come Angular), maggiori informazioni qui.

Alcune delle classi che trarreremo in seguito sono: olMap, ol.control.Control, ol.iteration.Iteration, , ol.layer.Base, ol.Overlay, ol.View

La classe principale per creare una mappa è la classe “Map”, mediante questa classe è possibile creare un istanza di un oggetto mappa. La classe Map ha diverse proprietà e metodi, tra queste troviamo 5 proprietà principali che servono per configurare la mappa: “controls”, “iterations”, “layers”, “overlays”, “view”. Le prime 4 sono collezioni, la quinta è una proprietà semplice.

In OpenLayer troviamo poi alcune macro famiglie di layer (tra queste): “ol.layer.Tile” / “ol.layer.Vector”. La prima gestisce i dati «raster», la seconda gestisce i dati «vettoriali». Mediante la prima è possibile creare le mappe base piuttosto che creare servizi di tipo WMS. Mediante la seconda à possibile creare layer vettoriali ovvero layer definiti tramite geometrie.

Come si può vedere derivano tutte da “ol.layer.Layer” che a sua volta deriva da “ol.layer.Base” (maggiori dettagli su controls, iterations, layers, overlays, view nell articolo originale).

Creiamo la nostra prima mappa

Come si può vedere è stata creata un istanza di un oggetto “Map”. Alla proprietà “target” si assegna l’id del tag div che conterrà la nostra mappa. Poi impostiamo le proprietà menzionate poco sopra (non è necessario impostarle tutte). Nel nostro caso abbiamo un unico layer che contiene una mappa base e come provider si è scelto OpenStreetMap. Questo viene fatto creando un’istanza di “ol.layer.Tile” ed impostando come source “ol.source.OSM”, è comunque possibile usare altri provider di mappe. Tenere presente che, la mappa base deve sempre essere il primo layer della pila.

OL di default utilizza metri come coordinate (EPSG:3857) ma è comunque possibile cambiare questo default.

In questo caso manteniamo il default, pertanto è necessario convertire le coordinate per centrare la mappa attraverso la funzione “ol.proj.fromLonLat([7.66, 45.05])”

L’esempio di codice sovrastante è simile al precedente, in questo caso però non è stato necessario convertire le coodinate per centrare la mappa attraverso la funazione “ol.proj.fromLonLat([7.66, 45.05])”. Questo perché abbiamo cambiato il default utilizzato da OL attraverso la proprietà “projection: ‘EPSG:4326’”.

Come è strutturato un oggetto «ol.layer.Vector» e cosa contiene?

Alcune delle classi che trarreremo in seguito sono: ol.source.Vector, ol.Feature, ol.geom.Point, ol.geom.LineString, ol.geom.Polygon. etc…

In OpenLayer molte volte vengono creati degli oggetti composti, e la struttura delle classi e simile anche in frangenti diversi.

Ogni oggetto «ol.layer.Vector» deve sempre specificare una sorgente «ol.source.Vector», e per creare le feature abbiamo a disposizione 2 strade: inserendo direttamente le feature o referenziando un file (GPX, KML, etc…).

Nel primo caso siamo noi a creare le feature, nel secondo caso è OpenLayer che le crea per noi usando i dati contenuti in un file geospaziale (per esempio).

Una «feature» oltre a contenere un oggetto geometry con cui si specifica il tipo di geometria (punto, linea, poligono) e le coordinate, può anche contenere degli attributi/proprietà (cognome, nome, indirizzo, etc…).

Una feature è creata attraverso la classe “ol.Feature” e nel costruttore viene di norma istanziato/passatto un oggetto mediante il quale si specifica la geometria: “ol.geom.Point”, “ol.geom.LineString”, “ol.geom.Polygon”, “ol.geom.Circle”, etc (maggiori dettagli su Feature, Point, LineString, Polygon, Circle originale).

Attribuiamo uno Style ad una mappa

Per poter attribuire uno stile agli oggetti presenti sulla mappa abbiamo a disposizione 2 strade principali (ne esistono anche altre).

L’oggetto “feature” possiede una proprietà “style” con cui è possibile definire uno stile, alternativamente lo stile può essere anche definito a livello di layer. Nel caso lo definiamo a livello di layer lo stile è applicato a tutte le feature presenti nel layer (maggiori dettagli sull’oggetto ol.style.Style).

Cluster di punti o icone

Quando sulla mappa sono presenti molti punti, la mappa diventa “affollata”, in particolar modo a livelli di zoom non elevati, influenzando anche negativamente le prestazioni. Per risolvere questo problema OpenLayers offre la possibilità di raggruppare i punti, invece di mostrare sempre i singoli punti, mostrerà un cerchio (o cluster) con un numero che indica quanti punti ci sono nelle vicinanze di quella posizione. Nel momento in cui si effettua lo zoom, il cerchio viene man mano espanso mostrando i punti reali. Per far ciò utilizziamo la classe “ol.sourceCluster”. (maggiori dettagli su cluster di punti o icone).

Conclusioni

Come detto all’inizio, il presente articolo è un riassunto di 3 articoli che ho pubblicato su LinkedIn e trattano OpenLayer e tutto ciò che gli ruota attorno.

Introduzione ad OpenLayer (file geospaziali, map server, servizi wms, servizi wfs) — Parte 1

Introduzione ad OpenLayer (projection, layer, dati raster, dati vettoriali, feature, styles) — Parte 2

OpenLayer come creare un cluster di punti o icone, utilizzando l’oggetto “ol.source.Cluster”

Se volete contattarmi il mio profilo Linkedin è il seguente: Stefano Marchisio: Consulente freelance Angular ASP.NET MVC C#