Aggiungere un livello simbolo a una mappa

Articolo
12/04/2024

Connettere un simbolo a un'origine dati e usarlo per eseguire il rendering di un'icona o di un testo in un determinato punto.

Il rendering dei livelli simbolo viene eseguito tramite WebGL. Usare un livello simbolo per eseguire il rendering di grandi raccolte di punti sulla mappa. Rispetto al marcatore HTML, il livello simbolo esegue il rendering di un numero elevato di dati punto sulla mappa, con prestazioni migliori. Tuttavia, il livello simbolo non supporta gli elementi CSS e HTML tradizionali per lo stile.

Suggerimento

Per impostazione predefinita, i livelli simbolo eseguiranno il rendering delle coordinate di tutte le geometrie in un'origine dati. Per limitare il livello in modo che esegua il rendering solo delle caratteristiche geometriche dei punti, impostare la filter proprietà del livello su ['==', ['geometry-type'], 'Point'] o ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] , se lo si desidera, è anche possibile includere le funzionalità multiPoint.

Il gestore sprite delle immagini di mappe carica immagini personalizzate usate dal livello simbolo. Supporta i formati di immagine seguenti:

JPEG
PNG
SVG
BMP
GIF (nessuna animazione)

Aggiungere un livello per i simboli

Prima di aggiungere un livello simbolo alla mappa, è necessario eseguire un paio di passaggi. Creare prima di tutto un'origine dati e aggiungerla alla mappa. Creare un livello simbolo. Passare quindi l'origine dati al livello simbolo per recuperare i dati dall'origine dati. Aggiungere infine i dati all'origine dati, in modo che sia disponibile un elemento su cui eseguire il rendering.

Il codice seguente mostra cosa aggiungere alla mappa dopo il caricamento. Questo esempio esegue il rendering di un singolo punto sulla mappa usando un livello simbolo.

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

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

Alla mappa possono essere aggiunti quattro tipi diversi di dati punto:

Geometria Point GeoJSON: questo oggetto contiene solo una coordinata di un punto e nient'altro. La atlas.data.Point classe helper può essere usata per creare facilmente questi oggetti.
Geometria MultiPoint GeoJSON: questo oggetto contiene le coordinate di più punti e nient'altro. La atlas.data.MultiPoint classe helper può essere usata per creare facilmente questi oggetti.
Funzionalità GeoJSON: questo oggetto è costituito da qualsiasi geometria GeoJSON e da un set di proprietà che contengono metadati associati alla geometria. La atlas.data.Feature classe helper può essere usata per creare facilmente questi oggetti.
atlas.Shape la classe è simile alla funzionalità GeoJSON. Entrambi sono costituiti da una geometria GeoJSON e da un set di proprietà che contengono metadati associati alla geometria. Se un oggetto GeoJSON viene aggiunto a un'origine dati, è possibile eseguire facilmente il rendering in un livello. Tuttavia, se la proprietà coordinate dell'oggetto GeoJSON viene aggiornata, l'origine dati e la mappa non cambiano. Questo perché non esiste alcun meccanismo nell'oggetto JSON per attivare un aggiornamento. La classe shape fornisce funzioni per aggiornare i dati contenuti. Quando viene apportata una modifica, l'origine dati e la mappa vengono notificate e aggiornate automaticamente.

L'esempio di codice seguente crea una geometria del punto GeoJSON e la passa alla atlas.Shape classe per semplificare l'aggiornamento. Il centro della mappa viene inizialmente usato per eseguire il rendering di un simbolo. Un evento Click viene aggiunto alla mappa in modo che, quando viene attivato, le coordinate del mouse vengono utilizzate con la funzione forme setCoordinates . Le coordinate del mouse vengono registrate al momento dell'evento click. Aggiorna quindi setCoordinates la posizione del simbolo sulla mappa.

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-122.33, 47.64],
        zoom: 13,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    //Wait until the map resources are ready.
    map.events.add('ready', function () {

      /*Create a data source and add it to the map*/
      var dataSource = new atlas.source.DataSource();
      map.sources.add(dataSource);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

Screenshot della mappa con un segnaposto aggiunto usando il livello simbolo.

Suggerimento

Per impostazione predefinita, i livelli simbolo ottimizzano il rendering dei simboli nascondendo i simboli che si sovrappongono. Durante l’ingrandimento i simboli nascosti diventano visibili. Per disabilitare questa funzionalità ed eseguire sempre il rendering di tutti i simboli, impostare la allowOverlap proprietà delle iconOptions opzioni su true.

Aggiungere un'icona personalizzata a un livello simbolo

Il rendering dei livelli simbolo viene eseguito tramite WebGL. Di conseguenza tutte le risorse, ad esempio le immagini icona, devono essere caricate nel contesto di WebGL. Questo esempio mostra come aggiungere un'icona personalizzata alle risorse della mappa. Questa icona viene quindi usata per eseguire il rendering dei dati dei punti con un simbolo personalizzato sulla mappa. La proprietà textField del livello simbolo richiede che venga specificata un'espressione. In questo caso, si vuole eseguire il rendering della proprietà ‘temperature’. Poiché la temperatura è un numero, è necessario convertirla in una stringa. Inoltre, si vuole aggiungere "°F" a tale stringa. È possibile usare un'espressione per eseguire questa concatenazione; ['concat', ['to-string', ['get', 'temperature']], '°F'].

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-73.985708, 40.75773],
        zoom: 12,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {

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

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}

Nota

Per una copia del file di immagine usato nell'esempio precedente, vedere showers.png in GitHub.

Suggerimento

Azure Maps Web SDK offre diversi modelli di immagine personalizzabili che è possibile usare con il livello simbolo. Per altre informazioni, vedere il documento Come usare i modelli di immagine.

Personalizzare un livello simbolo

Per il livello simbolo sono disponibili numerose opzioni di stile. L'esempio Opzioni livello simbolo mostra come le diverse opzioni del livello simbolo che influiscono sul rendering. Per il codice sorgente per questo esempio, vedere Codice sorgente delle opzioni del livello simbolo.

Screenshot della mappa con un pannello sul lato sinistro della mappa con le varie opzioni di simboli che possono essere impostate in modo interattivo.

Suggerimento

Per eseguire il rendering solo del testo con un livello simbolo, è possibile nascondere l'icona impostando la proprietà image delle opzioni dell'icona su 'none'.