Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Visualizzare e interrogare le mappe WMS con Leaflet

Indice degli argomenti

Gestire i servizi di mappa web - WMS - in Leaflet. L'utilizzo della classe nativa e del plugin lealfet.wms per l'interrogazione della mappa e la visualizzazione degli attributi delle feature.

 

3. Plugin leaflet.wms

Nel paragrafo precedente abbiamo visto quanto sia semplice in Leaflet utilizzare la classe 'L.TileLayer.WMS' per creare una mappa web che visualizzi le immagini fornite da un servizio WMS. Purtroppo, la classe nativa non supporta la chiamata standard WMS 'GetFeatureInfo' che consente di ottenere informazioni sulle feature cliccando sulla mappa. Questa limitazione della classe nativa è superata dal plugin 'leaflet.wms'. Il plugin è disponibile nella pagina "GitHub - heigeo/leaflet.wms". Dall'archivio estraiamo lo script "leaflet.wms.js" contenuto nella directory "src" o la sua versione minimizzata (soli 8 KB) dalla directory "dst". Nel codice Leaflet della mappa aggiungiamo l'istruzione per richiamare il file JavaScript esterno, cioè il plugin:

<script src="/js/leaflet.wms.js"></script>

In questo esempio, ho salvato il plugin leaflet.wms.js nella directory locale "js" che contiene anche la libreria Leaflet ed ulteriori plugin.

L'accesso al servizio WMS è effettuato tramite la classe L.WMS.Source che definisce un layer Leaflet "virtuale" per gestire più layer forniti da una medesima sorgente WMS. L'impiego di un'unica sorgente WMS per richiamare più layer permette di sfruttare la composizione della mappa in una sola immagine da parte del servizio WMS e quindi alleggerire il client dal caricamento di più immagini. L.WMS.Source è un layer virtuale nel senso che non carica direttamente le immagini WMS ma crea una classe L.WMS.Overlay o L.WMS.TileLayer (identica alla classe nativa L.TileLayer.WMS) per gestire l'effettivo caricamento.

Per prima cosa creiamo l'oggetto "options" le cui proprietà sono le opzioni che saranno utilizzate, insieme all'URL del servizio WMS, come parametri di inizializzazione della classe L.WMS.Source.

// Definisce le opzioni per l'oggetto L.WMS.source
var options = {
  "format": "image/png", "transparent": "true",
  "version": "1.3.0",
  "info_format": "text/html",
  "tiled": "tiled",
  "attribution": "<a href='http://dati.mit.gov.it/catalog/dataset/grafo-stradale-anas'>MIT</a>"
};

Quindi, creiamo l'istanza L.WMS.source con l'URL del servizio e le opzioni che saranno passate alla classe TileLayer. Infine, utilizziamo la funzione getLayer() per caricare i singoli layer ed aggiungerli alla mappa.

// Definisce la sorgente WMS ed aggiunge i layer alla mappa
var source = L.WMS.source("http://geodata.mit.gov.it/geoserver/nuovastm/wms?", options);
var wmsLayers = {
  'Grafo Autostrade': source.getLayer('grafo_autostrade_v').addTo(map),
  'Anagrafica Autostrade': source.getLayer('anagrafica_autostrade').addTo(map),
  'TGM Nov. 2015': source.getLayer('tgm_2015_11').addTo(map)
}

L'interrogazione della mappa, per conoscere gli attributi delle feature, è resa possibile grazie alla funzione identify(), inclusa nella classe classe L.WMS.Source, che effettua la richiesta WMS GetFeatureInfo.

Il risultato del codice di esempio Leaflet con l'utilizzo del plugin leaflet.wms è mostrato nella mappa qui sotto. Cliccando con il mouse sulle strade è possibile visualizzare le informazioni contenute nei due layer visualizzati.

leaflet wms
 
Vedi anche l'articolo su GISeTrasporti: Gestire e interrogare le mappe WMS con Leaflet.
Se questo articolo ti è piaciuto o ti è stato utile condividilo con i tuoi amici!
Rimani in contatto con noi. Seguici nelle nostre Pagine: