Adatforrás létrehozása

Az Azure Maps 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 Mapsben.

//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 collection, 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);

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 Maps betartja a Mapbox Vector Tile specifikációját, amely egy nyílt szabvány. Az Azure Maps a következő vektorcsempe-szolgáltatásokat biztosítja a platform részeként:

• Közúti csempék
• Forgalmi incidensek
• Forgalom
• Az Azure Maps 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

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 Maps 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áért tekintse meg a Vektor csempe vonalréteget az Azure Maps-mintákban. A minta forráskódját lásd a Vektor csempevonal-réteg mintakódja című témakörben.

Adatforrás csatlakoztatása egy réteghez

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.

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 Maps esetében mindössze egyetlen sokszögre van szüksége egy adatforrásban, ahogy az az alábbi kódban is látható.

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

Következő lépések

További információ a cikkben használt osztályokról és módszerekről:

További kódmintákat a térképekhez a következő cikkekben talál: