Bagikan melalui


Merender data kustom pada peta raster

Artikel ini menjelaskan cara menggunakan perintah Dapatkan Gambar Peta Statis 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:

  • Peniti tekan kustom
  • Label
  • Overlay geometri

Kiat

Untuk menampilkan peta sederhana di halaman web, sering kali lebih hemat biaya untuk menggunakan Azure Maps Web SDK, daripada menggunakan layanan gambar statis. Web SDK menggunakan petak peta; dan kecuali pengguna menggeser dan memperbesar peta, mereka akan sering hanya menghasilkan sebagian kecil dari transaksi setiap kali memuat peta dengan memanfaatkan caching 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 saat ini tidak digunakan lagi dan akan dihentikan pada 15/09/2026. 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.

Dapatkan gambar statis dengan penanda dan label yang dapat disesuaikan

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.

Menggambar lingkaran dan peniti dengan label khusus

Anda dapat memodifikasi tampilan pin dengan menambahkan pengubah gaya. Misalnya, untuk membuat pin tekan dan labelnya lebih besar atau lebih kecil, gunakan sc 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 dari perintah Dapatkan Gambar Statis Peta.

Untuk menampilkan lingkaran dan penanda dengan label khusus:

  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:

    Menggambar lingkaran dengan pushpin khusus.

  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 TilesetIdmicrosoft.base.darkgrey:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Mendapatkan 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 TilesetIdmicrosoft.imagery:

  1. Di aplikasi Bruno, pilih Permintaan Baru.

  2. Atur jenis ke HTTP.

  3. Masukkan Nama untuk permintaan, seperti Dapatkan Gambar Peta Statis - 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