Tutoriel : Rechercher et afficher des itinéraires pour différents modes de déplacement avec Azure Maps

Article
10/16/2024

Ce tutoriel illustre la façon d’utiliser le service Route et le Contrôle de carte d’Azure Maps pour afficher des itinéraires pour des véhicules privés et des véhicules commerciaux (camions) avec le type de chargement USHazmatClass2.

Dans ce tutoriel, vous allez apprendre à :

Créer et afficher le contrôle de carte sur une page web.
Afficher des données de trafic en temps réel sur une carte.
Demander et afficher des itinéraires pour véhicules privés et commerciaux sur une carte.

Prérequis

Notes

Pour plus d’informations sur l’authentification dans Azure Maps, voir Gérer l’authentification dans Azure Maps.

Créer une page web à l’aide de l’API Map Control

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

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

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 :

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 à l’API Azure Maps.

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 Subscription Key> par la clé d’abonnement 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 Subscription Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});
```
Voici quelques éléments à connaître sur le JavaScript :
- Ce code est le cœur de la fonction GetMap, qui initialise l’API Map Control pour votre 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.
Enregistrez le fichier et ouvrez-le dans votre navigateur. Le navigateur affiche une carte de base en appelant atlas.Map à l’aide de votre clé d’abonnement Azure Maps.

Afficher des données de trafic en temps réel sur une carte.

Dans la fonction GetMap, après l’initialisation de la carte, ajoutez le code JavaScript suivant. Ce code implémente le gestionnaire d’événements du contrôle de carte ready.
```
map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});
```
Voici quelques éléments à connaître sur le JavaScript :
- 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 de la carte, le paramètre de circulation sur la carte est défini sur relative, c’est-à-dire la vitesse de la route correspondant à un trafic fluide.
- Pour plus d’options de trafic, consultez TrafficOptions, interface.
Enregistrez le fichier MapTruckRoute.html et actualisez la page dans votre navigateur. Si vous effectuez un zoom sur une ville, par exemple Los Angeles, les rues sont affichées avec les données de circulation actuelles.

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

Dans ce didacticiel, deux itinéraires sont calculés sur la carte. Le premier itinéraire est calculé pour un véhicule privé (voiture). Le deuxième itinéraire est calculé pour un véhicule commercial (camion) afin de montrer la différence entre les résultats. Une fois la carte rendue, elle affiche une icône de symbole pour les points de départ et d’arrivée de l’itinéraire, et des formes géométriques de ligne d’itinéraire avec différentes couleurs pour chaque tracé d’itinéraire. 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.

Dans le gestionnaire d’événements du contrôle de carte ready, ajoutez le code suivant.
```
//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: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    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 :
- 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 départ jusqu’à l’arrivée.
- Des expressions sont utilisées pour récupérer la largeur et la couleur de ligne à partir des propriétés de la caractéristique de ligne d’itinéraire.
- 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. Des expressions sont 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.
Ensuite, définissez le point de départ sur une entreprise fictive de Seattle appelée Fabrikam, et le point d’arrivée sur un bâtiment Microsoft. Dans le gestionnaire d’événements du contrôle de carte ready, ajoutez le code suivant.
```
//Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

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

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});
```
À propos du JavaScript :
- 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, consultez la fonction setCamera dans la documentation technique de Microsoft.
Enregistrez TruckRoute.html et actualisez votre navigateur. La carte est maintenant centrée sur Seattle. La punaise bleue marque le point de départ. La broche bleue ronde marque le point d’arrivée.

Demander et afficher des itinéraires pour véhicules privés et commerciaux sur une carte.

Cette section montre comment utiliser le service Route Azure Maps pour trouver des directions d’un point à un autre, en fonction du mode de transport. Deux modes de transport sont utilisés : le camion et la voiture.

Conseil

Le service Route fournit des API afin de planifier l’itinéraire 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 de futurs itinéraires 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.

Dans la fonction GetMap, à l’intérieur du gestionnaire d’événements ready du contrôle, ajoutez le code JavaScript suivant afin de construire un itinéraire pour camion du point de départ jusqu’au point d’arrivée. Cet itinéraire est créé et affiché pour un camion transportant un chargement classé USHazmatClass2.

//Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    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 the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});

À propos du code JavaScript ci-dessus :

Ce code interroge le service Route Azure Maps par le biais de l’API Azure Maps Route Directions.
La ligne de l’itinéraire est ensuite créée à partir des coordonnées de chaque tour de la réponse.
La ligne d’itinéraire est ensuite ajoutée à la source de données.
Deux propriétés sont ajoutées à la ligne de l’itinéraire pour camion : un trait de couleur bleue #2272B9 et une épaisseur de trait de neuf pixels.
La ligne d’itinéraire reçoit un index de 0 pour garantir que l’itinéraire du camion s’affichera avant les autres lignes de la source de données. La raison en est que le calcul d’un itinéraire de camion est souvent plus lent que le calcul d’un itinéraire de voiture. Si la ligne d’itinéraire de camion est ajoutée à la source de données après l’itinéraire de voiture, elle s’affiche au-dessus d’elle.

Conseil

Pour afficher toutes les options et valeurs possibles pour l’API Obtenir des directions Azure Maps, consultez les paramètres d’URI pour la publication de directions.

Ajoutez maintenant le code JavaScript suivant afin de créer un itinéraire pour voiture.

var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    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 the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

À propos du JavaScript :

Ce code interroge le service d’itinéraire Azure Maps par le biais de la méthode d’API Azure Maps Route Directions.
La ligne de l’itinéraire est ensuite créée à partir des coordonnées de chaque tour, et ajoutée à la source de données.
Deux propriétés sont ajoutées à la ligne d’itinéraire pour camion : un trait de couleur violette #B76DAB et une épaisseur de trait de cinq pixels.

Enregistrez le fichier TruckRoute.html et actualisez votre navigateur web. La carte doit maintenant afficher à la fois les itinéraires pour camion et les itinéraires pour voiture.
- L’itinéraire pour camion est représenté par une ligne épaisse bleue, et l’itinéraire pour voiture est représenté par une ligne fine violette.
- L’itinéraire pour voiture passe au-dessus du Lac Washington via l’I-90, qui traverse des tunnels installés sous des zones résidentielles. Étant donné que les tunnels se trouvent dans des zones résidentielles, tout transport de déchets dangereux est interdit. L’itinéraire pour camion, pour lequel est défini le type de chargement USHazmatClass2, utilise un autre itinéraire qui n’a pas de restrictions.

Pour obtenir le code complet qui est utilisé dans ce didacticiel, consultez le didacticiel Truck Route sur GitHub.
Pour afficher cet exemple en direct, consultez Plusieurs itinéraires par mode de déplacement sur le site des exemples de code Azure Maps.
Vous pouvez également utiliser des Expressions de style basées sur des données.

Étapes suivantes

Le tutoriel suivant montre comment créer un localisateur de magasin simple à l’aide d’Azure Maps.

Créer un localisateur de magasin à l’aide d’Azure Maps

Partager via