Visa anvisningar från A till B
Den här artikeln visar hur du gör en routningsbegäran och visar vägen på kartan.
Det finns två sätt att göra det på. Det första sättet är att köra frågor mot API:et Get Route Directions med hjälp av TypeScript REST SDK @azure-rest/maps-route. Det andra sättet är att använda Fetch-API:et för att göra en sökbegäran till API:et Hämta vägriktningar. Båda metoderna beskrivs i den här artikeln.
Fråga vägen 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;
I föregående kodexempel konstruerar det första blocket ett kartobjekt och anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Du kan se Skapa en karta för instruktioner.
Det andra kodblocket skapar ett objekt som implementerar TokenCredential-gränssnittet för att autentisera HTTP-begäranden till Azure Kartor med åtkomsttoken. Det skickar sedan autentiseringsobjektet till Kartor Route och skapar en instans av klienten.
Det tredje kodblocket skapar och lägger till ett DataSource-objekt på kartan.
Det fjärde kodblocket skapar start- och slutpunktsobjekt och lägger till dem i dataSource-objektet.
En rad är en funktion för LineString. En LineLayer återger linjeobjekt som är omslutna i DataSource som rader på kartan. Det fjärde kodblocket skapar och lägger till ett linjeskikt på kartan. Se egenskaperna för ett linjeskikt i LinestringLayerOptions.
Ett symbollager använder texter eller ikoner för att återge punktbaserade data som omsluts i DataSource. Texterna eller ikonerna återges som symboler på kartan. Det femte kodblocket skapar och lägger till ett symbolskikt på kartan.
Det sjätte kodblocket frågar Azure Kartor routningstjänsten, som är en del av Kartor Route-klienten. En GET-begäran används för att hämta en väg mellan start- och slutpunkterna. En GeoJSON-funktionssamling från svaret extraheras sedan med hjälp av en getFeatures() hjälpfunktion och läggs till i datakällan. Svaret återges sedan som en väg på kartan. Mer information om hur du lägger till en rad på kartan finns i Lägga till en rad på kartan.
Det sista kodblocket anger gränserna för kartan med hjälp av mapens uppsättning Kamera egenskap.
Routningsfrågan, datakällan, symbolen, linjeskikten och kameragränsen skapas i händelselyssnaren. Den här kodstrukturen säkerställer att resultatet endast visas när kartan har lästs in helt.
Fråga vägen 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;
I föregående kodexempel konstruerar det första kodblocket ett mappningsobjekt och anger autentiseringsmekanismen för att använda Microsoft Entra-ID. Du kan se Skapa en karta för instruktioner.
Det andra kodblocket skapar och lägger till ett DataSource-objekt på kartan.
Det tredje kodblocket skapar start- och målpunkterna för vägen. Sedan läggs de till i datakällan. Mer information finns i Lägga till en pin-kod på kartan.
En LineLayer återger linjeobjekt som är omslutna i DataSource som rader på kartan. Det fjärde kodblocket skapar och lägger till ett linjeskikt på kartan. Se egenskaperna för ett linjeskikt på LineLayerOptions.
Ett symbollager använder text eller ikoner för att återge punktbaserade data som omsluts i DataSource som symboler på kartan. Det femte kodblocket skapar och lägger till ett symbolskikt på kartan. Se egenskaperna för ett symbollager i SymbolLayerOptions.
Nästa kodblock använder hämtnings-API:et för att göra en sökbegäran för att hämta vägbeskrivningar. Svaret parsas sedan. Om svaret lyckades används latitud- och longitudinformationen för att skapa en matris en rad genom att ansluta dessa punkter. Raddata läggs sedan till i datakällan för att återge vägen på kartan. Mer information finns i Lägga till en rad på kartan.
Det sista kodblocket anger gränserna för kartan med hjälp av mapens uppsättning Kamera egenskap.
Routningsfrågan, datakällan, symbolen, linjeskikten och kameragränsen skapas i händelselyssnaren. Återigen vill vi se till att resultaten visas när kartan har lästs in helt.
Följande bild är en skärmbild som visar resultatet av de två kodexemplen.
Nästa steg
Läs mer om de klasser och metoder som används i den här artikeln:
Se följande artiklar för fullständiga kodexempel: