Layer Peta Panas

Pilih platform: Android iOS JavaScript
  1. Ringkasan
  2. Memuat library visualisasi
  3. Menambahkan Titik Data Berbobot
  4. Menyesuaikan Lapisan Peta Panas

Lapisan Peta Panas menyediakan rendering peta panas sisi klien.

Ringkasan

Peta panas adalah visualisasi yang digunakan untuk menggambarkan intensitas data pada titik-titik geografis. Jika Lapisan Peta Panas diaktifkan, overlay yang berwarna akan muncul di atas peta. Secara default, area dengan intensitas lebih tinggi akan berwarna merah, dan area dengan intensitas lebih rendah akan tampak hijau.

Memuat library visualisasi

Lapisan Peta Panas adalah bagian dari library google.maps.visualization, dan tidak dimuat secara default. Class Visualization adalah library mandiri, yang terpisah dari kode Maps JavaScript API utama. Untuk menggunakan fungsi yang ada dalam library ini, Anda harus memuatnya terlebih dahulu menggunakan parameter libraries di URL bootstrap Maps JavaScript API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

Menambahkan Lapisan Peta Panas

Untuk menambahkan Lapisan Peta Panas, Anda harus terlebih dahulu membuat objek HeatmapLayer baru, dan memberinya beberapa data geografis dalam bentuk array atau objek MVCArray[]. Data dapat berupa objek LatLng atau WeightedLocation. Setelah membuat instance objek HeatmapLayer, tambahkan ke peta dengan memanggil metode setMap().

Contoh berikut menambahkan 14 titik data ke peta San Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

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

Menambahkan Titik Data Berbobot

Peta panas dapat merender objek LatLng atau WeightedLocation, atau kombinasi keduanya. Kedua objek ini merepresentasikan satu titik data pada peta, tetapi objek WeightedLocation juga memungkinkan Anda menentukan bobot titik data tersebut. Menerapkan bobot ke titik data akan menyebabkan WeightedLocation dirender dengan intensitas lebih besar daripada objek LatLng sederhana. Bobot tersebut merupakan skala linear, dengan setiap objek LatLng memiliki bobot implisit 1 — menambahkan satu WeightedLocation dari {location: new google.maps.LatLng(37.782, -122.441), weight: 3} akan memiliki efek yang sama dengan menambahkan google.maps.LatLng(37.782, -122.441) tiga kali. Anda dapat menggabungkan objek weightedLocation dan LatLng dalam satu array.

Menggunakan objek WeightedLocation sebagai pengganti LatLng dapat berguna saat:

  • Menambahkan sejumlah besar data pada satu lokasi. Merender satu objek WeightedLocation dengan bobot 1.000 akan lebih cepat daripada merender 1.000 objek LatLng.
  • Menerapkan penekanan pada data Anda berdasarkan nilai-nilai arbitrer. Misalnya, Anda dapat menggunakan objek LatLng saat merencanakan data gempa bumi, tetapi sebaiknya gunakan WeightedLocation untuk mengukur kekuatan setiap gempa dalam skala Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

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

Menyesuaikan Lapisan Peta Panas

Anda bisa menyesuaikan cara merender peta panas dengan opsi peta panas berikut ini. Lihat dokumentasi HeatmapLayerOptions untuk informasi selengkapnya.

  • dissipating: Menetapkan apakah peta panas akan menghilang saat diperbesar. Jika disipasi bernilai false (salah), radius pengaruhnya akan bertambah sesuai tingkat zoom untuk memastikan intensitas warna dipertahankan pada semua lokasi geografis yang ditentukan. Nilai defaultnya adalah true (benar).
  • gradient: Gradasi warna peta panas yang ditetapkan sebagai array string warna CSS. Semua warna CSS3 — termasuk RGBA — didukung kecuali untuk tambahan warna yang dinamai dan nilai HSL(A).
  • maxIntensity: Intensitas maksimum peta panas. Secara default, warna peta panas diskalakan secara dinamis sesuai dengan konsentrasi titik terbanyak pada piksel tertentu di peta. Properti ini memungkinkan Anda menetapkan nilai maksimum tetap. Menetapkan intensitas maksimum bisa membantu jika set data Anda berisi beberapa pencilan dengan intensitas yang sangat tinggi.
  • radius: Radius pengaruh untuk setiap titik data, dalam piksel.
  • opacity: Opasitas peta panas, dinyatakan sebagai angka antara 0 dan 1.

Contoh di bawah ini menampilkan beberapa opsi penyesuaian yang tersedia.

Lihat contoh