Coordinate di un punto sulla mappa

Può essere utile rilevare o semplicemente visualizzare le coordinate di un punto, individuato facendo click (col mouse) sulla mappa. La premessa fondamentale è che le coordinate saranno espresse nel sistema di riferimento usato per la vista-mappa, cioè per l’oggetto ol.View.

Come sappiamo, il sistema di default scelto in OpenLayers è il WGS 84/Pseudo-Mercatore, ovvero l’EPSG 3857,  a meno che esso non venga cambiato tramite la proprietà projection.

Però i codici EPSG già definiti nella libreria di OL3 sono soltanto due: il 3857 e il 4326 (WGS 84); quindi se si vogliono usare altri sistemi di riferimento, prima bisogna definirli usando la classe ol.proj.Projection. Questo è un esempio:

Comunque questo è un’altro argomento che qui non ci interessa, anche perchè, tranne motivi particolari, si usa quasi sempre il sistema EPSG 3857 (sist. coordinate proiettate o piane) e a volte il sistema EPSG 4326 (sist. coordinate geografiche).

Tornando a noi, visto che vogliamo individuare le coordinate del punto su cui facciamo “click” sulla mappa, dobbiamo intercettare questo evento; per farlo usiamo il metodo on dell’oggetto ol.Map. Questo metodo prevede l’indicazione del tipo di evento da intercettare e della funzione (listener) da eseguire quando l’evento si verifica.

metodo on

Il tipo di evento in questo caso, è una delle possibili azioni che l’utente può fare col mouse, che sono quelli rappresentati dall’oggetto ol.MapBrowserEvent e precisamente: click, dblclick, pointerdrag, pointermove e singleclick; noi scegliamo il tipo “click”.

Sempre per l’oggetto ol.MapBrowserEvent, tra i suoi membri troviamo “coordinate” che per l’appunto restituisce le coordinate collegate all’evento nel sistema di proiezione della vista-mappa, cioè proprio quello che ci serve!
Ecco quindi come può essere scritto un codice molto semplice che rileva le coordinate del punto cliccato e le mostra nella pagina web, usando la funzione .html di jQuery:

qui potete vedere l’esempio completo.

Naturalmente la visualizzazione delle coordinate può essere migliorata e si può anche segnare graficamente il punto che è stato cliccato. Si possono trovare tanti modi, uno consiste nell’aprire un popup proprio nel punto cliccato e scriverci dentro le sua coordinate.
In OL3 non è presente (ad oggi) un oggetto popup, ma per realizzarlo possiamo utilizzare il noto plugin: walkermatt/ol3-popup; per utilizzarlo basterà linkare le sue librerie. Tra gli esempi di questo progetto, ce n’è proprio uno che mostra nel popup, le coordinate del punto della mappa su cui si clicca. La parte di codice che lo realizza è il seguente:

abbiamo anche migliorato la presentazione delle coordinate rilevate, sia separando le due componenti X(Est) e Y(Nord) sia esprimendole con una precisione di sole 3 cifre decimali. Questo è l’esempio completo.

popup coordinate punto

Volendo esprimere le coordinate rilevate con il sistema WGS 84 (EPSG 4326), basta usare il metodo ol.proj.transform; ecco come:

Le coordinate WGS 84 sono di tipo geografico quindi espresse in “gradi” e le variabili lon e lat lo sono in formato decimale (qui abbiamo scelto una precisione di 8 cifre decimali). Se invece le volessimo  nel formato sessagesimale (es. 43°28’12”), basta convertirle usando il metodo ol.coordinate.toStringHDMS(..), nel seguente modo:

 

condividi: