Adatforrás létrehozása

Cikk
10/18/2023

Az Azure Térképek Web SDK adatforrásokban tárolja az adatokat. Az adatforrások használata optimalizálja az adatműveleteket a lekérdezéshez és a rendereléshez. Jelenleg kétféle adatforrás létezik:

GeoJSON-forrás: A nyers helyadatokat helyben GeoJSON formátumban kezeli. Jó kis és közepes adathalmazokhoz (több százezer alakzat felfelé).
Vektorcsempék forrása: Betölti az aktuális térképnézet vektorcsempéiként formázott adatokat a térképburkoló rendszer alapján. Ideális nagy és nagy méretű adathalmazokhoz (több millió vagy több milliárd alakzathoz).

GeoJSON-adatforrás

Egy GeoJSON-alapú adatforrás betölti és helyileg tárolja az adatokat az DataSource osztály használatával. A GeoJSON-adatok manuálisan hozhatók létre vagy hozhatók létre az atlas.data névtér segédosztályai segítségével. Az DataSource osztály függvényeket biztosít a helyi vagy távoli GeoJSON-fájlok importálásához. A távoli GeoJSON-fájlokat egy COR-kompatibilis végponton kell üzemeltetni. Az DataSource osztály a fürtözési pont adatainak funkcióit biztosítja. Az adatok egyszerűen hozzáadhatók, eltávolíthatók és frissíthetők az DataSource osztálysal. Az alábbi kód bemutatja, hogyan hozhatók létre GeoJSON-adatok az Azure Térképek.

//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"
});

A létrehozás után adatforrások vehetők fel a térképre a map.sources sourceManager tulajdonságon keresztül. Az alábbi kód bemutatja, hogyan hozható létre és DataSource vehető fel a térképre.

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

Az alábbi kód a GeoJSON-adatok hozzáadásának különböző módjait mutatja be 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);

Tipp.

Tegyük fel, hogy felülírja az összes adatot egy DataSourceadott fájlban. Ha meghívja az akkori clearadd függvényeket, előfordulhat, hogy a térkép kétszer újra renderel, ami némi késést okozhat. Ehelyett használja a setShapes függvényt, amely eltávolítja és lecseréli az adatforrás összes adatát, és csak a térkép egyetlen újra renderelését aktiválja.

Vektor csempe forrása

A vektorcsempe-forrás leírja, hogyan lehet hozzáférni egy vektor csemperéteghez. Vektorcsempe-forrás példányosítása a VectorTileSource osztály használatával. A vektoros csemperétegek hasonlóak a csemperétegekhez, de nem azonosak. A csemperéteg egy raszterkép. A vektor csemperétegek tömörített fájlok, PBF formátumban. Ez a tömörített fájl vektortérképadatokat és egy vagy több réteget tartalmaz. A fájl az egyes rétegek stílusa alapján renderelhető és formázható az ügyfélen. A vektorcsempe adatai pontok, vonalak és sokszögek formájában tartalmaznak földrajzi jellemzőket. A vektoros csemperétegek használatának számos előnye van a raszteres csemperétegek helyett:

A vektorcsempe fájlmérete általában sokkal kisebb, mint egy egyenértékű rasztercsempe. Így kevesebb sávszélességet használnak. Ez alacsonyabb késést, gyorsabb térképet és jobb felhasználói élményt jelent.
Mivel a vektorcsempék az ügyfélen jelennek meg, alkalmazkodnak a megjelenített eszköz felbontásához. Ennek eredményeképpen a renderelt térképek jobban definiáltnak tűnnek, kristálytiszta címkékkel.
A vektortérképek adatainak stílusának módosítása nem igényli az adatok ismételt letöltését, mivel az új stílus alkalmazható az ügyfélen. Ezzel szemben a raszter csemperéteg stílusának módosításához általában be kell tölteni a csempéket a kiszolgálóról, majd alkalmazni kell az új stílust.
Mivel az adatok vektoros formában érkeznek, kevesebb kiszolgálóoldali feldolgozás szükséges az adatok előkészítéséhez. Ennek eredményeképpen az újabb adatok gyorsabban elérhetővé tehetők.

Az Azure Térképek betartja a Mapbox Vektor csempe specifikációját, amely egy nyílt szabvány. Az Azure Térképek a következő vektorcsempe-szolgáltatásokat biztosítja a platform részeként:

Közúti csempék
Forgalmi incidensek
Forgalom
Az Azure Térképek Creator lehetővé teszi az egyéni vektorcsempék létrehozását és elérését a Render – Térképcsempe API használatával

Tipp.

Ha vektoros vagy raszteres képcsempéket használ az Azure Térképek renderelési szolgáltatásból a webes SDK-val, lecserélheti atlas.microsoft.com a helyőrzőt{azMapsDomain}. Ezt a helyőrzőt ugyanazzal a tartománnyal cseréli le, amelyet a térkép használ, és automatikusan hozzáfűzi ugyanazokat a hitelesítési adatokat is. Ez jelentősen leegyszerűsíti a renderelési szolgáltatással való hitelesítést a Microsoft Entra-hitelesítés használatakor.

Ha egy vektorcsempe-forrás adatait szeretné megjeleníteni a térképen, csatlakoztassa a forrást az adatmegjelenítési rétegek egyikéhez. A vektorforrást használó összes rétegnek meg kell adnia egy sourceLayer értéket a beállításokban. Az alábbi kód vektorcsempe-forrásként tölti be az Azure Térképek forgalomvektor-csempét, majd egy vonalréteggel jeleníti meg a térképen. Ez a vektorcsempe-forrás egyetlen adatkészlettel rendelkezik a "Traffic flow" nevű forrásrétegben. Az adathalmaz soradatainak van egy tulajdonsága traffic_level , amelyet ebben a kódban használnak a szín kiválasztásához és a vonalak méretének skálázásához.

//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');

A vektorcsempe-forrásból származó adatok térképen való megjelenítésének teljes munkamintáját az Azure Térképek-minták Vektor csempevonal-rétegében tekintheti meg. A minta forráskódját lásd a Vektor csempevonal-réteg mintakódja című témakörben.

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

Adatforrás Csatlakozás rétegre

Az adatok renderelési rétegek használatával jelennek meg a térképen. Egy vagy több renderelési réteg egyetlen adatforrásra hivatkozhat. A következő renderelési rétegek adatforrást igényelnek:

Buborékréteg – a pontadatokat skálázott körökként jeleníti meg a térképen.
A szimbólumréteg ikonként vagy szövegként jeleníti meg a pontadatokat.
Hőtérkép réteg – pontadatokat jelenít meg sűrűségi hőtérképként.
Vonalréteg – vonal megjelenítése és a sokszögek körvonalának renderelése.
Sokszögréteg – a sokszög területét egyszínű vagy képmintával tölti ki.

Az alábbi kód bemutatja, hogyan hozhat létre adatforrást, vehet fel a térképre, és hogyan csatlakoztathatja egy buborékréteghez. Ezután importálja a GeoJSON-pontadatokat egy távoli helyről az adatforrásba.

//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');

Vannak más renderelési rétegek, amelyek nem csatlakoznak ezekhez az adatforrásokhoz, de közvetlenül betöltik az adatokat renderelésre.

Képréteg – egyetlen képet fed át a térkép tetején, és a sarkait meghatározott koordináták készletéhez köti.
Csemperéteg – a térkép tetején egy raszter csemperéteget képez.

Egy adatforrás több réteggel

Több réteg is csatlakoztatható egyetlen adatforráshoz. Számos különböző forgatókönyv létezik, amelyekben ez a lehetőség hasznos. Vegyük például azt a forgatókönyvet, amelyben egy felhasználó sokszöget rajzol. Rendereljük és kitöltjük a sokszöget, miközben a felhasználó pontokat ad a térképhez. A sokszög tagolásához formázott vonal hozzáadása megkönnyíti a sokszög széleinek megjelenítését, ahogy a felhasználó rajzol. A sokszögben lévő egyéni helyzet kényelmes szerkesztéséhez minden pozícióhoz hozzáadhatunk egy fogópontot, például egy tűt vagy egy jelölőt.

Map showing multiple layers rendering data from a single data source

A legtöbb leképezési platformon sokszögobjektumra, vonalobjektumra és tűre van szükség a sokszög minden pozíciójához. A sokszög módosításakor manuálisan kell frissítenie a vonalat és a tűket, ami gyorsan összetetté válhat.

Az Azure Térképek csak egyetlen sokszögre van szüksége egy adatforrásban az alábbi kódban látható módon.

//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]);

Tipp.

Ha a függvény használatával rétegeket ad hozzá a map.layers.add térképhez, egy meglévő réteg azonosítója vagy példánya átadható második paraméterként. Ez azt jelentené, hogy a térkép beszúrja a meglévő réteg alá felvett új réteget. A rétegazonosítón kívül ez a módszer a következő értékeket is támogatja.