Bagikan melalui

Merender data kustom pada peta raster

  • Artikel

Artikel ini menjelaskan cara menggunakan perintah Dapatkan Gambar Statis Peta dengan fungsionalitas komposisi gambar. Fungsionalitas komposisi gambar mendukung pengambilan petak peta raster statis yang berisi data kustom dan gaya yang berbeda.

Berikut ini adalah contoh data kustom:

  • Pushpin kustom
  • Label
  • Overlay geometri

Tip

Untuk menampilkan peta sederhana di halaman web, sering kali lebih hemat biaya untuk menggunakan Azure Maps Web SDK, daripada menggunakan layanan gambar statis. SDK web menggunakan petak peta; dan kecuali pengguna menggeser dan memperbesar peta, mereka akan sering menghasilkan hanya sebagian kecil dari transaksi per beban peta menggunakan penembolokan browser. Azure Maps Web SDK memiliki opsi untuk menonaktifkan panning dan zoom. Selain itu, Azure Maps Web SDK menyediakan serangkaian opsi visualisasi data yang lebih kaya daripada layanan web peta statis.

Prasyarat

Penting

Dalam contoh URL, ganti {Your-Azure-Maps-Subscription-key} dengan kunci langganan Azure Maps Anda.

Artikel ini menggunakan aplikasi Bruno , tetapi Anda dapat menggunakan lingkungan pengembangan API yang berbeda.

Catatan

Contoh dalam artikel ini memerlukan akun Azure Maps di tingkat harga Gen2.

Penghentian tingkat harga Azure Maps Gen1

Tingkat harga Gen1 sekarang tidak digunakan lagi dan akan dihentikan pada 15/9/26. Tingkat harga Gen2 menggantikan tingkat harga Gen1 (baik S0 maupun S1). Jika akun Azure Maps Anda memiliki tingkat harga Gen1 yang dipilih, Anda dapat beralih ke harga Gen2 sebelum dihentikan, jika tidak, akun tersebut akan diperbarui secara otomatis. Untuk informasi selengkapnya, lihat Mengelola tingkat harga akun Azure Maps Anda.

Mendapatkan gambar statik dengan pin dan label kustom

Untuk mendapatkan gambar statik dengan pin dan label kustom:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Dapatkan Gambar Statis Peta.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=13&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-73.964085, 40.78477&path=lcFF0000|lw2|la0.60|ra700||-122.13230609893799 47.64599069048016&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png

  6. Pilih Buat.

  7. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

    Gambar berikut dikembalikan:

    Pushpin kustom dengan label.

Merender poligon dengan warna dan tingkat keburaman

Anda dapat memodifikasi tampilan poligon dengan menggunakan pengubah gaya dengan parameter jalur.

Untuk merender poligon dengan warna dan tingkat keburaman:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan tersebut, seperti GET Polygon.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut ke layanan Render :

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=15&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&center=-74.040701, 40.698666&height=500&Width=500

    Gambar berikut dikembalikan:

    Merender poligon buram.

Merender lingkaran dan pin tekan dengan label kustom

Anda dapat memodifikasi tampilan pin dengan menambahkan pengubah gaya. Misalnya, untuk membuat pin tekan dan labelnya lebih besar atau lebih kecil, sc gunakan pengubah "gaya skala". Pengubah ini mengambil nilai yang lebih besar dari nol. Nilai 1 adalah skala standar. Nilai yang lebih besar dari 1 membuat pin lebih besar, dan nilai yang lebih kecil dari 1 membuatnya lebih kecil. Untuk informasi selengkapnya tentang pengubah gaya, lihat parameter Jalur perintah Dapatkan Gambar Statis Peta.

Untuk merender lingkaran dan pushpin dengan label kustom:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan tersebut, seperti GET Polygon.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut ke layanan Render :

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|sc1|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801 47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935 47.64452336193245&height=700&Width=700

  6. Pilih Buat.

  7. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

    Gambar berikut dikembalikan:

    Merender lingkaran dengan pushpin kustom.

  8. Selanjutnya, ubah warna pushpin dengan memodifikasi co pengubah gaya. Jika Anda melihat nilai pins parameter (pins=default|la15+50|al0.66|lc003C62|co002D62|), perhatikan bahwa warna saat ini adalah #002D62. Untuk mengubah warna menjadi #41d42a, ganti #002D62 dengan #41d42a. Sekarang parameter pins adalah pins=default|la15+50|al0.66|lc003C62|co41D42A|. Permintaan terlihat seperti URL berikut:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&height=700&Width=700

  9. Pilih Buat.

  10. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

    Gambar berikut dikembalikan:

    Merender lingkaran dengan pushpin yang diperbarui.

Demikian pula, Anda dapat mengubah, menambahkan, dan menghapus pengubah gaya lainnya.

Menambahkan lapisan lalu lintas

Untuk mendapatkan gambar statis dengan lapisan lalu lintas yang dirender pada peta dasar jalan, gunakan trafficLayer parameter . Contoh berikut menunjukkan peta dengan lapisan lalu lintas dan pin dengan label:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Dapatkan Gambar Statis Peta - lapisan lalu lintas.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center= -0.122427, 51.500867&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700&trafficLayer=microsoft.traffic.relative.main

  6. Pilih Buat.

  7. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

    Gambar berikut dikembalikan:

    Cuplikan layar peta yang menunjukkan lapisan lalu lintas, serta pushpin kustom dengan label Westminster Bridge.

Membuat peta menggunakan gaya abu-abu gelap

Untuk mendapatkan gambar statis dengan gaya abu-abu gelap yang diterapkan, atur parameter ke TilesetId microsoft.base.darkgrey:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Dapatkan Gambar Statis Peta - gaya abu-abu gelap.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.base.darkgrey&api-version=2024-04-01&language=en-us&center=-95.360200,29.753452&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700

  6. Pilih Buat.

  7. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

Gambar berikut dikembalikan:

Cuplikan layar peta memperlihatkan gaya abu-abu gelap yang dibuat dengan mengatur parameter ID tileset ke microsoft.base.darkgrey.

Untuk informasi selengkapnya tentang berbagai gaya yang tersedia menggunakan parameter TilesetId, lihat TilesetId di dokumentasi REnder - Get Map Tileset REST API.

Membuat peta menggunakan gaya citra

Untuk mendapatkan gambar statis dengan gaya citra yang diterapkan, atur parameter ke TilesetId microsoft.imagery:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Dapatkan Gambar Statis Peta - gaya citra.

  4. Pilih metode URL HTTP GET .

  5. Masukkan URL berikut:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.imagery&api-version=2024-04-01&language=en-us&center=-43.176141,-22.965458&height=700&Width=700

  6. Pilih Buat.

  7. Pilih panah Kirim Permintaan yang muncul di sebelah kanan URL permintaan.

    Gambar berikut dikembalikan:

    Cuplikan layar peta memperlihatkan gaya citra yang dibuat dengan mengatur parameter ID tileset ke microsoft.imagery.

Untuk informasi selengkapnya tentang berbagai gaya yang tersedia menggunakan parameter TilesetId, lihat TilesetId di dokumentasi REnder - Get Map Tileset REST API.

Langkah berikutnya

Render - Dapatkan Gambar Statis Peta