Aggiungere un livello riquadro a una mappa

Questo articolo illustra come sovrapporre un livello riquadro sulla mappa. I livelli riquadro consentono di sovrapporre immagini sopra i riquadri mappa di base in Mappe di Azure. Per altre informazioni su Mappe di Azure sistema di affiancamento, vedere Livelli di zoom e griglia dei riquadri.

Un livello riquadro viene caricato nei riquadri da un server. È possibile eseguire il rendering preliminare o dinamico di queste immagini. Le immagini prerisorse vengono archiviate come qualsiasi altra immagine in un server usando una convenzione di denominazione che il livello riquadro riconosce. Il rendering dinamico delle immagini usa un servizio per caricare le immagini quasi in tempo reale. Esistono tre diverse convenzioni di denominazione del servizio riquadri supportate da Mappe di Azure classe TileLayer:

• X, Y, Notazione zoom - X è la colonna, Y è la posizione di riga del riquadro nella griglia del riquadro e la notazione Zoom un valore basato sul livello di zoom.
• Notazione Quadkey: combina le informazioni su x, y e zoom in un singolo valore stringa. Questo valore stringa diventa un identificatore univoco per un singolo riquadro.
• Rettangolo di selezione: specificare un'immagine nel formato coordinate del riquadro delimitatore: {west},{south},{east},{north}. Questo formato viene comunemente usato dai servizi di mapping Web (WMS).This format is comunemente used by web-mapping Services (WMS).

Suggerimento

TileLayer è un ottimo modo per visualizzare grandi set di dati sulla mappa. Non solo un livello riquadro può essere generato da un'immagine, anche i dati vettoriali possono essere visualizzati come livello riquadro. Eseguendo il rendering dei dati vettoriali come livello riquadro, il controllo mappa deve caricare solo i riquadri di dimensioni inferiori al file rispetto ai dati vettoriali rappresentati. Questa tecnica viene comunemente usata per eseguire il rendering di milioni di righe di dati sulla mappa.

L'URL del riquadro passato a un livello riquadro deve essere un URL HTTP o HTTPS per una risorsa TileJSON o un modello di URL riquadro che usa i parametri seguenti:

• {x} - posizione X del riquadro. Necessita inoltre di {y} e {z}.
• {y} - posizione Y del riquadro. Necessita inoltre di {x} e {z}.
• {z} - Livello di zoom del riquadro. Necessita inoltre di {x} e {y}.
• {quadkey} - Identificatore del riquadro quadkey basato sulla convenzione di denominazione del sistema di riquadri di Mappe di Bing.
• {bbox-epsg-3857} - Una stringa del rettangolo delimitatore nel formato {west},{south},{east},{north} nel sistema di riferimento spaziale EPSG 3857.
• {subdomain}- Segnaposto per i valori del sottodominio, se specificato.subdomain
• {azMapsDomain} - Segnaposto per allineare il dominio e l'autenticazione delle richieste di riquadri con gli stessi valori usati dalla mappa.

Aggiungere un livello per i riquadri

Questo esempio illustra come creare un livello riquadro che punta a un set di riquadri. In questo esempio viene usato il sistema di affiancamento x, y e zoom. L'origine di questo livello di riquadro è il progetto OpenSeaMap, che contiene grafici navali con fonte di folla. Idealmente, gli utenti vedranno chiaramente le etichette delle città mentre navigano sulla mappa quando visualizzano i dati radar. Questo comportamento può essere implementato inserendo il livello riquadro sotto il labels livello.

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

Per un esempio completamente funzionale che illustra come creare un livello riquadro che punta a un set di riquadri usando il sistema x, y, zoom, vedere l'esempio Tile Layer using X, Y e Z (Esempio di riquadri con X, Y e Z) negli esempi di Mappe di Azure. L'origine del livello riquadro in questo esempio è un grafico navale del progetto OpenSeaMap, un progetto OpenStreet Mappe concesso in licenza in ODbL. Per il codice sorgente per questo esempio, vedere Tile Layer using X, Y e Z source code (Livello riquadro con codice sorgente X, Y e Z).

Aggiungere un servizio di mapping Web OGC (WMS)

Un servizio di mapping Web (WMTS) è uno standard OGC (Open Geospatial Consortium) per la gestione di immagini di dati mappa. In questo formato sono disponibili molti set di dati aperti che è possibile usare con Mappe di Azure. Questo tipo di servizio può essere usato con un livello riquadro se il servizio supporta il EPSG:3857 sistema di riferimento delle coordinate (CRS). Quando si usa un servizio WMS, impostare i parametri di larghezza e altezza sul valore supportato dal servizio, assicurarsi di impostare questo valore nell'opzione tileSize . Nell'URL formattato impostare il BBOX parametro del servizio con il {bbox-epsg-3857} segnaposto.

Per un esempio completamente funzionale che illustra come creare un livello riquadro che punta a un servizio di mapping Web (WMS), vedere l'esempio livello riquadro WMS negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente del livello riquadro WMS.

Lo screenshot seguente mostra l'esempio di livello riquadro WMS che sovrappone un servizio di mapping Web dei dati geologici dell'USGS (U.S. Geological Survey) sopra la mappa e sotto le etichette.

Aggiungere un servizio riquadro di mapping Web OGC (WMTS)

Un servizio di riquadri di mapping Web (WMTS) è uno standard OGC (Open Geospatial Consortium) per gestire le sovrimpressioni basate su riquadri per le mappe. In questo formato sono disponibili molti set di dati aperti che è possibile usare con Mappe di Azure. Questo tipo di servizio può essere usato con un livello tessera se il servizio supporta il EPSG:3857 sistema di riferimento di coordinate o GoogleMapsCompatible . Quando si usa un servizio WMTS, impostare i parametri di larghezza e altezza sullo stesso valore supportato dal servizio, assicurarsi di impostare anche questo valore nell'opzione tileSize . Nell'URL formattato sostituire di conseguenza i segnaposto seguenti:

• {TileMatrix} =>{z}
• {TileRow} =>{y}
• {TileCol} =>{x}

Per un esempio completamente funzionale che illustra come creare un livello riquadro che punta a un servizio riquadro mapping Web (WMTS), vedere l'esempio wmts tile layer (livello riquadro WMTS) negli esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente del livello riquadro WMTS.

Lo screenshot seguente mostra l'esempio WMTS Tile Layer che sovrappone un servizio di riquadri di mapping Web delle immagini dalla mappa nazionale usgs (USGS) di U.S. Geological Survey (USGS) sopra una mappa, sotto le strade e le etichette.

Personalizzare un livello riquadro

La classe livello riquadro include molte opzioni di stile. L'esempio Opzioni livello riquadro è uno strumento per provarli. Per il codice sorgente per questo esempio, vedere Codice sorgente opzioni livello riquadro.

Passaggi successivi

Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:

TileLayer

TileLayerOptions

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti:

Aggiungere un livello immagine