Wyświetlanie instrukcji dotyczących trasy z punktu A do punktu B
W tym artykule pokazano, jak utworzyć żądanie trasy i pokazać trasę na mapie.
Istnieją dwa sposoby, aby to zrobić. Pierwszym sposobem jest wykonywanie zapytań względem interfejsu API Get Route Directions przy użyciu zestawu SDK REST języka TypeScript @azure-rest/maps-route. Drugą metodą jest użycie interfejsu API pobierania w celu utworzenia żądania wyszukiwania do interfejsu API Get Route Directions. Oba podejścia zostały opisane w tym artykule.
Wykonywanie zapytań dotyczących trasy za pomocą zestawu 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;
W poprzednim przykładzie kodu pierwszy blok tworzy obiekt mapy i ustawia mechanizm uwierzytelniania na użycie identyfikatora Entra firmy Microsoft. Aby uzyskać instrukcje, zobacz Tworzenie mapy .
Drugi blok kodu tworzy obiekt, który implementuje interfejs TokenCredential w celu uwierzytelniania żądań HTTP na platformie Azure Mapy przy użyciu tokenu dostępu. Następnie przekazuje obiekt poświadczeń do usługi Mapy Route i tworzy wystąpienie klienta.
Trzeci blok kodu tworzy i dodaje obiekt DataSource do mapy.
Czwarty blok kodu tworzy obiekty punktów początkowych i końcowych i dodaje je do obiektu dataSource.
Wiersz jest funkcją lineString. Obiekt LineLayer renderuje obiekty linii opakowane w źródło danych jako linie na mapie. Czwarty blok kodu tworzy i dodaje warstwę liniową do mapy. Zobacz właściwości warstwy liniowej w temacie LinestringLayerOptions.
Warstwa symboli używa tekstów lub ikon do renderowania danych opartych na punkcie w źródle danych. Teksty lub ikony są renderowane jako symbole na mapie. Piąty blok kodu tworzy i dodaje warstwę symboli do mapy.
Szósty blok kodu wysyła zapytanie do usługi routingu azure Mapy, która jest częścią klienta usługi Mapy Route. Żądanie GET służy do pobierania trasy między punktami początkowymi i końcowymi. Kolekcja funkcji GeoJSON z odpowiedzi jest następnie wyodrębniona przy użyciu funkcji pomocniczej getFeatures() i jest dodawana do źródła danych. Następnie renderuje odpowiedź jako trasę na mapie. Aby uzyskać więcej informacji na temat dodawania wiersza do mapy, zobacz Dodawanie wiersza na mapie.
Ostatni blok kodu ustawia granice mapy przy użyciu właściwości Map Aparat.
Zapytanie dotyczące trasy, źródło danych, symbol, warstwy linii i granice aparatu są tworzone wewnątrz odbiornika zdarzeń. Ta struktura kodu zapewnia, że wyniki są wyświetlane dopiero po pełnym załadowaniu mapy.
Wykonywanie zapytań dotyczących trasy za pośrednictwem interfejsu API pobierania
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;
W poprzednim przykładzie kodu pierwszy blok kodu tworzy obiekt mapy i ustawia mechanizm uwierzytelniania do używania identyfikatora Entra firmy Microsoft. Aby uzyskać instrukcje, zobacz Tworzenie mapy .
Drugi blok kodu tworzy i dodaje obiekt DataSource do mapy.
Trzeci blok kodu tworzy punkty początkowe i docelowe dla trasy. Następnie dodaje je do źródła danych. Aby uzyskać więcej informacji, zobacz Dodawanie pinezki na mapie.
Obiekt LineLayer renderuje obiekty linii opakowane w źródło danych jako linie na mapie. Czwarty blok kodu tworzy i dodaje warstwę liniową do mapy. Zobacz właściwości warstwy liniowej na stronie LineLayerOptions.
Warstwa symboli używa tekstu lub ikon do renderowania danych opartych na punkcie w źródle danych jako symboli na mapie. Piąty blok kodu tworzy i dodaje warstwę symboli do mapy. Zobacz właściwości warstwy symboli na stronie SymbolLayerOptions.
Następny blok kodu używa interfejsu API pobierania, aby wysłać żądanie wyszukiwania do polecenia Get Route Directions. Odpowiedź jest następnie analizowana. Jeśli odpowiedź zakończyła się pomyślnie, informacje o szerokości i długości geograficznej są używane do utworzenia tablicy linii przez połączenie tych punktów. Dane wiersza są następnie dodawane do źródła danych w celu renderowania trasy na mapie. Aby uzyskać więcej informacji, zobacz Dodawanie wiersza na mapie.
Ostatni blok kodu ustawia granice mapy przy użyciu właściwości Map Aparat.
Zapytanie dotyczące trasy, źródło danych, symbol, warstwy linii i granice aparatu są tworzone wewnątrz odbiornika zdarzeń. Ponownie chcemy upewnić się, że wyniki są wyświetlane po pełnym załadowaniu mapy.
Na poniższej ilustracji przedstawiono zrzut ekranu przedstawiający wyniki dwóch przykładów kodu.
Następne kroki
Dowiedz się więcej o klasach i metodach używanych w tym artykule:
Zobacz następujące artykuły, aby zapoznać się z pełnymi przykładami kodu: