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

  • Article

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.

  1. Sur votre ordinateur local, créez un fichier et nommez-le MapTruckRoute.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>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.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 à l’API Azure Maps.

  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 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 ci-dessus :

    • 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.

  4. 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.

    A screenshot that shows the most basic map you can make by calling the atlas Map API, using your Azure Maps subscription key.

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

  1. 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 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 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.

  2. 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.

    A screenshot that shows a map of Los Angeles, with the streets displaying traffic flow data.

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.

  1. 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 ci-dessus :

    • 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, nous avons transmis 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 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 code 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, consultez la fonction setCamera dans la documentation technique de Microsoft.

  3. 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.

    A screenshot that shows a map with a route containing a blue teardrop pin marking the start point and a blue round pin marking the end point.

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.

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

    //Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);

  2. Après avoir configuré les informations d’identification et l’URL, ajoutez le code JavaScript suivant pour créer 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 routeURL
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];

//Make a search route request for a truck vehicle type
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates,{
    travelMode: 'truck',
    vehicleWidth: 2,
    vehicleHeight: 2,
    vehicleLength: 5,
    vehicleLoadType: 'USHazmatClass2'
}).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();

    //Get the route line and add some style properties to it.  
    var routeLine = data.features[0];
    routeLine.properties.strokeColor = '#2272B9';
    routeLine.properties.strokeWidth = 9;

    //Add the route line to the data source. This should render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(routeLine, 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 d’itinéraire est ensuite extraite de la collection de fonctionnalités GeoJSON à partir de la réponse extraite à l’aide de la méthode geojson.getFeatures().
    • 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.

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

    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {

    //Get data features from response
    var data = directions.geojson.getFeatures();

    //Get the route line and add some style properties to it.  
    var routeLine = data.features[0];
    routeLine.properties.strokeColor = '#B76DAB';
    routeLine.properties.strokeWidth = 5;

    //Add the route line to the data source. This will add the car route after the truck route.  
    datasource.add(routeLine);
});

    À propos du code JavaScript ci-dessus :

    • 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 d’itinéraire est ensuite extraite de la collection de fonctionnalités GeoJSON à partir de la réponse extraite à l’aide de la méthode geojson.getFeatures(), puis elle est 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.

  4. 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.

    A screenshot that displays both a private as well as a commercial vehicle route on a map using the Azure Route Service.

    • 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.

É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