Tutorial: Menemukan dan menampilkan rute untuk berbagai mode perjalanan menggunakan Azure Maps

Artikel
11/05/2024

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 memanggil GetMap 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:
- Kode ini adalah inti dari fungsi GetMap, yang menginisialisasi API Kontrol Peta untuk akun Azure Maps Anda.
- atlas adalah namespace yang terdiri dari API Azure Maps dan komponen visual terkait.
- atlas.Map menyediakan kontrol untuk peta web visual dan interaktif.
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 aktivitas ready 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 penanganan ready aktivitas.
- Dalam penangan aktivitas peta ready, pengaturan arus lalu lintas pada peta diatur ke relative, yang merupakan kecepatan jalan relatif terhadap arus bebas.
- Untuk opsi lalu lintas lainnya, lihat antarmuka TrafficOptions.
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.

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 fungsi map.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 membawa USHazmatClass2 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.

Membuat pencari lokasi toko menggunakan Azure Maps

Bagikan melalui