De azure Maps Spatial IO-module gebruiken

Artikel
02/25/2025

De Azure Maps Spatial IO-module integreert ruimtelijke gegevens met de Azure Maps Web SDK met behulp van JavaScript of TypeScript. In deze handleiding ziet u hoe u de Spatial IO-module in een webtoepassing integreert en gebruikt.

U kunt de robuuste functies in deze module gebruiken om het volgende te doen:

Ruimtelijke gegevens lezen en schrijven. U kunt bestandsindelingen gebruiken die het volgende omvatten:
- Keyhole Markup Language (KML).
- Gecomprimeerde KML (KMZ).
- GPS Exchange Format (GPX).
- Geographic Really Simple Syndication (GeoRSS).
- Geography Markup Language (GML).
- Geografische JavaScript Object Notation (GeoJSON).
- Bekende tekst (WKT).
- Door komma's gescheiden waarden (CSV) wanneer kolommen ruimtelijke informatie bevatten.
Maak verbinding met Open Geospatial Consortium-services (OGC) en integreer met de Azure Maps Web SDK. U kunt ook WMS (Web Map Services) en WMTS (Web Map Tile Services) overlayen 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 met een WFS-service voor meer informatie.
Overlay van complexe gegevenssets die stijlgegevens bevatten, die automatisch kunnen worden weergegeven. Zie Een eenvoudige gegevenslaag toevoegen voor meer informatie.
Gebruik snelle XML- en scheidingstekens voor bestandslezers en schrijfklassen. Zie Core IO-bewerkingen voor meer informatie.

De volgende video biedt een overzicht van de Spatial IO-module in de Azure Maps Web SDK.

Waarschuwing

Gebruik alleen gegevens en services uit een bron die u vertrouwt, met name als er wordt verwezen naar de gegevens uit een ander domein. De Spatial IO-module voert stappen uit om het risico te minimaliseren, maar u mag geen gevaarlijke gegevens in uw toepassing toestaan, ongeacht.

Vereisten

Een Azure Maps-account
Een abonnementssleutel

De ruimtelijke IO-module installeren

U kunt de Azure Maps Spatial IO-module laden met behulp van een van de volgende twee opties:

De eerste optie is om het wereldwijd gehoste Azure-netwerk voor contentlevering te gebruiken voor de Ruimtelijke IO-module van Azure Maps. Gebruik de volgende scripttag in het element van het <head> HTML-bestand om de verwijzing toe te voegen:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Met de tweede optie kunt u de broncode voor azure-maps-spatial-io lokaal laden en deze hosten met uw app. Dit pakket bevat ook TypeScript-definities. Gebruik de volgende opdracht om het pakket te installeren:
```
npm install azure-maps-spatial-io
```
Gebruik 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 in Azure Maps gebruiken voor meer informatie.

De ruimtelijke IO-module implementeren

Maak een nieuw HTML-bestand.

Laad de Azure Maps Web SDK en initialiseer het kaartbeheer. Zie de handleiding voor kaartbeheer van Azure Maps voor meer informatie. Uw HTML-bestand moet er als volgt uitzien:

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

Laad de Ruimtelijke IO-module van Azure Maps en gebruik het netwerk voor contentlevering voor de Ruimtelijke IO-module van Azure Maps. 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 gegevensbron en voeg deze toe aan de kaart.
Initialiseer een eenvoudige gegevenslaag en voeg de gegevensbron eraan toe.
Geef de gegevenslaag weer.
Voordat u omlaag schuift om de volledige code in de volgende stap te zien, bepaalt u de beste plaatsen om de codefragmenten van de gegevensbron en laag te plaatsen. Wacht totdat de kaartbronnen klaar zijn voordat u de kaart programmatisch bewerkt.
```
var datasource, layer;
```
Zoek de beste plaatsen om de codefragmenten te plaatsen.
```
//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 als volgt uitzien. In de voorbeeldcode 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">

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

Vergeet niet om deze te vervangen door <Your Azure Maps Key> uw abonnementssleutel. Uw HTML-bestand moet een afbeelding bevatten die er als volgt uitziet:

In dit artikel wordt slechts een van de vele functies beschreven die beschikbaar zijn in de module Spatial IO. Lees de volgende handleidingen voor meer informatie over anderen:

Share via

De azure Maps Spatial IO-module gebruiken

Vereisten

De ruimtelijke IO-module installeren

De ruimtelijke IO-module implementeren

Feedback

Aanvullende resources

Share via

De azure Maps Spatial IO-module gebruiken

Vereisten

De ruimtelijke IO-module installeren

De ruimtelijke IO-module implementeren

Gerelateerde inhoud

Feedback

Aanvullende resources