Verwenden des Spatial IO-Moduls von Azure Maps

Artikel
02/27/2025

Das Spatial IO-Modul von Azure Maps integriert mithilfe von JavaScript oder TypeScript räumliche Daten in das Azure Maps Web SDK. In diesem Leitfaden wird veranschaulicht, wie Sie das Modul Spatial IO in eine Webanwendung integrieren und verwenden können.

Sie können die stabilen Features in diesem Modul für Folgendes verwenden:

Lesen und Schreiben räumlicher Daten Sie können z. B. folgende Dateiformate verwenden:
- Keyhole Markup Language (KML).
- Komprimierte KML (KMZ).
- GPS Exchange-Format (GPX).
- Geographic Really Simple Syndication (GeoRSS).
- Geography Markup Language (GML).
- Geographic JavaScript Object Notation (GeoJSON).
- Well-Known Text (WKT).
- Durch Trennzeichen getrennte Werte (Comma-Separated Values, CSV), wenn Spalten räumliche Informationen enthalten.
Stellen Sie eine Verbindung mit OGC-Diensten (Open Geospatial Consortium) her, und integrieren Sie sie in das Azure Maps Web SDK. Sie können auch Web Map Services (WMS) und Web Map Tile Services (WMTS) als Ebenen auf der Karte überlagern. Weitere Informationen finden Sie unter Hinzufügen einer Kartenebene über das Open Geospatial Consortium (OGC).
Abfragen von Daten in einem WFS-Dienst (Web Feature Service). Weitere Informationen finden Sie unter Herstellen einer Verbindung mit einem WFS-Dienst.
Überlagern Sie komplexe Datasets, die Stilinformationen enthalten, die automatisch gerendert werden können. Weitere Informationen finden Sie unter Hinzufügen einer einfachen Datenschicht.
Verwenden Sie sehr schnelles XML und Klassen zum Lesen und Schreiben von durch Trennzeichen getrennten Dateien. Weitere Informationen finden Sie unter Zentrale E/A-Vorgänge.

Das folgende Video bietet einen Überblick über das Spatial IO-Modul im Azure Maps Web SDK.

Warnung

Verwenden Sie Daten und Dienste nur aus einer Quelle, der Sie vertrauen, dies gilt insbesondere, wenn auf die Daten aus einer anderen Domäne verwiesen wird. Das Spatial IO-Modul unternimmt Schritte, um Risiken zu minimieren. Sie sollten jedoch unabhängig davon keine gefährlichen Daten in Ihrer Anwendung zulassen.

Voraussetzungen

Ein Azure Maps-Konto
Ein Abonnementschlüssel

Installieren des Spatial IO-Moduls

Sie können das Spatial IO-Modul von Azure Maps mithilfe einer der beiden folgenden Optionen laden:

Die erste Option besteht darin, das global gehostete Azure Content Delivery Network für das Spatial IO-Modul von Azure Maps zu verwenden. Verwenden Sie das folgende Skripttag im <head>-Element der HTML-Datei, um den Verweis hinzuzufügen:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Mit der zweiten Option können Sie den Quellcode für azure-maps-spatial-io lokal laden und mit Ihrer App hosten. Dieses Paket enthält außerdem TypeScript-Definitionen. Verwenden Sie folgenden Befehl, um das -Paket zu installieren:
```
npm install azure-maps-spatial-io
```
Verwenden Sie eine Importdeklaration, um das Modul zu einer Quelldatei hinzuzufügen:
```
import * as spatial from "azure-maps-spatial-io";
```
Weitere Informationen finden Sie unter So verwenden Sie das npm-Paket für das Azure Maps-Kartensteuerelement.

Implementieren des Spatial IO-Moduls

Erstellen Sie eine neue HTML-Datei.

Laden Sie das Azure Maps Web SDK, und initialisieren Sie das Kartensteuerelement. Ausführliche Informationen finden Sie in der Anleitung zu Azure Maps-Kartensteuerelementen. Ihre HTML-Datei sollte wie folgt aussehen:

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

Laden Sie das Spatial IO-Modul von Azure Maps, und verwenden Sie das Content Delivery Network für das Spatial IO-Modul von Azure Maps. Fügen Sie dem <head>-Element Ihrer HTML-Datei den folgenden Verweis hinzu:
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Initialisieren Sie eine Datenquelle, und fügen Sie sie der Karte hinzu.
Initialisieren Sie eine einfache Datenebene, und fügen Sie ihr die Datenquelle hinzu.
Rendern Sie die Datenebene.
Bevor Sie nach unten scrollen, um im nächsten Schritt den vollständigen Code einzusehen, bestimmen Sie die beste Stelle für die Codeausschnitte für Datenquelle und -ebene. Warten Sie, bis die Kartenressourcen bereit sind, bevor Sie die Karte programmgesteuert bearbeiten.
```
var datasource, layer;
```
Suchen Sie die besten Stellen zum Einfügen der Codeausschnitte.
```
//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);
```

Ihr HTML-Code sollte wie folgt aussehen. Der Beispielcode zeigt, wie Sie die Featuredaten einer XML-Datei auf einer Karte anzeigen.

Hinweis

In diesem Beispiel wird Route66Attractions.xml verwendet.

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

Vergessen Sie nicht, <Your Azure Maps Key> durch Ihren Abonnementschlüssel zu ersetzen. Ihre HTML-Datei sollte ein Bild enthalten, das wie folgt aussieht:

In diesem Artikel wird nur eines der zahlreichen Features beschrieben, die im Spatial IO-Modul verfügbar sind. Wenn Sie mehr über weitere erfahren möchten, lesen Sie die folgenden Anleitungen:

Teilen über

Verwenden des Spatial IO-Moduls von Azure Maps

Voraussetzungen

Installieren des Spatial IO-Moduls

Implementieren des Spatial IO-Moduls

Feedback

Zusätzliche Ressourcen

Teilen über

Verwenden des Spatial IO-Moduls von Azure Maps

Voraussetzungen

Installieren des Spatial IO-Moduls

Implementieren des Spatial IO-Moduls

Zugehöriger Inhalt

Feedback

Zusätzliche Ressourcen