Come caricare un file geoJSON

Per leggere e scrivere oggetti geoJSON con OL3, abbiamo la classe ol.format.GeoJSON. Ma se abbiamo un layer vettoriale definito su un file esterno .geoJSON, in questa classe non abbiamo metodi per richiamarlo (o riferirlo) dentro la pagina web della nostra mappa.

Lo possiamo fare invece usando la proprietà url dell’oggetto ol.source.Vector; essa infatti oltre che per specificare un tipico URL remoto (indirizzo web), può anche indicare il path locale del nostro file .geoJSON rispetto alla posizione del file in cui c’è il codice javascript che lo richiama: in genere la pagina HTML che realizza la mappa.

E’ quindi molto semplice, basta indicare il percorso (relativo) del file .geoJSON e poi come formato l’oggetto geoJSON; ecco qui un esempio in cui abbiamo un file  gruppo_pomigliano.geojson dentro una cartella “data”da richiamare dentro il file OL3_test1_geojson.html :

Naturalmente, una volta caricato, il layer geoJSON può essere “vestito” definendone lo stile come un normale layer vettoriale. Qui vediamo come, applicandolo al nostro esempio e tenendo conto che gli elementi sono dei poligoni:

e da qui potete vedere l’esempio completo (cliccate sul bottone):
webmap esempioOL3 geoJSON

Ricordate che un vettore geoJSON può contenere anche elementi di tipo diverso (point, multiPoint, lineString, multiLineString, polygon, multiPolygon); quindi quando andrete a definirne lo stile bisogna prevedere i diversi casi in base al type delle sue features. Qui vediamo un esempio di come si può realizzare questa cosa:

Vediamo che abbiamo definito una variabile styles che definisce lo stile del vettore in base al tipo delle sue features (LineString, Polygon, Point) e poi c’è una funzione styleFunction(…) che ritorna lo stile in base alla data feature. Ecco qui un’ altro esempio (cliccate sul bottone) che mostra l’uso degli stili, con un file geoJSON contenente degli edifici, alcune strade e dei POI (Point of Interest) in una zona del centro di Modena (dati estratti da OSM).

webmap esempio

Un’altra maniera per leggere un file geoJSON, consiste nel trasformarlo in una variabile e cambiare il tipo di file da .geojson a .js. Mi spiego meglio.
Supponiamo di avere il seguente file sorgenti.geojson; questo è un vettore di punti, ma la tecnica vale qualunque sia il tipo di elementi rappresentati:

lo apriamo con un normale text-editor e prima della “{” iniziale inseriamo la definizione una variabile javascript con nome a piacere, così:

Solo per non confondersi, vi consiglio comunque di chiamare la variabile con un nome diverso da quello del file.

Fatto questo, salviamo i cambiamenti e cambiamo il tipo file, cioè la sua estensione, da  sorgenti.geojson a sorgenti.js. In questo modo abbiamo una variabile javascript di nome punti_sorgente definita su un file esterno .js; allora nel nostro file della mappa possiamo richiamarla, includendo il suo file come <script src=…..></script>. Ecco il codice:

Da notare che, mentre il primo metodo (quello in cui il file .geojson si riferisce con url) funziona solo se eseguito su web server, questo invece funziona anche aperto dal browser in locale .
Qui ecco l’esempio completo e funzionante:

webmap esempio

 

condividi: