Zelfstudie: Routebeschrijvingen weergeven met behulp van de Azure Maps-routeservice en een kaartbesturingselement

Artikel
11/03/2021
6 minuten om te lezen

In deze zelfstudie ziet u hoe u de Azure Maps-routeservice-API en een kaartbesturingselement kunt gebruiken om de routebeschrijving van het begin- tot het eindpunt weer te geven. In deze zelfstudie leert u het volgende:

Het kaartbesturingselement maken en weergeven op een webpagina.
Definiëren hoe de route wordt weergegeven door symboollagen en lijnlagen te definiëren.
GeoJSON-objecten maken en toevoegen aan de kaart om begin- en eindpunten aan te duiden.
Routebeschrijving van de begin- en eindpunten ophalen met behulp van de API Routebeschrijving ophalen.

U kunt de volledige broncode voor het voorbeeld hier ophalen. Een livevoorbeeld is hier te vinden.

Vereisten

Een Azure Maps-account maken
Een primaire sleutel voor een abonnement verkrijgen, ook wel bekend als de primaire sleutel of de abonnementssleutel.

Het kaartbesturingselement maken en weergeven

De volgende stappen laten zien hoe u het kaartbesturingselement maakt en weergeeft op een webpagina.

Maak een nieuw bestand op uw lokale computer en noem dit MapRoute.html.

Kopieer de volgende HTML-opmaak en plak deze in het bestand.

<!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/2/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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>

De HTML-header bevat de CSS- en JavaScript-bronbestanden die worden gehost door de Azure-bibliotheek voor kaartbesturingselementen. De gebeurtenis onload van de hoofdtekst roept de functie GetMap aan. In de volgende stap voegen we de initialisatiecode van het kaartbesturingselement toe.

Voeg de volgende JavaScript-code toe aan de functie GetMap. Vervang de tekenreeks <Your Azure Maps Key> door de primaire sleutel die u hebt gekopieerd uit uw Maps-account.

//Instantiate a map object
var map = new atlas.Map("myMap", {
    //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
    authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '<Your Azure Maps Key>'
    }
});

Sla het bestand op en open het in uw browser. Er wordt een eenvoudig kaartbesturingselement weergegeven.

Rendering van routeweergave definiëren

In deze zelfstudie gaat u met behulp van een lijnlaag de route weergeven. De begin- en eindpunten worden weergegeven met behulp van een symboollaag. Zie Een lijnlaag toevoegen aan een kaart voor meer informatie over het toevoegen van lijnlagen. Zie Een symboollaag toevoegen aan een kaart voor meer informatie over symboollagen.

Voeg de volgende JavaScript-code toe aan de functie GetMap. Met deze code wordt de gebeurtenis-handler ready van het kaartbesturingselement geïmplementeerd. De rest van de code in deze zelfstudie wordt binnen de gebeurtenis-handler ready geplaatst.
```
//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.
    }));
});
```
In de gebeurtenis-handler ready van het kaartbesturingselement wordt een gegevensbron gemaakt waarin de route vanaf het begin- tot het en eindpunt wordt opgeslagen. Er wordt een lijnlaag gemaakt en aan de gegevensbron gekoppeld om te definiëren hoe de routelijn wordt weergegeven. Er is een tweede parameter met de waarde 'labels' doorgegeven om ervoor te zorgen dat de routelijn de labels van de weg niet bedekt.

Vervolgens wordt er een symboollaag gemaakt en aan de gegevensbron gekoppeld. Deze laag geeft aan hoe de begin- en eindpunten worden weergegeven. In dit geval zijn er expressies toegevoegd om de afbeelding van het pictogram en de tekstlabelgegevens op te halen uit de eigenschappen van elk puntobject. Zie Gegevensgestuurde stijlexpressies voor meer informatie over expressies.
Stel Microsoft in als beginpunt en een benzinestation in Seattle als eindpunt. Voeg de volgende code toe aan de gebeurtenis-handler ready van het kaartbesturingselement.
```
//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
});
```
Deze code maakt twee GeoJSON-puntobjecten die de begin- en eindpunten vertegenwoordigen, die vervolgens aan de gegevensbron worden toegevoegd.

In het laatste codeblok wordt de cameraweergave ingesteld met de breedtegraad en de lengtegraad van het begin- en eindpunt. De begin- en eindpunten worden toegevoegd aan de gegevensbron. Het begrenzingsvak voor de begin- en eindpunten wordt berekend met behulp van de functie atlas.data.BoundingBox.fromData. Dit begrenzingsvak wordt gebruikt om de cameraweergave van de kaart met behulp van de functie map.setCamera in te stellen op de hele route. Er wordt opvulling toegevoegd om de grootte van de pixels in de symboolpictogrammen te compenseren. Zie de eigenschap setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions) voor meer informatie over de eigenschap setCamera van het kaartbesturingselement.
Sla MapRoute.html op en vernieuw de browser. De kaart is nu gecentreerd op Seattle. De blauwe druppelvormige speld duidt het beginpunt aan. De blauwe ronde speld duidt het eindpunt aan.

Routebeschrijving ophalen

In deze sectie wordt beschreven hoe u de API voor routebeschrijvingen van Azure Maps kunt gebruiken om routebeschrijvingen van het ene punt naar het andere en de geschatte aankomsttijd op te halen.

Tip

De routeservices van Azure Maps bieden API's om routes te plannen op basis van verschillende routetypen zoals snelste, kortste, zuinigste of leukste, waarbij rekening wordt gehouden met afstand, verkeersomstandigheden en het gebruikte vervoersmiddel. Met de service kunnen gebruikers ook toekomstige routes plannen op basis van historische verkeersomstandigheden. Gebruikers kunnen de voorspelling van de duur van de route voor elke gewenste tijd bekijken. Zie API Routebeschrijving ophalen voor meer informatie.

Voeg in de functie GetMap in de gebeurtenis-handler ready van het besturingselement het volgende toe aan de JavaScript-code.
```
// Use SubscriptionKeyCredential with a subscription key
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());

// Use subscriptionKeyCredential to create a pipeline
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);

// Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline);
```
De SubscriptionKeyCredential maakt een SubscriptionKeyCredentialPolicy voor het verifiëren van HTTP-aanvragen voor Azure Maps met de abonnementssleutel. De atlas.service.MapsURL.newPipeline() neemt het beleid SubscriptionKeyCredential op en maakt een pijplijninstantie. De routeURL staat voor een URL voor routebewerkingen van Azure Maps.

Nadat u referenties en de URL hebt ingesteld, voegt u de volgende code toe aan de gebeurtenis-handler ready van het besturingselement. Met deze code wordt de route van het beginpunt naar het eindpunt samengesteld. De routeURL vraagt de API Azure Maps-routeservice om de routebeschrijving te berekenen. Met behulp van de methode geojson.getFeatures() wordt vervolgens uit het antwoord een verzameling GeoJSON-kenmerken geëxtraheerd en aan de gegevensbron toegevoegd.

//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);
});

Sla het bestand MapRoute.html op en vernieuw de webbrowser. Op de kaart zou nu de route van het begin- tot het eindpunt moeten zijn weergegeven.

U kunt de volledige broncode voor het voorbeeld hier ophalen. Een livevoorbeeld is hier te vinden.

Resources opschonen

Er zijn geen resources die moeten worden opgeruimd.

Volgende stappen

De volgende zelfstudie laat zien hoe u een routequery maakt met beperkingen, zoals de manier van reizen of het type lading. U kunt vervolgens meerdere routes weergeven op dezelfde kaart.

Routes vinden voor verschillende manieren van reizen