Vytvoření zdroje dat

Článek
10/18/2023

Sada Azure Mapy Web SDK ukládá data do zdrojů dat. Použití zdrojů dat optimalizuje operace s daty pro dotazování a vykreslování. V současné době existují dva typy zdrojů dat:

Zdroj GeoJSON: Spravuje nezpracovaná data o poloze v místním formátu GeoJSON. Vhodné pro malé až střední datové sady (nahoru ze stovek tisíc obrazců).
Zdroj vektorové dlaždice: Načte data formátovaná jako vektorové dlaždice pro aktuální zobrazení mapy na základě systému provazování map. Ideální pro velké až masivní datové sady (miliony nebo miliardy obrazců).

Zdroj dat GeoJSON

Zdroj dat založený na GeoJSONu načítá a ukládá data místně pomocí DataSource třídy. Data GeoJSON lze vytvořit nebo vytvořit ručně pomocí pomocných tříd v oboru názvů atlas.data . Třída DataSource poskytuje funkce pro import místních nebo vzdálených souborů GeoJSON. Vzdálené soubory GeoJSON musí být hostované na koncovém bodu s povoleným cors. Třída DataSource poskytuje funkce pro data clusteringového bodu. A data je možné snadno přidat, odebrat a aktualizovat pomocí DataSource třídy. Následující kód ukazuje, jak je možné v Azure Mapy vytvořit data GeoJSON.

//Create raw GeoJSON object.
var rawGeoJson = {
     "type": "Feature",
     "geometry": {
         "type": "Point",
         "coordinates": [-100, 45]
     },
     "properties": {
         "custom-property": "value"
     }
};

//Create GeoJSON using helper classes (less error prone and less typing).
var geoJsonClass = new atlas.data.Feature(new atlas.data.Point([-100, 45]), {
    "custom-property": "value"
});

Po vytvoření lze zdroje dat přidat do mapy prostřednictvím map.sources vlastnosti, což je SourceManager. Následující kód ukazuje, jak vytvořit DataSource a přidat ho do mapy.

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

Následující kód ukazuje různé způsoby, jak lze data GeoJSON přidat do DataSource.

//GeoJsonData in the following code can be a single or array of GeoJSON features or geometries, a GeoJSON feature colleciton, or a single or array of atlas.Shape objects.

//Add geoJSON object to data source. 
source.add(geoJsonData);

//Load geoJSON data from URL. URL should be on a CORs enabled endpoint.
source.importDataFromUrl(geoJsonUrl);

//Overwrite all data in data source.
source.setShapes(geoJsonData);

Tip

Řekněme, že chcete přepsat všechna data v souboru DataSource. Pokud provedete volání clear těchto add funkcí, mapa se může znovu vykreslit dvakrát, což může způsobit trochu zpoždění. Místo toho použijte setShapes funkci, která odebere a nahradí všechna data ve zdroji dat a aktivuje pouze jedno opětovné vykreslení mapy.

Zdroj vektorové dlaždice

Zdroj vektorové dlaždice popisuje, jak získat přístup k vrstvě vektorové dlaždice. K vytvoření instance zdroje vektorové dlaždice použijte VectorTileSource třídy. Vrstvy vektorových dlaždic jsou podobné vrstvě dlaždic, ale nejsou stejné. Vrstva dlaždice je rastrový obrázek. Vrstvy vektorových dlaždic jsou komprimovaný soubor ve formátu PBF . Tento komprimovaný soubor obsahuje data vektorového mapování a jednu nebo více vrstev. Soubor lze vykreslit a stylovat v klientovi na základě stylu každé vrstvy. Data v dlaždici vektoru obsahují geografické funkce ve formě bodů, čar a mnohoúhelníku. Použití vrstev vektorových dlaždic místo rastrových vrstev dlaždic má několik výhod:

Velikost souboru vektorové dlaždice je obvykle mnohem menší než ekvivalentní rastrová dlaždice. Proto se používá menší šířka pásma. To znamená nižší latenci, rychlejší mapování a lepší uživatelské prostředí.
Vzhledem k tomu, že se vektorové dlaždice vykreslují na klientovi, přizpůsobí se rozlišení zařízení, na kterém se zobrazují. V důsledku toho se vykreslené mapy zobrazují jasněji definované s krystalickými popisky.
Změna stylu dat v vektorových mapách nevyžaduje opětovné stažení dat, protože nový styl lze použít v klientovi. Změna stylu rastrové vrstvy dlaždic naproti tomu obvykle vyžaduje načtení dlaždic ze serveru a následné použití nového stylu.
Vzhledem k tomu, že data jsou dodávána ve formě vektoru, je k přípravě dat potřeba méně zpracování na straně serveru. V důsledku toho je možné novější data zpřístupnit rychleji.

Azure Mapy dodržuje specifikaci vektorové dlaždice Mapbox, otevřeného standardu. Azure Mapy poskytuje jako součást platformy následující služby vektorových dlaždic:

Silniční dlaždice
Dopravní incidenty
Tok provozu
Azure Mapy Creator také umožňuje vytvářet a přistupovat k vlastním vektorovým dlaždicím prostřednictvím rozhraní API pro vykreslení – Získání mapových dlaždic

Tip

Při použití vektorových nebo rastrových dlaždic obrázků ze služby Azure Mapy render pomocí webové sady SDK můžete nahradit atlas.microsoft.com zástupným symbolem {azMapsDomain}. Tento zástupný symbol se nahradí stejnou doménou, kterou mapa používá, a automaticky připojí stejné ověřovací údaje. To výrazně zjednodušuje ověřování pomocí služby render při použití ověřování Microsoft Entra.

Pokud chcete zobrazit data ze zdroje vektorové dlaždice na mapě, připojte zdroj k jedné z vrstev vykreslování dat. Všechny vrstvy, které používají vektorový zdroj, musí v možnostech zadat sourceLayer hodnotu. Následující kód načte službu dlaždic vektoru toku provozu Azure Mapy jako zdroj vektorové dlaždice a pak ji zobrazí na mapě pomocí vrstvy čáry. Tento zdroj vektorové dlaždice má jednu sadu dat ve zdrojové vrstvě s názvem "Tok provozu". Řádková data v této sadě dat mají vlastnost, traffic_level která se používá v tomto kódu k výběru barvy a měřítka velikosti řádků.

//Create a vector tile source and add it to the map.
var source = new atlas.source.VectorTileSource(null, {
    tiles: ['https://{azMapsDomain}/traffic/flow/tile/pbf?api-version=1.0&style=relative&zoom={z}&x={x}&y={y}'],
    maxZoom: 22
});
map.sources.add(source);

//Create a layer for traffic flow lines.
var flowLayer = new atlas.layer.LineLayer(source, null, {
    //The name of the data layer within the data source to pass into this rendering layer.
    sourceLayer: 'Traffic flow',

    //Color the roads based on the traffic_level property. 
    strokeColor: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 'red',
        0.33, 'orange',
        0.66, 'green'
    ],

    //Scale the width of roads based on the traffic_level property. 
        strokeWidth: [
        'interpolate',
        ['linear'],
        ['get', 'traffic_level'],
        0, 6,
        1, 1
    ]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

Kompletní funkční ukázka zobrazení dat ze zdroje vektorové dlaždice na mapě najdete v tématu Vrstva čáry vektorové dlaždice v Azure Mapy Samples. Zdrojový kód pro tuto ukázku naleznete v části Vzorový kód vrstvy řádku vektorové dlaždice.

Screenshot showing a map displaying data from a vector tile source.

Připojení zdroje dat do vrstvy

Data se na mapě vykreslují pomocí vykreslovacích vrstev. Jedna nebo více vrstev vykreslování může odkazovat na jeden zdroj dat. Následující vrstvy vykreslování vyžadují zdroj dat:

Bublinová vrstva – vykreslí data bodů jako škálované kruhy na mapě.
Vrstva symbolu – vykreslí data bodů jako ikony nebo text.
Vrstva heat mapy – vykresluje data bodů jako heat mapu hustoty.
Vrstva čáry – vykreslení čáry a vykreslení obrysu mnohoúhelníku
Polygonová vrstva – vyplní oblast mnohoúhelníku plnou barvou nebo vzorem obrázku.

Následující kód ukazuje, jak vytvořit zdroj dat, přidat ho do mapy a připojit ho k bublinové vrstvě. Potom naimportujte data bodu GeoJSON ze vzdáleného umístění do zdroje dat.

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

//Create a layer that defines how to render points in the data source and add it to the map.
map.layers.add(new atlas.layer.BubbleLayer(source));

//Load the earthquake data.
source.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');

Existují další vrstvy vykreslování, které se k těmto zdrojům dat nepřipojují, ale přímo načítají data pro vykreslování.

Vrstva obrázku – překrytí jednoho obrázku nad mapou a vytvoří vazbu jeho rohů na sadu zadaných souřadnic.
Vrstva dlaždic – superimpozizuje rastrovou vrstvu dlaždic v horní části mapy.

Jeden zdroj dat s více vrstvami

K jednomu zdroji dat je možné připojit více vrstev. Tato možnost je užitečná v mnoha různých scénářích. Představte si například scénář, ve kterém uživatel nakreslí mnohoúhelník. Měli bychom vykreslit a vyplnit mnohoúhelník, protože uživatel přidává body do mapy. Když přidáte stylovanou čáru k obrysu mnohoúhelníku, bude se snadněji zobrazovat okraje mnohoúhelníku, jak uživatel nakreslí. Pokud chceme pohodlně upravit jednotlivou pozici v mnohoúhelníku, můžeme nad každou pozici přidat úchyt, například špendlík nebo značku.

Map showing multiple layers rendering data from a single data source

Ve většině mapovacích platforem byste potřebovali polygonový objekt, spojnicový objekt a špendlík pro každou pozici v mnohoúhelníku. Při úpravě mnohoúhelníku byste museli ručně aktualizovat čáru a špendlíky, což se může rychle stát složitým.

S Azure Mapy stačí jen jeden mnohoúhelník ve zdroji dat, jak je znázorněno v následujícím kódu.

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

//Create a polygon and add it to the data source.
source.add(new atlas.data.Feature(
        new atlas.data.Polygon([[[/* Coordinates for polygon */]]]));

//Create a polygon layer to render the filled in area of the polygon.
var polygonLayer = new atlas.layer.PolygonLayer(source, 'myPolygonLayer', {
     fillColor: 'rgba(255,165,0,0.2)'
});

//Create a line layer for greater control of rendering the outline of the polygon.
var lineLayer = new atlas.layer.LineLayer(source, 'myLineLayer', {
     strokeColor: 'orange',
     strokeWidth: 2
});

//Create a bubble layer to render the vertices of the polygon as scaled circles.
var bubbleLayer = new atlas.layer.BubbleLayer(source, 'myBubbleLayer', {
     color: 'orange',
     radius: 5,
     strokeColor: 'white',
     strokeWidth: 2
});

//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, bubbleLayer]);

Tip

Při přidávání vrstev do mapy pomocí map.layers.add funkce lze ID nebo instance existující vrstvy předat jako druhý parametr. To by řeklo, že mapa vloží novou vrstvu, která se přidá pod existující vrstvu. Kromě předávání ID vrstvy tato metoda podporuje také následující hodnoty.