Partager via


Utiliser le module E/S spatiales Azure Maps

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 :

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

  1. Créez un fichier HTML.

  2. 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 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. 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>
    
  4. 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);
    
  5. À 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 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. 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 :

    Capture d’écran illustrant l’exemple de Données spatiales dans une carte.

É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 :

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