Přidání vrstvy symbolů do mapy

Článek
06/27/2023

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

Vrstvy symbolů se vykreslují pomocí webGL. Pomocí vrstvy symbolů můžete vykreslit velké kolekce bodů na mapě. V porovnání se značkou HTML vrstva symbolů vykresluje na mapě velký počet bodových dat 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 vrstvu omezit tak, aby vykreslovat pouze prvky geometrie bodů, nastavte filter vlastnost vrstvy na ['==', ['geometry-type'], 'Point'] hodnotu nebo ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] , pokud chcete, můžete zahrnout také funkce systému MultiPoint.

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

JPEG
PNG
SVG
BMP
GIF (bez animací)

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ření vrstvy symbolů Potom předejte zdroj dat vrstvě symbolů, abyste získali data ze zdroje dat. Nakonec do zdroje dat přidejte data, aby bylo možné něco vykreslit.

Následující kód ukazuje, co by se mělo přidat do mapy po načtení. Tato ukázka vykresluje 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]));

Existují čtyři různé typy bodových dat, které je možné přidat do mapy:

Geometrie bodu GeoJSON – tento objekt obsahuje pouze souřadnici bodu a nic jiného. Pomocnou atlas.data.Point třídu lze použít ke snadnému vytvoření těchto objektů.
Geometrie GeoJSON MultiPoint – tento objekt obsahuje souřadnice více bodů a nic jiného. Pomocnou atlas.data.MultiPoint třídu lze použít ke 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á ke geometrii. Pomocnou atlas.data.Feature třídu lze použít ke snadnému vytvoření těchto objektů.
atlas.Shape je podobná funkci GeoJSON. Obě se skládají z geometrie GeoJSON a sady vlastností, které obsahují metadata přidružená ke 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 mapování se nezmění. Je to proto, že v objektu JSON neexistuje žádný mechanismus, který by aktivovala aktualizaci. Třída obrazce poskytuje funkce pro aktualizaci dat, která obsahuje. Když dojde ke změně, zdroj dat a mapování se 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. Do mapy se přidá událost kliknutí tak, aby se při jejím spuštění použily souřadnice myši s funkcí Obrazce setCoordinates . Souřadnice myši se zaznamenávají v okamžiku 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 s mapou s připínákem přidaným pomocí vrstvy symbolů

Tip

Ve výchozím nastavení vrstvy symbolů optimalizují vykreslování symbolů tím, že skryjí překrývající se symboly. Při přiblížení se skryté symboly stanou viditelnými. Pokud chcete tuto funkci zakázat a vykreslit všechny symboly po celou dobu, nastavte allowOverlap vlastnost iconOptions možností na true.

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

Vrstvy symbolů se vykreslují pomocí webGL. Proto musí být do kontextu WebGL načteny všechny prostředky, například obrázky ikon. Tato ukázka ukazuje, jak přidat vlastní ikonu k prostředkům mapy. Tato ikona se pak použije k vykreslení dat bodů pomocí vlastního symbolu na mapě. Vlastnost textField vrstvy symbolů vyžaduje zadání výrazu. V tomto případě chceme vykreslit vlastnost temperature. Vzhledem k tomu, že teplota je číslo, je potřeba ji převést na řetězec. Dále 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', '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]
          }
        }));
      });
    });
}

Tip

Sada Azure Maps Web SDK poskytuje několik přizpůsobitelných šablon imagí, které můžete použít s vrstvou symbolů. Další informace najdete v dokumentu Jak používat šablony obrázků .

Přizpůsobení vrstvy symbolů

Vrstva symbolů má k dispozici mnoho 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 v tématu Zdrojový kód možností vrstvy symbolů.

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