Menambahkan lapisan peta panas ke peta

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 sehingga hanya merender fitur geometri titik, atur filter properti lapisan ke ['==', ['geometry-type'], 'Point']. Jika Anda ingin menyertakan fitur MultiPoint juga, atur filter properti lapisan ke ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']].

Menambahkan lapisan peta panas

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

Dalam kode berikut, setiap titik panas memiliki radius 10 piksel di semua tingkatan zoom. Untuk memastikan pengalaman pengguna yang lebih baik, peta panas berada di bawah lapisan label. Label tetap terlihat jelas. Data dalam sampel ini berasal dari Program Bahaya Gempa USGS. Hal ini untuk gempa signifikan yang telah terjadi dalam 30 hari terakhir.

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

//Load a dataset of points, in this case earthquake data from the USGS.
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');

//Create a heat map and add it to the map.
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
  radius: 10,
  opacity: 0.8
}), 'labels');

Sampel Lapisan Peta Panas Sederhana menunjukkan cara membuat peta panas sederhana dari kumpulan data fitur titik. Untuk kode sumber untuk sampel ini, lihat Kode sumber Lapisan Peta Panas Sederhana.

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:

• radius: 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).

• color: 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 heatmap-density. 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 stepped color
  [     'interpolate',     ['linear'],     ['heatmap-density'],     0, 'transparan',     0.01, 'ungu',     0.5, '#fb00fb',     1, '#00c3ff' ]	[     'langkah',     ['heatmap-density'],     'transparan',     0.01, 'biru gelap',     0.25, 'hijau',     0,50, 'kuning',     0.75, 'merah' ]

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

• intensity: 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.

• weight: 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 dua kali lipat. 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.

• source dan source-layer: Memungkinkan Anda memperbarui sumber data.

Sampel Opsi Lapisan Peta Panas menunjukkan bagaimana berbagai opsi lapisan peta panas yang memengaruhi penyajian. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Lapisan Peta Panas.

Peta panas yang dapat diperbesar secara konsisten

Secara default, radii titik data yang dirender di lapisan peta panas memiliki radius piksel tetap untuk semua tingkatan pembesaran. Saat memperbesar peta, data mengagregasi bersama dan lapisan peta panas terlihat berbeda.

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 seperti 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.

Sampel Peta Panas yang dapat diperbesar secara konsisten menunjukkan cara membuat peta panas di mana radius setiap titik data mencakup area fisik yang sama di tanah, menciptakan pengalaman pengguna yang lebih konsisten saat memperbesar peta. Peta panas dalam sampel ini menskalakan secara konsisten antara tingkat pembesaran tampilan 10 dan 22. Setiap tingkat pembesaran peta memiliki piksel dua kali lebih banyak secara vertikal dan horizontal seperti tingkat pembesaran sebelumnya. Menggandakan radius dengan setiap tingkat pembesaran tampilan membuat peta panas yang terlihat konsisten di semua tingkat perbesar tampilan. Untuk kode sumber untuk sampel ini, lihat Kode sumber Heat Map yang dapat diperbesar secara konsisten.

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 zoom di khatulistiwa untuk tingkat zoom 0 dan 24, dan menggunakan ekspresi exponential interpolation untuk skala antara nilai ini dengan cara yang sama seperti cara kerja sistem ubin dalam peta.

[
    `'interpolate', 
    ['exponential', 2],
    ['zoom'],
    0, ['*', radiusMeters, 0.000012776039596366526],
    24, [`'*', 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 atlas.layer.HeatMapLayer(datasource, null, {
   weight: ['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

Pelajari selengkapnya tentang kelas dan metode yang digunakan dalam artikel ini:

HeatMapLayer

HeatMapLayerOptions

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

Membuat sumber data

Menggunakan ekspresi gaya berbasis data