Självstudie: Visa vägriktningar med Azure Kartor tjänsten Route och kartkontroll

Artikel
11/03/2021
5 minuter för att läsa

Den här självstudien visar hur du använder AZURE Kartor tjänsten Route-API:et och kartkontrollen för att visa vägriktningar från början till slut. I den här självstudien får du lära dig att:

Skapa och visa kartkontrollen på en webbsida.
Definiera visningen av vägen genom att definiera symbolskikt och linjeskikt.
Skapa och lägg till GeoJSON-objekt på kartan för att representera start- och slutpunkter.
Hämta vägriktningar från start- och slutpunkter med hjälp av API:et Get Route directions.

Du kan hämta den fullständiga källkoden för exemplet här. Ett live-exempel finns här.

Förutsättningar

Skapa ett Azure Kartor konto
Skaffa en primär prenumerationsnyckel, som även kallas primärnyckel eller prenumerationsnyckel.

Skapa och visa kartkontrollen

Följande steg visar hur du skapar och visar kartkontrollen på en webbsida.

Skapa en ny fil på den lokala datorn och ge den namnet MapRoute.html.

Kopiera/klistra in följande HTML-kod i filen.

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

HTML-huvudet innehåller CSS- och JavaScript-resursfiler som finns i Azure Kartkontroll biblioteket. Brödtextens onload händelse anropar GetMap funktionen . I nästa steg lägger vi till initieringskoden för kartkontrollen.

Lägg till följande JavaScript-kod i funktionen GetMap. Ersätt strängen <Your Azure Maps Key> med den primärnyckel som du kopierade från ditt Kartor konto.

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

Spara filen och öppna den i webbläsaren. Ett enkelt visas.

Definiera ruttvisningsrendering

I den här självstudien renderar vi vägen med hjälp av ett linjeskikt. Start- och slutpunkterna renderas med ett symbolskikt. Mer information om hur du lägger till linjeskikt finns i Lägga till ett linjeskikt i en karta. Mer information om symbolskikt finns i Lägga till ett symbolskikt i en karta.

Lägg till följande JavaScript-kod i GetMap funktionen . Den här koden implementerar händelsehanteraren för ready kartkontrollen. Resten av koden i den här självstudien placeras i ready händelsehanteraren.

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

I kartkontrollens ready händelsehanterare skapas en datakälla för att lagra vägen från början till slutpunkten. För att definiera hur väglinjen ska renderas skapas ett linjeskikt som kopplas till datakällan. För att säkerställa att väglinjen inte täcker vägetiketterna har vi godkänt en andra parameter med värdet 'labels' för .

Därefter skapas ett symbolskikt som kopplas till datakällan. Det här lagret anger hur start- och slutpunkterna återges. Uttryck har lagts till för att hämta information om ikonbilden och textetiketten från egenskaperna för varje punktobjekt. Mer information om uttryck finns i Datadrivna formatuttryck.

Ange startpunkten som Microsoft och slutpunkten som en bensinstation i Seattle. Lägg till följande kod i händelsehanteraren för ready kartkontrollen.
```
//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
});
```
Den här koden skapar två GeoJSON-punktobjekt som representerar start- och slutpunkter, som sedan läggs till i datakällan.

Det sista kodblocket ställer in kameravyn med hjälp av latitud och longitud för start- och slutpunkterna. Start- och slutpunkterna läggs till i datakällan. Avgränsningsfältet för start- och slutpunkterna beräknas med hjälp av funktionen atlas.data.BoundingBox.fromData. Den här begränsningsrutan används för att ställa in kartkameravyn över hela rutten med hjälp av map.setCamera funktionen . Utfyllnad läggs till för att kompensera för pixeldimensionerna för symbolikonerna. Mer information om kartkontrollens setCamera-egenskap finns i setCamera(CameraOptions | Egenskapen CameraBoundsOptions & AnimeringOptions).
Spara MapRoute.html och uppdatera webbläsaren. Kartan är nu centrerad över Seattle. Den blå teardrop-nålen markerar startpunkten. Den runda blå nålen markerar slutpunkten.

Hämta vägriktningar

Det här avsnittet visar hur du använder Azure Kartor Route Directions API för att hämta vägriktningar och beräknad tid för ankomst från en punkt till en annan.

Tips

Azure Kartor Route-tjänsterna erbjuder API:er för att planera vägar baserat på olika vägtyper, till exempel snabbaste, kortaste, miljöväg eller ruttvägar baserat på avstånd, trafikförhållanden och transportläge som används. Tjänsten gör det också möjligt för användare att planera framtida vägar baserat på historiska trafikförhållanden. Användarna kan se förutsägelsen av vägens varaktigheter för en viss tid. Mer information finns i Hämta API för vägriktningar.

Lägg GetMap till följande i ready JavaScript-koden i -kontrollens händelsehanterare i funktionen.
```
// 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);
```
skapar SubscriptionKeyCredential en för att autentisera SubscriptionKeyCredentialPolicy HTTP-begäranden till Azure Kartor med prenumerationsnyckeln. atlas.service.MapsURL.newPipeline()tar i principen och skapar en SubscriptionKeyCredential Pipeline-instans. representerar routeURL en URL till Azure Kartor Route-åtgärder.

När du har konfigurerat autentiseringsuppgifter och URL:en lägger du till följande kod i kontrollens ready händelsehanterare. Den här koden konstruerar vägen från startpunkt till slutpunkt. Begär routeURL att Azure Kartor tjänsten Route API för att beräkna vägriktningar. En GeoJSON-funktionssamling från svaret extraheras sedan med hjälp av geojson.getFeatures() metoden och läggs till i datakällan.

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

Spara filen MapRoute.html och uppdatera webbläsaren. Kartan bör nu visa rutten från början till slutpunkten.

Du kan hämta den fullständiga källkoden för exemplet här. Ett live-exempel finns här.

Rensa resurser

Det finns inga resurser som kräver rensning.

Nästa steg

Nästa självstudie visar hur du skapar en vägfråga med begränsningar, till exempel färdsätt eller typ av last. Du kan sedan visa flera vägar på samma karta.

Hitta rutter för olika färdmedel