Kurz: Zobrazení směrů tras pomocí služby Azure Maps Route a ovládacího prvku Map

Článek
11/05/2024

V tomto kurzu se dozvíte, jak pomocí rozhraní API služby Azure Maps Route a ovládacího prvku Map zobrazit směry trasy od začátku do koncového bodu. 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 Maps
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ěkolik věcí, které je potřeba vědět o HTML:

Hlavička HTML obsahuje soubory prostředků CSS a JavaScript hostované knihovnou ovládacích prvků Map Azure.
Událost onload v textu stránky volá GetMap funkci, když tělo stránky dokončí načítání.
Funkce GetMap obsahuje vložený javascriptový kód používaný pro přístup k rozhraním API služby Azure Maps. Tato funkce se přidá 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 Maps, které zadáte. Ujistěte se, že řetězec <Your Azure Maps Key> nahraďte primárním klíčem Azure Maps, který jste zkopírovali ze svého účtu Maps.
```
//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 JavaScriptu:
- Toto je jádro GetMap funkce, která inicializuje rozhraní API mapového řízení pro klíč účtu Azure Maps.
- atlas je obor názvů, který obsahuje rozhraní API Služby Azure Maps 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 Maps.

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 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 k načtení obrázku ikony a informací o popisku textu 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 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 vlastnosti SetCamera ovládacího prvku Map naleznete v tématu setCamera(CameraOptions | Vlastnost CameraBoundsOptions & AnimationOptions)
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 Trasy tras Azure Maps získat směry trasy a odhadovaný čas příjezdu z jednoho bodu do druhého.

Tip

Služby Azure Maps 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 JavaScriptu:

Tento kód vytvoří trasu od začátku do koncového bodu.
Dotazuje url rozhraní API služby Azure Maps Route k výpočtu směrů tras.
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 Maps.

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

Sdílet prostřednictvím