Menambahkan lapisan peta panas (Android SDK)

Catatan

Penghentian Azure Peta Android SDK

Azure Peta Native SDK untuk Android sekarang tidak digunakan lagi dan akan dihentikan pada 31/3/25. Untuk menghindari gangguan layanan, migrasikan ke Azure Peta Web SDK dengan 3/31/25. Untuk informasi selengkapnya, lihat Panduan migrasi Azure Peta Android SDK.

Peta panas, juga dikenal sebagai peta kepadatan titik, adalah sejenis visualisasi data. Peta panas digunakan untuk mewakili kepadatan data menggunakan rentang warna dan menunjukkan data "titik panas" pada peta. Peta panas adalah cara yang bagus untuk merender himpunan data dengan sejumlah besar titik.

Penyajian puluhan ribu titik sebagai simbol dapat mencakup sebagian besar area peta. Kasus ini kemungkinan mengakibatkan banyak simbol tumpang tindih. Menyebabkan kesulitan dalam mendapatkan pemahaman yang lebih baik tentang data. Namun, memvisualisasikan himpunan data yang sama sebagai peta panas memudahkan melihat kepadatan dan kepadatan relatif setiap titik data.

Anda dapat menggunakan peta panas dalam berbagai skenario, termasuk:

• Data suhu: Menyediakan perkiraan untuk berapa suhu di antara dua titik data.
• Data untuk sensor kebisingan: Tidak hanya menunjukkan intensitas kebisingan tempat sensor berada, tetapi juga dapat memberikan wawasan tentang pengurangan nilai berdasarkan jarak. Tingkat kebisingan di satu situs mungkin tidak tinggi. Jika area cakupan kebisingan dari beberapa sensor tumpang tindih, ada kemungkinan area yang tumpang tindih ini mungkin mengalami tingkat kebisingan yang lebih tinggi. Dengan demikian, area yang tumpang tindih akan terlihat di peta panas.
• Jejak GPS: Menyertakan kecepatan sebagai peta ketinggian tertimbang, di mana intensitas setiap titik data didasarkan pada kecepatan. Contohnya, fungsi ini menyediakan cara untuk melihat tempat kendaraan mengebut.

Tip

Lapisan peta panas secara default merender koordinat semua geometri dalam sumber data. Untuk membatasi lapisan agar hanya merender fitur geometri titik, atur opsi filter lapisan ke eq(geometryType(), "Point"). Jika Anda juga ingin menyertakan fitur MultiPoint, atur opsi filter lapisan ke any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint")).

Prasyarat

Pastikan untuk menyelesaikan langkah-langkah di dokumen Mulai Cepat: Membuat aplikasi Android. Blok kode dalam artikel ini dapat dimasukkan ke dalam penanganan aktivitas onReady peta.

Menambah lapisan peta panas

Untuk merender sumber data titik sebagai peta panas, serahkan sumber data Anda ke dalam instans HeatMapLayer kelas, dan tambahkan ke peta.

Sampel kode berikut memuat umpan GeoJSON gempa bumi dari minggu lalu dan menyajikannya sebagai peta panas. Setiap titik data dirender dengan radius 10 piksel di semua tingkatan pembesaran. Untuk memastikan pengalaman pengguna yang lebih baik, peta panas berada di bawah lapisan label sehingga label tetap terlihat jelas. Data dalam sampel ini berasal dari Program Bahaya Gempa USGS. Sampel ini memuat data GeoJSON dari web menggunakan blok kode utilitas impor data yang disediakan dalam dokumen Membuat sumber data.

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson");

//Add data source to the map.
map.sources.add(source);

//Create a heat map layer.
HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(10f),
  heatmapOpacity(0.8f)
);

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels");

//Create a data source and add it to the map.
val source = DataSource()

//Import the geojson data and add it to the data source.
source.importDataFromUrl("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")

//Add data source to the map.
map.sources.add(source)

//Create a heat map layer.
val layer = HeatMapLayer(
    source,
    heatmapRadius(10f),
    heatmapOpacity(0.8f)
)

//Add the layer to the map, below the labels.
map.layers.add(layer, "labels")

Cuplikan layar berikut menunjukkan peta yang memuat peta panas menggunakan kode di atas.

Mengkustomisasi lapisan peta panas

Contoh sebelumnya mengkustomisasi peta panas dengan mengatur opsi radius dan tingkat keburaman. Lapisan peta panas menyediakan beberapa opsi untuk kustomisasi, termasuk:

• heatmapRadius: Menentukan radius piksel untuk merender setiap titik data. Anda dapat mengatur radius sebagai angka tetap atau sebagai ekspresi. Dengan menggunakan ekspresi, Anda dapat menskalakan radius berdasarkan tingkat pembesaran, dan mewakili area spasial yang konsisten di peta (misalnya, radius 5 mil).

• heatmapColor: Menentukan bagaimana peta panas diwarnai. Gradien warna adalah fitur umum dari peta panas. Anda dapat mencapai efek tersebut dengan ekspresi interpolate. Anda juga dapat menggunakan ekspresi step untuk mewarnai peta panas, memecah kepadatan secara visual ke dalam rentang yang menyerupai peta kontur atau gaya radar. Palet warna ini menentukan warna dari nilai kepadatan minimum hingga maksimum.

  Anda menentukan nilai warna untuk peta panas sebagai ekspresi pada nilai heatmapDensity. Warna area di mana tidak ada data yang ditentukan pada indeks 0 dari ekspresi "Interpolasi", atau warna default ekspresi "Stepped". Anda dapat menggunakan nilai ini untuk menentukan warna latar belakang. Seringkali, nilai ini diatur ke transparan, atau hitam semi transparan.

  Berikut contoh ekspresi warna:

  Ekspresi warna interpolasi	Ekspresi warna langkah
  interpolate(     linear(),     heatmapDensity(),     stop(0, color(Color.TRANSPARENT)),     stop(0.01, color(Color.MAGENTA)),     stop(0.5, color(parseColor("#fb00fb"))),     stop(1, color(parseColor("#00c3ff"))) )'	step(     heatmapDensity(),     color(Color.TRANSPARENT),     stop(0.01, color(parseColor("#000080"))),     stop(0.25, color(parseColor("#000080"))),     stop(0.5, color(Color.GREEN)),     stop(0.5, color(Color.YELLOW)),     stop(1, color(Color.RED)) )

• heatmapOpacity: Menentukan seberapa buram atau transparan lapisan peta panas.

• heatmapIntensity: Menerapkan pengali pada berat setiap titik data untuk meningkatkan intensitas keseluruhan peta panas. Ini menyebabkan perbedaan dalam berat titik data, membuatnya lebih mudah untuk divisualisasikan.

• heatmapWeight: Secara default, semua titik data memiliki berat 1, dan ditimbang setara. Opsi berat bertindak sebagai pengali, dan Anda dapat mengaturnya sebagai angka atau ekspresi. Jika angka ditetapkan sebagai berat, hal ini setara dengan menempatkan setiap titik data di peta dua kali. Misalnya, jika beratnya 2, maka kepadatannya berlipat ganda. Mengatur opsi berat menjadi angka merender peta panas dalam cara yang sama dengan menggunakan opsi intensitas.

  Namun, jika Anda menggunakan ekspresi, berat setiap titik data dapat didasarkan pada properti setiap titik data. Contohnya, anggap saja setiap titik data mewakili gempa bumi. Nilai magnitudo telah menjadi metrik penting untuk setiap titik data gempa. Gempa bumi terjadi sepanjang waktu, tetapi sebagian besar memiliki magnitudo rendah, dan tidak diperhatikan. Gunakan nilai besaran dalam ekspresi untuk menetapkan berat untuk setiap titik data. Dengan menggunakan nilai magnitudo untuk menetapkan berat, Anda mendapatkan representasi yang lebih baik dari signifikansi gempa bumi dalam peta panas.

• minZoom dan maxZoom : Rentang tingkat pembesaran tempat lapisan harus ditampilkan.

• filter: Ekspresi filter yang digunakan untuk membatasi yang diambil dari sumber dan dirender dalam lapisan.

• sourceLayer: Jika sumber data yang terhubung ke layer adalah sumber petak peta vektor, lapisan sumber dalam petak peta vektor harus ditentukan.

• visible: Menyembunyikan atau menunjukkan lapisan.

Cuplikan kode berikut adalah contoh peta panas di mana ekspresi interpolasi liner digunakan untuk membuat gradien warna halus. Properti mag yang ditentukan dalam data digunakan dengan interpolasi eksponensial untuk mengatur berat atau relevansi setiap titik data.

HeatMapLayer layer = new HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
);

val layer = HeatMapLayer(source,
    heatmapRadius(10f),

    //A linear interpolation is used to create a smooth color gradient based on the heat map density.
    heatmapColor(
        interpolate(
            linear(),
            heatmapDensity(),
            stop(0, color(Color.TRANSPARENT)),
            stop(0.01, color(Color.BLACK)),
            stop(0.25, color(Color.MAGENTA)),
            stop(0.5, color(Color.RED)),
            stop(0.75, color(Color.YELLOW)),
            stop(1, color(Color.WHITE))
        )
    ),

    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
    heatmapWeight(
       interpolate(
            exponential(2),
            get("mag"),
            stop(0,0),

            //Any earthquake above a magnitude of 6 will have a weight of 1
            stop(6, 1)
       )
    )
)

Cuplikan layar berikut menunjukkan lapisan peta panas kustom di atas yang menggunakan data yang sama dari contoh peta panas sebelumnya.

Peta panas yang dapat diperbesar secara konsisten

Secara default, radii poin data yang dirender di lapisan peta panas memiliki radius piksel tetap untuk semua tingkat pembesaran tampilan. Saat memperbesar peta, data mengagregasi bersama dan lapisan peta panas terlihat berbeda. Video berikut menunjukkan perilaku default peta panas di mana ia mempertahankan radius piksel saat memperbesar peta.

Gunakan zoomekspresi untuk menskalakan radius untuk setiap tingkat pembesaran, sehingga setiap titik data mencakup area fisik peta yang sama. Ekspresi ini membuat lapisan peta panas terlihat lebih statis dan konsisten. Setiap tingkat pembesaran peta memiliki piksel dua kali lebih banyak secara vertikal dan horizontal dibandingkan tingkat pembesaran sebelumnya.

Menskalakan radius sehingga berlipat ganda dengan setiap tingkatan pembesaran menciptakan peta panas yang terlihat konsisten pada semua tingkatan pembesaran. Untuk menerapkan penskalaan ini, gunakan zoom dengan ekspresi dasar 2 exponential interpolation, dengna radius piksel yang diatur untuk tingkat pembesaran minimum dan radius berskala untuk tingkat pembesaran maksimum yang dihitung sebagai 2 * Math.pow(2, minZoom - maxZoom) seperti yang ditampilkan pada contoh berikut. Perbesar peta untuk melihat bagaimana skala peta panas dengan tingkat pembesaran.

HeatMapLayer layer = new HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2, 19 - 1) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
);

val layer = HeatMapLayer(source,
  heatmapRadius(
    interpolate(
      exponential(2),
      zoom(),

      //For zoom level 1 set the radius to 2 pixels.
      stop(1, 2f),

      //Between zoom level 1 and 19, exponentially scale the radius from 2 pixels to 2 * (maxZoom - minZoom)^2 pixels.
      stop(19, Math.pow(2.0, 19 - 1.0) * 2f)
    )
  ),
  heatmapOpacity(0.75f)
)

Video berikut menunjukkan peta yang menjalankan kode di atas, yang menskalakan radius saat peta sedang diperbesar untuk membuat rendering peta panas yang konsisten di seluruh tingkat pembesaran.

Ekspresi zoom hanya dapat digunakan dalam ekspresi step dan interpolate. Ekspresi berikut dapat digunakan untuk memperkirakan radius dalam meter. Ekspresi ini menggunakan tempat penampung radiusMeters, yang harus Anda ganti dengan radius yang Anda inginkan. Ekspresi ini menghitung perkiraan radius piksel untuk tingkat pembesaran di ekuator untuk tingkat pembesaran 0 dan 24, dan menggunakan ekspresi exponential interpolation untuk menskalakan di antara nilai-nilai ini dengan cara yang sama seperti cara kerja sistem petak di peta.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

Tip

Saat Anda mengaktifkan pengelompokan pada sumber data, titik yang dekat satu sama lain dikelompokkan bersama sebagai titik terkluster. Anda dapat menggunakan jumlah poin dari setiap kluster sebagai ekspresi berat untuk peta panas. Ini dapat secara signifikan mengurangi jumlah poin yang akan dirender. Jumlah poin kluster disimpan dalam point_count properti fitur poin:

HeatMapLayer layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
);

Jika radius pengelompokan hanya beberapa piksel, akan ada perbedaan visual kecil dalam rendering. Radius yang lebih besar mengelompokkan lebih banyak poin ke dalam setiap kluster, dan meningkatkan performa peta panas.

interpolate(
    exponential(2),
    zoom(),
    stop(1, product(radiusMeters, 0.000012776039596366526)),
    stop(24, product(radiusMeters, 214.34637593279402))
)

Tip

Saat Anda mengaktifkan pengelompokan pada sumber data, titik yang dekat satu sama lain dikelompokkan bersama sebagai titik terkluster. Anda dapat menggunakan jumlah poin dari setiap kluster sebagai ekspresi berat untuk peta panas. Ini dapat secara signifikan mengurangi jumlah poin yang akan dirender. Jumlah poin kluster disimpan dalam point_count properti fitur poin:

var layer = new HeatMapLayer(dataSource,
   heatmapWeight(get("point_count"))
)

Jika radius pengelompokan hanya beberapa piksel, akan ada perbedaan visual kecil dalam rendering. Radius yang lebih besar mengelompokkan lebih banyak poin ke dalam setiap kluster, dan meningkatkan performa peta panas.

Langkah berikutnya

Untuk contoh kode lainnya untuk ditambahkan ke peta Anda, lihat artikel berikut:

Membuat sumber data

Menggunakan ekspresi gaya berbasis data