Visualizzare le indicazioni stradali da A a B
Questo articolo illustra come effettuare una richiesta di pianificazione percorso e visualizzare il percorso sulla mappa.
È possibile eseguire questa operazione in due modi. Il primo consiste nell'eseguire una query sull'API Get Route Directions usando TypeScript REST SDK @azure-rest/maps-route. Il secondo modo consiste nell'usare l'API Fetch per effettuare una richiesta di ricerca all'API Get Route Directions. Entrambi gli approcci sono descritti in questo articolo.
Eseguire query sulla route tramite 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;
Nell'esempio di codice precedente il primo blocco costruisce un oggetto map e imposta il meccanismo di autenticazione per l'uso dell'ID Entra di Microsoft. Per istruzioni, vedere Creare una mappa .
Il secondo blocco di codice crea un oggetto che implementa l'interfaccia TokenCredential per autenticare le richieste HTTP a Mappe di Azure con il token di accesso. Passa quindi l'oggetto credenziale a Mappe Route e crea un'istanza del client.
Il terzo blocco di codice crea e aggiunge un oggetto DataSource alla mappa.
Il quarto blocco di codice crea due oggetti point (uno iniziale e uno finale) e li aggiunge all'oggetto dataSource.
Una linea è un oggetto Feature per LineString. LineLayer esegue il rendering degli oggetti linea con wrapping in DataSource come linee sulla mappa. Il quarto blocco di codice crea e aggiunge un livello linea alla mappa. Vedere le proprietà di un livello linea in LinestringLayerOptions.
Un livello simbolo usa testi o icone per il rendering dei dati basati su punti di cui viene eseguito il wrapping in DataSource. Il rendering dei testi o delle icone viene eseguito come simboli sulla mappa. Il quinto blocco di codice crea e aggiunge un livello simbolo alla mappa.
Il sesto blocco di codice esegue una query sul servizio di routing Mappe di Azure, che fa parte del client Mappe Route. Una richiesta GET viene usata per ottenere una route tra i punti di inizio e di fine. Una raccolta di funzionalità GeoJSON dalla risposta viene quindi estratta usando una getFeatures() funzione helper e viene aggiunta all'origine dati. Viene quindi eseguito il rendering della risposta come un itinerario sulla mappa. Per altre informazioni sull'aggiunta di una linea alla mappa, vedere Aggiungere una linea sulla mappa.
L'ultimo blocco di codice imposta i limiti della mappa usando la proprietà setCamera della mappa.
La query sul percorso, l'origine dati, il simbolo, i livelli linea e i limiti della fotocamera vengono creati all'interno del listener di eventi. Questa struttura di codice assicura che i risultati vengano visualizzati solo dopo il caricamento completo della mappa.
Eseguire query sul percorso tramite 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;
Nell'esempio di codice precedente il primo blocco di codice costruisce un oggetto mappa e imposta il meccanismo di autenticazione per l'uso dell'ID Microsoft Entra. Per istruzioni, vedere Creare una mappa .
Il secondo blocco di codice crea e aggiunge un oggetto DataSource alla mappa.
Il terzo blocco di codice crea i punti di inizio e di destinazione per il percorso e quindi li aggiunge all'origine dati. Per altre informazioni, vedere Aggiungere un segnaposto sulla mappa.
LineLayer esegue il rendering degli oggetti linea con wrapping in DataSource come linee sulla mappa. Il quarto blocco di codice crea e aggiunge un livello linea alla mappa. Vedere le proprietà di un livello linea in LineLayerOptions.
Un livello simbolo usa testo o icone per il rendering dei dati basati su punti di cui viene eseguito il wrapping in DataSource come simboli sulla mappa. Il quinto blocco di codice crea e aggiunge un livello simbolo alla mappa. Vedere le proprietà di un livello simbolo in SymbolLayerOptions.
Il blocco di codice successivo usa l'API Fetch per effettuare una richiesta di ricerca per Ottenere indicazioni stradali. La risposta viene quindi analizzata. Se la risposta ha esito positivo, le informazioni di latitudine e longitudine vengono usate per creare una matrice, ovvero una linea, connettendo tali punti. I dati della linea vengono quindi aggiunti all'origine dati per eseguire il rendering del percorso sulla mappa. Per altre informazioni, vedere Aggiungere una linea sulla mappa.
L'ultimo blocco di codice imposta i limiti della mappa usando la proprietà setCamera della mappa.
La query sul percorso, l'origine dati, il simbolo, i livelli linea e i limiti della fotocamera vengono creati all'interno del listener di eventi. Anche in questo caso, è necessario assicurarsi che i risultati vengano visualizzati dopo il caricamento completo della mappa.
L'immagine seguente è uno screenshot che mostra i risultati dei due esempi di codice.
Passaggi successivi
Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:
Per esempi di codice completi, vedere gli articoli seguenti: