Aggiungere un livello simbolo a una mappa

Articolo
06/16/2023

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 di simboli per eseguire il rendering di raccolte di punti nella mappa. Rispetto al marcatore HTML, il livello simbolo esegue il rendering di un numero elevato di dati di punti 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 venga eseguito il rendering solo delle funzionalità geometry del punto, impostare anche la filter proprietà del livello ['==', ['geometry-type'], 'Point'] su o ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] , se si desidera, è possibile includere anche le funzionalità di MultiPoint.

Il gestore di sprite delle immagini mappa carica immagini personalizzate usate dal livello dei simboli. Supporta i formati di immagine seguenti:

JPEG
PNG
SVG
BMP
GIF (nessuna animazione)

Aggiungere un livello per i simboli

Prima di poter aggiungere un livello simbolo alla mappa, è necessario eseguire un paio di passaggi. Prima di tutto, creare un'origine dati e aggiungerla alla mappa. Creare un livello di simboli. Passare quindi l'origine dati al livello simbolo per recuperare i dati dall'origine dati. Infine, aggiungere dati all'origine dati, in modo che venga eseguito il rendering di un elemento.

Il codice seguente illustra cosa deve essere aggiunto alla mappa dopo il caricamento. Questo esempio esegue il rendering di un singolo punto della mappa usando un livello di simboli.

//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]));

Sono disponibili quattro tipi diversi di dati di punto che possono essere aggiunti alla mappa:

Geometria del punto GeoJSON: questo oggetto contiene solo una coordinata di un punto e niente altro. La atlas.data.Point classe helper può essere usata per creare facilmente questi oggetti.
Geometria GeoJSON MultiPoint: questo oggetto contiene le coordinate di più punti e niente 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, può essere eseguito 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 classe per semplificare l'aggiornamento atlas.Shape . 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 generato, le coordinate del mouse vengono usate 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 pin aggiunto usando il livello simbolo.

Suggerimento

Per impostazione predefinita, i livelli di simboli ottimizzano il rendering dei simboli nascondendo i simboli che si sovrappongono. Quando si esegue lo zoom avanti, i simboli nascosti diventano visibili. Per disabilitare questa funzionalità e eseguire il rendering di tutti i simboli in ogni momento, 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 illustra come aggiungere un'icona personalizzata alle risorse della mappa. Questa icona viene quindi usata per eseguire il rendering dei dati del punto 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, deve essere convertita in una stringa. Inoltre, vogliamo aggiungere "°F" a esso. Un'espressione può essere usata 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', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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]
          }
        }));
      });
    });
}

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 simboli mostra come le diverse opzioni del livello di simbolo che influiscono sul rendering. Per il codice sorgente per questo esempio, vedere Codice sorgente Opzioni livello simboli.

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

Suggerimento

Quando si vuole eseguire il rendering solo del testo con un livello di simboli, è possibile nascondere l'icona impostando la image proprietà delle opzioni dell'icona su 'none'.