Tutorial: Ermitteln und Anzeigen von Routen für verschiedene Reisemodi mithilfe von Azure Maps

  • Artikel

In diesem Tutorial erfahren Sie, wie Sie den Routendienst und das Kartensteuerelement von Azure Maps verwenden, um Wegbeschreibungen für private Fahrzeuge sowie für Nutzfahrzeuge (Lkw) mit dem Frachttyp USHazmatClass2 anzuzeigen.

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen und Anzeigen des Kartensteuerelements auf einer Webseite
  • Rendern von Echtzeitverkehrsdaten auf einer Karte
  • Anfordern und Anzeigen von PKW- und LKW-Routen auf einer Karte

Voraussetzungen

Hinweis

Weitere Informationen zur Authentifizierung in Azure Maps finden Sie unter Verwalten der Authentifizierung in Azure Maps.

Erstellen einer neuen Webseite mit der Kartensteuerelement-API

In den folgenden Schritten wird gezeigt, wie Sie das Kartensteuerelement erstellen und auf einer Webseite anzeigen.

  1. Erstellen Sie auf dem lokalen Computer eine neue Datei, und nennen Sie sie MapTruckRoute.html.

  2. Fügen Sie der Datei den folgenden HTML-Code hinzu:

    <!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

    Dies sind einige Hinweise zum obigen HTML-Code:

    • Der HTML-Header enthält die CSS- und JavaScript-Ressourcendateien, die von der Bibliothek der Azure-Kartensteuerelemente gehostet werden.
    • Das Ereignis onload im Textkörper der Seite ruft die Funktion GetMap auf, wenn der Textkörper der Seite geladen wurde.
    • Die Funktion GetMap enthält den JavaScript-Inlinecode, der für den Zugriff auf die Azure Maps-APIs genutzt wird.

  3. Fügen Sie der GetMap-Funktion als Nächstes den folgenden JavaScript-Code direkt unter dem Code hinzu, der im letzten Schritt hinzugefügt wurde. Dieser Code erstellt ein Kartensteuerelement und initialisiert es mithilfe der Azure Maps-Abonnementschlüssel, die Sie bereitstellen. Stellen Sie sicher, dass Sie die Zeichenfolge <Your Azure Maps Subscription Key> durch den Azure Maps-Abonnementschlüssel ersetzen, den Sie aus Ihrem Maps-Konto kopiert haben.

    //Instantiate a map object
var map = new atlas.Map("myMap", {
    // Replace <Your Azure Maps Subscription Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});

    Einige Hinweise zu dem vorstehenden JavaScript:

    • Dieser Code ist das Herzstück der GetMap-Funktion, mit der die Kartensteuerelement-API für Ihr Azure Maps-Konto initialisiert wird.
    • atlas ist der Namespace, der die Azure Maps-API und die zugehörigen visuellen Komponenten enthält.
    • atlas.Map stellt das Steuerelement für ein visuelles Element und eine interaktive Webkarte bereit.

  4. Speichern Sie die Datei, und öffnen Sie sie im Browser. Der Browser zeigt eine einfache Karte an, indem atlas.Map über Ihren Azure Maps-Abonnementschlüssel aufgerufen wird.

    A screenshot that shows the most basic map you can make by calling the atlas Map API, using your Azure Maps subscription key.

Rendern von Echtzeitverkehrsdaten auf einer Karte

  1. Fügen Sie in der Funktion GetMap nach der Karteninitialisierung den folgenden JavaScript-Code hinzu: Dieser Code implementiert den ready-Ereignishandler des Kartensteuerelements.

    map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});

    Einige Hinweise zu dem vorstehenden JavaScript:

    • Dieser Code implementiert den ready-Ereignishandler des Kartensteuerelements. Der restliche Code in diesem Tutorial wird in den Ereignishandler ready eingefügt.
    • Im Kartenereignishandler ready ist die Verkehrsflusseinstellung für die Karte auf relative (Geschwindigkeit der Straße relativ zum freien Fluss) festgelegt.
    • Weitere Datenverkehrsoptionen finden Sie unter TrafficOptions-Schnittstelle.

  2. Speichern Sie die Datei MapTruckRoute.html, und aktualisieren Sie die Seite in Ihrem Browser. Wenn Sie eine beliebige Stadt vergrößern (beispielsweise Los Angeles), werden die Straßen mit den aktuellen Verkehrsdaten angezeigt.

    A screenshot that shows a map of Los Angeles, with the streets displaying traffic flow data.

Definieren des Renderns von Routenanzeigen

In diesem Tutorial werden zwei Routen auf der Karte berechnet. Die erste Route wird für ein privates Fahrzeug (Pkw) berechnet. Die zweite Route wird für ein Nutzfahrzeug (Lkw) berechnet, um den Unterschied zwischen den Ergebnissen zu veranschaulichen. Nach dem Rendern werden auf der Karte ein Symbol für den Start- und Endpunkt der Route sowie verschiedenfarbige Routenliniengeometrien für den jeweiligen Routenpfad dargestellt. Weitere Informationen zum Hinzufügen von Linienebenen finden Sie unter Hinzufügen einer Linienebene zur Karte. Weitere Informationen zu Symbolebenen finden Sie unter Hinzufügen einer Symbolebene zu einer Karte.

  1. Fügen Sie im ready-Ereignishandler des Kartensteuerelements den folgenden Code hinzu.

    
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a layer for rendering the route lines and have it render under the map labels.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    lineJoin: 'round',
    lineCap: 'round'
}), 'labels');

//Add a layer for rendering point data.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
        image: ['get', 'icon'],
        allowOverlap: 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.
}));

    Einige Hinweise zu dem vorstehenden JavaScript:

    • Im Ereignishandler ready des Kartensteuerelements wird eine Datenquelle zum Speichern der Route zwischen Start und Ziel erstellt.
    • Stärke und Farbe der Linie werden mithilfe von Ausdrücken aus Eigenschaften des Routenlinienfeatures abgerufen.
    • Um sicherzustellen, dass die Straßennamen nicht von der Routenlinie abgedeckt werden, haben wir einen zweiten Parameter mit dem Wert 'labels' übergeben.

    Als Nächstes wird eine Symbolebene erstellt und der Datenquelle angefügt. Diese Ebene gibt an, wie die Start- und Endpunkte gerendert werden. Es wurden Ausdrücke hinzugefügt, um das Symbol und die Beschriftungsinformationen aus Eigenschaften für das jeweilige Punktobjekt abzurufen. Weitere Informationen zu Ausdrücken finden Sie unter Datengesteuerte Formatvorlagenausdrücke (Web SDK).

  2. Legen Sie als Nächstes den Startpunkt auf ein fiktives Unternehmen in Seattle namens Fabrikam und den Endpunkt auf eine Niederlassung von Microsoft fest. Fügen Sie im ready-Ereignishandler des Kartensteuerelements den folgenden Code hinzu.

    //Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});

    Informationen zum vorstehenden JavaScript:

    • Mit diesem Code werden zwei GeoJSON-Punktobjekte erstellt, die für den Start- bzw. Endpunkt der Route stehen, die dann der Datenquelle hinzugefügt werden.
    • Mit dem letzten Codeblock wird mithilfe der Breiten- und Längengrade von Start- und Endpunkt die Kameraperspektive festgelegt.
    • Die Start- und Endpunkte werden der Datenquelle hinzugefügt.
    • Das umgebende Rechteck für die Start- und Endpunkte wird mithilfe der Funktion atlas.data.BoundingBox.fromData berechnet. Dieses umgebende Rechteck dient dazu, die Kameraansicht der Karte mithilfe der Funktion map.setCamera auf die gesamte Route zu platzieren.
    • Zur Kompensierung der Pixeldimensionen der Symbole wird Abstand hinzugefügt.
    • Weitere Informationen finden Sie in der technischen Dokumentation von Microsoft zur setCamera-Funktion.

  3. Speichern Sie die Datei TruckRoute.html, und aktualisieren Sie Ihren Browser. Die Karte ist nun auf Seattle zentriert. Der blaue Teardrop-Pin markiert den Startpunkt. Der runde blaue Pin markiert den Endpunkt.

    A screenshot that shows a map with a route containing a blue teardrop pin marking the start point and a blue round pin marking the end point.

Anfordern und Anzeigen von PKW- und LKW-Routen auf einer Karte

In diesem Abschnitt erfahren Sie, wie Sie den Routendienst von Azure Maps verwenden, um Wegbeschreibungen zwischen Punkten auf der Grundlage der Fortbewegungsart zu erhalten. Es werden zwei Fortbewegungsarten verwendet: Lkw und Pkw.

Tipp

Der Routendienst stellt APIs zum Planen der schnellsten, kürzesten, umweltfreundlichsten oder schönsten Route unter Berücksichtigung von Entfernung, Verkehrslage und verwendeter Fortbewegungsart bereit. Mit dem Dienst können Benutzer auch zukünftige Routen auf der Grundlage historischer Verkehrsbedingungen planen. Benutzer können die Vorhersage der Routendauer für einen beliebigen Zeitpunkt sehen. Weitere Informationen finden Sie unter Abrufen von Wegbeschreibungen.

  1. Fügen Sie in der GetMap-Funktion innerhalb des ready-Ereignishandlers des Steuerelements dem JavaScript-Code Folgendes hinzu.

    //Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);

  2. Fügen Sie nach dem Einrichten der Anmeldeinformationen und der URL den folgenden JavaScript-Code hinzu, um eine LKW-Route zwischen dem Start- und dem Endpunkt zu erstellen. Diese Route wird für einen LKW erstellt und angezeigt, der Fracht mit der Klassifizierung USHazmatClass2 transportiert.

    //Start and end point input to the routeURL
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];

//Make a search route request for a truck vehicle type
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates,{
    travelMode: 'truck',
    vehicleWidth: 2,
    vehicleHeight: 2,
    vehicleLength: 5,
    vehicleLoadType: 'USHazmatClass2'
}).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();

    //Get the route line and add some style properties to it.  
    var routeLine = data.features[0];
    routeLine.properties.strokeColor = '#2272B9';
    routeLine.properties.strokeWidth = 9;

    //Add the route line to the data source. This should render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(routeLine, 0);
});

    Informationen zum vorstehenden JavaScript:

    • Mit diesem Code wird der Routendienst von Azure Maps über die Wegbeschreibungs-API von Azure Maps abgerufen.
    • Die Routenlinie wird dann aus der GeoJSON-Funktionssammlung der Antwort extrahiert, die mit der geojson.getFeatures()-Methode extrahiert wird.
    • Anschließend wird die Routenlinie der Datenquelle hinzugefügt.
    • Der LKW-Routenlinie werden zwei Eigenschaften hinzugefügt: eine Strichfarbe #2272B9 (Blau) und eine Strichstärke (neun Pixel).
    • Die Routenlinie erhält den Index 0, um sicherzustellen, dass die LKW-Route vor allen anderen Linien in der Datenquelle gerendert wird. Der Grund dafür ist, dass die Berechnung einer Lkw-Route häufig länger dauert als die Berechnung einer Pkw-Route. Wenn die Linie für die LKW-Route nach der PKW-Route zur Datenquelle hinzugefügt wird, wird sie darüber gerendert.

    Tipp

    Alle verfügbaren Optionen und Werte für die Wegbeschreibungs-API von Azure Maps finden Sie in den URI-Parametern für Post Route Directions.

  3. Fügen Sie als Nächstes den folgenden JavaScript-Code an, um eine Route für einen PKW zu erstellen.

    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {

    //Get data features from response
    var data = directions.geojson.getFeatures();

    //Get the route line and add some style properties to it.  
    var routeLine = data.features[0];
    routeLine.properties.strokeColor = '#B76DAB';
    routeLine.properties.strokeWidth = 5;

    //Add the route line to the data source. This will add the car route after the truck route.  
    datasource.add(routeLine);
});

    Informationen zum vorstehenden JavaScript:

    • Mit diesem Code wird der Routendienst von Azure Maps über die Methode der Wegbeschreibungs-API von Azure Maps abgerufen.
    • Die Routenlinie wird dann aus der GeoJSON-Funktionssammlung der Antwort extrahiert, die mit der geojson.getFeatures()-Methode extrahiert wird. Anschließend wird sie zur Datenquelle hinzugefügt.
    • Der LKW-Routenlinie werden zwei Eigenschaften hinzugefügt: eine Strichfarbe #B76DAB (Violett) und eine Strichstärke (fünf Pixel).

  4. Speichern Sie die Datei TruckRoute.html, und aktualisieren Sie Ihren Webbrowser. Auf der Karte sollten nun sowohl die LKW- als auch die PKW-Route angezeigt werden.

    A screenshot that displays both a private as well as a commercial vehicle route on a map using the Azure Route Service.

    • Die LKW-Route wird mit einer dicken blauen Linie angezeigt, und die PKW-Route wird mit einer dünnen violetten Linie angezeigt.
    • Die PKW-Route verläuft über den Lake Washington auf der I-90, die durch Tunnel unter Wohngebieten hindurch führt. Da sich die Tunnel innerhalb von Wohngebieten befinden, ist diese Strecke nicht für Gefahrguttransporte geeignet. Die LKW-Route für den Frachttyp USHazmatClass2 soll deshalb über eine andere Strecke verlaufen, die diesbezüglich keine Einschränkungen aufweist.

Nächste Schritte

Im nächsten Tutorial wird der Prozess für die Erstellung einer einfachen Shopsuche mit Azure Maps erläutert.

Erstellen einer Shopsuche mit Azure Maps