Delen via


De Azure Maps Spatial IO-module gebruiken

De Azure Maps Web SDK biedt de Spatial IO-module, die ruimtelijke gegevens integreert met de Azure Maps-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).
  • Maak verbinding met Open Geospatial Consortium -services (OGC) en integreer met de Azure Maps-web-SDK en overlay Web Map Services (WMS) en Web Map Tile Services (WMTS) 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 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 Maps 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

De ruimtelijke IO-module installeren

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

  • De wereldwijd gehoste Azure CDN voor de ruimtelijke IO-module van Azure Maps. 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 in Azure Maps gebruiken voor meer informatie.

De ruimtelijke IO-module gebruiken

  1. Maak een nieuw HTML-bestand.

  2. Laad de Azure Maps Web SDK en initialiseer het kaartbeheer. Zie de handleiding voor kaartbeheer van Azure Maps 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 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>
    
  3. Laad de ruimtelijke IO-module van Azure Maps. Gebruik voor deze oefening de CDN 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>
    
  4. 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);
    
  5. 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 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>
    
  6. 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:

    Schermopname van het voorbeeld ruimtelijke gegevens in een kaart.

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:

Raadpleeg de azure Maps Spatial IO-documentatie: