Zelfstudie: Routebeschrijvingen weergeven met behulp van Azure Kaarten Route-service en kaartbeheer

  • Artikel

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 ziet u hoe u:

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

Zie de routezelfstudie in GitHub voor de broncode. Zie Route naar een bestemming voor een livevoorbeeld.

Vereisten

Het kaartbesturingselement maken en weergeven

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

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

  2. Voeg de volgende HTML toe aan 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/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>

    Enkele dingen die u moet weten over de bovenstaande HTML:

    • De HTML-header bevat CSS- en JavaScript-resourcebestanden die worden gehost door de Azure Map Control-bibliotheek.
    • De onload gebeurtenis in de hoofdtekst van de pagina roept de GetMap functie aan wanneer de hoofdtekst van de pagina is geladen.
    • De GetMap functie bevat de inline JavaScript-code die wordt gebruikt voor toegang tot de Azure Kaarten-API's. Deze wordt toegevoegd in de volgende stap.

  3. Voeg vervolgens de volgende JavaScript-code toe aan de GetMap functie, net onder de code die in de laatste stap is toegevoegd. Met deze code maakt u een kaartbeheer en initialiseert u dit met behulp van uw Azure Kaarten abonnementssleutels die u opgeeft. Zorg ervoor dat en vervang de tekenreeks <Your Azure Maps Key> door de primaire sleutel van Azure Kaarten die u hebt gekopieerd uit uw Kaarten-account.

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

    Enkele dingen die u moet weten over de bovenstaande JavaScript:

    • Dit is de kern van de GetMap functie, waarmee de Map Control-API voor uw Azure Kaarten-accountsleutel wordt geïnitialiseerd.
    • atlas is de naamruimte die de Azure Kaarten-API en gerelateerde visuele onderdelen bevat.
    • atlas.Map biedt het besturingselement voor een visuele en interactieve webkaart.

  4. Sla de wijzigingen op in het bestand en open de HTML-pagina in een browser. De weergegeven kaart is de meest eenvoudige kaart die u kunt maken door aan te roepen atlas.Map met behulp van de abonnementssleutel van uw Azure Kaarten-account.

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

Rendering van routeweergave definiëren

In deze zelfstudie wordt de route weergegeven met behulp van een lijnlaag. 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.

  1. Voeg de volgende JavaScript-code toe aan de functie GetMap nadat de kaart is geïnitialiseerd.

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

    Enkele dingen die u moet weten over de bovenstaande JavaScript:

    • Met deze code wordt de gebeurtenis-handler ready van het kaartbesturingselement geïmplementeerd. De rest van de code in deze zelfstudie wordt in de ready gebeurtenis-handler geplaatst.
    • In de gebeurtenis-handler ready van het kaartbesturingselement wordt een gegevensbron gemaakt waarin de route vanaf het begin- tot het en eindpunt wordt opgeslagen.
    • Als u wilt definiëren hoe de routelijn wordt weergegeven, wordt er een lijnlaag gemaakt en gekoppeld aan de gegevensbron. Om ervoor te zorgen dat de routelijn de weglabels niet bedekt, geeft u een tweede parameter door met de waarde van 'labels'.

    Vervolgens wordt er een symboollaag gemaakt en aan de gegevensbron gekoppeld. In deze laag wordt aangegeven hoe de begin- en eindpunten worden weergegeven. Expressies zijn toegevoegd om de afbeelding van het pictogram en de tekstlabelgegevens op te halen uit eigenschappen van elk puntobject. Zie Gegevensgestuurde stijlexpressies voor meer informatie over expressies.

  2. Stel vervolgens het beginpunt in bij Microsoft en het eindpunt op een benzinestation in Seattle. Begin- en punten worden gemaakt door de volgende code toe te voegen in de gebeurtenis-handler van ready het kaartbeheer:

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

    Enkele dingen die u moet weten over de bovenstaande JavaScript:

    • 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 setCamera(CameraOptions | CameraOptions) voor meer informatie over de eigenschap SetCamera van het kaartbesturingselement Eigenschap CameraBoundsOptions & AnimationOptions ).

  3. Sla MapRoute.html op en vernieuw de browser. De kaart is nu gecentreerd op Seattle. De blauwe traanpin markeert het beginpunt. De blauwe ronde speld markeert het eindpunt.

    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.

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.

  1. Voeg in de functie GetMap in de gebeurtenis-handler ready van het besturingselement het volgende toe aan de JavaScript-code.

    //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. Nadat u referenties en de URL hebt ingesteld, voegt u de volgende code toe aan het einde van de gebeurtenis-handler van het besturingselement ready .

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

    Enkele dingen die u moet weten over de bovenstaande JavaScript:

    • Met deze code wordt de route van het begin 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.

  3. Sla het bestand MapRoute.html op en vernieuw de webbrowser. Op de kaart moet nu de route van de begin- tot eindpunten worden weergegeven.

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

  • Zie de routezelfstudie op GitHub voor de voltooide code die in deze zelfstudie wordt gebruikt.
  • Zie Route naar een bestemming op de site Codevoorbeelden van Azure Kaarten om dit voorbeeld live weer te geven.

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