Använda Azure Maps Spatial IO-modulen
Azure Maps Spatial IO-modulen integrerar rumsliga data med Azure Maps Web SDK med hjälp av JavaScript eller TypeScript. Den här guiden visar hur du integrerar och använder Spatial IO-modulen i ett webbprogram.
Du kan använda de robusta funktionerna i den här modulen för att:
-
Läsa och skriva rumsliga data. Du kan använda filformat som innehåller:
- Keyhole Markup Language (KML).
- Komprimerad KML (KMZ).
- GPS Exchange Format (GPX).
- Geografisk riktigt enkel syndikering (GeoRSS).
- Geography Markup Language (GML).
- Geografisk JavaScript-objekt notation (GeoJSON).
- Välkänd text (WKT).
- Kommaavgränsade värden (CSV) när kolumner innehåller rumslig information.
- Anslut till OGC-tjänster (Open Geospatial Consortium) och integrera med Azure Maps Web SDK. Du kan också lägga över Web Map Services (WMS) och Web Map Tile Services (WMTS) som lager på kartan. Mer information finns i Lägga till ett kartskikt från Open Geospatial Consortium (OGC).
- Fråga efter data i en webbfunktionstjänst (WFS). Mer information finns i Ansluta till en WFS-tjänst.
- Överlägg komplexa datauppsättningar som innehåller formatinformation, som kan återges automatiskt. Mer information finns i Lägga till ett enkelt datalager.
- Använd höghastighets-XML och avgränsade filläsare och skrivarklasser. Mer information finns i Grundläggande I/O-åtgärder.
Följande video ger en översikt över Spatial IO-modulen i Azure Maps Web SDK.
Varning
Använd endast data och tjänster från en källa som du litar på, särskilt om data refereras från en annan domän. Spatial I/O-modulen vidtar åtgärder för att minimera risken, men du bör inte tillåta några farliga data i ditt program oavsett.
Förutsättningar
Installera Spatial I/O-modulen
Du kan läsa in Azure Maps Spatial IO-modulen med något av följande två alternativ:
Det första alternativet är att använda det globalt värdbaserade Azure-innehållsleveransnätverket för Azure Maps Spatial IO-modulen. Använd följande skripttagg i
<head>HTML-filens element för att lägga till referensen:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>Med det andra alternativet kan du läsa in källkoden för azure-maps-spatial-io lokalt och vara värd för den med din app. Det här paketet innehåller även TypeScript-definitioner. Använd följande kommando för att installera paketet:
npm install azure-maps-spatial-ioAnvänd en importdeklaration för att lägga till modulen i en källfil:
import * as spatial from "azure-maps-spatial-io";Mer information finns i Så här använder du Azure Maps kartkontroll npm-paketet.
Implementera Spatial IO-modulen
Skapa en ny HTML-fil.
Läs in Azure Maps Web SDK och initiera kartkontrollen. Mer information finns i kartkontrollguiden för Azure Maps. HTML-filen bör se ut så här:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensure that 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>Läs in Azure Maps Spatial IO-modulen och använd nätverket för innehållsleverans för Azure Maps Spatial IO-modulen. Lägg till följande referens till elementet i
<head>HTML-filen:<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>Initiera en datakälla och lägg till den på kartan.
Initiera ett enkelt datalager och lägg till datakällan i det.
Rendera datalagret.
Innan du rullar ned för att se den fullständiga koden i nästa steg ska du bestämma de bästa platserna för att placera kodfragmenten för datakällan och lagret. Vänta tills kartresurserna är klara innan du ändrar kartan programmatiskt.
var datasource, layer;Hitta de bästa platserna för att placera kodfragmenten.
//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);HTML-koden bör se ut så här. Exempelkoden visar hur du visar en XML-fils funktionsdata på en karta.
Kommentar
I det här exemplet används Route66Attractions.xml.
<!DOCTYPE html> <html> <head> <title>Spatial IO Module Example</title> <meta charset="utf-8"> <!-- Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version. --> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <!-- Ensure that 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>Kom ihåg att ersätta
<Your Azure Maps Key>med din prenumerationsnyckel. HTML-filen bör innehålla en bild som ser ut så här:
Relaterat innehåll
Den här artikeln beskriver bara en av de många funktioner som är tillgängliga i spatial I/O-modulen. Läs följande guider om du vill veta mer om andra: