Utiliser le module E/S spatiales Azure Maps

Article
10/23/2023

Le kit de développement logiciel (SDK) web Azure Maps fournit le module E/S spatiales, qui intègre les données spatiales au kit de développement logiciel (SDK) web Azure Maps à l’aide de JavaScript ou TypeScript. Les puissantes fonctionnalités de ce module permettent aux développeurs d’effectuer les opérations suivantes :

Lisez et écrivez des données spatiales. Les formats de fichiers pris en charge sont les suivants : Fichiers KML, KMZ, GPX, GeoRSS, GML, GeoJSON et CSV contenant des colonnes avec des informations spatiales. Prend également en charge le texte connu (WKT).
Connectez-vous aux services OGC (Open Geospatial Consortium) et intégrez-les au SDK web Azure Maps. Superposez les services WMS (Web Map Services) et WMTS (Web Map Tile Services) en tant que couches sur la carte. Pour plus d’informations, consultez Ajouter une couche de carte à partir de l’OGC (Open Geospatial Consortium).
Interrogez les données dans un service WFS (Web Feature Service). Pour plus d’informations, consultez Se connecter à un service WFS.
Superposez les jeux de données complexes contenant des informations de style et affichez-les automatiquement. Pour plus d’informations, consultez Ajouter une couche de données simple.
Tirez parti des classes de lecture et d’écriture des fichiers XML et délimités. Pour plus d’informations, consultez Opérations d’E/S principales.

Ce guide explique comment intégrer et utiliser le module d’E/S spatiales dans une application web.

Cette vidéo fournit une vue d’ensemble du module E/S spatiales dans le Kit de développement logiciel (SDK) web Azure Maps.

Avertissement

Utilisez uniquement des données et des services qui proviennent d’une source de confiance, en particulier si vous la référencez à partir d’un autre domaine. Le module d’E/S spatiales prend des mesures pour réduire les risques, mais l’approche la plus sûre n’autorise pas les données dangereuses dans votre application en premier lieu.

Prérequis

Installation du module E/S spatiales

Vous pouvez charger le module E/S spatiales Azure Maps à l’aide de l'une des deux options suivantes :

Azure CDN hébergé globalement pour le module E/S spatiales Azure Maps. Pour cette option, vous ajoutez une référence au code JavaScript dans l’élément <head> du fichier HTML.
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Le code source pour azure-maps-spatial-io peut être chargé localement, puis hébergé avec votre application. Ce package inclut aussi des définitions de TypeScript. Pour cette option, utilisez la commande suivante afin d'installer le package :
```
npm install azure-maps-spatial-io
```
Ensuite, utilisez une déclaration d’importation pour ajouter le module dans un fichier source :
```
import * as spatial from "azure-maps-spatial-io";
```
Pour en savoir plus, consultez la section Guide pratique d’utilisation du package npm de contrôle de carte Azure Maps.

Utilisation du module E/S spatiales

Créez un fichier HTML.

Chargez le kit de développement logiciel (SDK) web Azure Maps et initialisez le contrôle de carte. Pour plus d’informations, consultez le guide Contrôle de carte Azure Maps. Au terme de cette étape, votre fichier HTML devrait se présenter comme suit :

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

Chargez le module E/S spatiales Azure Maps. Dans le cadre de cet exercice, utilisez le CDN pour le module E/S spatiales Azure Maps. Ajoutez la référence suivante à l’élément <head> de votre fichier HTML :
```
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
```
Initialisez un datasource et ajoutez la source de données à la carte. Initialisez un layer et ajoutez la source de données à la couche. Affichez ensuite la source de données et la couche. Avant de faire défiler vers le haut pour voir le code complet à l’étape suivante, réfléchissez aux meilleurs emplacements où placer les extraits de code de source de données et de couche. Pour rappel, avant de manipuler la carte par programmation, nous devons attendre que la ressource de carte soit prête.
```
var datasource, layer;
```
and
```
//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);
```

À présent, votre code HTML doit ressembler au suivant. Cet exemple montre comment afficher les données de fonctionnalités d’un fichier XML sur une carte.

Remarque

Cet exemple utilise Route66Attractions.xml.

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

N’oubliez pas de remplacer <Your Azure Maps Key> par votre clé d’abonnement. Vous devriez voir des résultats semblables à l’image suivante dans votre fichier HTML :

Étapes suivantes

La fonctionnalité présentée n’est qu’une des nombreuses fonctionnalités disponibles dans le module d’E/S spatiales. Lisez les guides suivants pour apprendre à utiliser d’autres fonctionnalités dans le module d’E/S spatiales :

Ajouter une couche de données simple

Lire et écrire des données spatiales

Ajouter une couche OGC

Se connecter à un service WFS

Exploiter les opérations de base

Détails sur les formats de données pris en charge

Reportez-vous à la documentation E/S spatiales Azure Maps :

Package E/S spatiales Azure Maps

Utiliser le module E/S spatiales Azure Maps

Prérequis

Installation du module E/S spatiales

Utilisation du module E/S spatiales

Étapes suivantes

Ressources supplémentaires