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

  • Cikk

Ez az oktatóanyag bemutatja, hogyan használhatja az Azure Térképek Route service API-t és a térképvezérlőt az útvonaltervek elejétől a végpontig 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-Térképek-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.

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

  2. 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>

    <!-- 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éhány tudnivaló a fenti 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ődött.
    • A GetMap függvény tartalmazza az Azure Térképek API-k eléréséhez használt beágyazott JavaScript-kódot. A következő lépésben hozzá lesz adva.

  3. 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 Térképek előfizetési kulcsokkal. Győződjön meg arról, hogy a sztringet <Your Azure Maps Key> az Azure Térképek elsődleges kulcsra cseréli, amelyet a Térképek-fiókjából másolt.

    //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 fenti JavaScriptről:

    • Ez a függvény lényegeGetMap, amely inicializálja az Azure Térképek-fiókkulcs Map Control API-ját.
    • Az Atlas az Azure Térképek 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.

  4. 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 Térképek-fiók előfizetési kulcsával történő hívással atlas.Map hozhat létre.

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

Ú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.

  1. 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 fenti 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.

  2. 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 fenti 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ép vezérlőelem beállításával Kamera tulajdonságával kapcsolatos további információkért lásd a készletet Kamera(Kamera Options | Kamera BoundsOptions & AnimationOptions) Tulajdonság.

  3. Mentse a MapRoute.html fájlt , é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.

    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.

Útvonaltervek lekérése

Ez a szakasz bemutatja, hogyan használhatja az Azure Térképek 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 Térképek Route-szolgáltatások api-kat kínálnak az útvonalak tervezéséhez különböző útvonaltípusok, például a leggyorsabb, a legrövidebb, az öko vagy az izgalmas útvonalak alapján 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.

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

    //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. Miután beállította a hitelesítő adatokat és az URL-címet, fűzze hozzá a következő kódot a vezérlő eseménykezelőjének ready végén.

    //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éhány tudnivaló a fenti JavaScriptről:

    • Ez a kód az útvonalat az elejétől a végpontig hozza létre.
    • A routeURL rendszer az Azure Térképek Route service API-t kéri az útvonaltervek kiszámításához.
    • A rendszer ezután kinyer egy GeoJSON-funkciógyűjteményt a válaszból, geojson.getFeatures() és hozzáadja az adatforráshoz.

  3. 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.

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

További 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