Přidání vrstvy symbolů do mapy

Článek
12/04/2024

Připojte symbol ke zdroji dat a použijte ho k vykreslení ikony nebo textu v daném okamžiku.

Vrstvy symbolů se vykreslují pomocí WebGL. K vykreslení velkých kolekcí bodů na mapě použijte vrstvu symbolů. Ve srovnání se značkou HTML vykreslí vrstva symbolů velký počet dat bodů na mapě s lepším výkonem. Vrstva symbolů ale nepodporuje tradiční prvky CSS a HTML pro stylování.

Tip

Vrstvy symbolů ve výchozím nastavení vykreslují souřadnice všech geometrií ve zdroji dat. Chcete-li omezit vrstvu tak, aby vykreslovat pouze funkce geometrie bodu nastavily filter vlastnost vrstvy ['==', ['geometry-type'], 'Point'] nebo ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] pokud chcete, můžete zahrnout i funkce MultiPointu.

Správce spritu obrázků map načte vlastní image používané vrstvou symbolů. Podporuje následující formáty obrázků:

JPEG
PNG
SVG
BMP
GIF (žádné animace)

Přidání vrstvy symbolů

Než do mapy přidáte vrstvu symbolů, musíte provést několik kroků. Nejprve vytvořte zdroj dat a přidejte ho do mapy. Vytvořte vrstvu symbolů. Potom předejte zdroj dat do vrstvy symbolů a načtěte data ze zdroje dat. Nakonec přidejte data do zdroje dat, aby se něco vykreslilo.

Následující kód ukazuje, co by se mělo přidat do mapy po načtení. Tato ukázka vykreslí jeden bod na mapě pomocí vrstvy symbolů.

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

Do mapy lze přidat čtyři různé typy dat bodů:

Geometrie GeoJSON Point – tento objekt obsahuje pouze souřadnici bodu a nic jiného. Pomocná atlas.data.Point třída lze použít k snadnému vytvoření těchto objektů.
GeoJSON MultiPoint geometry - Tento objekt obsahuje souřadnice více bodů a nic jiného. Pomocná atlas.data.MultiPoint třída lze použít k snadnému vytvoření těchto objektů.
Funkce GeoJSON – Tento objekt se skládá z jakékoli geometrie GeoJSON a sady vlastností, které obsahují metadata přidružená k geometrii. Pomocná atlas.data.Feature třída lze použít k snadnému vytvoření těchto objektů.
atlas.Shape třída je podobná funkci GeoJSON. Oba se skládají z geometrie GeoJSON a sady vlastností, které obsahují metadata přidružená k geometrii. Pokud je objekt GeoJSON přidán do zdroje dat, lze ho snadno vykreslit ve vrstvě. Pokud je však vlastnost souřadnic tohoto objektu GeoJSON aktualizována, zdroj dat a mapa se nezmění. Důvodem je, že v objektu JSON neexistuje žádný mechanismus, který by aktivoval aktualizaci. Třída obrazce poskytuje funkce pro aktualizaci dat, která obsahuje. Po provedení změny se zdroj dat a mapa automaticky upozorní a aktualizuje.

Následující ukázka kódu vytvoří geometrii GeoJSON Point a předá ji do atlas.Shape třídy, aby se usnadnila aktualizace. Střed mapy se zpočátku používá k vykreslení symbolu. Událost kliknutí se přidá do mapy tak, aby se při spuštění použily souřadnice myši s funkcí obrazců setCoordinates . Souřadnice myši se zaznamenávají v době události kliknutí. Potom aktualizuje setCoordinates umístění symbolu na mapě.

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));
    });
}

Snímek obrazovky mapy s špendlíkem přidaným pomocí vrstvy symbolů

Tip

Ve výchozím nastavení vrstvy symbolů optimalizují vykreslování symbolů skrytím symbolů, které se překrývají. Při přiblížení se skryté symboly stanou viditelnými. Chcete-li tuto funkci zakázat a vykreslit všechny symboly vždy, nastavte allowOverlap vlastnost iconOptions možností na truehodnotu .

Přidání vlastní ikony do vrstvy symbolů

Vrstvy symbolů se vykreslují pomocí WebGL. Proto musí být všechny prostředky, jako jsou obrázky ikon, načteny do kontextu WebGL. Tato ukázka ukazuje, jak do prostředků mapy přidat vlastní ikonu. Tato ikona se pak použije k vykreslení dat bodu pomocí vlastního symbolu na mapě. Vlastnost textField vrstvy symbolů vyžaduje zadání výrazu. V tomto případě chceme vykreslit vlastnost teploty. Vzhledem k tomu, že teplota je číslo, je potřeba ji převést na řetězec. Kromě toho k němu chceme připojit "°F". Výraz lze použít k tomuto zřetězení; ['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]
          }
        }));
      });
    });
}

Poznámka:

Kopii souboru obrázku použitého ve výše uvedené ukázce najdete v tématu showers.png na GitHubu.

Tip

Webová sada SDK služby Azure Maps poskytuje několik přizpůsobitelných šablon obrázků, které můžete použít s vrstvou symbolů. Další informace najdete v tématu Jak používat dokument šablon obrázků .

Přizpůsobení vrstvy symbolů

Vrstva symbolů má k dispozici řadu možností stylů. Ukázka možností vrstvy symbolů ukazuje, jak různé možnosti vrstvy symbolů, která ovlivňuje vykreslování. Zdrojový kód pro tuto ukázku najdete ve zdrojovém kódu Možnosti vrstvy symbolů.

Snímek obrazovky mapy s panelem na levé straně mapy s různými možnostmi symbolů, které je možné interaktivně nastavit