Tutorial: Memigrasikan aplikasi web dari Bing Maps

Aplikasi web yang menggunakan Bing Maps sering menggunakan Bing Maps V8 JavaScript SDK. Azure Maps Web SDK adalah SDK berbasis Azure yang cocok untuk dimigrasikan. Azure Maps Web SDK memungkinkan Anda menyesuaikan peta interaktif dengan konten dan citra Anda sendiri untuk ditampilkan di aplikasi web atau seluler Anda. Kontrol ini menggunakan WebGL, memungkinkan Anda untuk merender himpunan data besar dengan performa tinggi. Kembangkan dengan SDK ini menggunakan JavaScript atau TypeScript. Dalam tutorial ini, Anda akan belajar cara:

  • Memuat peta
  • Melokalisasi peta
  • Tambah pushpin, poliline, dan poligon.
  • Menampilkan informasi dalam kotak popup atau info
  • Memuat dan menampilkan data KML dan GeoJSON
  • Pushpin kluster
  • Melapisi lapisan petak peta
  • Menunjukkan data lalu lintas
  • Menambah overlay tanah

Jika memigrasikan aplikasi web yang ada, periksa apakah aplikasi tersebut menggunakan pustaka kontrol peta sumber terbuka seperti Cesium, Leaflet, dan OpenLayers. Jika ya dan Anda lebih suka terus menggunakan pustaka itu, Anda dapat menghubungkannya ke layanan petak peta Azure Maps (petak peta jalan | petak peta satelit). Tautan di bawah menyediakan detail cara menggunakan Azure Maps di beberapa pustaka kontrol peta sumber terbuka yang umum digunakan.

Jika mengembangkan menggunakan kerangka kerja JavaScript, salah satu proyek sumber terbuka berikut dapat berguna:

Prasyarat

  1. Masuk ke portal Microsoft Azure. Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.
  2. Buat akun Azure Maps
  3. Dapatkan kunci langganan primer, yang juga dikenal sebagai kunci primer atau kunci langganan. Untuk informasi selengkapnya tentang autentikasi di Azure Maps, lihat mengelola autentikasi di Azure Maps.

Dukungan fitur utama

Tabel berikut mencantumkan fitur API kunci di SDK JavaScript Bing Maps V8 dan dukungan API serupa di Azure Maps Web SDK.

Fitur Bing Maps Dukungan Azure Maps Web SDK
Pushpin
Pengklusteran pushpin
Poligaris & Poligon
Overlay Tanah
Peta panas
Lapisan Petak Peta
Lapisan KML
Lapisan kontur Sampel
Lapisan pengikat data Dimasukkan dalam modul Sumber Data Gridded Azure Maps sumber terbuka
Lapisan petak peta animasi Dimasukkan dalam modul Animasi Azure Maps sumber terbuka
Alat menggambar
Layanan geocoder
Layanan petunjuk arah
Layanan Matriks Jarak
Layanan Data Spasial T/A
Citra Satelit/Udara
Citra mata burung T/A
Citra pinggir jalan T/A
Dukungan GeoJSON
Dukungan GeoXML Modul IO spasial
dukungan Teks Terkenal
Gaya peta kustom Sebagian

Azure Maps juga memiliki banyak modul sumber terbuka tambahan untuk SDK web yang memperluas kemampuannya.

Perbedaan penting dalam SDK web

Berikut adalah beberapa perbedaan utama antara Bing Maps dan Azure Maps Web SDK yang perlu diperhatikan:

  • Selain menyediakan titik akhir yang dihosting untuk mengakses Azure Maps Web SDK, paket NPM juga tersedia untuk menyematkan SDK Web ke dalam aplikasi jika disukai. Untuk informasi selengkapnya, lihat dokumentasi ini untuk informasi selengkapnya. Paket ini juga memasukkan definisi TypeScript.
  • Bing Maps menyediakan dua cabang SDK mereka yang dihosting; Rilis dan Eksperimental. Cabang Eksperimental dapat menerima beberapa pembaruan sehari ketika pengembangan baru sedang berlangsung. Azure Maps hanya menghosting cabang rilis, namun fitur eksperimental dibuat sebagai modul kustom dalam proyek sampel kode Azure Maps sumber terbuka. Bing Maps dulu memiliki cabang beku juga yang lebih jarang diperbarui, sehingga mengurangi risiko melanggar perubahan karena rilis. Di Azure Maps, Anda dapat menggunakan modul NPM dan mengarahkan ke rilis versi minor sebelumnya.

Tip

Azure Maps menerbitkan versi SDK yang diperkecil dan tidak diperkecil. Hapus sederhana .min dari nama file. Versi yang tidak diperkecil berguna saat melakukan debug masalah tetapi pastikan untuk menggunakan versi diperkecil dalam produksi untuk memanfaatkan ukuran file yang lebih kecil.

  • Setelah membuat instans kelas Peta di Azure Maps, kode Anda harus menunggu peta ready atau kejadian load untuk melepaskan sebelum berinteraksi dengan peta. Kejadian ini memastikan bahwa semua sumber daya peta telah dimuat dan siap diakses.

  • Kedua platform ini menggunakan sistem petak peta serupa untuk peta dasar, namun petak peta di Bing Maps memiliki dimensi 256 piksel sedangkan petak peta di Azure Maps memiliki dimensi 512 piksel. Dengan demikian, untuk mendapatkan tampilan peta yang sama di Azure Maps sebagai Bing Maps, tingkat pembesaran tampilan yang digunakan dalam Bing Maps perlu dikurangi satu per satu di Azure Maps.

  • Koordinat di Bing Maps disebut sebagai latitude, longitude saat Azure Maps menggunakan longitude, latitude. Format ini selaras dengan standar [x, y] yang diikuti oleh sebagian besar platform GIS.

  • Bentuk di Azure Maps Web SDK didasarkan pada skema GeoJSON. Kelas penunjang diekspos melalui namespace layanan atlas.data. Ada juga kelas atlas.Shape yang dapat digunakan untuk membungkus objek GeoJSON dan membuatnya mudah diperbarui dan dipertahankan dengan cara yang dapat mengikat data.

  • Koordinat di Azure Maps didefinisikan sebagai objek Posisi yang dapat ditentukan sebagai array angka sederhana dalam format [longitude, latitude] atau new atlas.data.Position(longitude, latitude).

Tip

Kelas Posisi memiliki fungsi penunjang statis untuk mengimpor koordinat dalam format latitude, longitude. Fungsi atlas.data.Position.fromLatLngsering kali dapat menggantikan fungsi new Microsoft.Maps.Location dalam kode Bing Maps.

  • Daripada menentukan informasi gaya pada setiap bentuk yang ditambahkan ke peta, Azure Maps memisahkan gaya dari data. Data disimpan di sumber data dan tersambung ke lapisan penyajian yang digunakan kode Azure Maps untuk menyajikan data. Pendekatan ini memberikan manfaat performa yang ditingkatkan. Selain itu, banyak lapisan mendukung gaya berbasis data di mana logika bisnis dapat ditambah ke opsi gaya lapisan yang akan mengubah cara bentuk individual disajikan dalam lapisan didasarkan pada properti yang ditentukan dalam bentuk.
  • Azure Maps menyediakan banyak fungsi matematika spasial yang berguna di namespace layanan atlas.math, namun ini berbeda dari yang ada dalam modul matematika spasial Bing Maps. Perbedaan utama adalah Azure Maps tidak menyediakan fungsi bawaan untuk operasi biner seperti union dan intersection, namun, karena Azure Maps didasarkan pada GeoJSON yang merupakan standar terbuka, ada banyak pustaka sumber terbuka yang tersedia. Salah satu opsi populer yang berfungsi baik dengan Azure Maps dan menyediakan banyak kemampuan matematika spasial adalah turf js.

Lihat juga Glosarium Azure Maps untuk daftar terminologi mendalam yang terkait dengan Azure Maps.

Contoh web SDK berdampingan

Berikut adalah kumpulan sampel kode untuk setiap platform yang mencakup kasus penggunaan umum untuk membantu Anda memigrasikan aplikasi web Anda dari Bing Maps V8 JavaScript SDK ke Azure Maps Web SDK. Sampel kode yang terkait dengan aplikasi web disediakan di JavaScript; Namun, Azure Maps juga menyediakan definisi TypeScript sebagai opsi tambahan melalui modul NPM.

Topik

Memuat peta

Memuat peta di kedua SDK mengikuti serangkaian langkah yang sama;

  • Tambah referensi ke Peta SDK.
  • Tambah tag div ke isi halaman yang akan bertindak sebagai tempat penampung untuk peta.
  • Buat fungsi JavaScript yang akan dipanggil saat halaman telah dimuat.
  • Buat instans kelas peta masing-masing.

Beberapa perbedaan utama

  • Peta Bing memerlukan kunci akun yang akan ditentukan dalam referensi skrip API atau sebagai opsi peta. Informasi masuk autentikasi untuk Azure Maps ditentukan sebagai opsi kelas peta. Ini bisa menjadi kunci langganan atau informasi Azure Active Directory.
  • Bing Maps mengambil fungsi panggilan balik dalam referensi skrip API yang digunakan untuk memanggil fungsi inisialisasi untuk memuat peta. Dengan Azure Maps, kejadian memuat halaman harus digunakan.
  • Saat menggunakan ID untuk mereferensikan elemen div tempat peta akan dilayani, Bing Maps menggunakan pemilih HTML (yaitu, #myMap), sedangkan Azure Maps hanya menggunakan nilai ID (yaitu, myMap).
  • Koordinat di Azure Maps didefinisikan sebagai objek Posisi yang dapat ditentukan sebagai array angka sederhana dalam format [longitude, latitude].
  • Tingkat pembesaran tampilan di Azure Maps adalah satu tingkat lebih rendah dari contoh Bing Maps karena perbedaan ukuran sistem petak peta antara platform.
  • Secara default, Azure Maps tidak menambah kontrol navigasi ke kanvas peta, seperti tombol pembesaran tampilan dan tombol gaya peta. Namun, ada kontrol untuk menambah pemilih gaya peta, tombol pembesaran tampilan, kontrol kompas atau rotasi, dan kontrol nada.
  • Penanganan aktivitas ditambah di Azure Maps untuk memantau ready kejadian instans peta. Ini akan melepaskan ketika peta telah selesai memuat konteks WebGL dan semua sumber daya yang diperlukan. Kode pemuatan postingan dapat ditambahkan dalam penanganan aktivitas ini.

Contoh di bawah menunjukkan cara memuat peta dasar seperti yang berpusat di atas New York pada koordinat (garis bujur: -73.985, garis lintang: 40.747) dan berada pada tingkat pembesaran tampilan 12 di Bing Maps.

Sebelum: Bing Maps

Kode berikut adalah contoh cara menampilkan Peta Bing yang dipusatkan dan diperbesar di atas lokasi.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Menjalankan kode ini di browser akan menampilkan peta yang terlihat seperti gambar berikut:

Bing Maps map

Setelah: Azure Maps

Kode berikut menunjukkan cara memuat peta dengan tampilan yang sama di Azure Maps bersama dengan kontrol gaya peta dan tombol pembesaran tampilan.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-73.985, 40.747],  //Format coordinates as longitude, latitude.
                zoom: 11,   //Subtract the zoom level by one.

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom and map style controls to top right of map.
                map.controls.add([
                        new atlas.control.StyleControl(),
                        new atlas.control.ZoomControl()
                    ], {
                        position: 'top-right'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Menjalankan kode ini di browser akan menampilkan peta yang terlihat seperti gambar berikut:

Azure Maps map

Dokumentasi terperinci tentang cara menyiapkan dan menggunakan kontrol peta Azure Maps di aplikasi web dapat ditemukan di sini.

Tip

Azure Maps menerbitkan versi SDK yang diperkecil dan tidak diperkecil. Hapus .min dari nama file. Versi yang tidak diperkecil berguna saat melakukan debug masalah tetapi pastikan untuk menggunakan versi diperkecil dalam produksi untuk memanfaatkan ukuran file yang lebih kecil.

Sumber Daya Tambahan:

  • Azure Maps juga menyediakan kontrol navigasi untuk memutar dan melempar tampilan peta seperti yang didokumentasikan di sini.

Melokalisasi peta

Jika audiens Anda tersebar di beberapa negara atau berbicara bahasa yang berbeda, pelokalan itu penting.

Sebelum: Bing Maps

Untuk melokalkan Bing Maps, bahasa dan wilayah ditentukan menggunakan parameter setLang dan UR ditambahkan ke referensi tag <script> ke API. Fitur tertentu di Bing Maps hanya tersedia di pasar tertentu, karena pasar pengguna ditentukan menggunakan parameter setMkt.

<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=initMap&setLang={language-code}&setMkt={market}&UR={region-code}" async defer></script>

Berikut adalah contoh Bing Maps dengan bahasa yang diatur ke “fr-FR”.

Localized Bing Maps map

Setelah: Azure Maps

Azure Maps hanya menyediakan opsi untuk mengatur tampilan bahasa dan wilayah peta. Parameter pasar tidak digunakan untuk membatasi fitur. Ada dua cara berbeda untuk mengatur tampilan bahasa dan wilayah peta. Opsi pertama adalah menambah informasi ini ke namespace layanan global atlas yang akan mengakibatkan semua instans kontrol peta di aplikasi Anda bersifat default ke pengaturan ini. Berikut mengatur bahasa ke Bahasa Perancis (“fr-FR”) dan tampilan wilayah menjadi "Auto":

atlas.setLanguage('fr-FR');
atlas.setView('auto');

Opsi kedua adalah meneruskan informasi ini ke dalam opsi peta saat memuat peta seperti:

map = new atlas.Map('myMap', {
    language: 'fr-FR',
    view: 'auto',

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});

Catatan

Dengan Azure Maps dimungkinkan untuk memuat beberapa instans peta pada halaman yang sama dengan pengaturan bahasa dan wilayah yang berbeda. Selain itu, dimungkinkan juga untuk memperbarui pengaturan ini di peta setelah dimuat. Daftar bahasa yang didukung secara rinci di Azure Maps dapat ditemukan di sini.

Berikut adalah contoh Azure Maps dengan bahasa yang diatur ke “fr” dan wilayah pengguna diatur ke “fr-FR”.

Localized Azure Maps map

Mengatur tampilan peta

Peta dinamis di Bing Maps dan Azure Maps dapat dipindahkan secara terprogram ke lokasi geografis baru dengan memanggil fungsi yang sesuai di JavaScript. Contoh di bawah menunjukkan cara membuat gambar udara satelit tampilan peta, pusatkan peta di atas lokasi dengan koordinat (garis bujur: -111.0225, garis lintang: 35.0272) dan ubah tingkat pembesaran tampilan menjadi 15 di Bing Maps.

Catatan

Bing Maps menggunakan petak peta yang memiliki dimensi 256 piksel, sedangkan Azure Maps menggunakan petak peta yang memiliki dimensi 512 piksel yang lebih besar. Hal ini mengurangi jumlah permintaan jaringan yang diperlukan Azure Maps untuk memuat area peta yang sama dengan Bing Maps. Namun, karena cara kerja piramida petak peta dalam kontrol peta, petak peta yang lebih besar di Azure Maps berarti bahwa untuk mencapai area yang dapat dilihat yang sama dengan peta di Bing Maps, Anda perlu mengurangi tingkat pembesaran tampilan yang digunakan di Bing Maps dengan 1 saat menggunakan Azure Maps.

Sebelum: Bing Maps

Kontrol peta Bing Maps dapat dipindahkan secara terprogram menggunakan fungsi setView yang memungkinkan Anda menentukan pusat peta dan tingkat pembesaran tampilan.

map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.0272, -111.0225),
    zoom: 15
});

Bing Maps set map view

Setelah: Azure Maps

Di Azure Maps, posisi peta dapat diubah secara terprogram dengan menggunakan fungsi setCamera peta dan gaya peta dapat diubah menggunakan fungsi setStyle. Perhatikan bahwa koordinat di Azure Maps berada dalam format “bujur, lintang”, dan nilai tingkat pembesaran tampilan dikurangi 1.

map.setCamera({
    center: [-111.0225, 35.0272],
    zoom: 14
});

map.setStyle({
    style: 'satellite_with_roads'
});

Azure Maps set map view

Sumber Daya Tambahan:

Menambah pushpin

Di Azure Maps, ada beberapa cara agar data titik dapat dilayani di peta;

  • Penanda HTML – Merender titik menggunakan elemen DOM tradisional. Penanda HTML mendukung penyeretan.
  • Symbol Layer – Merender titik dengan ikon dan/atau teks dalam konteks WebGL.
  • Bubble Layer – Merender titik sebagai lingkaran di peta. Radius lingkaran dapat diskalakan didasarkan pada properti dalam data.

Symbol Layer dan Bubble Layer dilayani dalam konteks WebGL dan mampu merender serangkaian titik yang sangat besar di peta. Lapisan-lapisan ini mengharuskan data disimpan dalam sumber data. Sumber data dan lapisan penyajian harus ditambah ke peta setelah kejadian ready dilepaskan. Penanda HTML dilayani sebagai elemen DOM di dalam halaman dan tidak menggunakan sumber data. Semakin banyak elemen DOM yang ditemukan halaman, semakin lambat halaman. Jika merender lebih dari beberapa ratus titik pada peta, disarankan menggunakan salah satu lapisan penyajian sebagai gantinya.

Contoh di bawah menambah penanda ke peta di (garis bujur: -0,2, garis lintang: 51,5) dengan angka 10 dilapisi sebagai label.

Sebelum: Bing Maps

Dengan Bing Maps, penanda ditambahkan ke peta menggunakan Microsoft.Maps.Pushpin kelas*. Lalu, pushpin ditambahkan ke peta menggunakan salah satu dari dua fungsi.

Fungsi pertama adalah membuat lapisan, memasukkan pushpin dan kemudian menambahkan lapisan ke properti layers peta.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Fungsi kedua adalah menambahkannya menggunakan properti entities peta. Fungsi ini ditandai tidak digunakan lagi dalam dokumentasi untuk Bing Maps V8 namun tetap berfungsi sebagian untuk skenario dasar.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    text: '10'
});

map.entities.add(pushpin);

Bing Maps add puspin

Setelah: Azure Maps menggunakan Penanda HTML

Di Azure Maps, penanda HTML dapat digunakan untuk mudah menampilkan titik di peta dan direkomendasikan untuk aplikasi sederhana yang hanya perlu menampilkan sejumlah kecil titik di peta. Untuk menggunakan penanda HTML, buat instans kelas atlas.HtmlMarker, atur opsi teks dan posisi, dan tambahkan penanda ke peta menggunakan fungsi map.markers.add.

//Create a HTML marker and add it to the map.
map.markers.add(new atlas.HtmlMarker({
    text: '10',
    position: [-0.2, 51.5]
}));

Azure Maps add marker

Setelah: Azure Maps menggunakan Symbol Layer

Saat menggunakan Symbol Layer, data harus ditambahkan ke sumber data, dan sumber data yang dilampirkan ke lapisan. Selain itu, sumber data dan lapisan harus ditambahkan ke peta setelah kejadian ready dilepaskan. Untuk menyajikan nilai teks unik di atas simbol, informasi teks perlu disimpan sebagai properti titik data dan properti yang direferensikan dalam opsi textField dari lapisan. Hal ini sedikit lebih banyak pekerjaan dari menggunakan penanda HTML tetapi memberikan banyak keuntungan performa.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Create a point feature, add a property to store a label for it, and add it to the data source.
                datasource.add(new atlas.data.Feature(new atlas.data.Point([-0.2, 51.5]), {
                    label: '10'
                }));

                //Add a layer for rendering point data as symbols.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        //Use the label property to populate the text for the symbols.
                        textField: ['get', 'label'],
                        color: 'white',
                        offset: [0, -1]
                    }
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps add symbol layer

Sumber Daya Tambahan:

Menambah pushpin kustom

Gambar kustom dapat digunakan untuk mewakili titik pada peta. Gambar berikut digunakan dalam contoh di bawah dan menggunakan gambar kustom untuk menampilkan titik pada peta di (garis lintang: 51,5, garis bujur: -0,2) dan mengimbangi posisi penanda sehingga titik ikon pushpin sejajar dengan posisi yang benar di peta.

Azure Maps add puspin
yellow-pushpin.png

Sebelum: Bing Maps

Di Bing Maps, penanda kustom dibuat dengan meneruskan URL ke gambar ke opsi icon dari pushpin. Opsi anchor ini digunakan untuk meratakan titik gambar pushpin dengan koordinat pada peta. Nilai jangkar di Bing Maps relatif terhadap sudut kiri atas gambar.

var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(51.5, -0.2), {
    icon: 'ylw-pushpin.png',
    anchor: new Microsoft.Maps.Point(5, 30)
});

var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

Bing Maps add custom puspin

Setelah: Azure Maps menggunakan Penanda HTML

Untuk mengustomisasi penanda HTML di Azure Maps HTML string atau HTMLElement dapat diteruskan ke opsi htmlContent dari penanda. Di Azure Maps, opsi anchor digunakan untuk menentukan posisi relatif penanda relatif terhadap koordinat posisi menggunakan salah satu dari sembilan titik referensi yang ditentukan; “tengah”, “atas”, “bawah”, “kiri”, “kanan”, “kiri atas”, “kanan atas”, “kiri bawah”, “kanan bawah”. Konten berlabuh dan diatur ke “bawah” secara default, yang merupakan bagian tengah bawah konten html. Untuk mempermudah migrasi kode dari Bing Maps, atur jangkar ke “kiri atas”, lalu gunakan opsi offset dengan pengimbang yang sama yang digunakan di Bing Maps. Pengimbang di Azure Maps bergerak ke arah Bing Maps yang berlawanan, sehingga kalikan dengan minus satu.

Tip

Tambah pointer-events:none sebagai gaya pada konten HTML untuk menonaktifkan perilaku seret default di MS Edge yang akan menampilkan ikon yang tidak diinginkan.

map.markers.add(new atlas.HtmlMarker({
    htmlContent: '<img src="ylw-pushpin.png" style="pointer-events: none;" />',
    anchor: 'top-left',
    pixelOffset: [-5, -30],
    position: [-0.2, 51.5]
}));

Azure Maps add custom marker

Setelah: Azure Maps menggunakan Symbol Layer

Lapisan simbol di Azure Maps juga mendukung gambar kustom, tetapi gambar perlu dimuat ke dalam sumber daya peta terlebih dahulu dan menetapkan ID unik. Lalu, lapisan simbol dapat mereferensikan ID ini. Simbol dapat diimbangi untuk meratakan ke titik yang benar pada gambar dengan menggunakan opsi offset ikon. Di Azure Maps, opsi anchor digunakan untuk menentukan posisi relatif simbol relatif terhadap koordinat posisi menggunakan salah satu dari sembilan titik referensi yang ditentukan; “tengah”, “atas”, “bawah”, “kiri”, “kanan”, “kiri atas”, “kanan atas”, “kiri bawah”, “kanan bawah”. Konten berlabuh dan diatur ke “bawah” secara default yang merupakan bagian bawah konten HTML. Untuk mempermudah migrasi kode dari Bing Maps, atur jangkar ke “kiri atas”, lalu gunakan opsi offset dengan pengimbang yang sama yang digunakan di Bing Maps. Pengimbang di Azure Maps bergerak ke arah Bing Maps yang berlawanan, sehingga kalikan dengan minus satu.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map, datasource;

        function initMap() {
            map = new atlas.Map('myMap', {
                center: [-0.2, 51.5],
                zoom: 9,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Load the custom image icon into the map resources.
                map.imageSprite.add('my-yellow-pin', 'ylw-pushpin.png').then(function () {

                    //Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);

                    //Create a point and add it to the data source.
                    datasource.add(new atlas.data.Point([-0.2, 51.5]));

                    //Add a layer for rendering point data as symbols.
                    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Set the image option to the id of the custom icon that was loaded into the map resources.
                            image: 'my-yellow-pin',
                            anchor: 'top-left',
                            offset: [-5, -30]
                        }
                    }));
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing Maps add custom symbol layer

Tip

Untuk membuat penyajian titik kustom tingkat lanjut, gunakan beberapa lapisan penyajian bersama-sama. Contohnya, jika Anda ingin memiliki beberapa pushpin yang memiliki ikon sama pada lingkaran berwarna yang berbeda, daripada membuat sekelompok gambar untuk setiap warna melapisi lapisan simbol di atas lapisan gelembung dan memintanya mereferensikan sumber data yang sama. Hal ini akan jauh lebih efisien dari membuat, dan memiliki peta mempertahankan sekelompok gambar yang berbeda.

Sumber Daya Tambahan:

Menambah poliline

Poliline digunakan untuk mewakili garis atau jalur di peta. Contoh di bawah menunjukkan cara membuat poliline putus-putus di peta.

Sebelum: Bing Maps

Di Bing Maps, kelas Poliline mengambil array lokasi dan serangkaian opsi.

//Get the center of the map.
var center = map.getCenter();

//Create the polyline.
var polyline = new Microsoft.Maps.Polyline([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1)
    ], {
        strokeColor: 'red',
        strokeThickness: 4,
        strokeDashArray: [3, 3]
    });

//Add the polyline to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polyline);
map.layers.insert(layer);

Bing Maps polyline

Setelah: Azure Maps

Di Azure Maps, poliline disebut dengan istilah atau objek geospasial LineString atau MultiLineString yang lebih umum. Objek-objek ini dapat ditambah ke sumber data dan disajikan menggunakan lapisan garis. Warna goresan, lebar, dan opsi array garis putus-putus hampir identik di antara platform.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a line and add it to the data source.
datasource.add(new atlas.data.LineString([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5]
]));

//Add a layer for rendering line data.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 4,
    strokeDashArray: [3, 3]
}));

Azure Maps line

Sumber Daya Tambahan:

Menambah poligon

Poligon digunakan untuk mewakili area di peta. Azure Maps dan Bing Maps memberikan dukungan yang sangat mirip untuk poligon. Contoh di bawah menunjukkan cara membuat poligon yang membentuk segitiga didasarkan pada koordinat tengah peta.

Sebelum: Bing Maps

Di Bing Maps, kelas Poligon mengambil array koordinat atau mengoordinasikan cincin dan serangkaian opsi.

//Get the center of the map.
var center = map.getCenter();

//Create the polygon.
var polygon = new Microsoft.Maps.Polygon([
        center,
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude - 1),
        new Microsoft.Maps.Location(center.latitude - 0.5, center.longitude + 1),
        center
    ], {
        fillColor: 'rgba(0, 255, 0, 0.5)',
        strokeColor: 'red',
        strokeThickness: 2
    });

//Add the polygon to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(polygon);
map.layers.insert(layer);

Bing Maps polyogn

Setelah: Azure Maps

Di Azure Maps, objek Poligon dan MultiPoligon dapat ditambah ke sumber data dan disajikan di peta menggunakan lapisan. Area poligon dapat disajikan dalam lapisan poligon. Kerangka poligon dapat disajikan menggunakan lapisan baris.

//Get the center of the map.
var center = map.getCamera().center;

//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Create a polygon and add it to the data source.
datasource.add(new atlas.data.Polygon([
    center,
    [center[0] - 1, center[1] - 0.5],
    [center[0] + 1, center[1] - 0.5],
    center
]));

//Add a polygon layer for rendering the polygon area.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
    fillColor: 'rgba(0, 255, 0, 0.5)'
}));

//Add a line layer for rendering the polygon outline.
map.layers.add(new atlas.layer.LineLayer(datasource, null, {
    strokeColor: 'red',
    strokeWidth: 2
}));

Azure Maps polyogn

Sumber Daya Tambahan:

Menampilkan kotak info

Informasi tambahan untuk entitas dapat ditampilkan di peta sebagai kelas Microsoft.Maps.Infobox di Bing Maps, di Azure Maps ini dapat dicapai menggunakan kelas atlas.Popup. Contoh di bawah menambah pushpin/penanda ke peta, dan ketika diklik, menampilkan kotak info/popup.

Sebelum: Bing Maps

Dengan Bing Maps, kotak info dibuat menggunakan konstruktor Microsoft.Maps.Infobox.

//Add a pushpin where we want to display an infobox.
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.6, -122.33));

//Add the pushpin to the map using a layer.
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

//Create an infobox and bind it to the map.
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.6, -122.33), {
    description: '<div style="padding:5px"><b>Hello World!</b></div>',
    visible: false
});
infobox.setMap(map);

//Add a click event to the pushpin to open the infobox.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
    infobox.setOptions({ visible: true });
});

Bing Maps infobox

Setelah: Azure Maps

Di Azure Maps, popup dapat digunakan untuk menampilkan informasi tambahan untuk lokasi. HTML string atau HTMLElement objek dapat diteruskan ke content opsi popup. Popup dapat ditampilkan secara independen dari bentuk apa pun jika diinginkan dan dengan demikian memerlukan nilai position yang akan ditentukan. Untuk menampilkan popup, hubungi fungsi open dan lewati di peta tempat popup ditampilkan.

//Add a marker to the map that to display a popup for.
var marker = new atlas.HtmlMarker({
    position: [-122.33, 47.6]
});

//Add the marker to the map.
map.markers.add(marker);

//Create a popup.
var popup = new atlas.Popup({
    content: '<div style="padding:10px"><b>Hello World!</b></div>',
    position: [-122.33, 47.6],
    pixelOffset: [0, -35]
});

//Add a click event to the marker to open the popup.
map.events.add('click', marker, function () {
    //Open the popup
    popup.open(map);
});

Azure Maps popup

Catatan

Untuk melakukan hal yang sama dengan lapisan simbol, gelembung, garis, atau poligon, lewati lapisan ke kode kejadian peta sebagai ganti penanda.

Sumber Daya Tambahan:

Pengklusteran pushpin

Saat memvisualisasikan banyak titik data di peta, titik saling tumpang tindih, peta terlihat berantakan dan menjadi sulit untuk dilihat dan digunakan. Pengklusteran data titik dapat digunakan untuk meningkatkan pengalaman pengguna dan juga meningkatkan performa. Data titik pengklusteran adalah proses menggabungkan data titik yang saling berdekatan dan mewakilinya di peta sebagai titik data terkluster tunggal. Saat pengguna memperbesar tampilan ke dalam peta, kluster pecah menjadi titik data masing-masing.

Contoh di bawah memuat umpan GeoJSON data gempa bumi dari seminggu terakhir dan menambahkannya ke peta. Kluster disajikan sebagai lingkaran yang diskalakan dan berwarna bergantung pada jumlah titik yang dikandungnya.

Catatan

Ada beberapa algoritma berbeda yang digunakan untuk pengklusteran pushpin. Bing Maps menggunakan fungsi berbasis kisi sederhana, sementara Azure Maps menggunakan metode pengklusteran berbasis titik yang lebih canggih dan menarik secara visual.

Sebelum: Bing Maps

Di Bing Maps, data GeoJSON dapat dimuat menggunakan modul GeoJSON. Pushpin dapat dikelompokkan dengan memuat dalam modul pengklusteran dan menggunakan lapisan pengklusteran yang dikandungnya.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2
            });

            //Load the GeoJSON and Clustering modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.Clustering'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (pins) {

                    //Create a ClusterLayer with options and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                        clusteredPinCallback: createCustomClusteredPin,
                        gridSize: 100
                    });

                    map.layers.insert(clusterLayer);
                });
            });
        }

        //A function that defines how clustered pins are rendered.
        function createCustomClusteredPin(cluster) {
            //Get the number of pushpins in the cluster
            var clusterSize = cluster.containedPushpins.length;

            var radius = 20;    //Default radius to 20 pixels.
            var fillColor = 'lime'; 	//Default to lime green.

            if (clusterSize >= 750) {
                radius = 40;   //If point_count >= 750, radius is 40 pixels.
                fillColor = 'red';    //If the point_count >= 750, color is red.
            } else if (clusterSize >= 100) {
                radius = 30;    //If point_count >= 100, radius is 30 pixels.
                fillColor = 'yellow';    //If the point_count >= 100, color is yellow.
            }

            //Create an SVG string of a circle with the specified radius and color.
            var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
                '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-size:12px;font-family:arial;fill:black;" >{text}</text>',
                '</svg>'];

            //Customize the clustered pushpin using the generated SVG and anchor on its center.
            cluster.setOptions({
                icon: svg.join(''),
                anchor: new Microsoft.Maps.Point(radius, radius),
                textOffset: new Microsoft.Maps.Point(0, radius - 8) //Subtract 8 to compensate for height of text.
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing Maps clustering

Setelah: Azure Maps

Di Azure Maps, data ditambahkan dan dikelola oleh sumber data. Lapisan tersambung ke sumber data dan merender data di dalamnya. Kelas DataSource di Azure Maps menyediakan beberapa opsi pengklusteran.

  • cluster – Memberi tahu sumber data ke data poin kluster.
  • clusterRadius - Radius dalam piksel untuk mengelompokkan titik bersama-sama.
  • clusterMaxZoom - Tingkat pembesaran tampilan maksimum yang terjadi pengklusteran. Jika Anda memperbesar tampilan lebih dari ini, semua titik disajikan sebagai simbol.
  • clusterProperties - Mendefinisikan properti kustom yang dihitung menggunakan ekspresi terhadap semua titik dalam setiap kluster dan ditambah ke properti setiap titik kluster.

Ketika pengklusteran diaktifkan, sumber data akan mengirimkan poin data terkluster dan tidak terkluster ke lapisan untuk penyajian. Sumber data tersebut mampu mengelompokkan ratusan ribu titik data. Titik data terkluster memiliki properti berikut:

Nama properti Jenis Deskripsi
cluster boolean Menunjukkan apakah fitur mewakili kluster.
cluster_id string ID unik untuk kluster yang dapat digunakan dengan kelas DataSource, getClusterExpansionZoom, getClusterChildren dan fungsi getClusterLeaves.
point_count nomor Jumlah titik yang dikandung kluster.
point_count_abbreviated string String yang menyingkat nilai point_count jika panjang. (misalnya, 4.000 menjadi 4K)

Kelas DataSource memiliki fungsi penunjang berikut untuk mengakses informasi tambahan tentang kluster menggunakan cluster_id.

Fungsi Tipe hasil Deskripsi
getClusterChildren(clusterId: number) Promise<Feature<Geometry, any> | Shape> Mengambil elemen anak dari kluster yang diberikan pada tingkat pembesaran tampilan berikutnya. Elemen anak ini dapat berupa kombinasi bentuk dan sub-kluster. Sub-kluster akan dilengkapi dengan properti yang cocok dengan properti kluster.
getClusterExpansionZoom(clusterId: number) Promise<number> Menghitung tingkat pembesaran tampilan yang akan mulai diperluas atau dipisahkan oleh kluster.
getClusterLeaves(clusterId: number, limit: number, offset: number) Promise<Feature<Geometry, any> | Shape> Mengambil semua titik dalam kluster. Atur limit untuk mengembalikan sekumpulan titik dan gunakan halaman offset ke melalui titik.

Saat merender data terkluster di peta, sering kali paling mudah untuk menggunakan dua lapisan atau lebih. Contoh di bawah menggunakan tiga lapisan, lapisan gelembung untuk menggambar lingkaran berwarna yang diskalakan didasarkan pada ukuran kluster, lapisan simbol untuk merender ukuran kluster sebagai teks, dan lapisan simbol kedua untuk merender titik-titik yang tidak terkluster. Ada banyak cara lain untuk merender data terkluster di Azure Maps yang disorot dalam dokumentasi Data titik kluster.

Data GeoJSON dapat langsung diimpor di Azure Maps menggunakan fungsi importDataFromUrl pada kelas DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map, datasource;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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(null, {
                    //Tell the data source to cluster point data.
                    cluster: true
                });
                map.sources.add(datasource);

                //Create layers for rendering clusters, their counts and unclustered points and add the layers to the map.
                map.layers.add([
                    //Create a bubble layer for rendering clustered data points.
                    new atlas.layer.BubbleLayer(datasource, null, {
                        //Scale the size of the clustered bubble based on the number of points inthe cluster.
                        radius: [
                            'step',
                            ['get', 'point_count'],
                            20,         //Default of 20 pixel radius.
                            100, 30,    //If point_count >= 100, radius is 30 pixels.
                            750, 40     //If point_count >= 750, radius is 40 pixels.
                        ],

                        //Change the color of the cluster based on the value on the point_cluster property of the cluster.
                        color: [
                            'step',
                            ['get', 'point_count'],
                            'lime',            //Default to lime green. 
                            100, 'yellow',     //If the point_count >= 100, color is yellow.
                            750, 'red'         //If the point_count >= 750, color is red.
                        ],
                        strokeWidth: 0,
                        filter: ['has', 'point_count'] //Only rendered data points that have a point_count property, which clusters do.
                    }),

                    //Create a symbol layer to render the count of locations in a cluster.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            image: 'none' //Hide the icon image.
                        },
                        textOptions: {
                            textField: ['get', 'point_count_abbreviated'],
                            offset: [0, 0.4]
                        }
                    }),

                    //Create a layer to render the individual locations.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
                    })
                ]);

                //Retrieve a GeoJSON data set and add it to the data source. 
                datasource.importDataFromUrl(earthquakeFeed);
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps clustering

Sumber Daya Tambahan:

Menambah peta panas

Peta panas, juga dikenal sebagai peta kepadatan titik, adalah jenis visualisasi data yang digunakan untuk mewakili kepadatan data menggunakan rentang warna. Peta ini sering digunakan untuk menampilkan data “spot panas” di peta dan merupakan cara yang bagus untuk merender kumpulan data titik besar.

Contoh di bawah memuat umpan GeoJSON dari semua gempa bumi selama sebulan terakhir dari USGS dan merendernya sebagai peta panas.

Sebelum: Bing Maps

Di Bing Maps, untuk membuat peta panas, muat modul peta panas. Demikian pula, modul GeoJSON dimuat untuk menambah dukungan untuk data GeoJSON.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(20, -160),
                zoom: 2,
                mapTypeId: Microsoft.Maps.MapTypeId.aerial
            });

            //Load the GeoJSON and HeatMap modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function () {

                //Load the GeoJSON data from a URL.
                Microsoft.Maps.GeoJson.readFromUrl(earthquakeFeed, function (shapes) {

                    //Create a heat map and add it to the map.
                    var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, {
                        opacity: 0.65,
                        radius: 10
                    });
                    map.layers.insert(heatMap);
                });
            });
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing Maps heatmap

Setelah: Azure Maps

Di Azure Maps, muat data GeoJSON ke sumber data dan sambungkan sumber data ke lapisan peta panas. Data GeoJSON dapat langsung diimpor di Azure Maps menggunakan fungsi importDataFromUrl pada kelas DataSource.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map;
        var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-160, 20],
                zoom: 1,
                style: 'satellite_with_roads',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

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

                //Load the earthquake data.
                datasource.importDataFromUrl(earthquakeFeed);

                //Create a layer to render the data points as a heat map.
                map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps heatmap

Sumber Daya Tambahan:

Melapisi lapisan petak peta

Lapisan petak peta memungkinkan Anda untuk melapisi gambar besar yang telah dipecah menjadi gambar petak peta lebih kecil yang selaras dengan sistem petak peta. Ini adalah cara umum untuk melapisi gambar besar atau kumpulan data yang sangat besar.

Contoh di bawah melapisi lapisan petak peta radar cuaca dari Iowa Environmental Mesonet dari Iowa State University yang menggunakan skema penamaan petak peta X, Y, Zoom.

Sebelum: Bing Maps

Di Bing Maps, lapisan petak peta dapat dibuat dengan menggunakan kelas Microsoft.Maps.TileLayer.

var weatherTileLayer = new Microsoft.Maps.TileLayer({
    mercator: new Microsoft.Maps.TileSource({
        uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
    })
});
map.layers.insert(weatherTileLayer);

Bing Maps weighted heatmap

Setelah: Azure Maps

Di Azure Maps, lapisan petak peta dapat ditambah ke peta dengan cara yang sama seperti lapisan lainnya. URL berformat yang memiliki tempat penampung x, y, zoom; {x}, {y}, {z} masing-masing digunakan untuk memberi tahu lapisan di mana mengakses petak peta. Lapisan petak peta Azure Maps juga mendukung tempat penampung {quadkey}, {bbox-epsg-3857}, dan {subdomain}.

Tip

Di lapisan Azure Maps dapat dengan mudah disajikan di bawah lapisan lain, termasuk lapisan peta dasar. Sering kali diinginkan untuk merender lapisan petak peta di bawah label peta sehingga mudah dibaca. Fungsi map.layers.add ini mengambil parameter kedua, yaitu ID dari lapisan kedua untuk memasukkan lapisan baru di bawah. Untuk menyisipkan lapisan petak peta di bawah label peta, kode berikut dapat digunakan:

map.layers.add(myTileLayer, "labels");

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256
}), 'labels');

Azure Maps weighted heatmap

Tip

Permintaan petak peta dapat ditangkap menggunakan opsi transformRequest dari peta. Hal ini akan memungkinkan Anda untuk mengubah atau menambah header ke permintaan jika diinginkan.

Sumber Daya Tambahan:

Menunjukkan data lalu lintas

Data lalu lintas dapat dilapisi peta Bing dan Azure.

Sebelum: Bing Maps

Di Bing Maps, data lalu lintas dapat dilapisi peta menggunakan modul lalu lintas.

Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
    var manager = new Microsoft.Maps.Traffic.TrafficManager(map);
    manager.show();
});

Bing Maps traffic

Setelah: Azure Maps

Azure Maps menyediakan beberapa opsi berbeda untuk menampilkan lalu lintas. Insiden lalu lintas, seperti penutupan jalan dan kecelakaan dapat ditampilkan sebagai ikon di peta. Arus lalu lintas, jalan berkode warna, dapat dilapis pada peta dan warna dapat dimodifikasi agar relatif terhadap batas kecepatan yang diposting, relatif terhadap keterlambatan normal yang diharapkan, atau keterlambatan mutlak. Data insiden di Azure Maps diperbarui setiap menit dan mengalirkan data setiap 2 menit.

map.setTraffic({
    incidents: true,
    flow: 'relative'
});

Azure Maps traffic

Jika Anda mengeklik salah satu ikon lalu lintas di Azure Maps, informasi tambahan ditampilkan dalam popup.

Azure Maps traffic popup

Sumber Daya Tambahan:

Menambah overlay tanah

Peta Bing dan Azure mendukung overlay gambar georeferensi di peta sehingga bergerak dan menskalakan saat Anda menggeser dan memperbesar peta. Di Bing Maps ini dikenal sebagai overlay tanah saat berada di Azure Maps mereka disebut sebagai lapisan gambar. Ini bagus untuk membangun denah lantai, melapisi peta lama, atau citra dari drone.

Sebelum: Bing Maps

Saat membuat overlay tanah di Bing Maps, Anda perlu menentukan URL ke gambar untuk melapisi dan kotak batas untuk mengikat gambar di peta. Contoh ini melapisi gambar peta Newark New Jersey dari tahun 1922 di peta.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.740, -74.18),
                zoom: 12
            });

            var overlay = new Microsoft.Maps.GroundOverlay({
                //Create a LocationRect from the edges of the bounding box; north, west, south, east.
                bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544),
                imageUrl: 'newark_nj_1922.jpg'
            });
            map.layers.insert(overlay);
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Menjalankan kode ini di browser akan menampilkan peta yang terlihat seperti gambar berikut:

Bing Maps ground overlay

Setelah: Azure Maps

Di Azure Maps, gambar georeferensi dapat dilapisi menggunakan kelas atlas.layer.ImageLayer. Kelas ini memerlukan URL ke gambar dan serangkaian koordinat untuk empat sudut gambar. Gambar harus dihosting baik pada domain yang sama maupun mengaktifkan COR.

Tip

Jika Anda hanya memiliki informasi utara, selatan, timur, barat, dan rotasi, serta bukan koordinat untuk setiap sudut gambar, Anda dapat menggunakan fungsi atlas.layer.ImageLayer.getCoordinatesFromEdges statis.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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>

    <script type='text/javascript'>
        var map;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-74.18, 40.740],
                zoom: 12,

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an image layer and add it to the map.
                map.layers.add(new atlas.layer.ImageLayer({
                    url: 'newark_nj_1922.jpg',
                    coordinates: [
                        [-74.22655, 40.773941], //Top Left Corner
                        [-74.12544, 40.773941], //Top Right Corner
                        [-74.12544, 40.712216], //Bottom Right Corner
                        [-74.22655, 40.712216]  //Bottom Left Corner
                    ]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps ground overlay

Sumber Daya Tambahan:

Menambah data KML ke peta

Peta Azure dan Bing dapat mengimpor dan merender data KML, KMZ, GeoRSS, GeoJSON, dan Well-Known Text (WKT) di peta. Azure Maps juga mendukung file GPX, GML, CSV spasial, Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS), dan Web Feature Services (WFS).

Sebelum: Bing Maps

Menjalankan kode ini di browser akan menampilkan peta yang terlihat seperti gambar berikut:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
        var map;

        function initMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: '<Your Bing Maps Key>',
                center: new Microsoft.Maps.Location(40.747, -73.985),
                zoom: 12
            });
                
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                var callback = function (dataset) {
                    if (dataset.shapes) {
                        var l = new Microsoft.Maps.Layer();
                        l.add(dataset.shapes);
                        map.layers.insert(l);
                    }
                    if (dataset.layers) {
                        for (var i = 0, len = dataset.layers.length; i < len; i++) {
                            map.layers.insert(dataset.layers[i]);
                        }
                    }
                };
                Microsoft.Maps.GeoXml.readFromUrl('myKMLFile.kml', { error: function (msg) { alert(msg); } }, callback);
            });                
        }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing Maps kml

Setelah: Azure Maps

Di Azure Maps, GeoJSON adalah format data utama yang digunakan dalam SDK web, format data spasial tambahan dapat dengan mudah diintegrasikan dalam menggunakan modul IO spasial. Modul ini memiliki fungsi untuk membaca dan menulis data spasial dan juga mencakup lapisan data sederhana yang dapat dengan mudah merender data dari salah satu format data spasial ini. Untuk membaca data dalam file data spasial, masukkan URL, atau data mentah sebagai string atau blob ke dalam fungsi atlas.io.read. Ini akan mengembalikan semua data yang diurai dari file yang kemudian dapat ditambahkan ke peta. KML sedikit lebih kompleks dari kebanyakan format data spasial karena mencakup lebih banyak informasi gaya. Kelas SpatialDataLayer ini mendukung penyajian sebagian besar gaya ini, namun gambar ikon harus dimuat ke dalam peta sebelum memuat data fitur, dan overlay tanah harus ditambahkan sebagai lapisan ke peta secara terpisah. Saat memuat data melalui URL, data harus dihosting di titik akhir yang diaktifkan COR, atau layanan proksi harus diteruskan sebagai opsi ke fungsi baca.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 reference to the Azure Maps Spatial IO module. -->
    <script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>

    <script type='text/javascript'>
        var map, datasource, layer;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //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 simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read a KML file from a URL or pass in a raw KML string.
                atlas.io.read('myKMLFile.kml').then(async r => {
                    if (r) {

                        //Check to see if there are any icons in the data set that need to be loaded into the map resources.
                        if (r.icons) {
                            //For each icon image, create a promise to add it to the map, then run the promises in parrallel.
                            var imagePromises = [];

                            //The keys are the names of each icon image.
                            var keys = Object.keys(r.icons);

                            if (keys.length !== 0) {
                                keys.forEach(function (key) {
                                    imagePromises.push(map.imageSprite.add(key, r.icons[key]));
                                });

                                await Promise.all(imagePromises);
                            }
                        }

                        //Load all features.
                        if (r.features && r.features.length > 0) {
                            datasource.add(r.features);
                        }

                        //Load all ground overlays.
                        if (r.groundOverlays && r.groundOverlays.length > 0) {
                            map.layers.add(r.groundOverlays);
                        }

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Azure Maps kml

Sumber Daya Tambahan:

Menambah alat menggambar

Bing Maps dan Azure Maps menyediakan modul yang menambah kemampuan bagi pengguna untuk menggambar dan mengedit bentuk di peta menggunakan mouse atau perangkat input lainnya. Keduanya mendukung pushpin gambar, garis, dan poligon. Azure Maps juga menyediakan opsi untuk menggambar lingkaran dan persegi.

Sebelum: Bing Maps

Di Bing Maps, modul DrawingTools dimuat menggunakan fungsi Microsoft.Maps.loadModule. Setelah dimuat, instans kelas DrawingTools dapat dibuat dan fungsi showDrawingManager disebut tambahkan toolbar ke peta.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <script type='text/javascript'>
    var map, drawingManager;

    function initMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: '<Your Bing Maps Key>'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editting on the map.
            tools.showDrawingManager(function (manager) {
                //Store a reference to the drawing manager as it will be useful later.
                drawingManager = manager;
            });
        });
    }
    </script>

    <!-- Bing Maps Script Reference -->
    <script src="https://www.bing.com/api/maps/mapcontrol?callback=initMap" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Bing Maps drawing tools

Setelah: Azure Maps

Di Azure Maps, modul alat menggambar perlu dimuat dengan memuat file JavaScript dan CSS perlu direferensikan di aplikasi. Setelah peta dimuat, instans kelas DrawingManager dapat dibuat dan instans DrawingToolbar terpasang.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <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 references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
    
    <script type='text/javascript'>
        var map, drawingManager;

        function initMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',

                //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.                
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                //Create an instance of the drawing manager and display the drawing toolbar.
                drawingManager = new atlas.drawing.DrawingManager(map, {
                    toolbar: new atlas.control.DrawingToolbar({ position: 'top-left' })
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Azure Maps drawing tools

Tip

Di Azure Maps, melapisi alat menggambar menyediakan beberapa cara agar pengguna dapat menggambar bentuk. Contohnya, saat menggambar poligon, pengguna dapat mengeklik untuk menambah setiap titik, atau menahan tombol mouse kiri ke bawah dan menyeret mouse untuk menggambar jalur. Hal ini dapat dimodifikasi menggunakan opsi interactionType dari DrawingManager.

Sumber Daya Tambahan:

Sumber Daya Tambahan:

Lihat modul Azure Maps Web SDK sumber terbuka. Modul ini menyediakan banyak fungsi tambahan dan sepenuhnya dapat disesuaikan.

Tinjau sampel kode terkait migrasi fitur Bing Maps lainnya:

Visualisasi data

Layanan

Pelajari selengkapnya tentang Azure Maps Web SDK.

Bersihkan sumber daya

Tidak ada sumber daya yang harus dibersihkan.

Langkah berikutnya

Pelajari selengkapnya tentang migrasi dari Bing Maps ke Azure Maps.