Přidání jednoduché datové vrstvy

Článek
09/26/2024

Prostorový vstupně-výstupní SimpleDataLayer modul poskytuje třídu. Tato třída usnadňuje vykreslování styledových funkcí na mapě. Může dokonce vykreslit datové sady, které mají vlastnosti stylu a datové sady, které obsahují smíšené typy geometrie. Jednoduchá datová vrstva tuto funkci dosahuje zabalením více vykreslovacích vrstev 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 pro různé účely. Soubor lze například použít k zobrazení styledových funkcí na mapě.

Kromě funkcí SimpleDataLayer stylů poskytuje předdefinovaná automaticky otevíraná funkce s místní šablonou. Automaticky otevírané okno se zobrazí, když je vybraná funkce. Výchozí automaticky otevírané okno je možné v případě potřeby zakázat. Tato vrstva také podporuje clusterovaná data. Po kliknutí na cluster se mapa přiblíží ke clusteru a rozbalí ji do jednotlivých bodů a podkluzů.

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 u prvků. Při použití přidá tato třída režii šesti vrstev obsahujících výrazy stylu. Existují tedy případy, kdy je efektivnější používat základní vrstvy vykreslování. Například použití základní vrstvy k vykreslení několika typů geometrie a několika stylů u funkce

Použití jednoduché datové vrstvy

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

//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.

<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>

<script>
    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.
            const dataSet = {
                type: "FeatureCollection",
                bbox: [0, 0, 0, 0],
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [0, 0]
                        },
                        properties: {
                            color: "red"
                        }
                    }
                ]
            };

            loadDataSet(dataSet);

            function loadDataSet(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
                    });
                }
            }
        });
    }
</script>

Jakmile do zdroje dat přidáte funkce, jednoduchá datová vrstva zjistí, jak je nejlépe vykreslit. Styly pro jednotlivé funkce lze nastavit jako vlastnosti této 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 bodu pomocí jednoduché datové vrstvy a zobrazí se takto:

Snímek obrazovky mapy 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]

Přepíšou se hodnotou ze zdroje dat:

"souřadnice": [0, 0]

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

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

Při analýze datových kanálů XML například 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á datová vrstva options.html v ukázkách kódu Azure Maps na GitHubu.

Snímek obrazovky mapy s panelem na levé straně zobrazující 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í se veškerý obsah vykreslovaný v automaticky otevíraných otevíraných oken v izolovaném prostoru (sandbox) uvnitř 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é. Když vyberete, můžou se odkazy otevřít na nové kartě.
Starší prohlížeče, které parametr v elementech iframe nepodporují srcdoc , budou omezené na vykreslení malého množství obsahu.

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

Výchozí podporované vlastnosti stylu

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

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

Pokud se čtenář setká s méně běžnou vlastností stylu, převede ji na nejbližší vlastnost stylu Azure Maps. Kromě toho lze výchozí styl výrazy přepsat pomocí getLayers funkce jednoduché datové vrstvy a aktualizovat možnosti 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í 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 funkce nebo Point MultiPointa funkce nemá image vlastnost, která by se použila jako vlastní ikona k vykreslení bodu jako symbolu, funkce se vykreslí pomocí znaku BubbleLayer.

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

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

[2] Pokud je zadána možnost GitHubu 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í vrstvy bublin. 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ů	Color
>= 100	`red`
>= 10	`yellow`
< 10	`green`

Vlastnosti stylu symbolu

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

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

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

Velikost značky	Velikost symbolu
`small`	`0.5`
`medium`	`1`
`large`	`2`

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

Vlastnosti stylu čáry

Pokud je funkce , LineStringMultiLineString, Polygonnebo MultiPolygon, pak se funkce vykreslí pomocí znaku LineLayer.

Možnost vrstvy	Podporované názvy vlastností	Default value
`strokeColor`	`strokeColor`, `stroke`	`'#1E90FF'`
`strokeWidth`	`strokeWidth`, , `stroke-widthstroke-thickness`	`3`
`strokeOpacity`	`strokeOpacity`, `stroke-opacity`	`1`

Vlastnosti stylu mnohoúhelníku

Pokud je tato funkce a Polygon MultiPolygonfunkce buď nemá height vlastnost, nebo height je nulová, pak se funkce vykreslí pomocí znaku PolygonLayer.

Možnost vrstvy	Podporované názvy vlastností	Default value
`fillColor`	`fillColor`, `fill`	`'#1E90FF'`
`fillOpacity`	`fillOpacity`, '`fill-opacity`	`0.5`

Vlastnosti stylu polygonu s vytáhováním

Pokud je funkce nebo Polygon MultiPolygona má height vlastnost s hodnotou větší než nula, funkce se vykreslí pomocí znaku PolygonExtrusionLayer.