Självstudie: Så här visar du vägbeskrivningar med hjälp av Azure Kartor Route-tjänsten och kartkontrollen

  • Artikel

Den här självstudien visar hur du använder Azure Kartor Route-tjänst-API:et och kartkontrollen för att visa vägbeskrivningar från start till slutpunkt. Den här självstudien visar hur du:

  • Skapa och visa kartkontrollen på en webbsida.
  • Definiera visningsåtergivningen 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ägbeskrivningar från start- och slutpunkter med api:et Hämta vägbeskrivningar.

Se routningsguiden i GitHub för källkoden. Se Dirigera till ett mål för ett liveexempel.

Förutsättningar

Skapa och visa kartkontrollen

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

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

  2. Lägg till 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/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>

    Några saker att veta om html-koden ovan:

    • HTML-huvudet innehåller CSS- och JavaScript-resursfiler som hanteras av Azure Map Control-biblioteket.
    • Händelsen onload i sidtexten anropar GetMap funktionen när sidans brödtext har lästs in.
    • Funktionen GetMap innehåller den infogade JavaScript-koden som används för att komma åt Azure Kartor-API:er. Det läggs till i nästa steg.

  3. Lägg sedan till följande JavaScript-kod i GetMap funktionen, precis under koden som lades till i det sista steget. Den här koden skapar en kartkontroll och initierar den med hjälp av dina Azure Kartor prenumerationsnycklar som du anger. Kontrollera och ersätt strängen <Your Azure Maps Key> med den primära Azure Kartor-nyckel som du kopierade från ditt Kartor-konto.

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

    Några saker att veta om ovanstående JavaScript:

    • Det här är kärnan i GetMap funktionen som initierar MAP Control API för din Azure Kartor-kontonyckel.
    • atlas är det namnområde som innehåller Azure Kartor API och relaterade visuella komponenter.
    • atlas.Map ger kontroll över en visuell och interaktiv webbkarta.

  4. Spara dina ändringar i filen och öppna HTML-sidan i en webbläsare. Kartan som visas är den mest grundläggande kartan som du kan göra genom att anropa atlas.Map med din Azure Kartor-kontoprenumerationsnyckel.

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

Definiera vägvisningsrendering

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

  1. I funktionen GetMap, när du har initierat kartan, lägger du till följande JavaScript-kod.

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

    Några saker att veta om ovanstående JavaScript:

    • Den här koden implementerar kartkontrollens ready händelsehanterare. Resten av koden i den här självstudien placeras i ready händelsehanteraren.
    • I kartkontrollens ready händelsehanterare skapas en datakälla för att lagra vägen från start till slutpunkt.
    • För att definiera hur routningslinjen återges skapas ett linjeskikt och kopplas till datakällan. För att säkerställa att väglinjen inte täcker vägetiketterna skickar du en andra parameter med värdet 'labels'.

    Därefter skapas ett symbollager och kopplas till datakällan. Det här lagret anger hur start- och slutpunkter å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.

  2. Ställ sedan in startpunkten på Microsoft och slutpunkten på en bensinstation i Seattle. Start- och poäng skapas genom att följande kod läggs till i kartkontrollens ready händelsehanterare:

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

    Några saker att veta om ovanstående JavaScript:

    • Den här koden skapar två GeoJSON-punktobjekt som representerar start- och slutpunkter, som sedan läggs till i datakällan.
    • Det sista kodblocket anger kameravyn med start- och slutpunkternas latitud och longitud.
    • 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 avgränsningsrutan används för att ställa in kartkameravyn över hela vägen med hjälp av map.setCamera funktionen .
    • Utfyllnad läggs till för att kompensera för symbolikonernas pixeldimensioner.

    Mer information om map-kontrollens uppsättning Kamera egenskap finns i set Kamera(Kamera Options | Kamera BoundsOptions & AnimationOptions) Egenskapen.

  3. Spara MapRoute.html och uppdatera webbläsaren. Kartan är nu centrerad över Seattle. Det blå teardrop-stiftet markerar startpunkten. Det blå runda stiftet markerar slutpunkten.

    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.

Hämta vägbeskrivningar

Det här avsnittet visar hur du använder API:et Azure Kartor Route Directions för att hämta vägbeskrivningar och den uppskattade ankomsttiden från en punkt till en annan.

Dricks

Azure Kartor Route-tjänsterna erbjuder API:er för att planera vägar baserat på olika routningstyper, till exempel snabbaste, kortaste, eko- eller spännande vägar baserat på avstånd, trafikförhållanden och transportsätt som används. Tjänsten låter också användare planera framtida vägar baserat på historiska trafikförhållanden. Användare kan se förutsägelsen av ruttvaraktighet för en viss tid. Mer information finns i Hämta API för vägbeskrivningar.

  1. GetMap I funktionen i kontrollens ready händelsehanterare lägger du till följande i JavaScript-koden.

    //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. När du har konfigurerat autentiseringsuppgifter och URL:en lägger du till följande kod i slutet av kontrollens ready händelsehanterare.

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

    Några saker att veta om ovanstående JavaScript:

    • Den här koden konstruerar vägen från start till slutpunkt.
    • Begär routeURL azure Kartor Route-tjänst-API:et för att beräkna vägbeskrivningar.
    • En GeoJSON-funktionssamling från svaret extraheras sedan med hjälp av geojson.getFeatures() metoden och läggs till i datakällan.

  3. Spara filen MapRoute.html och uppdatera webbläsaren. Kartan bör nu visa vägen från start till slutpunkter.

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

  • Den färdiga koden som används i den här självstudien finns i routningsguiden på GitHub.
  • Information om hur du visar det här exemplet live finns i Dirigera till ett mål på azure Kartor-kodexempelwebbplatsen.

Nästa steg

Nästa självstudie visar hur du skapar en routningsfrå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