Afficher des directions de A à B
Cet article vous explique comment exécuter une requête d’itinéraire et afficher l’itinéraire sur la carte.
Il existe deux manières de procéder. La première méthode consiste à interroger l’API Obtenir un itinéraire à l’aide du SDK REST TypeScript @azure-rest/maps-route. La seconde consiste à utiliser l’API Fetch pour effectuer une demande de recherche à l’API Obtenir un itinéraire. Les deux approches sont décrites dans cet article.
Demander l’itinéraire via le SDK REST
import * as atlas from "azure-maps-control";
import MapsRoute, { toColonDelimitedLatLonString } from "@azure-rest/maps-route";
import "azure-maps-control/dist/atlas.min.css";
const onload = () => {
// Initialize a map instance.
const map = new atlas.Map("map", {
view: "Auto",
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Use Azure Active Directory authentication.
authType: "aad",
clientId: "<Your Azure Maps Client Id>",
aadAppId: "<Your Azure Active Directory Client Id>",
aadTenant: "<Your Azure Active Directory Tenant Id>"
}
});
map.events.add("load", async () => {
// Use the access token from the map and create an object that implements the TokenCredential interface.
const credential = {
getToken: () => {
return {
token: map.authentication.getToken()
};
}
};
// Create a Route client.
const client = MapsRoute(credential, "<Your Azure Maps Client Id>");
// Create a data source and add it to the map.
const dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
// Create the GeoJSON objects which represent the start and end points of the route.
const startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
title: "Redmond",
icon: "pin-blue"
});
const 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]);
// Create a layer for rendering the route line under the road labels.
map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "#2272B9",
strokeWidth: 5,
lineJoin: "round",
lineCap: "round"
}),
"labels"
);
// Create a layer for rendering the start and end points of the route as symbols.
map.layers.add(
new atlas.layer.SymbolLayer(dataSource, null, {
iconOptions: {
image: ["get", "icon"],
allowOverlap: true,
ignorePlacement: 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.
})
);
// Get the coordinates of the start and end points.
const coordinates = [
[startPoint.geometry.coordinates[1], startPoint.geometry.coordinates[0]],
[endPoint.geometry.coordinates[1], endPoint.geometry.coordinates[0]]
];
// Get the route directions between the start and end points.
const response = await client.path("/route/directions/{format}", "json").get({
queryParameters: {
query: toColonDelimitedLatLonString(coordinates)
}
});
// Get the GeoJSON feature collection of the route.
const data = getFeatures(response.body.routes);
// Add the route data to the data source.
dataSource.add(data);
// Update the map view to center over the route.
map.setCamera({
bounds: data.bbox,
padding: 40
});
});
};
/**
* Helper function to convert a route response into a GeoJSON FeatureCollection.
*/
const getFeatures = (routes) => {
const bounds = [];
const features = routes.map((route, index) => {
const multiLineCoords = route.legs.map((leg) => {
return leg.points.map((coord) => {
const position = [coord.longitude, coord.latitude];
bounds.push(position);
return position;
});
});
// Include all properties on the route object except legs.
// Legs is used to create the MultiLineString, so we only need the summaries.
// The legSummaries property replaces the legs property with just summary data.
const props = {
...route,
legSummaries: route.legs.map((leg) => leg.summary),
resultIndex: index
};
delete props.legs;
return {
type: "Feature",
geometry: {
type: "MultiLineString",
coordinates: multiLineCoords
},
properties: props
};
});
return {
type: "FeatureCollection",
features: features,
bbox: new atlas.data.BoundingBox.fromLatLngs(bounds)
};
};
document.body.onload = onload;
Dans l’exemple de code précédent, le premier bloc construit un objet de carte et définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Vous pouvez consulter la section Créer une carte pour obtenir des instructions.
Le deuxième bloc de code crée un objet qui implémente l’interface TokenCredential pour authentifier les requêtes HTTP auprès d’Azure Maps avec le jeton d’accès. Il transmet ensuite l’objet d’informations d’identification à MapsRoute et crée une instance du client.
Le troisième bloc de code crée et ajoute un objet DataSource à la carte.
Le quatrième bloc de code crée des objets point de début et de fin et les ajoute à l’objet dataSource.
Une ligne est une fonctionnalité pour LineString. Un élément LineLayer affiche les objets de ligne encapsulés dans DataSource sous forme de lignes sur la carte. Le quatrième bloc de code crée une couche de lignes et l’ajoute à la carte. Consultez les propriétés d’une couche de lignes dans LinestringLayerOptions.
Une couche de symboles utilise des textes ou des icônes pour restituer des données basées sur des points qui sont enveloppées dans DataSource. Les textes ou les icônes sont rendus sous forme de symboles sur la carte. Le cinquième bloc de code crée une couche de symboles et l’ajoute à la carte.
Le sixième bloc de code interroge le service de routage Azure Maps, qui fait partie du client MapsRoute. Une requête GET est utilisée pour obtenir une route entre les points de début et de fin. Une collection de fonctionnalités GeoJSON de la réponse est alors extraite à l’aide de la fonction d’assistance getFeatures() et ajoutée à la source de données. Elle affiche ensuite la réponse sous forme de route sur la carte. Pour plus d’informations sur l’ajout d’une ligne à la carte, consultez Ajouter une ligne sur la carte.
Le dernier bloc de code définit les limites de la carte à l’aide de la propriété setCamera de la carte.
La requête d’itinéraire, la source de données, le symbole, les couches de lignes et les limites de la caméra sont créés à l’intérieur du détecteur d’événements. Cette structure de code garantit que les résultats s’affichent uniquement après le chargement complet de la carte.
Demander l'itinéraire via l'API de récupération
import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";
const onload = () => {
// Initialize a map instance.
const map = new atlas.Map("map", {
view: "Auto",
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Use Azure Active Directory authentication.
authType: "aad",
clientId: "<Your Azure Maps Client Id>",
aadAppId: "<Your Azure Active Directory Client Id>",
aadTenant: "<Your Azure Active Directory Tenant Id>"
}
});
map.events.add("load", async () => {
// Create a data source and add it to the map.
const dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
// Create the GeoJSON objects which represent the start and end points of the route.
const startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
title: "Redmond",
icon: "pin-blue"
});
const 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]);
// Create a layer for rendering the route line under the road labels.
map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "#2272B9",
strokeWidth: 5,
lineJoin: "round",
lineCap: "round"
}),
"labels"
);
// Create a layer for rendering the start and end points of the route as symbols.
map.layers.add(
new atlas.layer.SymbolLayer(dataSource, null, {
iconOptions: {
image: ["get", "icon"],
allowOverlap: true,
ignorePlacement: 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.
})
);
// Send a request to the route API
let url = "https://atlas.microsoft.com/route/directions/json?";
url += "&api-version=1.0";
url +=
"&query=" +
startPoint.geometry.coordinates[1] +
"," +
startPoint.geometry.coordinates[0] +
":" +
endPoint.geometry.coordinates[1] +
"," +
endPoint.geometry.coordinates[0];
// Process request
fetch(url, {
headers: {
Authorization: "Bearer " + map.authentication.getToken(),
"x-ms-client-id": "<Your Azure Maps Client Id>"
}
})
.then((response) => response.json())
.then((response) => {
const bounds = [];
const route = response.routes[0];
// Create an array to store the coordinates of each turn
let routeCoordinates = [];
route.legs.forEach((leg) => {
const legCoordinates = leg.points.map((point) => {
const position = [point.longitude, point.latitude];
bounds.push(position);
return position;
});
// Add each turn coordinate to the array
routeCoordinates = routeCoordinates.concat(legCoordinates);
});
// Add route line to the dataSource
dataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
// Update the map view to center over the route.
map.setCamera({
bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
padding: 40
});
});
});
};
document.body.onload = onload;
Dans l’exemple de code précédent, le premier bloc de code construit un objet de carte et définit le mécanisme d’authentification pour utiliser Microsoft Entra ID. Vous pouvez consulter la section Créer une carte pour obtenir des instructions.
Le deuxième bloc de code crée et ajoute un objet DataSource à la carte.
Le troisième bloc de code crée les points de début et de destination pour la route. Ensuite, il les ajoute à la source de données. Pour plus d’informations, consultez Ajouter un repère à une carte.
Un élément LineLayer affiche les objets de ligne encapsulés dans DataSource sous forme de lignes sur la carte. Le quatrième bloc de code crée une couche de lignes et l’ajoute à la carte. Consultez les propriétés d’une couche de lignes dans LineLayerOptions.
Une couche de symboles utilise du texte ou des icônes pour afficher les données basées sur le point, qui sont wrappées dans la source de données en tant que symboles sur la carte. Le cinquième bloc de code crée une couche de symboles et l’ajoute à la carte. Consultez les propriétés d’une couche de symboles à la page SymbolLayerOptions.
Le bloc de code suivant utilise l’API Fetch pour effectuer une demande de recherche à Obtenir un itinéraire. La réponse est ensuite analysée. Si la réponse est correcte, les informations de latitude et longitude sont utilisées pour créer une ligne en reliant ces points. Les données de la ligne sont ensuite ajoutées à la source de données pour afficher l’itinéraire sur la carte. Pour plus d’informations, consultez Ajouter une ligne sur la carte.
Le dernier bloc de code définit les limites de la carte à l’aide de la propriété setCamera de la carte.
La requête d’itinéraire, la source de données, le symbole, les couches de lignes et les limites de la caméra sont créés à l’intérieur du détecteur d’événements. Là encore, nous voulons nous assurer que les résultats s’affichent après le chargement complet de la carte.
L’image suivante est une capture d’écran montrant les résultats des deux exemples de code.
Étapes suivantes
En savoir plus sur les classes et les méthodes utilisées dans cet article :
Pour voir des exemples de codes complets, consultez les articles suivants :