Så här använder du Modulen Azure Kartor Spatial IO

Artikel
10/18/2023

Azure Kartor Web SDK tillhandahåller Spatial IO-modulen, som integrerar rumsliga data med Azure Kartor webb-SDK med hjälp av JavaScript eller TypeScript. Med de robusta funktionerna i den här modulen kan utvecklare:

Läsa och skriva rumsliga data. Filformat som stöds är: KML-, KMZ-, GPX-, GeoRSS-, GML-, GeoJSON- och CSV-filer som innehåller kolumner med rumslig information. Stöder även välkänd text (WKT).
Anslut öppna OGC-tjänster (Geospatial Consortium) och integrera med Azure Kartor web-SDK och lägga över Web Map Services (WMS) och Web Map Tile Services (WMTS) som skikt 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 Anslut till en WFS-tjänst.
Överlägg komplexa datauppsättningar som innehåller formatinformation och som gör att de å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.

Den här guiden visar hur du integrerar och använder Spatial IO-modulen i ett webbprogram.

Den här videon innehåller en översikt över Spatial IO-modulen i Azure Kartor Web SDK.

Varning

Använd endast data och tjänster som kommer från en källa som du litar på, särskilt om du refererar till dem från en annan domän. Den rumsliga I/O-modulen vidtar åtgärder för att minimera risken, men den säkraste metoden är inte heller att tillåta några farliga data i ditt program att börja med.

Förutsättningar

Ett Azure Kartor-konto
En prenumerationsnyckel

Installera Spatial IO-modulen

Du kan läsa in Modulen För rumslig I/O i Azure Kartor med något av de två alternativen:

Den globalt värdbaserade Azure CDN för Modulen Azure Kartor spatial IO. För det här alternativet lägger du till en referens till JavaScript i -elementet <head> i HTML-filen.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Källkoden för azure-maps-spatial-io kan läsas in lokalt och sedan hanteras med din app. Det här paketet innehåller även TypeScript-definitioner. För det här alternativet använder du följande kommando för att installera paketet:
```
npm install azure-maps-spatial-io
```
Använd sedan 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 Använda Azure Kartor map control npm-paketet.

Använda spatial I/O-modulen

Skapa en ny HTML-fil.

Läs in Azure Kartor Web SDK och initiera kartkontrollen. Mer information finns i översiktsguiden för Azure Kartor. När du är klar med det här steget bör HTML-filen se ut så här:

<!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>

Läs in Modulen För rumslig I/O i Azure Kartor. I den här övningen använder du CDN för Modulen Azure Kartor spatial I/O. 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 datasourceoch lägg till datakällan på kartan. Initiera en layeroch lägg till datakällan i kartskiktet. Rendera sedan både datakällan och lagret. Innan du rullar ned för att se den fullständiga koden i nästa steg bör du tänka på de bästa platserna för att placera kodfragmenten för datakällan och lagret. Kom ihåg att innan vi programmatiskt manipulerar kartan bör vi vänta tills kartresursen är klar.
```
var datasource, layer;
```
och
```
//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 nu se ut som följande kod. Det här exemplet 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">

    <!-- 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>

Kom ihåg att ersätta <Your Azure Maps Key> med din prenumerationsnyckel. Du bör se resultat som liknar följande bild i HTML-filen:

Nästa steg

Funktionen som vi visade är bara en av de många funktioner som är tillgängliga i Spatial IO-modulen. Läs följande guider för att lära dig hur du använder andra funktioner i modulen Spatial IO:

Lägga till ett enkelt datalager

Läsa och skriva rumsliga data

Lägga till ett OGC-kartskikt

Anslut till en WFS-tjänst

Utnyttja kärnåtgärder

Information om dataformat som stöds

Se dokumentationen om Rumslig I/O i Azure Kartor:

Azure Kartor Spatial IO-paket

Dela via

Så här använder du Modulen Azure Kartor Spatial IO

Förutsättningar

Installera Spatial IO-modulen

Använda spatial I/O-modulen

Nästa steg

Feedback

Ytterligare resurser