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

Oktatóanyag: Útvonalak keresése és megjelenítése különböző utazási módokhoz az Azure Térképek

  • Cikk

Ez az oktatóanyag bemutatja, hogyan használható az Azure Térképek Route service és a Map control a magánjárművek és a teherszállító haszongépjárművek (teherautók) USHazmatClass2 útvonalirányainak megjelenítésére.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • A Térkép vezérlőelem létrehozása és megjelenítése weblapon
  • Valós idejű forgalmi adatok megjelenítése térképen
  • Magán- és haszongépjármű-útvonalak kérése és megjelenítése térképen

Előfeltételek

  • Azure-Térképek-fiók
  • Előfizetési kulcs

Feljegyzés

Az Azure Térképek-hitelesítéssel kapcsolatos további információkért lásd az Azure Térképek hitelesítésének kezelését.

Új weblap létrehozása a térképkezelési API használatával

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

    <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 eléréséhez használt beágyazott JavaScript-kódot.

  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 Subscription Key> a Térképek-fiókjából másolt Azure Térképek-előfizetési kulcsra cseréli.

    //Instantiate a map object
var map = new atlas.Map("myMap", {
    // Replace <Your Azure Maps Subscription Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});

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

    • Ez a kód a függvény magjaGetMap, amely inicializálja a Map Control API-t az Azure Térképek-fiókjához.
    • 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ájlt, és nyissa meg a böngészőben. A böngésző egy alapszintű térképet jelenít meg az Azure Térképek-előfizetési kulccsal való hívássalatlas.Map.

    Képernyőkép az Atlas Map API meghívásával készíthető legalapvetőbb térképről az Azure Térképek-előfizetési kulccsal.

Valós idejű forgalmi adatok megjelenítése térképen

  1. A GetMap függvényben adja hozzá az alábbi JavaScript-kódot a térkép inicializálása után. Ez a kód implementálja a térképvezérlő eseménykezelőjét ready .

    map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});

    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épes ready eseménykezelőben a térképen relativea forgalomáramlás beállítása az út szabad áramláshoz viszonyított sebessége.
    • További forgalmi lehetőségekért tekintse meg a TrafficOptions felületét.

  2. Mentse a MapTruckRoute.html fájlt, és frissítse a lapot a böngészőben. Ha nagyít egy várost, például Los Angelest, az utcák az aktuális forgalmi adatokkal jelennek meg.

    Képernyőkép Los Angeles térképéről, amelyen az utcák forgalmi adatokat jelenítenek meg.

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

Ebben az oktatóanyagban két útvonal van kiszámítva a térképen. Az első útvonal egy magánjárműre (autóra) van kiszámítva. A második útvonal egy haszongépjárműre (teherautóra) számítva mutatja az eredmények közötti különbséget. Rendereléskor a térkép egy szimbólum ikont jelenít meg az útvonal kezdő és végpontja számára, valamint az útvonal geometriáit különböző színekkel az egyes útvonalvonalakhoz. 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 Térkép vezérlőelem eseménykezelőjében ready fűzze hozzá a következő kódot.

    
//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: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    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:

    • A Térkép vezérlőelem eseménykezelőjében ready létrejön egy adatforrás, amely az útvonalat az elejétől a végéig tárolja.
    • A kifejezésekkel lekérheti a vonal szélességét és színét az útvonalvonal-szolgáltatás tulajdonságaiból.
    • Annak érdekében, hogy az útvonalvonal ne fedje le az útfeliratokat, átadtunk egy második paramétert a következő 'labels'értékkel: .

    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 egy Fabrikam nevű fiktív vállalatként Seattle-ben, a végpontot pedig Microsoft-irodaként. A Térkép vezérlőelem eseménykezelőjében ready fűzze hozzá a következő kódot.

    //Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});

    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á.
    • További információkért tekintse meg a Set Kamera függvényt a Microsoft műszaki dokumentációjában.

  3. Mentse TruckRoute.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 kerek kék gombostű jelöli a végpontot.

    Képernyőkép egy térképről, amelyen egy útvonal látható, amely egy kék könnycseppet tartalmaz, amely a kezdőpontot jelöli, és egy kék kerek tű jelöli a végpontot.

Magán- és haszongépjármű-útvonalak kérése és megjelenítése térképen

Ez a szakasz bemutatja, hogyan használhatja az Azure Térképek Route szolgáltatást az útvonalak egyik pontról a másikra való lekéréséhez a szállítási mód alapján. Két közlekedési mód van használatban: teherautó és autó.

Tipp.

A Route szolgáltatás API-kat biztosít a leggyorsabb, legrövidebb, öko vagy izgalmas útvonalak megtervezéséhez a távolság, a forgalmi feltételek és a használt közlekedé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ő JavaScript-kódot egy teherautó-útvonal létrehozásához a kezdetektől a végpontokig. Ez az útvonal egy osztályozott rakományt szállító USHazmatClass2 teherautóhoz jön létre és jelenik meg.

    //Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    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 the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});

    A fenti JavaScriptről:

    • Ez a kód lekérdezi az Azure Térképek Route szolgáltatást az Azure Térképek Route Directions API-ból.
    • Az útvonalvonal ezután a válasz minden egyes fordulójának koordinátáiból jön létre.
    • A rendszer ezután hozzáadja az útvonalvonalat az adatforráshoz.
    • A teherautó útvonalvonalához két tulajdonság van hozzáadva: kék körvonalszín #2272B9és kilenc képpontos körvonalszélesség.
    • Az útvonal egy 0 indexet kap, amely biztosítja, hogy a teherautó útvonala az adatforrás bármely más sora előtt jelenik meg. Ennek az az oka, hogy a teherautó útvonalának kiszámítása gyakran lassabb, mint egy autó útvonalának kiszámítása. Ha a teherautó útvonalvonala az autóútvonal után hozzáadódik az adatforráshoz, az a felette jelenik meg.

    Tipp.

    Az Azure Térképek Útvonalirányok API összes lehetséges beállításának és értékének megtekintéséhez tekintse meg a Post Route Directions URI-paramétereit.

  2. Ezután fűzze hozzá a következő JavaScript-kódot egy autó útvonalának létrehozásához.

    var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    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 the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

    A fenti JavaScriptről:

    • Ez a kód lekérdezi az Azure Térképek útválasztási szolgáltatást az Azure Térképek Route Directions API-metóduson keresztül.
    • Az útvonalvonal ezután az egyes fordulók koordinátáiból jön létre, és hozzáadódik az adatforráshoz.
    • A teherautó útvonalvonalához két tulajdonságot adunk hozzá: egy lila körvonalszínt #B76DABés egy öt képpontos körvonalszélességűt.

  3. Mentse a TruckRoute.html fájlt, és frissítse a webböngészőt. A térképen mostantól a teherautó és az autó útvonala is látható lesz.

    Képernyőkép, amely egy privát és egy haszongépjármű-útvonalat is megjelenít egy térképen az Azure Route Service használatával.

    • A teherautó útvonala vastag kék vonallal jelenik meg, és az autó útvonala vékony lila vonallal jelenik meg.
    • Az autós útvonal az I-90-esen keresztül halad át a Washington-tóon, a lakóterületek alatti alagutakon halad át. Mivel az alagutak lakóterületeken vannak, a veszélyes hulladék rakománya korlátozott. A tehergépjármű útvonala, amely egy rakománytípust USHazmatClass2 határoz meg, egy másik útvonal használatára van irányítva, amely nem rendelkezik ezzel a korlátozással.

Következő lépések

A következő oktatóanyag bemutatja, hogyan hozhat létre egyszerű tárolókeresőt az Azure Térképek használatával.

Tárolókereső létrehozása az Azure Térképek használatával