Freigeben über

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>

    <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 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 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.

    Ein Screenshot zeigt die einfachste Karte, die Sie erstellen können, indem Sie die Atlas-Karten-API mit Ihrem Azure Maps-Abonnementschlüssel aufrufen.

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 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.

    Der Screenshot, der eine Karte von Los Angeles zeigt, wobei die Straßen Verkehrsflussdaten anzeigen.

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 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.
    • Übergeben Sie einen zweiten Parameter mit dem Wert 'labels', um sicherzustellen, dass die Straßennamen nicht von der Routenlinie verdeckt werden.

    Als Nächstes wird eine Symbolebene erstellt und der Datenquelle angefügt. Diese Ebene gibt an, wie die Start- und Endpunkte gerendert werden. Es werden 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 zu 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.

    Der Screenshot, der eine Karte mit einer Route zeigt, die eine blaue Tropfennadel enthält, die den Startpunkt markiert, und eine blaue runde Nadel, die den Endpunkt markiert.

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 im ready-Ereignishandler des Steuerelements 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 search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        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 den Koordinaten der einzelnen Abschnitte aus der Antwort erstellt.
    • 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.

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

    var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });

    //Add the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

    Informationen zu 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 den Koordinaten der einzelnen Abschnitte erstellt und der Datenquelle hinzugefügt.
    • Der LKW-Routenlinie werden zwei Eigenschaften hinzugefügt: eine Strichfarbe #B76DAB (Violett) und eine Strichstärke (fünf Pixel).

  3. 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.

    Der Screenshot, der sowohl eine Privat- als auch eine Nutzfahrzeugroute auf einer Karte mit dem Azure Route Service anzeigt.

    • 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