Så här använder du Azure Kartor Spatial I/O-modulen

Artikel
08/29/2021
4 minuter för att läsa

Azure Kartor Web SDK tillhandahåller Spatial IO-modulen, som integrerar rumsliga data med Azure Kartor-webb-SDK med JavaScript eller TypeScript. De robusta funktionerna i den här modulen gör att utvecklare kan:

Läsa och skriva vanliga rumsliga datafiler. Filformat som stöds är: KML-, KMZ-, GPX-, GeoRSS-, GML-, GeoJSON- och CSV-filer som innehåller kolumner med rumslig information. Stöder även Well-Known Text (WKT).
Anslut till Open Geospatial Consortium (OGC) och integrera med Azure Kartor web SDK. Overlay Web Map Services (WMS) och Web Map Tile Services (WMTS) som skikt på kartan.
Fråga efter data i en Webbfunktionstjänst (WFS).
Överlägg komplexa datauppsättningar som innehåller formatinformation och få dem att återges automatiskt med minimal kod.
Utnyttja höghastighets-XML och avgränsade filläsare och skrivklasser.

I den här guiden lär du dig att integrera och använda Spatial IO-modulen i en webbapp.

Den här videon ger 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 vidta åtgärder för att minimera risker, men den säkraste metoden är att inte tillåta några sälla data i ditt program från början.

Förutsättningar

Innan du kan använda Spatial I/O-modulen måste du skapa ett Azure Kartor-konto och hämta den primära prenumerationsnyckeln för ditt konto.

Installera Spatial IO-modulen

Du kan läsa in Azure Kartor spatial I/O-modul med något av de två alternativen:

Den globalt värd-Azure CDN för Azure Kartor spatial I/O-modulen. För det här alternativet lägger du till en referens till JavaScript i <head> -elementet 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 finnas i din app. Det här paketet innehåller även TypeScript-definitioner. Använd följande kommando för att installera paketet för det här alternativet:
```
npm install azure-maps-spatial-io
```
Lägg sedan till en referens till JavaScript i <head> -elementet i HTML-dokumentet:
```
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
```

Använda modulen Spatial I/O

Skapa en ny HTML-fil.

Läs in Azure Kartor Web SDK och initiera kartkontrollen. Mer information finns i Kartor för Azure Kartor kartkontroll. 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 IE 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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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"></div>
</body>

</html>

Läs in Azure Kartor spatial I/O-modul. I den här övningen använder du CDN för Azure Kartor spatial I/O-modulen. Lägg till referensen nedan i <head> -elementet i HTML-filen:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Initiera en datasource och lägg till datakällan på kartan. Initiera en layer och 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 fundera på de bästa platserna för att placera kodfragment för datakälla och lager. 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);
```

Om du sätter ihop allt bör HTML-koden se ut som följande kod. Det här exemplet visar hur du läser en XML-fil från en URL. Läs sedan in och visa filens funktionsdata på kartan.

<!DOCTYPE html>
<html>

<head>
    <title>Spatial IO Module Example</title>

    <meta charset="utf-8">

    <!-- Ensures that IE 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/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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('superCoolKmlFile.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"></div>
</body>

</html>

Kom ihåg att <Your Azure Maps Key> ersätta med din primära nyckel. Öppna HTML-filen så ser du resultat som liknar följande bild:

Nästa steg

Den funktion som vi visade här är bara en av de många funktioner som är tillgängliga i modulen Spatial I/O. Läs guiderna nedan för att lära dig hur du använder andra funktioner i modulen Spatial I/O:

Lägga till ett enkelt datalager

Läsa och skriva rumsliga data

Lägga till ett OGC-kartskikt

Ansluta till en WFS-tjänst

Använda kärnåtgärder

Information om dataformat som stöds

Läs dokumentationen om Azure Kartor Spatial IO:

Azure Kartor Spatial IO-paket

Så här använder du Azure Kartor Spatial I/O-modulen

Betygsätta din upplevelse

Förutsättningar

Installera Spatial IO-modulen

Använda modulen Spatial I/O

Nästa steg