Az Azure Maps térbeli IO-moduljának használata
Az Azure Maps Web SDK biztosítja a térbeli IO-modult, amely JavaScript vagy TypeScript használatával integrálja a térbeli adatokat az Azure Maps webes SDK-val. A modul robusztus funkciói lehetővé teszik a fejlesztők számára a következők használatát:
- Térbeli adatok olvasása és írása. A támogatott fájlformátumok a következők: KML, KMZ, GPX, GeoRSS, GML, GeoJSON és CSV fájlok, amelyek térbeli információkat tartalmazó oszlopokat tartalmaznak. Emellett támogatja a jól ismert szöveget (WKT).
- Csatlakozzon az Open Geospatial Consortium (OGC) szolgáltatásokhoz, és integrálható az Azure Maps webes SDK-val, és a térkép rétegeiként fedje át a Web Map Servicest (WMS) és a Web Map Tile Servicest (WMTS). További információt az Open Geospatial Consortium (OGC) térképrétegének hozzáadása című témakörben talál.
- Adatok lekérdezése egy webszolgáltatásban (WFS). További információ: Csatlakozás WFS-szolgáltatáshoz.
- Összetett adathalmazok átfedése, amelyek stílusinformációkat tartalmaznak, és automatikusan renderelik őket. További információ: Egyszerű adatréteg hozzáadása.
- Nagy sebességű XML- és tagolt fájlolvasó- és íróosztályokat használhat. További információ: Core IO-műveletek.
Ez az útmutató bemutatja, hogyan integrálható és használható a térbeli IO-modul egy webalkalmazásban.
Ez a videó áttekintést nyújt az Azure Maps Web SDK térbeli I/O-modulról.
Figyelmeztetés
Csak megbízható forrásból származó adatokat és szolgáltatásokat használjon, különösen akkor, ha egy másik tartományból hivatkozik rá. A térbeli I/O-modul lépéseket tesz a kockázat minimalizálása érdekében, a legbiztonságosabb megközelítés azonban nem teszi lehetővé, hogy az alkalmazásba bármilyen veszélyes adat bekerüljön.
Előfeltételek
A Térbeli IO-modul telepítése
Az Azure Maps térbeli IO-modulját a következő két lehetőség egyikével töltheti be:
A globálisan üzemeltetett Azure CDN az Azure Maps térbeli IO-modulhoz. Ebben a beállításban a HTML-fájl elemében
<head>
a JavaScriptre mutató hivatkozást kell hozzáadnia.<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
Az azure-maps-spatial-io forráskódja helyileg tölthető be, majd üzemeltethető az alkalmazással. Ez a csomag TypeScript-definíciókat is tartalmaz. Ebben a beállításban a következő paranccsal telepítse a csomagot:
npm install azure-maps-spatial-io
Ezután egy importálási deklarációval adja hozzá a modult egy forrásfájlhoz:
import * as spatial from "azure-maps-spatial-io";
További információ: Az Azure Maps térképvezérlő npm-csomagjának használata.
A térbeli IO-modul használata
Hozzon létre egy új HTML-fájlt.
Töltse be az Azure Maps Web SDK-t, és inicializálja a térképvezérlőt. A részletekért tekintse meg az Azure Maps térképvezérlési útmutatójában. Ha végzett ezzel a lépéssel, a HTML-fájlnak így kell kinéznie:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensures the web page looks good on all screen sizes. --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Add references to the Azure Maps Map control JavaScript and CSS files. --> <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" /> <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script> <script type='text/javascript'> var map; function GetMap() { //Initialize a map instance. map = new atlas.Map('myMap', { view: 'Auto', //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps authOptions: { authType: 'subscriptionKey', subscriptionKey: '<Your Azure Maps Key>' } }); //Wait until the map resources are ready. map.events.add('ready', function() { // Write your code here to make sure it runs once the map resources are ready }); } </script> </head> <body onload="GetMap()"> <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> </body> </html>
Töltse be az Azure Maps térbeli IO-modult. Ehhez a gyakorlathoz használja a CDN-t az Azure Maps térbeli IO-modulhoz. Adja hozzá a következő hivatkozást a
<head>
HTML-fájl eleméhez:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
Inicializáljon egy
datasource
, és adja hozzá az adatforrást a térképhez. Inicializáljon egylayer
, és adja hozzá az adatforrást a leképezési réteghez. Ezután renderelje az adatforrást és a réteget is. Mielőtt legörget a teljes kód megtekintéséhez a következő lépésben, gondolja át az adatforrás- és rétegkódrészletek elhelyezésének legjobb helyét. Ne feledje, hogy mielőtt programozott módon módosítanánk a térképet, várnunk kell, amíg a térképerőforrás készen áll.var datasource, layer;
és
//Create a data source and add it to the map. datasource = new atlas.source.DataSource(); map.sources.add(datasource); //Add a simple data layer for rendering the data. layer = new atlas.layer.SimpleDataLayer(datasource); map.layers.add(layer);
A HTML-kódnak most az alábbi kódhoz hasonlóan kell kinéznie. Ez a minta bemutatja, hogyan jelenítheti meg egy XML-fájl funkcióadatait egy térképen.
Feljegyzés
Ez a példa Route66Attractions.xml használ.
<!DOCTYPE html> <html> <head> <title>Spatial IO Module Example</title> <meta charset="utf-8"> <!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensures the web page looks good on all screen sizes. --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Add references to the Azure Maps Map control JavaScript and CSS files. --> <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" /> <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.js"></script> <!-- Add reference to the Azure Maps Spatial IO module. --> <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script> <script type='text/javascript'> var map, datasource, layer; function GetMap() { //Initialize a map instance. map = new atlas.Map('myMap', { view: 'Auto', //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps authOptions: { authType: 'subscriptionKey', subscriptionKey: '<Your Azure Maps Key>' } }); //Wait until the map resources are ready. map.events.add('ready', function() { //Create a data source and add it to the map. datasource = new atlas.source.DataSource(); map.sources.add(datasource); //Add a simple data layer for rendering the data. layer = new atlas.layer.SimpleDataLayer(datasource); map.layers.add(layer); //Read an XML file from a URL or pass in a raw XML string. atlas.io.read('Route66Attractions.xml').then(r => { if (r) { //Add the feature data to the data source. datasource.add(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> </head> <body onload='GetMap()'> <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> </body> </html>
Ne felejtse el lecserélni
<Your Azure Maps Key>
az előfizetési kulcsát. A HTML-fájlban az alábbi képhez hasonló eredményeket kell látnia:
Következő lépések
Az általunk bemutatott funkció csak egy a térbeli IO-modulban elérhető számos funkció közül. Az alábbi útmutatókból megtudhatja, hogyan használhat más funkciókat a térbeli IO-modulban:
Tekintse meg az Azure Maps térbeli IO-dokumentációját: