De Azure Kaarten Spatial IO-module gebruiken

Artikel
10/18/2023

De Azure Kaarten Web SDK biedt de module Spatial IO, waarmee ruimtelijke gegevens worden geïntegreerd met de Azure Kaarten-web-SDK met behulp van JavaScript of TypeScript. Met de robuuste functies in deze module kunnen ontwikkelaars het volgende doen:

Ruimtelijke gegevens lezen en schrijven. Ondersteunde bestandsindelingen zijn: KML-, KMZ-, GPX-, GeoRSS-, GML-, GeoJSON- en CSV-bestanden met kolommen met ruimtelijke informatie. Ondersteunt ook bekende tekst (WKT).
Verbinding maken naar OGC-services (Geospatial Consortium) openen en integreren met Azure Kaarten web-SDK, en overlay Web Map Services (WMS) en WMTS (Web Map Tile Services) als lagen op de kaart. Zie Een kaartlaag toevoegen vanuit het Open Geospatial Consortium (OGC) voor meer informatie.
Query's uitvoeren op gegevens in een webfunctieservice (WFS). Zie Verbinding maken naar een WFS-service voor meer informatie.
Overlay van complexe gegevenssets die stijlgegevens bevatten en deze automatisch laten weergeven. Zie Een eenvoudige gegevenslaag toevoegen voor meer informatie.
Maak gebruik van snelle XML- en scheidingstekens voor bestandslezers en schrijfklassen. Zie Core IO-bewerkingen voor meer informatie.

In deze handleiding ziet u hoe u de Spatial IO-module in een webtoepassing integreert en gebruikt.

Deze video biedt een overzicht van de Spatial IO-module in de Azure Kaarten Web SDK.

Waarschuwing

Gebruik alleen gegevens en services die afkomstig zijn van een bron die u vertrouwt, met name als u ernaar verwijst vanuit een ander domein. De ruimtelijke IO-module neemt stappen om risico's te minimaliseren, maar de veiligste benadering is dat gevaarlijke gegevens niet in uw toepassing kunnen beginnen.

Vereisten

Een Azure Kaarten-account
Een abonnementssleutel

De ruimtelijke IO-module installeren

U kunt de Azure Kaarten ruimtelijke IO-module laden met behulp van een van de twee opties:

De wereldwijd gehoste Azure CDN voor de Azure Kaarten ruimtelijke IO-module. Voor deze optie voegt u een verwijzing naar JavaScript toe in het <head> element van het HTML-bestand.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
De broncode voor azure-maps-spatial-io kan lokaal worden geladen en vervolgens worden gehost met uw app. Dit pakket bevat ook TypeScript-definities. Gebruik voor deze optie de volgende opdracht om het pakket te installeren:
```
npm install azure-maps-spatial-io
```
Gebruik vervolgens een importdeclaratie om de module toe te voegen aan een bronbestand:
```
import * as spatial from "azure-maps-spatial-io";
```
Zie Het npm-pakket voor kaartbeheer van Azure Kaarten gebruiken voor meer informatie.

De ruimtelijke IO-module gebruiken

Maak een nieuw HTML-bestand.

Laad de Azure Kaarten Web SDK en initialiseer het kaartbeheer. Zie de handleiding voor kaartbeheer van Azure Kaarten voor de details. Zodra u klaar bent met deze stap, ziet uw HTML-bestand er als volgt uit:

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

Laad de azure Kaarten ruimtelijke IO-module. Voor deze oefening gebruikt u de CDN voor de Azure Kaarten ruimtelijke IO-module. Voeg de volgende verwijzing toe naar het <head> element van uw HTML-bestand:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Initialiseer een datasourceen voeg de gegevensbron toe aan de kaart. Initialiseer een layeren voeg de gegevensbron toe aan de kaartlaag. Geef vervolgens zowel de gegevensbron als de laag weer. Voordat u omlaag schuift om de volledige code in de volgende stap te zien, moet u nadenken over de beste plaatsen om de codefragmenten van de gegevensbron en laag te plaatsen. Denk eraan dat we, voordat we de kaart programmatisch bewerken, moeten we wachten totdat de kaartresource gereed is.
```
var datasource, layer;
```
en
```
//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);
```

Uw HTML-code moet er nu uitzien als de volgende code. In dit voorbeeld ziet u hoe u de functiegegevens van een XML-bestand op een kaart weergeeft.

Notitie

In dit voorbeeld wordt Route66Attractions.xml gebruikt.

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

Vergeet niet om deze te vervangen door <Your Azure Maps Key> uw abonnementssleutel. U ziet resultaten die vergelijkbaar zijn met de volgende afbeelding in uw HTML-bestand:

Volgende stappen

De functie die we hebben gedemonstreerd, is slechts een van de vele functies die beschikbaar zijn in de ruimtelijke IO-module. Lees de volgende handleidingen voor meer informatie over het gebruik van andere functies in de ruimtelijke IO-module:

Een eenvoudige gegevenslaag toevoegen

Ruimtelijke gegevens lezen en schrijven

Een OGC-kaartlaag toevoegen

Verbinding maken naar een WFS-service

Basisbewerkingen gebruiken

Details van ondersteunde gegevensindeling

Raadpleeg de documentatie voor Azure Kaarten Spatial IO:

Azure Kaarten Spatial IO-pakket

De Azure Kaarten Spatial IO-module gebruiken

Vereisten

De ruimtelijke IO-module installeren

De ruimtelijke IO-module gebruiken

Volgende stappen

Aanvullende resources