Routebeschrijving van A naar B
In dit artikel leest u hoe u een routeaanvraag kunt indienen en hoe u de route op de kaart kunt weergeven.
Er zijn twee manieren om dit te doen. De eerste manier is om een query uit te voeren op de Routebeschrijvings-API met behulp van de TypeScript REST SDK @azure-rest/maps-route. De tweede manier is om de Fetch-API te gebruiken om een zoekaanvraag in te dienen bij de Routebeschrijvings-API ophalen. Beide benaderingen worden beschreven in dit artikel.
Query's uitvoeren op de route via REST SDK
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;
In het vorige codevoorbeeld maakt het eerste blok een kaartobject en stelt het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor instructies.
Het tweede codeblok maakt een object dat de TokenCredential-interface implementeert om HTTP-aanvragen te verifiëren bij Azure Kaarten met het toegangstoken. Vervolgens wordt het referentieobject doorgegeven aan Kaarten Route en wordt een exemplaar van de client gemaakt.
Het derde codeblok maakt en voegt een DataSource-object toe aan de kaart.
Met het vierde codeblok worden begin- en eindpuntobjecten gemaakt en toegevoegd aan het dataSource-object.
Een regel is een functie voor LineString. Een LineLayer geeft lijnobjecten weer die zijn verpakt in de DataSource als lijnen op de kaart. Het vierde codeblok maakt en voegt een lijnlaag toe aan de kaart. Bekijk de eigenschappen van een lijnlaag bij LinestringLayerOptions.
Een symboollaag maakt gebruik van teksten of pictogrammen om puntgebaseerde gegevens weer te geven die zijn verpakt in de DataSource. De teksten of de pictogrammen worden weergegeven als symbolen op de kaart. Het vijfde codeblok maakt en voegt een symboollaag toe aan de kaart.
Het zesde codeblok voert query's uit op de Azure Kaarten-routeringsservice, die deel uitmaakt van de Kaarten Route-client. Een GET-aanvraag wordt gebruikt om een route tussen de begin- en eindpunten op te halen. Een GeoJSON-functieverzameling uit het antwoord wordt vervolgens geëxtraheerd met behulp van een getFeatures() helperfunctie en wordt toegevoegd aan de gegevensbron. Vervolgens wordt het antwoord weergegeven als een route op de kaart. Zie Een lijn op de kaart toevoegen voor meer informatie over het toevoegen van een lijn aan de kaart.
Met het laatste codeblok worden de grenzen van de kaart ingesteld met behulp van de eigenschap SetCamera van Map.
De routequery, gegevensbron, symbool, lijnlagen en cameragrenzen worden gemaakt in de gebeurtenislistener. Deze codestructuur zorgt ervoor dat de resultaten alleen worden weergegeven nadat de kaart volledig is geladen.
Query's uitvoeren op de route via fetch-API
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;
In het vorige codevoorbeeld maakt het eerste codeblok een kaartobject en stelt het verificatiemechanisme in voor het gebruik van Microsoft Entra-id. Zie Een kaart maken voor instructies.
Het tweede codeblok maakt en voegt een DataSource-object toe aan de kaart.
Het derde codeblok maakt de begin- en doelpunten voor de route. Vervolgens worden ze toegevoegd aan de gegevensbron. Zie Een speld toevoegen op de kaart voor meer informatie.
Een LineLayer geeft lijnobjecten weer die zijn verpakt in de DataSource als lijnen op de kaart. Het vierde codeblok maakt en voegt een lijnlaag toe aan de kaart. Bekijk de eigenschappen van een lijnlaag bij LineLayerOptions.
Een symboollaag maakt gebruik van tekst of pictogrammen om puntgegevens in de DataSource weer te geven als symbolen op de kaart. Het vijfde codeblok maakt en voegt een symboollaag toe aan de kaart. Bekijk de eigenschappen van een symboollaag bij SymbolLayerOptions.
In het volgende codeblok wordt de Fetch-API gebruikt om een zoekaanvraag uit te voeren om routebeschrijvingen op te halen. Het antwoord wordt vervolgens geparseerd. Als het antwoord is geslaagd, worden de breedte- en lengtegraadgegevens gebruikt om een matrix een lijn te maken door deze punten te verbinden. De lijngegevens worden vervolgens toegevoegd aan de gegevensbron om de route op de kaart weer te geven. Zie Een regel toevoegen op de kaart voor meer informatie.
Met het laatste codeblok worden de grenzen van de kaart ingesteld met behulp van de eigenschap SetCamera van Map.
De routequery, gegevensbron, symbool, lijnlagen en cameragrenzen worden gemaakt in de gebeurtenislistener. Nogmaals, we willen ervoor zorgen dat de resultaten worden weergegeven nadat de kaart volledig is geladen.
De volgende afbeelding is een schermopname met de resultaten van de twee codevoorbeelden.
Volgende stappen
Meer informatie over de klassen en methoden die in dit artikel worden gebruikt:
Zie de volgende artikelen voor volledige codevoorbeelden: