Tutorial: Memigrasikan aplikasi web dari Google Maps

Sebagian besar aplikasi web, yang menggunakan Google Maps, menggunakan Google Maps V3 JavaScript SDK. Azure Maps Web SDK adalah SDK berbasis Azure yang cocok untuk dimigrasikan. Web SDK Azure Maps memungkinkan Anda untuk menyesuaikan peta interaktif dengan konten dan citra Anda sendiri. Anda dapat menjalankan aplikasi di aplikasi web atau seluler. Kontrol ini menggunakan WebGL, memungkinkan Anda untuk merender himpunan data besar dengan performa tinggi. Kembangkan dengan SDK ini menggunakan JavaScript atau TypeScript. Tutorial ini menunjukkan:

• Memuat peta
• Melokalisasi peta
• Tambahkan penanda, poliline, dan poligon.
• Menampilkan informasi di jendela popup atau info
• Memuat dan menampilkan data KML dan GeoJSON
• Penanda kluster
• Menerapkan lapisan petak
• Menunjukkan data lalu lintas
• Menambahkan lapisan dasar

Juga:

• Cara menyelesaikan tugas pemetaan umum menggunakan Azure Maps Web SDK.
• Praktik terbaik untuk meningkatkan performa dan pengalaman pengguna.
• Tips menggunakan fitur yang lebih canggih yang tersedia di Azure Maps.

Jika memigrasikan aplikasi web yang ada, periksa untuk melihat apakah aplikasi tersebut menggunakan pustaka kontrol peta sumber terbuka. Contoh pustaka kontrol peta sumber terbuka adalah: Cesium, Leaflet, dan OpenLayers. Anda masih dapat memigrasikan aplikasi Anda, meskipun menggunakan pustaka kontrol peta sumber terbuka, dan Anda tidak ingin menggunakan Azure Maps Web SDK. Dalam kasus seperti itu, sambungkan aplikasi Anda ke layanan Azure Maps Render (petak satelitpetak petak jalan | ). Poin-poin berikut merinci tentang cara menggunakan Azure Maps di beberapa pustaka kontrol peta sumber terbuka yang umum digunakan.

• Cesium - Kontrol peta 3D untuk web. Dokumentasi cesium.
• Leaflet – Kontrol peta 2D ringan untuk web. Contoh | kode selebaranDokumentasi selebaran.
• OpenLayers - Kontrol peta 2D untuk web yang mendukung proyeksi. Dokumentasi OpenLayers.

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

• ng-azure-maps - Pembungkus Angular 10 untuk Azure Maps.
• AzureMapsControl.Components - Komponen Blazor Azure Maps.
• Komponen React Azure Maps - Pembungkus React untuk kontrol Azure Maps.
• Vue Azure Maps - Komponen Azure Maps untuk aplikasi Vue.

Prasyarat

Jika Anda tidak memiliki langganan Azure, buatlah akun gratis sebelum Anda memulai.

• Sebuah akun Azure Maps
• Sebuah kunci langganan

Nota

Untuk informasi selengkapnya tentang autentikasi di Azure Maps, lihat Mengelola autentikasi di Azure Maps.

Dukungan fitur utama

Tabel ini mencantumkan fitur API utama di Google Maps V3 JavaScript SDK dan fitur API yang didukung di Azure Maps Web SDK.

Fitur Google Maps	Dukungan Azure Maps Web SDK
Spidol	✓
Pengklusteran penanda	✓
Poliline & Poligon	✓
Lapisan data	✓
Hamparan Tanah	✓
Peta visualisasi panas	✓
Lapisan Ubin	✓
Lapisan KML	✓
Alat menggambar	✓
Layanan geocoder	✓
Layanan petunjuk arah	✓
Layanan Matriks Jarak	✓

Perbedaan mencolok dalam SDK Web

Berikut ini adalah beberapa perbedaan utama antara Google Maps dan Azure Maps Web SDK, yang perlu diperhatikan:

• Selain menyediakan titik akhir yang dihosting untuk mengakses Azure Maps Web SDK, paket npm tersedia. Untuk informasi selengkapnya tentang cara Menyematkan paket Web SDK ke dalam aplikasi, lihat Menggunakan kontrol peta Azure Maps. Paket ini juga memasukkan definisi TypeScript.
• Pertama-tama Anda perlu membuat instans kelas Map di Azure Maps. Tunggu hingga peta ready atau load acara diaktifkan sebelum berinteraksi secara terprogram dengan peta. Perintah ini memastikan bahwa semua sumber daya peta telah dimuat dan siap diakses.
• Kedua platform menggunakan sistem ubin serupa untuk peta dasar. Petak peta di Google Maps berdimensi 256 piksel; namun, petak peta di Azure Maps berdimensi 512 piksel. Untuk mendapatkan tampilan peta yang sama di Azure Maps seperti Google Maps, kurangi tingkat zoom Google Maps dengan nomor satu di Azure Maps.
• Koordinat di Google Maps disebut sebagai latitude,longitude, sedangkan Azure Maps menggunakan longitude,latitude. Format Azure Maps selaras dengan standar [x, y], yang diikuti oleh sebagian besar platform GIS.
• Bentuk di Azure Maps Web SDK didasarkan pada skema GeoJSON. Kelas pembantu diekspos melalui namespace atlas.data . Ada juga atlas. Kelas bentuk . Gunakan kelas ini untuk membungkus objek GeoJSON, untuk memudahkan memperbarui dan memelihara cara data yang dapat diikat.
• Koordinat di Azure Maps didefinisikan sebagai objek Posisi. Koordinat ditentukan sebagai array angka dalam format [longitude,latitude]. Atau, ditentukan menggunakan atlas.data.Position(bujur, lintang) baru.

  Petunjuk / Saran

  Kelas Position memiliki metode pembantu statis untuk mengimpor koordinat yang dalam format "lintang, bujur". Metode atlas.data.Position.fromLatLng sering kali dapat diganti dengan metode dalam new google.maps.LatLng kode Google Maps.

• Daripada menentukan informasi gaya pada setiap bentuk yang ditambahkan ke peta, Azure Maps memisahkan gaya dari data. Data disimpan dalam sumber data, dan terhubung ke lapisan rendering. Kode Azure Maps menggunakan sumber data untuk merender data. Pendekatan ini memberikan manfaat performa yang ditingkatkan. Selain itu, banyak lapisan mendukung gaya berbasis data di mana logika bisnis dapat ditambahkan ke opsi gaya lapisan. Dukungan ini mengubah cara bentuk individu dirender dalam lapisan berdasarkan properti yang ditentukan dalam bentuk.

Contoh web SDK berdampingan

Koleksi ini memiliki sampel kode untuk setiap platform, dan setiap sampel mencakup kasus penggunaan umum. Ini dimaksudkan untuk membantu Anda memigrasikan aplikasi web dari Google Maps V3 JavaScript SDK ke Azure Maps Web SDK. Sampel kode yang terkait dengan aplikasi web disediakan dalam JavaScript. Namun, Azure Maps juga menyediakan definisi TypeScript sebagai opsi lain melalui modul npm.

Topik

• Memuat peta
• Melokalkan peta
• Mengatur tampilan peta
• Menambahkan penanda
• Menambahkan penanda kustom
• Menambahkan garis poligon
• Menambah poligon
• Menampilkan jendela info
• Mengimpor file GeoJSON
• Pengklusteran penanda
• Menambah peta panas
• Melapisi lapisan ubin
• Menunjukkan data lalu lintas
• Menambah overlay tanah
• Menambah data KML ke peta

Memuat peta

Kedua SDK memiliki langkah yang sama untuk memuat peta:

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

Beberapa perbedaan utama

• Google Maps mengharuskan kunci akun ditentukan dalam referensi skrip API. Kredensial autentikasi untuk Azure Maps ditentukan sebagai opsi kelas peta. Kredensial ini dapat berupa kunci langganan atau informasi Microsoft Entra.
• Google Maps menerima fungsi callback dalam referensi skrip API, yang digunakan untuk memanggil fungsi inisialisasi untuk memuat peta. Dengan Azure Maps, peristiwa memuat halaman harus digunakan.
• Saat mereferensikan div elemen tempat peta dirender Map , kelas di Azure Maps hanya memerlukan nilai sementara id Google Maps memerlukan HTMLElement objek.
• Koordinat di Azure Maps didefinisikan sebagai objek Posisi, yang dapat ditentukan sebagai array angka sederhana dalam format [longitude, latitude].
• Tingkat zoom di Azure Maps adalah satu tingkat lebih rendah dari tingkat zoom di Google Maps. Perbedaan ini dikarenakan adanya perbedaan ukuran sistem ubin dari kedua platform tersebut.
• Azure Maps tidak menambahkan kontrol navigasi apa pun ke kanvas peta. Jadi, secara default, peta tidak memiliki tombol zoom dan tombol gaya peta. Namun, ada opsi kontrol untuk menambahkan pemilih gaya peta, tombol zoom, kontrol kompas atau rotasi, dan kontrol pitch.
• Pengendali acara ditambahkan ke dalam Azure Maps untuk memantau peristiwa ready instans peta. Peristiwa ini diaktifkan ketika peta selesai memuat konteks WebGL dan semua sumber daya yang diperlukan. Tambahkan kode apa pun yang ingin Anda jalankan setelah peta selesai dimuat, ke penanganan peristiwa ini.

Contoh berikut menggunakan Google Maps untuk memuat peta yang berpusat di New York pada koordinat. Bujur: -73.985, lintang: 40.747, dan peta berada pada level zoom 12.

Sebelum: Google Maps

Tampilkan Google Map yang berpusat dan diperbesar ke 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 google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.747, -73.985),
                zoom: 12
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

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

Setelah: Peta Azure

Muat peta dengan tampilan yang sama di Azure Maps bersama dengan kontrol gaya peta dan tombol zoom.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

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

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

                //Specify authentication information when loading the map.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Add zoom controls to bottom right of map.
                map.controls.add(new atlas.control.ZoomControl(), {
                    position: 'bottom-right'
                });

                //Add map style control in top left corner of map.
                map.controls.add(new atlas.control.StyleControl(), {
                    position: 'top-left'
                });
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

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

Untuk informasi selengkapnya tentang cara menyiapkan dan menggunakan kontrol peta Azure Maps di aplikasi web, lihat Menggunakan kontrol peta Azure Maps.

Nota

Tidak seperti Google Maps, Azure Maps tidak memerlukan pusat awal dan tingkat zoom untuk memuat peta. Jika informasi ini tidak diberikan saat memuat peta, Azure Maps akan mencoba menentukan kota pengguna. Ini akan memusatkan dan memperbesar peta di sana.

Sumber daya lainnya:

• Untuk informasi selengkapnya tentang kontrol navigasi untuk memutar dan melemparkan tampilan peta, lihat Menambahkan kontrol ke peta.

Melokalkan peta

Pelokalan penting jika audiens Anda tersebar di beberapa negara/wilayah atau berbicara dalam bahasa yang berbeda.

Sebelum: Google Maps

Untuk melokalkan Google Maps, tambahkan parameter bahasa dan wilayah.

<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js?callback=initMap&key={api-Key}&language={language-code}&region={region-code}" async defer></script>

Berikut adalah contoh Google Maps dengan bahasa yang disetel ke "fr-FR".

Setelah: Peta Azure

Azure Maps menyediakan dua cara berbeda untuk mengatur bahasa dan tampilan regional peta. Opsi pertama adalah menambahkan informasi ini ke namespace atlas global. Ini menghasilkan semua instance kontrol peta di aplikasi Anda default ke setelan ini. Berikut ini mengatur bahasa ke Prancis ("fr-FR") dan tampilan regional ke "Otomatis":

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

Opsi kedua adalah meneruskan informasi ini ke opsi peta saat memuat peta. Seperti ini:

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

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

Nota

Dengan Azure Maps, dimungkinkan untuk memuat beberapa instans peta di halaman yang sama dengan pengaturan bahasa dan wilayah yang berbeda. Selain itu, dimungkinkan juga untuk memperbarui pengaturan ini di peta setelah dimuat.

Untuk informasi selengkapnya tentang bahasa yang didukung, lihat Dukungan pelokalan di Azure Maps.

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

Mengatur tampilan peta

Peta dinamis di Azure dan Google Maps dapat dipindahkan secara terprogram ke lokasi geografis baru. Untuk melakukannya, panggil fungsi yang sesuai di JavaScript. Contoh menunjukkan cara membuat peta menampilkan citra udara satelit, memusatkan peta di atas lokasi, dan mengubah tingkat zoom menjadi 15 di Google Maps. Koordinat lokasi berikut digunakan: bujur: -111.0225 dan lintang: 35.0272.

Nota

Google Maps menggunakan petak peta berdimensi 256 piksel, sedangkan Azure Maps menggunakan petak peta 512 piksel yang lebih besar. Dengan demikian, Azure Maps memerlukan lebih sedikit permintaan jaringan untuk memuat area peta yang sama dengan Google Maps. Karena cara kerja piramida petak peta dalam kontrol peta, Anda perlu mengurangi tingkat zoom yang digunakan di Google Maps dengan nomor satu saat menggunakan Azure Maps. Operasi aritmatika ini memastikan bahwa petak peta yang lebih besar di Azure Maps merender area peta yang sama seperti di Google Maps,

Sebelum: Google Maps

Pindahkan kontrol peta Google Maps menggunakan metode ini setOptions . Metode ini memungkinkan Anda menentukan pusat peta dan tingkat zoom.

map.setOptions({
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    center: new google.maps.LatLng(35.0272, -111.0225),
    zoom: 15
});

Setelah: Peta Azure

Di Azure Maps, ubah posisi peta menggunakan setCamera metode dan ubah gaya peta menggunakan metode tersebut setStyle . Koordinat di Azure Maps dalam format "garis bujur, lintang", dan nilai tingkat zoom dikurangi satu.

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

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

Sumber daya lainnya:

• Memilih gaya peta
• Gaya peta yang didukung

Menambahkan penanda

Di Azure Maps, ada beberapa cara di mana data titik dapat dirender di peta:

• Penanda HTML – Merender poin menggunakan elemen DOM tradisional. Penanda HTML mendukung penggeseran.
• Lapisan Simbol – Merender titik dengan ikon atau teks dalam konteks WebGL.
• Bubble Layer – Merender titik sebagai lingkaran di peta. Radius lingkaran dapat diskalakan berdasarkan pada properti dalam data.

Render layer Symbol dan layer Bubble dalam konteks WebGL. Kedua lapisan dapat merender kumpulan besar titik di peta. Lapisan-lapisan ini mengharuskan data disimpan dalam sumber data. Sumber data dan lapisan rendering harus ditambahkan ke peta setelah ready peristiwa diaktifkan. Penanda HTML dirender sebagai elemen DOM 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 untuk menggunakan salah satu lapisan rendering sebagai gantinya.

Mari tambahkan penanda ke peta dengan angka 10 dilapisi sebagai label. Gunakan garis bujur: -0,2 dan lintang: 51,5.

Sebelum: Google Maps

Dengan Google Maps, tambahkan penanda ke peta menggunakan google.maps.Marker class dan tentukan peta sebagai salah satu opsi.

//Create a marker and add it to the map.
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    label: '10',
    map: map
});

Sesudah: Azure Maps menggunakan Penanda HTML

Di Azure Maps, gunakan penanda HTML untuk menampilkan titik di peta. Penanda HTML direkomendasikan untuk aplikasi yang hanya perlu menampilkan beberapa titik di peta. Untuk menggunakan penanda HTML, buat instance atlas.HtmlMarker kelas. Atur opsi teks dan posisi, dan tambahkan penanda ke peta menggunakan metode ini 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]
}));

Setelah itu: Azure Maps menggunakan Lapisan Simbol

Untuk lapisan Simbol, tambahkan data ke sumber data. Lampirkan sumber data ke lapisan. Selain itu, sumber data dan lapisan harus ditambahkan ke peta setelah ready peristiwa diaktifkan. Untuk merender nilai teks unik di atas simbol, informasi teks perlu disimpan sebagai properti titik data. Properti harus direferensikan dalam textField opsi lapisan. Pendekatan ini sedikit lebih banyak pekerjaan daripada menggunakan penanda HTML, tetapi kinerjanya lebih baik.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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>

Sumber daya lainnya:

• Membuat sumber data
• Tambahkan Lapisan Simbol
• Menambahkan Bubble Layer
• Pengklusteran data titik di Web SDK
• Menambahkan Penanda HTML
• Menggunakan ekspresi gaya berbasis data
• Opsi ikon lapisan simbol
• Opsi teks lapisan simbol
• Kelas pemroksi HTML
• Opsi penanda HTML

Menambahkan penanda kustom

Anda dapat menggunakan Gambar kustom untuk mewakili titik pada peta. Peta berikut menggunakan gambar kustom untuk menampilkan titik di peta. Titik ditampilkan pada garis lintang: 51,5 dan bujur: -0,2. Jangkar mengimbangi posisi penanda, sehingga titik ikon pushpin sejajar dengan posisi yang benar di peta.

yellow-pushpin.png

Sebelum: Google Maps

Buat penanda kustom dengan menentukan Icon objek yang berisi url ke gambar. Tentukan anchor titik untuk menyelaraskan titik gambar pushpin dengan koordinat pada peta. Nilai jangkar di Google Maps relatif terhadap sudut kiri atas gambar.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.5, -0.2),
    icon: {
        url: 'https://samples.azuremaps.com/images/icons/ylw-pushpin.png',
        anchor: new google.maps.Point(5, 30)
    },
    map: map
});

Sesudah: Azure Maps menggunakan Penanda HTML

Untuk menyesuaikan penanda HTML, teruskan HTML string atau HTMLElement ke htmlContent opsi penanda. Gunakan anchor opsi untuk menentukan posisi relatif penanda, relatif terhadap koordinat posisi. Tetapkan salah satu dari sembilan titik referensi yang ditentukan ke anchor opsi. Poin-poin yang didefinisikan tersebut adalah: "tengah", "atas", "bawah", "kiri", "kanan", "kiri atas", "kanan atas", "kiri bawah", "kanan bawah". Konten ditambatkan ke tengah bawah konten html secara default. Untuk mempermudah migrasi kode dari Google Maps, atur ke anchor "kiri atas", lalu gunakan pixelOffset opsi dengan offset yang sama yang digunakan di Google Maps. Offset di Azure Maps bergerak ke arah yang berlawanan dengan offset di Google Maps. Jadi, kalikan offset dengan minus satu.

Petunjuk / Saran

Tambahkan pointer-events:none sebagai gaya pada konten html untuk menonaktifkan perilaku seret default di Microsoft Edge, yang akan menampilkan ikon yang tidak diinginkan.

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

Setelah itu: Azure Maps menggunakan Lapisan Simbol

Lapisan simbol di Azure Maps juga mendukung gambar kustom. Pertama, muat gambar ke sumber daya peta dan tetapkan dengan ID unik. Referensikan gambar di lapisan simbol. Gunakan opsi untuk offset menyelaraskan gambar ke titik yang benar di peta. Gunakan anchor opsi untuk menentukan posisi relatif simbol, relatif terhadap koordinat posisi. Gunakan salah satu dari sembilan titik referensi yang ditentukan. Poin-poin tersebut adalah: "tengah", "atas", "bawah", "kiri", "kanan", "kiri atas", "kanan atas", "kiri bawah", "kanan bawah". Konten ditambatkan ke tengah bawah konten html secara default. Untuk mempermudah migrasi kode dari Google Maps, atur ke anchor "kiri atas", lalu gunakan offset opsi dengan offset yang sama yang digunakan di Google Maps. Offset di Azure Maps bergerak ke arah yang berlawanan dengan offset di Google Maps. Jadi, kalikan offset 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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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', 'https://samples.azuremaps.com/images/icons/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>

Petunjuk / Saran

Untuk merender titik kustom lanjutan, gunakan beberapa lapisan rendering secara bersamaan. Misalnya, katakanlah Anda ingin memiliki beberapa penjepit yang memiliki ikon yang sama pada lingkaran berwarna berbeda. Alih-alih membuat banyak gambar untuk setiap hamparan warna, tambahkan lapisan simbol di atas lapisan gelembung. Mintalah pushpin mereferensikan sumber data yang sama. Pendekatan ini akan lebih efisien daripada membuat dan memelihara banyak gambar yang berbeda.

Sumber daya lainnya:

• Membuat sumber data
• Tambahkan Lapisan Simbol
• Menambahkan Penanda HTML
• Menggunakan ekspresi gaya berbasis data
• Opsi ikon lapisan simbol
• Opsi teks lapisan simbol
• Kelas pemroksi HTML
• Opsi penanda HTML

Menambah poligaris

Gunakan polyline untuk mewakili garis atau jalur di peta. Mari kita buat polyline putus-putus di peta.

Sebelum: Google Maps

Kelas Polyline menerima serangkaian opsi. Teruskan array koordinat dalam path opsi polyline.

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

//Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

//Create the polyline.
var line = new google.maps.Polyline({
    path: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1)
    ],
    strokeColor: 'red',
    strokeOpacity: 0,
    strokeWeight: 4,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
    }]
});

//Add the polyline to the map.
line.setMap(map);

Setelah: Peta Azure

Polylines disebut LineString atau MultiLineString objek. Objek-objek ini dapat ditambah ke sumber data dan disajikan menggunakan lapisan garis. Tambahkan LineString ke sumber data, lalu tambahkan sumber data ke a LineLayer untuk merendernya.

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

Sumber daya lainnya:

• Menambah baris ke peta
• Opsi lapisan baris
• Menggunakan ekspresi gaya berbasis data

Menambah poligon

Azure Maps dan Google Maps menyediakan dukungan serupa untuk poligon. Poligon digunakan untuk menunjukkan area pada peta. Contoh berikut menunjukkan cara membuat poligon yang membentuk segitiga berdasarkan koordinat tengah peta.

Sebelum: Google Maps

Kelas Polygon menerima serangkaian opsi. Teruskan array koordinat ke paths opsi poligon.

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

//Create a polygon.
var polygon = new google.maps.Polygon({
    paths: [
        center,
        new google.maps.LatLng(center.lat() - 0.5, center.lng() - 1),
        new google.maps.LatLng(center.lat() - 0.5, center.lng() + 1),
        center
    ],
    strokeColor: 'red',
    strokeWeight: 2,
    fillColor: 'rgba(0, 255, 0, 0.5)'
});

//Add the polygon to the map
polygon.setMap(map);

Setelah: Peta Azure

Tambahkan objek atau Polygon ke MultiPolygon sumber data. Render objek pada peta menggunakan lapisan. Render area poligon menggunakan lapisan poligon. Dan, render garis besar poligon menggunakan layer garis.

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

Sumber daya lainnya:

• Menambah poligon ke peta
• Menambahkan lingkaran ke peta
• Opsi lapisan poligon
• Opsi lapisan baris
• Menggunakan ekspresi gaya berbasis data

Menampilkan jendela info

Informasi tambahan untuk entitas dapat ditampilkan di peta sebagai google.maps.InfoWindow class di Google Maps. Di Azure Maps, fungsionalitas ini dapat dicapai menggunakan atlas.Popup kelas. Contoh berikutnya menambahkan penanda ke peta. Saat penanda diklik, jendela info atau popup ditampilkan.

Sebelum: Google Maps

Buat instance jendela info menggunakan google.maps.InfoWindow konstruktor.

<!-- Google Maps Script Reference -->
<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>

<script type='text/javascript'>

    async function initMap() {
        // Request needed libraries.
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker",);

        const map = new Map(document.getElementById("myMap"), {
            zoom: 12,
            center: { lat: 47.608458, lng: -122.335077 },
            disableDefaultUI: true,
            mapId: "4504f8b37365c3d0",
        });

        // Create an info window to share between markers.
        const infoWindow = new InfoWindow();

        // Create the marker.
        const pin = new PinElement();
        const marker = new AdvancedMarkerElement({
            position: { lat: 47.608458, lng: -122.335077 },
            map,
            title: "<B>Hello World!</B>",
            content: pin.element,
            gmpClickable: true,
        });

        // Add a click listener for each marker, and set up the info window.
        marker.addListener("click", ({ domEvent, latLng }) => {
            const { target } = domEvent;
            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    }
</script>

Setelah: Peta Azure

Mari kita gunakan popup untuk menampilkan informasi tambahan tentang lokasi. Teruskan HTML string atau HTMLElement objek ke content opsi popup. Jika mau, popup dapat ditampilkan secara independen dari bentuk apa pun. Dengan demikian, Popup memerlukan nilai yang position harus ditentukan. Tentukan nilainya position . Untuk menampilkan popup, panggil open metode dan teruskan map tempat popup akan ditampilkan.

//Add a marker to the map in which 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:5px"><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);
});

Nota

Anda dapat melakukan hal yang sama dengan simbol, gelembung, garis, atau lapisan poligon dengan meneruskan lapisan yang dipilih ke kode peristiwa peta alih-alih penanda.

Sumber daya lainnya:

• Menambahkan popup
• Popup dengan Konten Media
• Popup pada Bentuk
• Menggunakan Ulang Popup dengan Banyak Pin
• Kelas popup
• Opsi popup

Mengimpor file GeoJSON

Google Maps mendukung pemuatan dan penataan data GeoJSON secara dinamis melalui google.maps.Data kelas. Fungsionalitas kelas ini lebih selaras dengan gaya berbasis data Azure Maps. Tapi, ada perbedaan utama. Dengan Google Maps, Anda menentukan fungsi panggilan balik. Logika bisnis untuk menata gaya setiap fitur yang diproses satu per satu di utas UI. Tetapi di Azure Maps, lapisan mendukung menentukan ekspresi berbasis data sebagai opsi gaya. Ekspresi ini diproses pada waktu render pada utas terpisah. Pendekatan Azure Maps meningkatkan performa rendering. Keuntungan ini terlihat ketika kumpulan data yang lebih besar perlu dirender dengan cepat.

Contoh berikut memuat umpan GeoJSON dari semua gempa bumi selama tujuh hari terakhir dari USGS. Data gempa bumi ditampilkan sebagai lingkaran berskala di peta. Warna dan skala setiap lingkaran didasarkan pada magnitudo setiap gempa, yang disimpan dalam "mag" properti setiap fitur dalam kumpulan data. Jika besarnya lebih besar dari atau sama dengan lima, lingkarannya berwarna merah. Jika lebih besar atau sama dengan tiga, tetapi kurang dari lima, lingkarannya berwarna oranye. Jika kurang dari tiga, lingkarannya berwarna hijau. Jari-jari setiap lingkaran adalah eksponensial dari besaran dikalikan 0,1.

Sebelum: Google Maps

Tentukan satu fungsi callback dalam map.data.setStyle metode. Di dalam fungsi callback, terapkan logika bisnis ke setiap fitur. Muat umpan GeoJSON dengan map.data.loadGeoJson metode.

<!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 google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2
            });

            //Define a callback to style each feature.
            map.data.setStyle(function (feature) {

                //Extract the 'mag' property from the feature.
                var mag = parseFloat(feature.getProperty('mag'));

                //Set the color value to 'green' by default.
                var color = 'green';

                //If the mag value is greater than 5, set the color to 'red'.
                if (mag >= 5) {
                    color = 'red';
                }
                //If the mag value is greater than 3, set the color to 'orange'.
                else if (mag >= 3) {
                    color = 'orange';
                }

                return /** @type {google.maps.Data.StyleOptions} */({
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,

                        //Scale the radius based on an exponential of the 'mag' value.
                        scale: Math.exp(mag) * 0.1,
                        fillColor: color,
                        fillOpacity: 0.75,
                        strokeWeight: 2,
                        strokeColor: 'white'
                    }
                });
            });

            //Load the data feed.
            map.data.loadGeoJson(earthquakeFeed);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Setelah: Peta Azure

GeoJSON adalah jenis data dasar di Azure Maps. Impor ke sumber data menggunakan metode ini datasource.importFromUrl . Gunakan lapisan gelembung. Lapisan gelembung menyediakan fungsionalitas untuk merender lingkaran berskala, berdasarkan properti fitur dalam sumber data. Alih-alih memiliki fungsi callback, logika bisnis diubah menjadi ekspresi dan diteruskan ke opsi gaya. Ekspresi menentukan cara kerja logika bisnis. Ekspresi dapat diteruskan ke utas lain dan dievaluasi terhadap data fitur. Beberapa sumber data dan lapisan dapat ditambahkan ke Azure Maps, masing-masing dengan logika bisnis yang berbeda. Fitur ini memungkinkan beberapa kumpulan data ditampilkan di peta dengan cara yang berbeda.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;
        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 subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                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 scaled circles.
                map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
                    //Make the circles semi-transparent.
                    opacity: 0.75,

                    color: [
                        'case',

                        //If the mag value is greater than 5, return 'red'.
                        ['>=', ['get', 'mag'], 5],
                        'red',

                        //If the mag value is greater than 3, return 'orange'.
                        ['>=', ['get', 'mag'], 3],
                        'orange',

                        //Return 'green' as a fallback.
                        'green'
                    ],

                    //Scale the radius based on an exponential of the 'mag' value.
                    radius: ['*', ['^', ['e'], ['get', 'mag']], 0.1]
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Sumber daya lainnya:

• Tambahkan Lapisan Simbol
• Menambahkan Bubble Layer
• Pengklusteran data titik di Web SDK
• Menggunakan ekspresi gaya berbasis data

Pengklusteran penanda

Ketika banyak titik data muncul di peta, titik dapat tumpang tindih, membuat peta terlihat berantakan dan sulit dibaca dan digunakan. Pengklusteran data titik adalah proses menggabungkan titik data yang berdekatan satu sama lain dan merepresentasikannya di peta sebagai satu titik data berkluster. Saat pengguna memperbesar tampilan ke dalam peta, kluster pecah menjadi titik data masing-masing. Pengklusteran titik data meningkatkan pengalaman pengguna dan performa peta.

Dalam contoh berikut, kode memuat umpan GeoJSON data gempa bumi dari minggu lalu dan menambahkannya ke peta. Cluster dirender sebagai lingkaran berskala dan berwarna. Skala dan warna lingkaran tergantung pada jumlah titik yang dikandungnya.

Nota

Google Maps dan Azure Maps menggunakan algoritme pengelompokan yang sedikit berbeda. Dengan demikian, terkadang distribusi titik dalam kluster bervariasi.

Sebelum: Google Maps

Gunakan pustaka MarkerCluster untuk mengelompokkan penanda. Ikon cluster terbatas pada gambar, yang memiliki angka satu hingga lima sebagai namanya. Mereka dihosting di direktori yang sama.

<!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 earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';

        async function initMap() {
            const AdvancedMarkerElement = await google.maps.importLibrary("marker");
            const map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
            });

            //Download the GeoJSON data.
            fetch(earthquakeFeed)
                .then(function (response) {
                    return response.json();
                }).then(function (data) {

                    //Loop through the GeoJSON data and create a marker for each data point.
                    var markers = [];
                    for (var i = 0; i < data.features.length; i++) {
                        markers.push(new google.maps.marker.AdvancedMarkerElement({
                            position: new google.maps.LatLng(data.features[i].geometry.coordinates[1], data.features[i].geometry.coordinates[0])
                        }));
                    }

                    //Create a marker clusterer instance and tell it where to find the cluster icons.
                    var markerCluster = new markerClusterer.MarkerClusterer({map, markers});
                });
        }
    </script>

    <!-- Load the marker cluster library. -->
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&loading=async"></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Setelah: Peta Azure

Tambahkan dan kelola data dalam sumber data. Hubungkan sumber data dan lapisan, lalu render data. Kelas DataSource di Azure Maps menyediakan beberapa opsi pengklusteran.

• cluster – Memberi tahu sumber data untuk mengkluster data titik.
• clusterRadius - Radius dalam piksel untuk mengelompokkan titik bersama-sama.
• clusterMaxZoom - Tingkat zoom maksimum di mana pengelompokan terjadi. Jika Anda memperbesar lebih dari level ini, semua titik akan dirender sebagai simbol.
• clusterProperties - Mendefinisikan properti kustom yang dihitung menggunakan ekspresi terhadap semua titik dalam setiap kluster dan ditambah ke properti setiap titik kluster.

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

Nama properti	Tipe	Deskripsi
cluster	Boolean	Menunjukkan apakah fitur mewakili kluster.
cluster_id	benang	ID unik untuk kluster yang dapat digunakan dengan DataSource getClusterExpansionZoom, getClusterChildren, dan getClusterLeaves metode.
point_count	nomor/angka	Jumlah titik yang dikandung kluster.
point_count_abbreviated	benang	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.

Metode	Tipe pengembalian	Deskripsi
getClusterChildren(clusterId: number)	Geometri Fitur Array Janji,<apa pun> |<< Rupa>>	Mengambil elemen anak dari kluster yang diberikan pada tingkat pembesaran tampilan berikutnya. Anak-anak ini dapat berupa kombinasi bentuk dan subkluster. Subkluster adalah fitur dengan properti yang cocok dengan ClusteredProperties.
getClusterExpansionZoom(clusterId: number)	Nomor janji<>	Menghitung tingkat zoom di mana kluster mulai mengembang atau terpecah.
getClusterLeaves(clusterId: number, limit: number, offset: number)	Geometri Fitur Array Janji,<apa pun> |<< Rupa>>	Mengambil semua titik dalam kluster. Atur untuk limit mengembalikan subkumpulan titik, dan gunakan offset halaman to melalui titik.

Saat merender data berkluster di peta, seringkali yang terbaik adalah menggunakan dua lapisan atau lebih. Contoh berikut menggunakan tiga lapisan. Lapisan gelembung untuk menggambar lingkaran berwarna berskala berdasarkan ukuran kelompok. Lapisan simbol untuk merender ukuran kluster sebagai teks. Dan, ia menggunakan lapisan simbol kedua untuk merender titik yang tidak dikelompokkan. Untuk informasi selengkapnya tentang cara lain merender data berkluster, lihat Pengklusteran data titik di Web SDK.

Impor data GeoJSON secara langsung menggunakan importDataFromUrl fungsi pada DataSource kelas, di dalam peta Azure Maps.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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 subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                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 in the 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 which 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>

Sumber daya lainnya:

• Tambahkan Lapisan Simbol
• Menambahkan Bubble Layer
• Pengklusteran data titik di Web SDK
• Menggunakan ekspresi gaya berbasis data

Menambah peta panas

Peta panas, juga dikenal sebagai peta kepadatan titik, adalah jenis visualisasi data. Mereka digunakan untuk mewakili kepadatan data menggunakan rentang warna. Dan, mereka sering digunakan untuk menampilkan data "hot spot" di peta. Peta panas adalah cara yang bagus untuk merender kumpulan data titik yang besar.

Contoh berikut memuat umpan GeoJSON dari semua gempa bumi selama sebulan terakhir, dari USGS, dan merendernya sebagai peta panas tertimbang. Properti "mag" digunakan sebagai bobot.

Sebelum: Google Maps

Untuk membuat peta panas, muat library "visualisasi" dengan menambahkan &libraries=visualization ke URL skrip API. Lapisan peta panas di Google Maps tidak mendukung data GeoJSON secara langsung. Pertama, unduh data dan ubah menjadi array titik data berbobot:

<!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 url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

        function initMap() {

            var map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(20, -160),
                zoom: 2,
                mapTypeId: 'satellite'
            });

            //Download the GeoJSON data.
            fetch(url).then(function (response) {
                return response.json();
            }).then(function (res) {
                var points = getDataPoints(res);

                var heatmap = new google.maps.visualization.HeatmapLayer({
                    data: points
                });
                heatmap.setMap(map);
            });
        }

        function getDataPoints(geojson, weightProp) {
            var points = [];

            for (var i = 0; i < geojson.features.length; i++) {
                var f = geojson.features[i];

                if (f.geometry.type === 'Point') {
                    points.push({
                        location: new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]),
                        weight: f.properties[weightProp]
                    });
                }
            }

            return points;
        } 
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}&libraries=visualization" async defer></script>
</head>
<body>
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Setelah: Peta Azure

Muat data GeoJSON ke dalam sumber data dan sambungkan sumber data ke lapisan peta panas. Properti yang digunakan untuk bobot dapat diteruskan ke weight opsi menggunakan ekspresi. Langsung impor data GeoJSON ke Azure Maps menggunakan fungsi pada importDataFromUrlDataSource kelas.

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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',

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

            //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, {
                    weight: ['get', 'mag'],
                    intensity: 0.005,
                    opacity: 0.65,
                    radius: 10
                }));
            });
        }
    </script>
</head>
<body onload="initMap()">
    <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
</body>
</html>

Sumber daya lainnya:

• Menambah lapisan peta panas
• Kelas lapisan peta panas
• Opsi lapisan peta panas
• Menggunakan ekspresi gaya berbasis data

Menerapkan lapisan petak

Lapisan petak peta di Azure Maps dikenal sebagai hamparan gambar di Google Maps. Lapisan ubin memungkinkan Anda untuk melapisi gambar besar yang telah dipecah menjadi gambar ubin yang lebih kecil, yang selaras dengan sistem petak peta peta. Pendekatan ini biasanya digunakan untuk melapisi gambar besar atau kumpulan data besar.

Contoh berikut melapisi lapisan ubin radar cuaca dari Iowa Environmental Mesonet dari Iowa State University.

Sebelum: Google Maps

Di Google Maps, lapisan petak peta dapat dibuat dengan menggunakan google.maps.ImageMapType kelas.

map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + coord.x + "/" + coord.y;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.8
}));

Setelah: Peta Azure

Tambahkan lapisan petak peta ke peta mirip dengan lapisan lainnya. Gunakan URL berformat yang memiliki placeholder x, y, zoom; {x}, {y}, {z} untuk memberi tahu lapisan di mana harus mengakses ubin. Azure Maps tile layer juga mendukung {quadkey}, {bbox-epsg-3857}, dan {subdomain} placeholder.

Petunjuk / Saran

Di Azure Maps, lapisan dapat dengan mudah dirender di bawah lapisan lain, termasuk lapisan peta dasar. Sering kali diinginkan agar lapisan petak dirender di bawah label peta sehingga mudah dibaca. Metode ini map.layers.add mengambil parameter kedua yang merupakan id layer untuk memasukkan layer baru di bawah ini. Untuk menyisipkan lapisan petak peta di bawah label peta, gunakan kode ini: 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');

Petunjuk / Saran

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

Sumber daya lainnya:

• Menambah lapisan ubin
• Kelas lapisan ubin
• Opsi lapisan petak peta

Menunjukkan data lalu lintas

Data lalu lintas dapat dilapisi Azure dan Google Maps.

Sebelum: Google Maps

Overlay data lalu lintas pada peta menggunakan lapisan lalu lintas.

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Setelah: Peta Azure

Azure Maps menyediakan beberapa opsi berbeda untuk menampilkan lalu lintas. Tampilkan insiden lalu lintas, seperti penutupan jalan dan kecelakaan sebagai ikon di peta. Overlay arus lalu lintas dan jalan berkode warna di peta. Warna dapat dimodifikasi berdasarkan batas kecepatan yang diposting, relatif terhadap penundaan normal yang diharapkan, atau penundaan absolut. Data insiden di Azure Maps diperbarui setiap menit, dan pembaruan data alur setiap dua menit.

Tetapkan nilai yang diinginkan untuk setTraffic opsi.

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

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

Sumber daya lainnya:

• Tampilkan lalu lintas di peta
• Opsi lapisan lalu lintas

Menambahkan lapisan dasar

Azure dan Google Maps mendukung overlay gambar georeferensi pada peta. Gambar georeferensi bergerak dan menskalakan saat Anda menggeser dan memperbesar peta. Di Google Maps, gambar yang direferensikan secara geografis dikenal sebagai hamparan tanah, sedangkan di Azure Maps mereka disebut sebagai lapisan gambar. Mereka bagus untuk membangun denah lantai, melapisi peta lama, atau citra dari drone.

Sebelum: Google Maps

Tentukan URL ke gambar yang ingin Anda overlay dan kotak pembatas untuk mengikat gambar di peta. Contoh ini menumpangkan gambar peta Newark, New Jersey dari tahun 1922 ke atas 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, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(40.740, -74.18),
                zoom: 12
            });

            var imageBounds = {
                north: 40.773941,
                south: 40.712216,
                east: -74.12544,
                west: -74.22655
            };

            historicalOverlay = new google.maps.GroundOverlay(
                'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
                imageBounds);
            historicalOverlay.setMap(map);
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

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

Setelah: Peta Azure

Gunakan kelas untuk atlas.layer.ImageLayer melapisi gambar yang direferensikan secara geografis. Kelas ini memerlukan URL ke gambar dan serangkaian koordinat untuk empat sudut gambar. Gambar harus dihosting baik pada domain yang sama maupun mengaktifkan COR.

Petunjuk / Saran

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

<!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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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 subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                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>

Sumber daya lainnya:

• Melapisi gambar
• Kelas lapisan gambar

Menambah data KML ke peta

Azure dan Google Maps dapat mengimpor dan merender data KML, KMZ, dan GeoRSS di peta. Azure Maps juga mendukung file GPX, GML, CSV spasial, GeoJSON, Well Known Text (WKT), Web-Mapping Services (WMS), Web-Mapping Tile Services (WMTS), dan Web Feature Services (WFS). Azure Maps membaca file secara lokal ke dalam memori dan dalam banyak kasus dapat menangani file KML yang lebih besar.

Sebelum: Google Maps

<!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, historicalOverlay;

        function initMap() {
            map = new google.maps.Map(document.getElementById('myMap'), {
                center: new google.maps.LatLng(0, 0),
                zoom: 1
            });

             var layer = new google.maps.KmlLayer({
              url: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml',
              map: map
            });
        }
    </script>

    <!-- Google Maps Script Reference -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key={Your-Google-Maps-Key}" async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

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

Setelah: Peta Azure

Di Azure Maps, GeoJSON adalah format data utama yang digunakan dalam Web SDK, lebih banyak format data spasial dapat dengan mudah diintegrasikan 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 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 ini SpatialDataLayer mendukung sebagian besar gaya ini, namun gambar ikon harus dimuat ke dalam peta sebelum memuat data fitur, dan hamparan 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/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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 subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                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('https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.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 parallel.
                            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>

Sumber daya lainnya:

• fungsi atlas.io.read
• SimpleDataLayer
• SimpleDataLayerOptions

Sampel kode lainnya

Berikut ini adalah beberapa contoh kode lainnya yang terkait dengan migrasi Google Maps:

• Alat menggambar
• Batasi Peta ke Penggeseran Dua Jari
• Batasi Zoom Roda Gulir
• Membuat Kontrol Layar Penuh

Layanan:

• Menggunakan modul layanan Azure Maps
• Mencari lokasi menarik
• Mendapatkan informasi dari koordinat (kode geografis terbalik)
• Memperlihatkan petunjuk arah dari A ke B
• Pencarian Otosaran dengan jQuery UI

Pemetaan kelas Google Maps V3 ke Azure Maps Web SDK

Lampiran berikut menyediakan referensi silang kelas yang umum digunakan di Google Maps V3 dan Azure Maps Web SDK yang setara.

Kelas Inti

Google Maps	Azure Maps
google.maps.Map	atlas. Peta
google.maps.InfoWindow	atlas. Popup
google.maps.InfoWindowOptions	atlas. Opsi Popup
google.maps.LatLng	atlas.data.Posisi
google.maps.LatLngBounds	atlas.data.BoundingBox
google.maps.MapOptions	atlas. Opsi Kamera atlas. Opsi Batas Kamera atlas. Opsi Layanan atlas. Opsi Gaya atlas. Opsi InteraksiPengguna
google.maps.Point	atlas. Pixel

Kelas Overlay

Google Maps	Azure Maps
google.maps.Marker	atlas. Penanda HTML atlas.data.Point
google.maps.MarkerOptions	atlas. Opsi Penanda HTML atlas.layer.SymbolLayer atlas. SimbolLayerOptions atlas. Opsi Ikon atlas. Opsi Teks atlas.layer.BubbleLayer atlas. Opsi BubbleLayer
google.maps.Polygon	atlas.data.Polygon
google.maps.PolygonOptions	atlas.layer.PolygonLayer atlas. PolygonLayerOptions atlas.layer.LineLayer atlas. Opsi LineLayer
google.maps.Polyline	atlas.data.LineString
google.maps.PolylineOptions	atlas.layer.LineLayer atlas. Opsi LineLayer
google.maps.Circle	Lihat Menambahkan lingkaran ke peta
google.maps.ImageMapType	atlas. Lapisan Ubin
google.maps.ImageMapTypeOptions	atlas. TileLayerOptions
google.maps.GroundOverlay	atlas.layer.ImageLayer atlas. ImageLayerOptions

Kelas Layanan

Azure Maps Web SDK menyertakan modul layanan, yang dapat dimuat secara terpisah. Modul ini membungkus layanan REST Azure Maps dengan API web dan dapat digunakan dalam aplikasi JavaScript, TypeScript, dan Node.js.

Google Maps	Azure Maps
google.maps.Geocoder	atlas.service.SearchUrl
google.maps.GeocoderRequest	atlas. SearchAddressOptions [atlas. SearchAddressReverseOptions] atlas. SearchAddressReverseCrossStreetOptions atlas. SearchAddressStructuredOptions atlas. SearchAlongRouteOptions atlas. SearchFuzzyOptions atlas. SearchInsideGeometryOptions atlas. CariTerdekatOpties atlas. CariPOIOptions atlas. SearchPOICategoryOptions
google.maps.DirectionsService	atlas.service.RouteUrl
google.maps.DirectionsRequest	atlas. HitungteRouteDirectionsOptions
google.maps.places.PlacesService	f

Perpustakaan

Pustaka menambahkan lebih banyak fungsionalitas ke peta. Banyak dari pustaka ini berada di SDK inti Azure Maps. Berikut adalah beberapa class yang setara untuk digunakan sebagai pengganti library Google Maps ini

Google Maps	Azure Maps
Perpustakaan gambar	Modul alat menggambar
Perpustakaan geometri	atlas.matematika
Pustaka visualisasi	Menambahkan lapisan peta panas

Membersihkan sumber daya

Tidak ada sumber daya yang harus dibersihkan.

Langkah selanjutnya

Pelajari selengkapnya tentang bermigrasi ke Azure Maps:

Melakukan migrasi layanan web