Tutorial: Vorgehensweise beim Anzeigen von Wegbeschreibungen mithilfe von Routendienst und Kartensteuerelement von Azure Maps

  • Artikel

In diesem Tutorial wird gezeigt, wie Sie die Routendienst-API und das Kartensteuerelement von Azure Maps verwenden, um Wegbeschreibungen von Start- bis Endpunkt anzuzeigen. In diesem Tutorial wird Folgendes veranschaulicht:

  • Erstellen Sie das Kartensteuerelement auf einer Webseite, und zeigen Sie es an.
  • Definieren Sie das Rendern der Anzeige der Route, indem Sie Symbolebenen und Linienebenen definieren.
  • Erstellen Sie GeoJSON-Objekte, und fügen Sie sie der Karte zur Darstellung von Start- und Endpunkten hinzu.
  • Rufen Sie Wegbeschreibungen von Start- bis Endpunkten mithilfe der API zum Abrufen von Wegbeschreibungen ab.

Im Routentutorial in GitHub finden Sie den Quellcode. Ein Livebeispiel finden Sie unter Route zu einem Ziel.

Voraussetzungen

Erstellen und Anzeigen des Kartensteuerelements

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 MapRoute.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 GetMap-Funktion enthält den JavaScript-Inlinecode, der für den Zugriff auf die Azure Maps-APIs genutzt wird. Sie wird im nächsten Schritt hinzugefügt.

  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 Key> durch den Azure Maps-Primärschlüssel ersetzen, den Sie aus Ihrem Maps-Konto kopiert haben.

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

    Einige Hinweise zu dem vorstehenden JavaScript:

    • Es ist das Herzstück der GetMap-Funktion, mit der die Kartensteuerelement-API für Ihren Azure Maps-Kontoschlüssel 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 Änderungen in der Datei, und öffnen Sie die HTML-Seite in einem Browser. Die gezeigte Karte ist die einfachste Karte, die Sie durch das Aufrufen von atlas.Map mit Ihrem Azure Maps-Kontoabonnementschlüssel erstellen können.

    A screenshot showing the most basic map that you can make by calling `atlas.Map` using your Azure Maps account key.

Definieren des Renderns von Routenanzeigen

In diesem Tutorial wird die Route mithilfe einer Linienebene gerendert. Die Start- und Endpunkt werden mithilfe einer Symbolebene gerendert. 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 in der Funktion GetMap nach der Karteninitialisierung den folgenden JavaScript-Code hinzu:

    //Wait until the map resources are ready.
map.events.add('ready', function() {

    //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: '#2272B9',
        strokeWidth: 5,
        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:

    • Dieser Code implementiert den ready-Ereignishandler des Kartensteuerelements. Der restliche Code in diesem Tutorial wird in den Ereignishandler ready eingefügt.
    • Im ready-Ereignishandler des Kartensteuerelements wird eine Datenquelle zum Speichern der Route vom Start- bis zum Endpunkt erstellt.
    • Um zu definieren, wie die Routenlinie gerendert wird, wird eine Linienebene erstellt und der Datenquelle angefügt. Ü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 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 Startpunkt Microsoft und als Endpunkt eine Tankstelle in Seattle fest. Start und Punkte werden durch Anfügen des folgenden Codes im ready-Ereignishandler des Map-Steuerelements erstellt:

    //Create the GeoJSON objects which represent the start and end points of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
    title: "Redmond",
    icon: "pin-blue"
});

var 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]);

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 80
});

    Einige Hinweise zu dem 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 zur Set-Eigenschaft des Kartensteuerelements Kamera finden Sie im Set Kamera(Kamera Options | Kamera BoundsOptions & AnimationOptions) Eigenschaft.

  3. Speichern Sie die Datei MapRoute.html, und aktualisieren Sie den Browser. Die Karte ist nun auf Seattle zentriert. Das blaue Tropfensymbol markiert den Startpunkt. Das blaue Kreissymbol markiert den Zielort.

    A screenshot showing a map with a route containing a blue teardrop pin marking the start point at Microsoft in Redmond Washington and a blue round pin marking the end point at a gas station in Seattle.

Abrufen von Wegbeschreibungen

In diesem Abschnitt erfahren Sie, wie Sie mithilfe der Wegbeschreibungs-API von Azure Maps Wegbeschreibungen und die voraussichtliche Ankunftszeit für eine Route zwischen zwei Punkten abrufen.

Tipp

Der Routendienst von Azure Maps stellt APIs zum Planen von Routen basierend auf verschiedenen Routentypen (etwa schnellste, kürzeste, umweltfreundlichste oder schönste 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. Nachdem Sie die Anmeldeinformationen und die URL eingerichtet haben, fügen Sie am Ende des ready-Ereignishandlers des Steuerelements den folgenden Code an.

    //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
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
    //Get data features from response
    var data = directions.geojson.getFeatures();
    datasource.add(data);
});

    Einige Hinweise zu dem vorstehenden JavaScript:

    • Mit diesem Code wird die Route vom Startpunkt zum Zielort erstellt.
    • Die routeURL fordert bei der Azure Maps-Routendienst-API die Berechnung von Wegbeschreibungen an.
    • Anschließend wird mit der Methode geojson.getFeatures() eine GeoJSON-Merkmalsauswahl extrahiert und der Datenquelle hinzugefügt.

  3. Speichern Sie die Datei MapRoute.html, und aktualisieren Sie den Webbrowser. Die Karte sollte nun die Route vom Startpunkt bis zum Zielort anzeigen.

    A screenshot showing a map that demonstrates the Azure Map control and Route service.

  • Den vollständigen Code, der in diesem Tutorial verwendet wird, finden Sie auf GitHub im Routentutorial.
  • Informationen zur Anzeige des Livebeispiels finden Sie unter Route to a destination (Route zu einem Ziel) auf der Website Azure Maps Code Samples.

Nächste Schritte

Im nächsten Tutorial erfahren Sie, wie Sie eine Routenabfrage mit Einschränkungen wie Fortbewegungsart oder Frachttyp erstellen. Anschließend können Sie mehrere Routen auf derselben Karte anzeigen.

Ermitteln von Routen für verschiedene Fortbewegungsarten per Azure Maps