Kurz: Zobrazení směrů tras pomocí služby Azure Mapy Route a mapového řízení

Článek
04/30/2024

V tomto kurzu se dozvíte, jak pomocí rozhraní API služby Azure Mapy Route a mapového ovládacího prvku zobrazit směry tras od začátku do konce. Tento kurz ukazuje, jak:

Umožňuje vytvořit a zobrazit ovládací prvek Mapa na webové stránce.
Definujte vykreslování trasy tak, že definujete vrstvy symbolů a vrstvy čáry.
Vytvořte a přidejte do mapy objekty GeoJSON, které představují počáteční a koncové body.
Pomocí rozhraní API Pro získání směrů trasy trasy získejte směry trasy z počátečního a koncového bodu.

Podívejte se na kurz trasy na GitHubu pro zdrojový kód. Viz Trasa k cíli živé ukázky.

Požadavky

Účet Azure Mapy
Klíč předplatného

Vytvoření a zobrazení ovládacího prvku Mapa

Následující kroky ukazují, jak vytvořit a zobrazit ovládací prvek Mapa na webové stránce.

Na místním počítači vytvořte nový soubor s názvem MapRoute.html.

Přidejte do souboru následující kód HTML:

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

    <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ěkteré informace o výše uvedeném kódu HTML:

Hlavička HTML obsahuje soubory prostředků CSS a JavaScript hostované knihovnou ovládacích prvků Map Azure.
Událost onload v těle stránky volá GetMap funkci při načtení textu stránky.
Funkce GetMap obsahuje vložený javascriptový kód použitý pro přístup k rozhraním API azure Mapy. Přidá se v dalším kroku.

Dále do funkce přidejte následující javascriptový kód GetMap přímo pod kód přidaný v posledním kroku. Tento kód vytvoří ovládací prvek mapy a inicializuje ho pomocí klíčů předplatného Azure Mapy, které zadáte. Ujistěte se, že řetězec <Your Azure Maps Key> nahraďte primárním klíčem Azure Mapy, který jste zkopírovali ze svého účtu Mapy.
```
//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>'
    }
});
```
Co je potřeba vědět o výše uvedeném JavaScriptu:
- Toto je jádro GetMap funkce, která inicializuje rozhraní API mapového řízení pro klíč účtu Azure Mapy.
- atlas je obor názvů, který obsahuje rozhraní API služby Azure Mapy a související vizuální komponenty.
- atlas.Map zajišťuje ovládací prvek pro vizuální a interaktivní webovou mapu.
Uložte provedené změny do souboru a otevřete stránku HTML v prohlížeči. Zobrazená mapa je nejzásadnější mapa, kterou můžete provést voláním atlas.Map pomocí klíče předplatného účtu Azure Mapy.

Definování vykreslování zobrazení tras

V tomto kurzu se trasa vykreslí pomocí vrstvy čáry. Počáteční a koncové body se vykreslují pomocí vrstvy symbolů. Další informace o přidávání vrstev čar najdete v tématu Přidání vrstvy čáry do mapy. Další informace o vrstvách symbolů najdete v tématu Přidání vrstvy symbolů do mapy.

Do funkce GetMap za inicializaci mapy přidejte následující kód JavaScriptu.
```
//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.
    }));
});
```
Co je potřeba vědět o výše uvedeném JavaScriptu:
- Tento kód implementuje obslužnou rutinu ready události ovládacího prvku Map. Zbytek kódu v tomto kurzu se umístí do obslužné rutiny ready události.
- V obslužné rutině události ovládacího prvku ready mapy se vytvoří zdroj dat pro uložení trasy od začátku do koncového bodu.
- Pokud chcete definovat, jak se trasa vykresluje, vytvoří se vrstva čáry a připojí se ke zdroji dat. Pokud chcete zajistit, aby se čára trasy nezakrývala popisky silnic, předejte druhý parametr s hodnotou 'labels'.
Dále se vytvoří vrstva symbolů a připojí se ke zdroji dat. Tato vrstva určuje, jak se vykreslují počáteční a koncové body. Výrazy byly přidány pro načtení informací o obrázku ikony a textovém popisku z vlastností každého objektu bodu. Další informace o výrazech najdete v tématu Výrazy ve stylu řízené daty.
Dále nastavte počáteční bod v Microsoftu a koncový bod na čerpací stanici v Seattlu. Začátek a body se vytvoří připojením následujícího kódu v obslužné rutině ready události ovládacího prvku Map:
```
//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
});
```
Co je potřeba vědět o výše uvedeném JavaScriptu:
- Tento kód vytvoří dva objekty GeoJSON Point, které představují počáteční a koncové body, které se pak přidají do zdroje dat.
- Poslední blok kódu nastaví zobrazení kamery pomocí zeměpisné šířky a délky počátečního a koncového bodu.
- Počáteční a koncový bod se přidají ke zdroji dat.
- Ohraničující rámeček pro počáteční a koncový bod se vypočítá pomocí funkce atlas.data.BoundingBox.fromData. Tento ohraničující rámeček slouží k nastavení zobrazení mapových kamer přes celou trasu map.setCamera pomocí funkce.
- Odsazení se přidá, aby se kompenzuje rozměry pixelů ikon symbolů.
Další informace o nastavení ovládacího prvku Mapy Kamera vlastnost naleznete v sadě Kamera(Kamera Options | Kamera BoundsOptions a AnimationOptions) Vlastnost.
Uložte MapRoute.html a aktualizujte prohlížeč. Mapa je teď za středem nad Seattlem. Modrý špendlík slzy označuje počáteční bod. Modrý kulatý špendlík označuje koncový bod.

Získání navigačních pokynů pro trasu

V této části se dozvíte, jak pomocí rozhraní API směrů tras Azure Mapy získat směry trasy a odhadovaný čas příjezdu z jednoho bodu do druhého.

Tip

Služby Azure Mapy Route nabízejí rozhraní API pro plánování tras na základě různých typů tras, jako jsou nejrychlejší, nejkratší, eko nebo vzrušující trasy založené na vzdálenosti, podmínkách provozu a použitém režimu dopravy. Služba také umožňuje uživatelům plánovat budoucí trasy na základě historických dopravních podmínek. Uživatelé můžou zobrazit predikci doby trvání tras pro daný čas. Další informace najdete v tématu Získání směrů trasy rozhraní API.

GetMap Ve funkci přidejte do obslužné rutiny události ovládacího prvku ready následující kód JavaScriptu.

var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });
    //Add route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

Co je potřeba vědět o výše uvedeném JavaScriptu:

Tento kód vytvoří trasu od začátku do koncového bodu.
Dotazuje url rozhraní API služby Azure Mapy Route k výpočtu směrů trasy.
Pole souřadnic se pak extrahuje z odpovědi a přidá se do zdroje dat.

Uložte soubor MapRoute.html a aktualizujte webový prohlížeč. Mapa by teď měla zobrazit trasu od začátku do koncových bodů.

Dokončený kód použitý v tomto kurzu najdete v kurzu směrování na GitHubu.
Pokud chcete tuto ukázku zobrazit živě, přečtěte si téma Směrování do cíle na webu ukázek kódu Azure Mapy.

Další kroky

V dalším kurzu se dozvíte, jak vytvořit dotaz na trasu s omezeními, jako je režim cesty nebo typ nákladu. Pak můžete na stejné mapě zobrazit více tras.

Vyhledání tras pro různé režimy dopravy

Share via