Tutorial: Menemukan dan menampilkan rute untuk berbagai mode perjalanan menggunakan Azure Maps
Tutorial ini menunjukkan cara menggunakan layanan Rute Azure Maps dan kontrol Peta untuk menampilkan arah rute untuk kendaraan pribadi dan kendaraan komersial (truk) dengan USHazmatClass2
jenis kargo.
Dalam tutorial ini, Anda akan mempelajari cara:
- Membuat dan menampilkan kontrol Peta pada halaman web
- Menyajikan data lalu lintas real time di peta
- Meminta dan menampilkan rute kendaraan pribadi dan komersial di peta
Prasyarat
- Akun Azure Maps
- Kunci langganan
Catatan
Untuk informasi selengkapnya tentang autentikasi di Azure Maps, lihat mengelola autentikasi di Azure Maps.
Membuat halaman web baru menggunakan API kontrol peta
Langkah-langkah berikut ini memperlihatkan kepada Anda cara membuat dan menampilkan kontrol Peta di halaman web.
Pada komputer lokal Anda, buat file baru dan beri nama MapTruckRoute.html.
Tambahkan HTML berikut ke file:
<!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>
Beberapa hal yang perlu diketahui tentang HTML:
- Header HTML menyertakan file sumber daya CSS dan JavaScript yang dihosting oleh pustaka Kontrol Azure Map.
- Peristiwa
onload
di isi halaman memanggilGetMap
fungsi ketika isi halaman selesai dimuat. - Fungsi ini
GetMap
berisi kode JavaScript sebaris yang digunakan untuk mengakses Azure Maps API.
Selanjutnya, tambahkan kode JavaScript berikut ke fungsi
GetMap
, tepat di bawah kode yang ditambahkan pada langkah terakhir. Kode ini membuat kontrol peta dan menginisialisasinya menggunakan kunci langganan Azure Maps yang Anda sediakan. Pastikan dan ganti string<Your Azure Maps Subscription Key>
dengan kunci langganan Azure Maps yang Anda salin dari akun Maps Anda.//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>' } });
Beberapa hal yang perlu diketahui tentang JavaScript:
Simpan file dan buka di browser Anda. Browser menampilkan peta dasar dengan memanggil
atlas.Map
menggunakan kunci langganan Azure Maps Anda.
Menyajikan data lalu lintas real time di peta
Dalam fungsi
GetMap
, setelah menginisialisasi peta, tambah kode JavaScript berikut. Kode ini mengimplementasikan penanganan aktivitasready
kontrol Peta.map.events.add("ready", function() { // Add Traffic Flow to the Map map.setTraffic({ flow: "relative" }); });
Beberapa hal yang perlu diketahui tentang JavaScript:
- Kode ini mengimplementasikan penanganan aktivitas
ready
kontrol Peta. Sisa kode dalam tutorial ini ditempatkan di dalam penangananready
aktivitas. - Dalam penangan aktivitas peta
ready
, pengaturan arus lalu lintas pada peta diatur kerelative
, yang merupakan kecepatan jalan relatif terhadap arus bebas. - Untuk opsi lalu lintas lainnya, lihat antarmuka TrafficOptions.
- Kode ini mengimplementasikan penanganan aktivitas
Simpan file MapTruckRoute.html dan refresh halaman di browser Anda. Jika Anda memperbesar ke kota mana pun, seperti Los Angeles, jalanan ditampilkan dengan data arus lalu lintas saat ini.
Tentukan penyajian tampilan rute
Dalam tutorial ini, dua rute dihitung di peta. Rute pertama dihitung untuk kendaraan pribadi (mobil). Rute kedua dihitung untuk kendaraan komersial (truk) untuk menunjukkan perbedaan antara hasilnya. Saat dirender, peta menampilkan ikon simbol untuk titik awal dan akhir rute, dan geometri garis rute dengan warna yang berbeda untuk setiap jalur rute. Untuk informasi selengkapnya tentang menambahkan lapisan baris, lihat Menambahkan lapisan baris ke peta. Untuk mempelajari selengkapnya tentang lapisan simbol, lihat Menambahkan lapisan simbol ke peta.
Di penangan peristiwa kontrol Peta
ready
, tambahkan kode berikut.//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. }));
Beberapa hal yang perlu diketahui tentang JavaScript:
- Di penangan peristiwa kontrol Peta
ready
, sumber data dibuat untuk menyimpan rute dari awal hingga akhir. - Ekspresi digunakan untuk mengambil lebar dan warna garis dari properti pada fitur garis rute.
- Untuk memastikan bahwa garis rute tidak menutupi label jalan, lewati parameter kedua dengan nilai
'labels'
.
Selanjutnya, lapisan simbol dibuat dan dilampirkan ke sumber data. Lapisan ini menentukan cara titik awal dan akhir dirender. Ekspresi ditambahkan untuk mengambil gambar ikon dan informasi label teks dari properti pada setiap objek titik. Untuk mempelajari selengkapnya tentang ekspresi, lihat Ekspresi gaya berbasis data.
- Di penangan peristiwa kontrol Peta
Berikutnya, tetapkan titik awal sebagai perusahaan fiktif di Seattle yang disebut Fabrikam, dan titik akhir sebagai kantor Microsoft. Di penangan peristiwa kontrol Peta
ready
, tambahkan kode berikut.//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 });
Tentang JavaScript:
- Kode ini membuat dua objek Titik GeoJSON untuk mewakili titik awal dan titik akhir, yang kemudian ditambahkan ke sumber data.
- Blok terakhir kode mengatur tampilan kamera menggunakan garis lintang dan bujur titik awal dan titik akhir.
- Titik awal dan titik akhir ditambahkan ke sumber data.
- Kotak pembatas untuk titik awal dan titik akhir dihitung menggunakan fungsi
atlas.data.BoundingBox.fromData
. Kotak pembatas ini digunakan untuk mengatur tampilan kamera peta di seluruh rute menggunakan fungsimap.setCamera
. - Pengisi ditambahkan untuk mengimbangi dimensi piksel ikon simbol.
- Untuk informasi selengkapnya, lihat fungsi setCamera di dokumentasi teknis Microsoft.
Simpan TruckRoute.html dan refresh browser Anda. Peta sekarang berpusat di atas Seattle. Pin tetesan air mata berwarna biru menandai titik awal. Pin biru bulat menandai titik akhir.
Meminta dan menampilkan rute kendaraan pribadi dan komersial di peta
Bagian ini memperlihatkan kepada Anda cara menggunakan layanan Azure Maps Route untuk mendapatkan petunjuk arah dari satu titik ke titik lainnya, berdasarkan mode transportasi Anda. Dua mode transportasi digunakan: truk dan mobil.
Tip
Layanan Rute menyediakan API untuk merencanakan rute tercepat, terpendek, ramah lingkungan, atau mendebarkan berdasarkan jarak, kondisi lalu lintas, dan moda transportasi yang digunakan. Layanan ini juga memungkinkan pengguna merencanakan rute masa depan berdasarkan kondisi lalu lintas historis. Pengguna dapat melihat prediksi durasi rute untuk waktu tertentu. Untuk informasi selengkapnya, lihat Mendapatkan API petunjuk arah Rute.
GetMap
Dalam fungsi , di dalam penanganan aktivitas kontrolready
, tambahkan kode JavaScript berikut untuk membuat rute truk dari titik awal hingga akhir. Rute ini dibuat dan ditampilkan untuk truk yang membawaUSHazmatClass2
kargo berkelas.//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 ); });
Tentang JavaScript di atas:
- Kode ini mengkueri layanan Rute Azure Maps melalui API Petunjuk Arah Rute Azure Maps.
- Garis rute kemudian dibuat dari koordinat setiap giliran dari respons.
- Jalur rute lalu ditambahkan ke sumber data.
- Dua properti ditambahkan ke jalur rute truk: warna goresan biru
#2272B9
, dan lebar goresan sembilan piksel. - Jalur rute diberi indeks 0 untuk memastikan bahwa rute truk dirender sebelum jalur lain di sumber data. Alasannya adalah perhitungan rute truk sering lebih lambat daripada perhitungan rute mobil. Jika jalur rute truk ditambahkan ke sumber data setelah rute mobil, itu akan dirender di atasnya.
Tip
Untuk melihat semua opsi dan nilai yang mungkin untuk Azure Maps Route Directions API, lihat Parameter URI untuk Petunjuk Arah Rute Pos.
Berikutnya, tambahkan kode JavaScript berikut untuk membuat rute untuk mobil.
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 }) ); });
Tentang JavaScript:
- Kode ini mengkueri layanan perutean Azure Maps melalui metode API Petunjuk Arah Rute Azure Maps.
- Garis rute kemudian dibuat dari koordinat setiap belokan dan ditambahkan ke sumber data.
- Dua properti ditambahkan ke jalur rute truk: warna goresan ungu
#B76DAB
, dan lebar goresan lima piksel.
Simpan file TruckRoute.html dan refresh browser web Anda. Peta sekarang akan menampilkan rute truk dan mobil.
- Rute truk ditampilkan menggunakan garis biru tebal dan rute mobil ditampilkan menggunakan garis ungu tipis.
- Rute mobil melintasi Danau Washington melalui I-90, melewati terowongan di bawah daerah perumahan. Karena terowongan terletak di daerah pemukiman, kargo limbah berbahaya dibatasi. Rute truk, yang menentukan jenis kargo
USHazmatClass2
, diarahkan untuk menggunakan jalan raya yang berbeda yang tidak memiliki pembatasan ini.
- Untuk kode lengkap yang digunakan dalam tutorial ini, lihat tutorial Truck Route di GitHub.
- Untuk melihat sampel ini secara langsung, lihat Beberapa rute berdasarkan mode perjalanan di situs Sampel Kode Azure Maps.
- Anda juga dapat menggunakan ekspresi gaya berbasis data.
Langkah berikutnya
Tutorial berikutnya menunjukkan proses pembuatan pencari toko sederhana menggunakan Azure Maps.