Tutorial: Cara menampilkan petunjuk rute menggunakan layanan Rute Azure Maps dan kontrol Peta

Tutorial ini menunjukkan kepada Anda cara menggunakan API layanan Rute Azure Maps dan kontrol Peta untuk menampilkan petunjuk arah rute dari awal hingga titik akhir. Dalam tutorial ini, Anda akan mempelajari cara:

  • Buat dan tampilkan kontrol Peta pada halaman web.
  • Tentukan penyajian tampilan rute dengan menentukan lapisan Simbol dan lapisan Baris.
  • Buat dan tambahkan objek GeoJSON ke Peta untuk mewakili titik awal dan akhir.
  • Dapatkan petunjuk arah rute dari titik awal dan akhir menggunakan API petunjuk arah Dapatkan Rute.

Anda dapat memperoleh kode sumber lengkap untuk sampel di sini. Sampel langsung dapat ditemukan di sini.

Prasyarat

  1. Membuat akun Azure Maps
  2. Dapatkan kunci langganan primer, yang juga dikenal sebagai kunci primer atau kunci langganan.

Membuat dan menampilkan kontrol Peta

Langkah-langkah berikut ini memperlihatkan kepada Anda cara membuat dan menampilkan kontrol Peta di halaman web.

  1. Pada komputer lokal Anda, buat file baru dan beri nama MapRoute.html.

  2. Salin/tempel markup HTML berikut ke dalam 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/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/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>
    

    Header HTML menyertakan file sumber daya CSS dan JavaScript yang di-hosting oleh pustaka Kontrol Peta Azure. Kejadian onload isi memanggil fungsi GetMap. Pada langkah berikutnya, kita akan menambahkan kode inisialisasi kontrol Peta.

  3. Tambahkan kode JavaScript berikut ke fungsi GetMap. Ganti string <Your Azure Maps Key> dengan kunci primer yang Anda salin dari akun Azure Maps Anda.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
           authType: 'subscriptionKey',
           subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    
  4. Simpan file dan buka di browser Anda. Yang sederhana ditampilkan.

    Penyajian peta dasar kontrol Peta

Menentukan penyajian tampilan rute

Dalam tutorial ini, kita akan merender rute menggunakan lapisan baris. Titik awal dan akhir akan dirender menggunakan lapisan simbol. 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.

  1. Tambahkan kode JavaScript berikut ke fungsi GetMap. Kode ini mengimplementasikan penanganan aktivitas ready kontrol Peta. Sisa kode dalam tutorial ini akan ditempatkan di dalam penanganan aktivitas ready.

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

    Di penanganan aktivitas ready kontrol peta, sumber data dibuat untuk menyimpan rute dari awal hingga titik akhir. Untuk menentukan bagaimana baris rute akan dirender, lapisan baris dibuat dan dilampirkan ke sumber data. Untuk memastikan bahwa jalur rute tidak menutupi label jalan, kami telah melewati parameter kedua dengan nilai 'labels'.

    Selanjutnya, lapisan simbol dibuat dan dilampirkan ke sumber data. Lapisan ini menentukan cara titik awal dan akhir dirender. Ekspresi telah ditambahkan untuk mengambil informasi citra ikon dan label teks dari properti pada setiap objek titik. Untuk mempelajari selengkapnya tentang ekspresi, lihat Ekspresi gaya berbasis data.

  2. Tetapkan titik awal sebagai Microsoft, dan titik akhir sebagai pompa bensin di Seattle. Di penanganan aktivitas ready kontrol Peta, tambahkan kode berikut.

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

    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 tentang properti setCamera kontrol Peta, lihat properti setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions).

  3. Simpan MapRoute.html dan refresh browser Anda. Peta sekarang berpusat di atas Seattle. Pin biru tetesan air mata menandai titik awal. Pin biru bulat menandai titik akhir.

    Melihat rute titik awal dan akhir di peta

Mendapatkan petunjuk arah rute

Bagian ini menunjukkan kepada Anda cara menggunakan API Petunjuk Arah Rute Azure Maps untuk mendapatkan petunjuk arah rute dan perkiraan waktu kedatangan dari satu titik ke titik lainnya.

Tip

Layanan Rute Azure Maps menawarkan API untuk merencanakan rute berdasarkan berbagai jenis rute seperti 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.

  1. Dalam fungsi GetMap, di dalam penanganan aktivitas ready kontrol, tambahkan yang berikut ke kode JavaScript.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the RouteURL object
    var routeURL = new atlas.service.RouteURL(pipeline);
    

    SubscriptionKeyCredential membuat SubscriptionKeyCredentialPolicy untuk mengautentikasi permintaan HTTP ke Azure Maps dengan kunci langganan. atlas.service.MapsURL.newPipeline() mengambil kebijakan SubscriptionKeyCredential dan membuat instans alur. Operasi routeURL mewakili URL untuk Azure Maps Rute.

  2. Setelah menyiapkan kredensial dan URL, tambahkan kode berikut di penanganan aktivitas ready kontrol. Kode ini membangun rute dari titik awal ke titik akhir. Permintaan routeURL API layanan Rute Azure Maps untuk menghitung arah rute. Kumpulan fitur GeoJSON dari respons kemudian diekstraksi menggunakan metode geojson.getFeatures() dan ditambahkan ke sumber data.

    //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);
    });
    
  3. Simpan file MapRoute.html dan refresh browser web Anda. Peta sekarang harus menampilkan rute dari titik awal hingga titik akhir.

    Mengontrol Azure Maps dan layanan Rute

Anda dapat memperoleh kode sumber lengkap untuk sampel di sini. Sampel langsung dapat ditemukan di sini.

Membersihkan sumber daya

Tidak ada sumber daya yang memerlukan pembersihan.

Langkah berikutnya

Tutorial berikutnya menunjukkan kepada Anda cara membuat kueri rute dengan pembatasan, seperti mode perjalanan atau jenis kargo. Anda kemudian dapat menampilkan beberapa rute pada peta yang sama.