Tutoriel : Comment afficher les directions de route à l’aide du service Route Azure Maps et du contrôle de carte

  • Article

Ce tutoriel vous montre comment utiliser l’API de service Route Azure Maps et contrôle de route pour afficher les directions de route du point de départ au point d’arrivée. Ce tutoriel montre comment :

  • Créer et afficher le contrôle de carte sur une page web.
  • Définir le rendu d’affichage de l’itinéraire en définissant des c ouches de symboles et des couches de lignes.
  • Créer des objets GeoJSON et les ajouter à la carte pour représenter les points de départ et d’arrivée.
  • Obtenir des directions de route à partir de points de départ et d’arrivée à l’aide de l’API Obtenir un itinéraire.

Consultez le didacticiel d’itinéraire dans GitHub pour le code source. Consultez Itinéraire vers une destination pour obtenir un exemple en direct.

Prérequis

Créer et afficher le contrôle de carte

Les étapes suivantes vous montrent comment créer et afficher le contrôle de carte dans une page web.

  1. Sur votre ordinateur local, créez un fichier et nommez-le MapRoute.html.

  2. Ajoutez le code HTML suivant au fichier :

    <!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <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.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

    Voici quelques éléments à connaître sur le HTML ci-dessus :

    • L’en-tête HTML inclut des fichiers de ressources CSS et JavaScript hébergés par la bibliothèque Azure Map Control.
    • L’événement onload dans le corps de la page appelle la fonction GetMap lorsque le corps de la page est chargé.
    • La fonction GetMap contient le code JavaScript inclus qui est utilisé pour accéder aux API Azure Maps. Elle est ajoutée à l’étape suivante.

  3. Ensuite, ajoutez le code JavaScript suivant à la fonction GetMap, juste en dessous du code ajouté à la dernière étape. Ce code crée un contrôle de carte et l’initialise à l’aide des clés d’abonnement Azure Maps que vous fournissez. Veillez à remplacer la chaîne <Your Azure Maps Key> par la clé primaire Azure Maps que vous avez copiée à partir de votre compte Maps.

    //Instantiate a map object
var map = new atlas.Map('myMap', {
    // Replace <Your Azure Maps Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '<Your Azure Maps Key>'
    }
});

    Voici quelques éléments à connaître sur le JavaScript ci-dessus :

    • Il s’agit du cœur de la fonction GetMap, qui initialise l’API Map Control pour votre clé de compte Azure Maps.
    • atlas est l’espace de noms qui contient l’API Azure Maps et les composants visuels associés.
    • atlas.Map fournit le contrôle d’une carte web visuelle et interactive.

  4. Enregistrez vos modifications du fichier, puis ouvrez la page HTML dans un navigateur. La carte illustrée est la plus basique que vous pouvez créer en appelant atlas.Map à l’aide de votre clé d’abonnement au compte Azure Maps.

    Capture d’écran présentant la carte la plus basique que vous pouvez créer en appelant `atlas.Map` à l’aide de votre clé de compte Azure Maps.

Définir le rendu de l’affichage de l’itinéraire

Dans ce tutoriel, l’itinéraire est rendu à l’aide d’un calque de ligne. Les points de départ et d’arrivée seront affichés à l’aide d’une couche de symboles. Pour plus d’informations sur l’ajout de couches de lignes, consultez Ajouter une couche de lignes à une carte. Pour en savoir plus sur les couches de symboles, consultez Ajouter une couche de symboles à une carte.

  1. Dans la fonction GetMap, après l’initialisation de la carte, ajoutez le code JavaScript suivant.

    //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 layer for rendering the route lines and have it render under the map labels.
    map.layers.add(new atlas.layer.LineLayer(datasource, null, {
        strokeColor: '#2272B9',
        strokeWidth: 5,
        lineJoin: 'round',
        lineCap: 'round'
    }), 'labels');

    //Add a layer for rendering point data.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: ['get', 'icon'],
            allowOverlap: true
       },
        textOptions: {
            textField: ['get', 'title'],
            offset: [0, 1.2]
        },
        filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
    }));
});

    Voici quelques éléments à connaître sur le JavaScript ci-dessus :

    • Ce code implémente le gestionnaire d’événements du contrôle de carte ready. Le reste du code de ce tutoriel est placé dans le gestionnaire d’événements ready.
    • Dans le gestionnaire d’événements ready du contrôle de carte, une source de données est créée pour stocker l’itinéraire du point de départ au point d’arrivée.
    • Pour définir le rendu de la ligne d’itinéraire, une couche de lignes est créée et jointe à la source de données. Pour vous assurer que la ligne d’itinéraire ne couvre pas les étiquettes de route, transmettez un deuxième paramètre avec la valeur de 'labels'.

    Ensuite, une couche de symbole est créée et jointe à la source de données. Ce calque spécifie la manière dont les points de départ et d’arrivée sont affichés. Les expressions ont été ajoutées pour récupérer les informations d’image d’icône et d’étiquette de texte des propriétés de chaque objet de point. Pour en savoir plus sur les expressions, consultez Expressions de style basé sur les données.

  2. Ensuite, définissez Microsoft comme point de départ, et une station-service de Seattle comme point de destination. Les points de départ et d’arrivée sont créés en ajoutant le code suivant dans le gestionnaire d’événements ready du contrôle de carte :

    //Create the GeoJSON objects which represent the start and end points of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
    title: "Redmond",
    icon: "pin-blue"
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
    title: "Seattle",
    icon: "pin-round-blue"
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 80
});

    Voici quelques éléments à connaître sur le JavaScript ci-dessus :

    • Ce code crée deux objets point GeoJSON pour représenter des points de départ et d’arrivée qui sont ensuite ajoutés à la source de données.
    • Le dernier bloc de code définit la vue de l’appareil photo sur la base de la latitude et de la longitude des points de départ et d’arrivée.
    • Les points de départ et d’arrivée sont ajoutés à la source de données.
    • Le rectangle englobant des points de départ et d’arrivée est calculé à l’aide de la fonction atlas.data.BoundingBox.fromData. Ce rectangle englobant est utilisé pour définir la vue de caméra de la carte sur l’itinéraire entier à l’aide de la fonction map.setCamera.
    • Une marge intérieure est ajoutée pour compenser les dimensions en pixels des icônes de symbole.

    Pour plus d’informations sur la propriété setCamera du contrôle de carte, consultez la propriété setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions).

  3. EnregistrezMapRoute.html et actualisez votre navigateur. La carte est maintenant centrée sur Seattle. La punaise bleue marque le point de départ. La punaise bleue ronde marque le point d’arrivée.

    Capture d’écran montrant une carte avec un itinéraire où une punaise bleue marque le point de départ de Microsoft (à Redmond, Washington) et où une punaise bleue ronde marque le point d’arrivée à une station-essence à Seattle.

Get Route Directions (Obtenir des directions)

Cette section montre comment utiliser l’API Obtenir des directions Azure Maps pour obtenir des directions d’un point à un autre et l’heure d’arrivée estimée.

Conseil

Le service Route Azure Maps fournit des API afin de planifier des itinéraires basés sur différents types d’itinéraires, par exemple le plus rapide, le plus court, le plus économique ou le plus intéressant en fonction de la distance, des conditions de circulation et du mode de transport utilisé. Il permet également aux utilisateurs de planifier des itinéraires futurs en fonction de l’historique des conditions de circulation. Les utilisateurs peuvent voir la prédiction des durées d’itinéraire pour un moment donné. Pour plus d’informations, consultez l’API Obtenir les itinéraires.

  1. Dans la fonction GetMap, à l’intérieur du gestionnaire d’événements ready du contrôle, ajoutez le code suivant au code JavaScript.

    var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });
    //Add route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

    Voici quelques éléments à connaître sur le JavaScript ci-dessus :

    • Ce code construit l’itinéraire du point d’arrivée au point de départ.
    • L’url interroge l’API de service Route Azure Maps afin de calculer des itinéraires.
    • Un tableau de coordonnées est ensuite extrait de la réponse et ajouté à la source de données.

  2. Enregistrez le fichier MapRoute.html et actualisez votre navigateur web. La carte doit maintenant afficher l’itinéraire du point de départ au point d’arrivée.

    Capture d’écran montrant une carte avec le service Route et Azure Map Control.

Étapes suivantes

Le didacticiel suivant vous montre comment créer une requête d’itinéraire avec des restrictions comme le mode de déplacement ou le type de chargement. Vous pouvez ensuite afficher plusieurs itinéraires sur la même carte.

Rechercher des itinéraires pour différents modes de déplacements