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.

2. La Classe nativa Leaflet L.TileLayer.WMS

L'istanza L.TileLayer.WMS richiede semplicemente la specificazione della URL GetCapabilities del WMS e almeno l'opzione "layers" con uno o più nomi dei layer forniti dal servizio WMS. Nel codice di esempio che segue ho definito l'oggetto "wmsLayers" che contiene due dei layer forniti dal WMS: "grafo_autostrade_v" e "anagrafica_autostrade". L'oggetto sarà utilizzato, insieme alla mappa base (OSM), nell'oggetto L.control.layers per selezionare la visualizzazione di ogni singolo layer.

var map = L.map('map').setView([37.571, 14.021], 9);
var OSM_basemap =L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
 {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
 });
var wmsLayers = {
   'Grafo Autostrade ANAS': L.tileLayer.wms("http://geodata.mit.gov.it/geoserver/nuovastm/wms?",{
     layers: "grafo_autostrade_v",
     format: 'image/png',
     transparent: true,
     version: '1.3.0',
     attribution: '<a href="http://dati.mit.gov.it/catalog/dataset/grafo-stradale-anas">MIT</a>'
   }).addTo(map),
   'Anagrafica Autostrade': L.tileLayer.wms("http://geodata.mit.gov.it/geoserver/nuovastm/wms?",{
     layers: "anagrafica_autostrade",
     format: 'image/png',
     transparent: true,
     version: '1.3.0',
     attribution: '<a href="http://dati.mit.gov.it/catalog/dataset/grafo-stradale-anas">MIT</a>'
   }).addTo(map)
};
L.control.layers({OSM_basemap},wmsLayers).addTo(map);

Diversamente, i layer da visualizzare possono essere elencati nella proprietà "layers" separati da virgola. In questo caso, sarà il server del WMS a combinare i layer fornendo una unica immagine composta.

Le ulteriori opzioni specificano il formato delle immagini ed il flag per abilitare la trasparenza del layer (entrambe le opzioni sono necessarie per gestire la trasparenza), la versione del documento XML GetCapabilities e l'attribuzione della fonte del servizio WMS.

Il risultato del codice di esempio, con l'utilizzo della classe nativa L.TileLAyers.WMS, è mostrato nella mappa qui sotto:

Purtroppo, come già detto, la classe nativa L.TileLayerWMS non consente di interrogare interattivamente la mappa e ottenere le informazioni contenute dalle feature di ogni livello visualizzato. A superare questo inconviente, oltre ad una gestione ottimizzata dei layer, ci pensa il plugin leaflet.wms che vedremo nella pagine che segue.

Segue: Il Plugin leaflet.wms