Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Cet article vous montre comment effectuer une demande d’itinéraire et afficher l’itinéraire sur la carte.
Il y a deux façons de le faire. La première façon consiste à interroger l’API Get Route Directions à l’aide du Kit de développement logiciel (SDK) REST TypeScript @azure-rest/maps-route. La deuxième méthode consiste à utiliser l’API Fetch pour effectuer une requête de recherche à l’API Get Route Directions . Ces deux approches sont décrites dans cet article.
Interroger l’itinéraire via le Kit de développement logiciel (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 map et définit le mécanisme d’authentification pour utiliser l’ID Microsoft Entra. Vous pouvez voir 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 LineLayer restitue les objets de ligne encapsulés dans dataSource sous forme de lignes sur la carte. Le quatrième bloc de code crée et ajoute une couche de lignes à la carte. Consultez les propriétés d’une couche de lignes sur LinestringLayerOptions.
Une couche de symboles utilise des textes ou des icônes pour afficher les données basées sur des points encapsulées dans dataSource. Les textes ou les icônes s’affichent sous forme de symboles sur la carte. Le cinquième bloc de code crée et ajoute une couche de symboles à 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 un itinéraire entre les points de début et de fin. Une collection de fonctionnalités GeoJSON de la réponse est ensuite extraite à l’aide d’une getFeatures() fonction d’assistance et est ajoutée à la source de données. Il restitue ensuite la réponse en tant qu’itinéraire 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 de routage, la source de données, le symbole, les couches de ligne et les limites de caméra sont créées à l’intérieur de l’écouteur d’événements. Cette structure de code garantit que les résultats sont affichés uniquement après le chargement complet de la carte.
Interroger l’itinéraire via l’API Fetch
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 map et définit le mécanisme d’authentification pour utiliser l’ID Microsoft Entra. Vous pouvez voir 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 de l’itinéraire. Ensuite, il les ajoute à la source de données. Pour plus d’informations, consultez Ajouter une épingle sur la carte.
Un LineLayer restitue les objets de ligne encapsulés dans dataSource sous forme de lignes sur la carte. Le quatrième bloc de code crée et ajoute une couche de lignes à la carte. Consultez les propriétés d’une couche de traits sur LineLayerOptions.
Une couche de symboles utilise du texte ou des icônes pour afficher les données basées sur des points encapsulées dans la source de données en tant que symboles sur la carte. Le cinquième bloc de code crée et ajoute une couche de symboles à la carte. Voir les propriétés d’une couche de symboles sur SymbolLayerOptions.
Le bloc de code suivant utilise l’API Fetch pour effectuer une requête de recherche pour obtenir des itinéraires. La réponse est ensuite analysée. Si la réponse a réussi, les informations de latitude et de longitude sont utilisées pour créer un tableau d’une ligne en connectant ces points. Les données de 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 de routage, la source de données, le symbole, les couches de ligne et les limites de caméra sont créées à l’intérieur de l’écouteur d’événements. Là encore, nous voulons nous assurer que les résultats sont affichés 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 :