Přidání jednoduché datové vrstvy

Webová sada SDK služby Azure Maps poskytuje modul prostorových vstupně-výstupních operací, který obsahuje SimpleDataLayer třídu. Tato třída usnadňuje vykreslování stylizovaný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 tuto funkci dosahuje zabalením více vrstev vykreslování a použitím výrazů stylu. Výrazy stylu prohledávají zabalené vrstvy kvůli společným vlastnostem stylu. Tyto atlas.io.read vlastnosti a atlas.io.write funkce používají ke čtení a zápisu stylů do podporovaného formátu souboru. Když do podporovaného formátu souboru přidáte vlastnosti, můžete ho použít pro účely, jako je zobrazení styledových funkcí na mapě.

Třída SimpleDataLayer také poskytuje integrovanou funkci vyskakovacího okna s šablonou vyskakovacího okna. Když je vybraná funkce, zobrazí se automaticky otevírané okno. Tato vrstva také podporuje clusterovaná data. Při výběru clusteru se mapa přiblíží na tento cluster a rozbalí ho do jednotlivých bodů a subclusterů. Pokud ji nepotřebujete, můžete funkci automaticky otevírané aplikace zakázat.

Třída SimpleDataLayer je určena k použití u velkých datových sad, které obsahují funkce s mnoha použitými typy a styly geometrie. Při použití této třídy přidá režii v podobě šesti vrstev, které obsahují výrazy stylu. Pokud potřebujete vykreslit pouze několik typů a stylů geometrie u funkce, může být efektivnější použít základní vrstvu vykreslování. Další informace najdete v tématu Přidání bublinové vrstvy do mapy, přidání vrstvy čáry do mapy a přidání polygonové vrstvy do mapy.

Použití jednoduché datové vrstvy

Můžete použít třídu SimpleDataLayer stejně jako jinou vrstvu 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, jak použít jednoduchou datovou vrstvu, která odkazuje 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 to connect 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>

Když do zdroje dat přidáte funkce, vykreslí je jednoduchá datová vrstva nejvhodnějším způsobem. Styly můžete nastavit jako vlastnosti pro každou jednotlivou funkci.

Předchozí ukázkový kód ukazuje bodovou funkci GeoJSON (geografický zápis objektu ve formátu JavaScript) s nastavenou vlastností na colorred.

Vzorový kód vykreslí funkci bodu pomocí jednoduché datové vrstvy a výsledek se zobrazí následujícím způsobem.

Poznámka:

Hodnota ze zdroje "coordinates": [0, 0] dat přepíše souřadnice center: [-73.967605, 40.780452] , které jste nastavili při inicializaci mapy.

Jednoduchá datová vrstva je výkonný nástroj v následujících scénářích:

• Zdroj dat obsahuje několik typů funkcí.
• Funkce v sadě dat mají několik vlastností stylu, které jsou nastaveny jednotlivě.
• Nejste si jistí, co sada dat obsahuje.

Když například analyzujete datové kanály XML, možná neznáte styl a typy geometrie prvků. Ukázka možností jednoduché datové vrstvy ukazuje, jak jednoduchá datová vrstva vykresluje funkce souboru KML (Keyhole Markup Language). Můžete také zobrazit možnosti ve SimpleDataLayer třídě. 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.

Poznámka:

Tato jednoduchá datová vrstva používá třídu vyskakovací šablony k zobrazení bublin KML nebo vlastností prvků jako tabulky. Ve výchozím nastavení je veškerý obsah vykreslený v automaticky otevíraném okně uvnitř prvku iFrame jako funkce zabezpečení. Existují však omezení:

• Všechny funkce uzamčení ukazatele, funkce horní navigace, skripty a formuláře jsou zakázány. Odkazy mohou být otevřeny na nové kartě, když jsou vybrány.
• Starší prohlížeče, které nepodporují parametr srcdoc na iFrame, můžou vykreslit pouze malou část obsahu.

Pokud důvěřujete datům načteným do automaticky otevíraných oken a chcete, aby automaticky otevírané skripty měly přístup k vaší aplikaci, můžete tuto funkci zakázat. Stačí nastavit sandboxContent volbu v místní šabloně na false.

Výchozí podporované vlastnosti stylu

Jednoduchá datová vrstva obklopí několik základních vykreslovacích vrstev: bublinovou, symbolovou, čárovou, mnohoúhelníkovou a vysunutou mnohoúhelníkovou. Používá výrazy k vyhledání platných vlastností stylu u jednotlivých funkcí.

Dvě hlavní sady podporovaných názvů vlastností jsou Azure Maps a GitHub. Většina názvů vlastností možností vrstvy Azure Maps je podporována v jednoduché datové vrstvě jako vlastnosti stylu funkcí. Některé možnosti vrstvy zahrnují výrazy, které podporují názvy vlastností stylu, které GitHub běžně používá.

Podpora GeoJSON map GitHubu definuje tyto názvy vlastností, které se používají k formátování souborů GeoJSON uložených a vykreslovaných v rámci platformy. Většina vlastností stylu GitHubu je podporována 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 nejčastěji podobnou vlastnost stylu Azure Maps. Kromě toho můžete předefinovat výchozí stylové výrazy pomocí getLayers funkce jednoduché datové vrstvy a aktualizováním možností v libovolné vrstvě.

Následující části obsahují podrobnosti o výchozích vlastnostech stylu, které jednoduchá datová vrstva podporuje. Pořadí podporovaných názvů vlastností určuje také jejich prioritu. Pokud jsou pro stejnou možnost vrstvy definovány dvě vlastnosti stylu, má přednost první v seznamu. Barvy můžou být libovolná hodnota barvy CSS3 (HEX, RGB, RGBA, HSL, HSLA) nebo pojmenovaná hodnota barvy.

Vlastnosti stylu bublinové vrstvy

Pokud je prvek typu Point nebo MultiPoint a nemá vlastnost obrázku, která by se použila jako vlastní ikona pro vykreslení bodu jako symbol, je vykreslen jako BubbleLayer.

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

¹ Hodnoty velikosti a měřítka jsou považovány za skalární hodnoty a jsou vynásobeny hodnotou 8.

² Pokud je zadána možnost GitHubu marker-size , radius používá následující hodnoty:

Velikost značky	poloměr
small	6
medium	8
large	12

Clustery se také vykreslují ve vrstvě 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ů	Barva
>= 100	red
>= 10	yellow
< 10	green

Vlastnosti stylu symbolu

Pokud je prvek Point nebo MultiPoint, a jako vlastní ikona je použita obrázková vlastnost k zobrazení bodu jako symbolu, pak se zobrazuje pomocí SymbolLayer.

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

¹ Pokud je zadána možnost GitHubu marker-size , pro možnost velikost ikony se použijí následující hodnoty:

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

Pokud je bodový prvek shlukem, vlastnost point_count_abbreviated je vykreslena jako textový popisek. Nevykreslí se žádný obrázek.

Vlastnosti stylu čáry

Pokud je funkce LineString, MultiLineString, Polygon nebo MultiPolygon, je vykreslena 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 funkce Polygon nebo MultiPolygon a nemá vlastnost výšky nebo pokud je vlastnost výšky nula, je vykresleno s PolygonLayer.

Možnost vrstvy	Podporované názvy vlastností	Výchozí hodnota
fillColor	fillColor, fill	'#1E90FF'
fillOpacity	fillOpacity, 'fill-opacity	0.5

Vlastnosti stylu extrudovaného polygonu

Pokud je funkce Polygon nebo MultiPolygon a má vlastnost výšky s hodnotou větší než nula, je vykreslena pomocí PolygonExtrusionLayer.

Možnost vrstvy	Podporované názvy atributů	Výchozí hodnota
base	base	0
fillColor	fillColor, fill	'#1E90FF'
height	height	0

Související obsah

Další informace o třídách a metodách najdete v tomto článku:

• SimpleDataLayer
• SimpleDataLayerOptions

Další ukázky kódu pro přidání do map najdete v následujících článcích:

• Čtení a zápis prostorových dat
• Přidání vrstvy mapy z otevřeného geoprostorového konsorcia
• Připojení ke službě WFS
• Základní vstupně-výstupní operace
• Podrobnosti o podporovaném formátu dat