De ruimtelijke I/O-module van Azure Kaarten gebruiken

Artikel
08/28/2021
5 minuten om te lezen

De Azure Kaarten Web SDK biedt de ruimtelijke IO-module, 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:

Lees en schrijf algemene ruimtelijke gegevensbestanden. Ondersteunde bestandsindelingen zijn: KML-, KMZ-, GPX-, GeoRSS-, GML-, GeoJSON- en CSV-bestanden met kolommen met ruimtelijke informatie. Ondersteunt ook Well-Known Text (WKT).
Verbinding maken voor Open Geospatial Consortium (OGC)-services en integreren met Azure Kaarten web-SDK. Overlay Web Map Services (WMS) en Web Map Tile Services (WMTS)als lagen op de kaart .
Query's uitvoeren op gegevens in Web Feature Service (WFS).
Overlay van complexe gegevenssets die stijlinformatie bevatten endeze automatisch laten renderen met minimale code .
Gebruik high-speed XML en bestandslezer met scheidingstekens en schrijfklassen.

In deze handleiding leert u hoe u de ruimtelijke I/O-module kunt integreren en gebruiken in een webtoepassing.

Deze video biedt een overzicht van de ruimtelijke I/O-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 er vanuit een ander domein naar wordt verwezen. De ruimtelijke I/O-module neemt stappen om risico's te minimaliseren, maar de veiligste aanpak staat te weinig gegevens in uw toepassing toe.

Vereisten

Voordat u de ruimtelijke I/O-module kunt gebruiken, moet u een Azure Kaarten-account maken en de primaire abonnementssleutel voor uw account op te halen.

De ruimtelijke I/O-module installeren

U kunt de Azure Kaarten ruimtelijke I/O-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
```
Voeg vervolgens een verwijzing naar javaScript toe in het <head> element van het HTML-document:
```
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
```

De ruimtelijke IO-module gebruiken

Maak een nieuw HTML-bestand.

Laad de Azure Kaarten Web SDK en initialiseer het kaartbesturingselement. Zie de handleiding Kaarten azure-kaartbesturingselement voor meer informatie. Wanneer u klaar bent met deze stap, ziet uw HTML-bestand er als volgende 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/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>

Laad de ruimtelijke IO-module Kaarten Azure-omgeving. Gebruik voor deze oefening de CDN voor de ruimtelijke I/O Kaarten azure-module. Voeg de onderstaande verwijzing toe aan het <head> element van uw HTML-bestand:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Initialiseer datasource een en voeg de gegevensbron toe aan de kaart. Initialiseer layer een en voeg de gegevensbron toe aan de kaartlaag. Geef vervolgens zowel de gegevensbron als de laag weer. Voordat u omlaag scrolt om de volledige code in de volgende stap te zien, moet u nadenken over de beste plaatsen om de gegevensbron- en laagcodefragmenten te plaatsen. Voordat we de kaart programmatisch bewerken, moeten we wachten tot 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);
```

Als u alles samen gebruikt, moet uw HTML-code er uitzien als de volgende code. In dit voorbeeld wordt gedemonstreerd hoe u een XML-bestand uit een URL leest. Laad vervolgens de functiegegevens van het bestand en geef deze weer op de kaart.

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

Vergeet niet om te <Your Azure Maps Key> vervangen door uw primaire sleutel. Open het HTML-bestand en u ziet resultaten die vergelijkbaar zijn met de volgende afbeelding:

Volgende stappen

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

Een eenvoudige gegevenslaag toevoegen

Ruimtelijke gegevens lezen en schrijven

Een OGC-kaartlaag toevoegen

Verbinding maken met een WFS-service

Kernbewerkingen gebruiken

Details van ondersteunde gegevensindeling

Raadpleeg de documentatie over ruimtelijke IO Kaarten Azure-omgeving:

Azure Kaarten Spatial IO-pakket

De ruimtelijke I/O-module van Azure Kaarten gebruiken

Beoordeel uw ervaring

Vereisten

De ruimtelijke I/O-module installeren

De ruimtelijke IO-module gebruiken

Volgende stappen