Creare un'origine dati

Articolo
10/18/2023

L'SDK Web di Mappe di Azure archivia i dati nelle origini dati. L'uso delle origini dati ottimizza le operazioni sui dati per l'esecuzione di query e il rendering. Attualmente esistono due tipi di origini dati:

Origine GeoJSON: gestisce i dati di posizione non elaborati in formato GeoJSON in locale. Buona per set di dati di piccole e medie dimensioni (verso l'alto di centinaia di migliaia di forme).
Origine riquadro vettoriale: carica i dati formattati come riquadri vettoriali per la visualizzazione mappa corrente, in base al sistema di affiancamento delle mappe. Ideale per set di dati di grandi dimensioni (milioni o miliardi di forme).

Origine dati GeoJSON

Un'origine dati basata su GeoJSON carica e archivia i dati in locale usando la DataSource classe . I dati GeoJSON possono essere creati manualmente o creati usando le classi helper nello spazio dei nomi atlas.data . La DataSource classe fornisce funzioni per importare file GeoJSON locali o remoti. I file GeoJSON remoti devono essere ospitati in un endpoint abilitato per le richieste di archiviazione con ridondanza locale. La DataSource classe fornisce funzionalità per i dati dei punti di clustering. Inoltre, i dati possono essere facilmente aggiunti, rimossi e aggiornati con la DataSource classe . Nel codice seguente viene illustrato come creare dati GeoJSON in Mappe di Azure.

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

Dopo la creazione, le origini dati possono essere aggiunte alla mappa tramite la map.sources proprietà , ovvero SourceManager. Il codice seguente illustra come creare un DataSource oggetto e aggiungerlo alla mappa.

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

Il codice seguente illustra i diversi modi in cui è possibile aggiungere i dati GeoJSON a un oggetto DataSource.

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature colleciton, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

Suggerimento

Si supponga di voler sovrascrivere tutti i dati in un oggetto DataSource. Se si effettuano chiamate alle clear funzioni then add , il rendering della mappa potrebbe essere eseguito due volte, causando un po' di ritardo. Usare invece la setShapes funzione , che rimuoverà e sostituirà tutti i dati nell'origine dati e attiverà solo un singolo rendering della mappa.

Origine riquadro vettoriale

Un'origine di riquadri vettoriali descrive come accedere a un livello di riquadro vettoriale. Usare la classe VectorTileSource per creare un'istanza di un'origine riquadro vettoriale. I livelli dei riquadri vettoriali sono simili ai livelli affiancati, ma non sono uguali. Un livello riquadro è un'immagine raster. I livelli dei riquadri vettoriali sono un file compresso, in formato PBF . Questo file compresso contiene i dati della mappa vettoriale e uno o più livelli. È possibile eseguire il rendering e lo stile del file nel client, in base allo stile di ogni livello. I dati in un riquadro vettoriale contengono caratteristiche geografiche sotto forma di punti, linee e poligoni. L'uso dei livelli dei riquadri vettoriali offre diversi vantaggi invece dei livelli di riquadri raster:

Le dimensioni di un file di un riquadro vettoriale sono in genere molto più piccole rispetto a un riquadro raster equivalente. Di conseguenza, viene usata una minore larghezza di banda. Significa una latenza inferiore, una mappa più veloce e un'esperienza utente migliore.
Poiché il rendering dei riquadri vettoriali viene eseguito sul client, si adattano alla risoluzione del dispositivo in cui vengono visualizzati. Di conseguenza, le mappe sottoposte a rendering appaiono più definite, con etichette cristalline.
La modifica dello stile dei dati nelle mappe vettoriali non richiede di nuovo il download dei dati, perché il nuovo stile può essere applicato al client. Al contrario, la modifica dello stile di un livello riquadro raster richiede in genere il caricamento di riquadri dal server e quindi l'applicazione del nuovo stile.
Poiché i dati vengono recapitati in formato vettoriale, per preparare i dati è necessaria meno elaborazione lato server. Di conseguenza, i dati più recenti possono essere resi disponibili più velocemente.

Mappe di Azure è conforme al Mapbox Vector Tile Specification, uno standard aperto. Mappe di Azure fornisce i seguenti servizi di riquadri vettoriali come parte della piattaforma:

Tessere stradali
Eventi imprevisti del traffico
Flusso del traffico
Mappe di Azure Creator consente anche la creazione e l'accesso ai riquadri vettoriali personalizzati tramite Rendering - OTTENERE l'API riquadro mappa

Suggerimento

Quando si usano riquadri di immagini vettoriali o raster dal servizio di rendering Mappe di Azure con l'SDK Web, è possibile sostituire atlas.microsoft.com con il segnaposto {azMapsDomain}. Questo segnaposto verrà sostituito con lo stesso dominio usato dalla mappa e aggiungerà automaticamente gli stessi dettagli di autenticazione. Ciò semplifica notevolmente l'autenticazione con il servizio di rendering quando si usa l'autenticazione Di Microsoft Entra.

Per visualizzare i dati da un'origine riquadro vettoriale sulla mappa, connettere l'origine a uno dei livelli di rendering dei dati. Tutti i livelli che usano un'origine vettoriale devono specificare un sourceLayer valore nelle opzioni. Il codice seguente carica il servizio riquadro vettoriale del flusso di traffico Mappe di Azure come origine di riquadri vettoriali, quindi lo visualizza su una mappa usando un livello linea. Questa origine di riquadri vettoriali ha un singolo set di dati nel livello di origine denominato "Flusso di traffico". I dati di riga in questo set di dati hanno una proprietà denominata utilizzata traffic_level in questo codice per selezionare il colore e ridimensionare le dimensioni delle righe.

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

Per un esempio funzionante completo di come visualizzare i dati da un'origine di riquadri vettoriali sulla mappa, vedere Livello linea riquadro vettoriale nell'Mappe di Azure Esempi. Per il codice sorgente per questo esempio, vedere Codice di esempio di livello riga riquadro vettoriale.

Screenshot showing a map displaying data from a vector tile source.

Connessione un'origine dati a un livello

Il rendering dei dati viene eseguito sulla mappa usando i livelli di rendering. Uno o più livelli di rendering possono fare riferimento a una singola origine dati. I livelli di rendering seguenti richiedono un'origine dati:

Livello bolla: esegue il rendering dei dati dei punti come cerchi ridimensionati sulla mappa.
Livello simbolo: esegue il rendering dei dati dei punti come icone o testo.
Livello mappa termica: esegue il rendering dei dati dei punti come mappa termica della densità.
Livello linea: eseguire il rendering di una linea ed eseguire il rendering del contorno dei poligoni.
Livello poligono: riempie l'area di un poligono con un colore a tinta unita o un motivo di immagine.

Il codice seguente illustra come creare un'origine dati, aggiungerla alla mappa e connetterla a un livello a bolle. Importare quindi i dati del punto GeoJSON da una posizione remota nell'origine dati.

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

Esistono altri livelli di rendering che non si connettono a queste origini dati, ma caricano direttamente i dati per il rendering.

Livello immagine: sovrappone una singola immagine sopra la mappa e associa gli angoli a un set di coordinate specificate.
Livello riquadro: sovrappone un livello di riquadro raster sopra la mappa.

Un'origine dati con più livelli

È possibile connettere più livelli a una singola origine dati. Esistono molti scenari diversi in cui questa opzione è utile. Si consideri, ad esempio, lo scenario in cui un utente disegna un poligono. È necessario eseguire il rendering e riempire l'area poligono man mano che l'utente aggiunge punti alla mappa. L'aggiunta di una linea in stile per delineare il poligono rende più semplice visualizzare i bordi del poligono, man mano che l'utente disegna. Per modificare facilmente una singola posizione nel poligono, è possibile aggiungere un punto di manipolazione, ad esempio un segnaposto o un marcatore, sopra ogni posizione.

Map showing multiple layers rendering data from a single data source

Nella maggior parte delle piattaforme di mapping è necessario un oggetto poligono, un oggetto linea e un segnaposto per ogni posizione nel poligono. Quando il poligono viene modificato, è necessario aggiornare manualmente la riga e i pin, che possono diventare rapidamente complessi.

Con Mappe di Azure, è sufficiente un singolo poligono in un'origine dati, come illustrato nel codice seguente.

//Create a data source and add it to the map.
var source = new atlas.source.DataSource();
map.sources.add(source);

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

Suggerimento

Quando si aggiungono livelli alla mappa usando la map.layers.add funzione , l'ID o l'istanza di un livello esistente può essere passato come secondo parametro. In questo modo si indica che mappa per inserire il nuovo livello aggiunto sotto il livello esistente. Oltre a passare un ID livello, questo metodo supporta anche i valori seguenti.

"labels" - Inserisce il nuovo livello sotto i livelli dell'etichetta della mappa.
"transit" - Inserisce il nuovo livello sotto i livelli di percorso e transito della mappa.