Oktatóanyag: Útvonaltervek megjelenítése az Azure Maps Route service és a Map control használatával

Cikk
11/05/2024

Ez az oktatóanyag bemutatja, hogyan használhatja az Azure Maps Route service API-t és a térképvezérlőt az útvonaltervek elejétől a végpontokig való megjelenítéséhez. Ez az oktatóanyag bemutatja, hogyan:

A Térkép vezérlőelem létrehozása és megjelenítése egy weblapon.
Az útvonal megjelenítési megjelenítésének meghatározása szimbólumrétegek és vonalrétegek definiálásával.
GeoJSON-objektumokat hozhat létre és adhat hozzá a térképhez a kezdő- és végpontok megjelenítéséhez.
Útvonaltervek lekérése a kiindulási és a végpontokról az Útvonalirányok lekérése API használatával.

A forráskódhoz tekintse meg a GitHub útvonal-oktatóanyagát . Tekintse meg az Élő minta útvonala egy célhelyre című témakört .

Előfeltételek

Azure Maps-fiók
Előfizetési kulcs

A Térkép vezérlőelem létrehozása és megjelenítése

Az alábbi lépések bemutatják, hogyan hozhat létre és jeleníthet meg térképvezérlőt egy weblapon.

A helyi gépén hozzon létre egy új fájlt MapRoute.html néven.

Adja hozzá a következő HTML-kódot a fájlhoz:

<!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éhány tudnivaló a HTML-ről:

A HTML-fejléc tartalmazza az Azure Map Control-kódtár által üzemeltetett CSS- és JavaScript-erőforrásfájlokat.
Az onload oldal törzsében lévő esemény meghívja a GetMap függvényt, amikor az oldal törzse betöltődik.
A GetMap függvény tartalmazza az Azure Maps API-k eléréséhez használt beágyazott JavaScript-kódot. Ez a függvény a következő lépésben lesz hozzáadva.

Ezután adja hozzá a következő JavaScript-kódot a GetMap függvényhez, közvetlenül az utolsó lépésben hozzáadott kód alatt. Ez a kód létrehoz egy térképvezérlőt, és inicializálja azt az Ön által megadott Azure Maps-előfizetési kulcsokkal. Győződjön meg arról, hogy a sztringet <Your Azure Maps Key> a Maps-fiókból másolt Elsődleges Azure Maps-kulcsra cseréli.
```
//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éhány tudnivaló a JavaScriptről:
- Ez a függvény lényege GetMap , amely inicializálja az Azure Maps-fiókkulcs Map Control API-ját.
- Az Atlas az Azure Maps API-t és a kapcsolódó vizuális összetevőket tartalmazó névtér.
- Az atlas.Map biztosítja a vizuális és interaktív webes térkép vezérlőit.
Mentse a fájl módosításait, és nyissa meg a HTML-oldalt egy böngészőben. A megjelenített térkép a legalapvetőbb térkép, amelyet az Azure Maps-fiók előfizetési kulcsával hívhat atlas.Map meg.

Útvonalmegjelenítési megjelenítés definiálása

Ebben az oktatóanyagban az útvonal egy vonalréteg használatával jelenik meg. A kezdő és a végpont egy szimbólumréteg használatával jelenik meg. A vonalrétegek hozzáadásáról további információt a Vonalréteg hozzáadása térképhez című témakörben talál. A szimbólumrétegekről további információt a Szimbólumréteg hozzáadása térképhez című témakörben talál.

A GetMap függvényben adja hozzá az alábbi JavaScript-kódot a térkép inicializálása után.
```
//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éhány tudnivaló a JavaScriptről:
- Ez a kód implementálja a térképvezérlő eseménykezelőjét ready . Az oktatóanyag többi kódja az ready eseménykezelőben található.
- A térképvezérlő eseménykezelőjében ready létrejön egy adatforrás az útvonal elejétől a végpontig való tárolásához.
- Az útvonalvonal megjelenítésének meghatározásához létrejön egy vonalréteg, és csatlakozik az adatforráshoz. Annak érdekében, hogy az útvonalvonal ne fedje le az útfeliratokat, adjon meg egy második paramétert a következő 'labels'értékével: .
Ezután létrejön egy szimbólumréteg, amely az adatforráshoz van csatolva. Ez a réteg határozza meg a kezdő- és végpontok megjelenítését. Kifejezéseket adtunk hozzá az ikonkép és a szövegfelirat adatainak lekéréséhez az egyes pontobjektumok tulajdonságaiból. A kifejezésekkel kapcsolatos további információkért tekintse meg az adatvezérelt stíluskifejezéseket.
Ezután állítsa be a kezdőpontot a Microsoftnál, a végpontot pedig egy seattle-i benzinkúton. A start és a pontok a következő kód hozzáfűzésével jönnek létre a Térkép vezérlőelem eseménykezelőjében ready :
```
//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éhány tudnivaló a JavaScriptről:
- Ez a kód két GeoJSON-pontobjektumot hoz létre, amelyek a kezdő és a végpontokat jelölik, amelyeket aztán hozzáadnak az adatforráshoz.
- Az utolsó kódblokk a kameranézetet a kezdő és végpontok szélessége és hosszúsága alapján állítja be.
- Az indulási és célpontokat a rendszer hozzáadja az adatforráshoz.
- Az indulási és célpontokhoz tartozó határolókeret kiszámítása az atlas.data.BoundingBox.fromData függvénnyel történik. Ezzel a határolókerettel állíthatja be a térképkamerák nézetét a teljes útvonalon a map.setCamera függvény használatával.
- A rendszer a szimbólumikonok képpontméreteinek kompenzálása érdekében kitöltést ad hozzá.
A térképvezérlő setCamera tulajdonságával kapcsolatos további információkért lásd a setCamera(CameraOptions | CameraBoundsOptions &AnimationOptions) tulajdonság.
Mentse MapRoute.html , és frissítse a böngészőt. A térkép most Seattle-en van középen. A kék könnycsepp tű jelöli a kezdőpontot. A kék kerek tű jelöli a végpontot.

Útvonaltervek lekérése

Ez a szakasz bemutatja, hogyan használhatja az Azure Maps Route Directions API-t az útvonaltervek és a becsült érkezési idő egyik pontról a másikra való lekéréséhez.

Tipp.

Az Azure Maps Route-szolgáltatások API-kat kínálnak az útvonalak különböző útvonaltípusok, például leggyorsabb, legrövidebb, öko vagy izgalmas útvonalak alapján történő tervezéséhez a távolság, a forgalmi feltételek és a használt szállítási mód alapján. A szolgáltatás lehetővé teszi a felhasználók számára a jövőbeli útvonalak megtervezését is az előzményforgalmi feltételek alapján. A felhasználók bármikor megtekinthetik az útvonalak időtartamának előrejelzését. További információ: Útvonaltervek lekérése API.

A függvényben GetMap a vezérlő eseménykezelőjében ready adja hozzá a következőket a JavaScript-kódhoz.

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

Néhány tudnivaló a JavaScriptről:

Ez a kód az útvonalat az elejétől a végpontig hozza létre.
A url lekérdezések lekérdezik az Azure Maps Route service API-t az útvonaltervek kiszámításához.
Ezután egy koordinátatömb lesz kinyerve a válaszból, és hozzáadódik az adatforráshoz.

Mentse a MapRoute.html fájlt, és frissítse a webböngészőt. A térképnek mostantól az elejétől a végpontokig kell megjelenítenie az útvonalat.

Az oktatóanyagban használt befejezett kódért tekintse meg a GitHub útvonal-oktatóanyagát .
A minta élő megtekintéséhez tekintse meg az Útvonal egy célhelyre az Azure Maps Kódminták webhelyén című témakört .

Következő lépések

A következő oktatóanyag bemutatja, hogyan hozhat létre útvonal-lekérdezést korlátozásokkal, például utazási móddal vagy rakománytípussal. Ezután több útvonalat is megjeleníthet ugyanazon a térképen.

Útvonalak keresése különböző utazási módokhoz

Megosztás a következőn keresztül: