Přidání jednoduché datové vrstvy

Článek
06/22/2023

Modul prostorových vstupně-výstupních SimpleDataLayer operací poskytuje třídu. Tato třída usnadňuje vykreslení stylových prvků na mapě. Může dokonce vykreslit datové sady, které mají vlastnosti stylu a datové sady, které obsahují smíšené typy geometrie. Jednoduchá datová vrstva této funkce dosahuje zabalením několika vrstev vykreslování a použitím výrazů stylu. Výrazy stylů vyhledávají společné vlastnosti stylu prvků uvnitř těchto zabalených vrstev. Funkce atlas.io.read a atlas.io.write funkce používají tyto vlastnosti ke čtení a zápisu stylů do podporovaného formátu souboru. Po přidání vlastností do podporovaného formátu souboru lze soubor použít k různým účelům. Soubor lze například použít k zobrazení stylových prvků na mapě.

Kromě funkcí pro úpravu SimpleDataLayer stylů poskytuje integrovanou funkci automaticky otevíraných oken se šablonou automaticky otevíraných oken. Automaticky otevírané okno se zobrazí, když kliknete na funkci. Výchozí funkci automaticky otevírané nabídky je možné v případě potřeby zakázat. Tato vrstva také podporuje clusterovaná data. Když kliknete na cluster, mapa se přiblíží ke clusteru a rozbalí ho na jednotlivé body a podclustery.

Třída SimpleDataLayer je určena k použití u velkých datových sad s mnoha typy geometrie a mnoha styly použitými na prvky. Při použití tato třída přidá režii šesti vrstev obsahujících výrazy stylu. Existují případy, kdy je efektivnější používat základní vrstvy vykreslování. Můžete například použít základní vrstvu k vykreslení několika typů geometrie a několika stylů pro prvek.

Použití jednoduché datové vrstvy

Třída se SimpleDataLayer používá stejně jako ostatní vrstvy vykreslování. Následující kód ukazuje, jak používat jednoduchou datovou vrstvu v mapě:

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

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

Následující fragment kódu ukazuje použití jednoduché datové vrstvy odkazující na data z online zdroje.

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

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      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);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

Adresa URL předaná loadDataSet funkci odkazuje na následující kód JSON:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

Jakmile do zdroje dat přidáte funkce, jednoduchá datová vrstva zjistí, jak je nejlépe vykreslit. Styly pro jednotlivé funkce je možné nastavit jako vlastnosti funkce.

Výše uvedený ukázkový kód ukazuje funkci bodu GeoJSON s vlastností nastavenou color na red.

Tento ukázkový kód vykreslí funkci point pomocí jednoduché datové vrstvy a zobrazí se takto:

Snímek obrazovky s mapou se souřadnicemi 0, 0, který zobrazuje červenou tečku nad modrou vodou, byla červená tečka přidána pomocí vrstvy symbolů.

Poznámka

Všimněte si, že souřadnice nastavené při inicializaci mapy:

střed: [-73.967605, 40.780452]

Jsou přepsány hodnotou ze zdroje dat:

"souřadnice": [0, 0]

Skutečná síla jednoduché datové vrstvy přichází v těchto případech:

Zdroj dat obsahuje několik různých typů funkcí. Nebo
Funkce v sadě dat mají několik vlastností stylu, které jsou na nich jednotlivě nastaveny; Nebo
Nejste si jistí, co přesně sada dat obsahuje.

Například při analýze datových kanálů XML nemusíte znát přesné styly a typy geometrie funkcí. Ukázka možností jednoduché datové vrstvy ukazuje výkon jednoduché datové vrstvy vykreslením funkcí souboru KML. Ukazuje také různé možnosti, které poskytuje jednoduchá třída datové vrstvy. Zdrojový kód pro tuto ukázku najdete v tématu Jednoduchá options.htmldatové vrstvy v ukázkách kódu Azure Maps na GitHubu.

Snímek obrazovky s mapou s panelem vlevo zobrazujícím různé možnosti jednoduché datové vrstvy

Poznámka

Tato jednoduchá datová vrstva používá třídu místní šablony k zobrazení bublin KML nebo vlastností funkcí jako tabulky. Ve výchozím nastavení bude veškerý obsah vykreslený v automaticky otevírané aplikaci v izolovaném prostoru (sandbox) v rámci prvku iframe jako funkce zabezpečení. Existují však omezení:

Všechny skripty, formuláře, zámek ukazatele a funkce horní navigace jsou zakázané. Odkazy se můžou po kliknutí otevřít na nové kartě.
Starší prohlížeče, které srcdoc nepodporují parametr v rámcích iframe, budou omezené na vykreslování malého množství obsahu.

Pokud důvěřujete datům načítaným do automaticky otevíraných oken a potenciálně chcete, aby tyto skripty načtené do automaticky otevíraných oken mohly přistupovat k vaší aplikaci, můžete to zakázat nastavením možnosti automaticky otevíraných šablon sandboxContent na hodnotu false.

Výchozí podporované vlastnosti stylu

Jak už bylo zmíněno dříve, jednoduchá datová vrstva obtéká několik základních vykreslovacích vrstev: bublina, symbol, čára, mnohoúhelník a vysunutí mnohoúhelník. Potom pomocí výrazů vyhledá platné vlastnosti stylu u jednotlivých funkcí.

Azure Maps a vlastnosti stylu GitHubu jsou dvě hlavní sady podporovaných názvů vlastností. Většina názvů vlastností různých možností vrstvy Azure Maps se podporuje jako vlastnosti stylu funkcí v jednoduché datové vrstvě. Do některých možností vrstvy byly přidány výrazy, které podporují názvy vlastností stylu, které GitHub běžně používá. Podpora map GeoJSON v GitHubu definuje tyto názvy vlastností a používá se ke stylu souborů GeoJSON, které se ukládají a vykreslují v rámci platformy. Všechny vlastnosti stylů GitHubu jsou podporovány v jednoduché datové vrstvě s výjimkou marker-symbol vlastností stylů.

Pokud čtenář narazí na méně běžnou vlastnost stylu, převede ji na nejbližší Azure Maps vlastnost stylu. Kromě toho je možné přepsat výchozí výrazy stylu pomocí getLayers funkce jednoduché datové vrstvy a aktualizací možností na libovolné vrstvě.

Následující části obsahují podrobnosti o výchozích vlastnostech stylu podporovaných jednoduchou datovou vrstvou. Pořadí podporovaného názvu vlastnosti je také prioritou vlastnosti. Pokud jsou pro stejnou možnost vrstvy definovány dvě vlastnosti stylu, má první vlastnost v seznamu vyšší prioritu. Barvy mohou být libovolná hodnota barvy CSS3; HEX, RGB, RGBA, HSL, HSLA nebo pojmenovaná hodnota barvy.

Vlastnosti stylu bublinové vrstvy

Pokud je Point funkce nebo MultiPointa nemá image vlastnost, která by se použila jako vlastní ikona k vykreslení bodu jako symbolu, pak se funkce vykreslí pomocí BubbleLayer.

Možnost vrstvy	Podporované názvy vlastností	Výchozí hodnota
`color`	`color`, `marker-color`	`'#1A73AA'`
`radius`	`size`¹, `marker-size`², `scale`¹	`8`
`strokeColor`	`strokeColor`, `stroke`	`'#FFFFFF'`

[1] Hodnoty size a scale jsou považovány za skalární hodnoty a jsou vynásobeny 8

[2] Pokud je zadaná možnost GitHub marker-size , použijí se pro poloměr následující hodnoty.

Velikost značky	RADIUS
`small`	`6`
`medium`	`8`
`large`	`12`

Clustery se také vykreslují pomocí bublinové vrstvy. Ve výchozím nastavení je poloměr clusteru nastavený na 16. Barva clusteru se liší v závislosti na počtu bodů v clusteru, jak je definováno v následující tabulce:

Počet bodů	Barva
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Vlastnosti stylu symbolu

Pokud je Point funkce nebo MultiPointa a má vlastnost, která by se použila image jako vlastní ikona k vykreslení bodu jako symbolu, pak se funkce vykreslí pomocí SymbolLayer.

Možnost vrstvy	Podporované názvy vlastností	Výchozí hodnota
`image`	`image`	`none`
`size`	`size`, `marker-size`¹	`1`
`rotation`	`rotation`	`0`
`offset`	`offset`	`[0, 0]`
`anchor`	`anchor`	`'bottom'`

[1] Pokud je zadaná možnost GitHubu marker-size , použijí se pro možnost velikosti ikony následující hodnoty.

Velikost značky	Symbol size
`small`	`0.5`
`medium`	`1`
`large`	`2`

Pokud je funkcí bodu cluster, point_count_abbreviated vlastnost se vykreslí jako textový popisek. Nevykreslí se žádný obrázek.

Vlastnosti stylu čáry

Pokud je LineStringtato funkce , MultiLineString, Polygonnebo MultiPolygon, pak se tato funkce vykreslí pomocí LineLayer.

Možnost vrstvy	Podporované názvy vlastností	Výchozí hodnota
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, `stroke-width`, `stroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Vlastnosti stylu mnohoúhelníku

Pokud je funkcí nebo PolygonMultiPolygona funkce buď nemá height vlastnost, nebo height je vlastnost nula, pak se funkce vykreslí pomocí PolygonLayer.