Layer Peta Panas

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pilih platform: Android iOS JavaScript
  1. Ringkasan
  2. Memuat library visualisasi
  3. Menambahkan Titik Data Berbobot
  4. Menyesuaikan Lapisan Peta Panas

Layer Peta Panas menyediakan rendering peta panas pada klien.

Ringkasan

Peta panas adalah visualisasi yang digunakan untuk menggambarkan intensitas data pada titik geografis. Jika Layer Peta Panas diaktifkan, overlay 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 pustaka visualisasi

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

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

Menambahkan Layer 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 objek 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 mewakili satu titik data pada peta, tetapi objek WeightedLocation juga memungkinkan Anda menentukan bobot untuk titik data tersebut. Menerapkan bobot ke titik data akan menyebabkan WeightedLocation dirender dengan intensitas lebih besar daripada objek LatLng sederhana. Bobot tersebut adalah 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 objek WeightedLocation tunggal 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 memetakan data gempa bumi, tetapi sebaiknya gunakan WeightedLocation untuk mengukur kekuatan setiap gempa pada 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 Layer Peta Panas

Anda dapat menyesuaikan bagaimana peta panas akan dirender dengan opsi peta panas berikut. Lihat dokumentasi HeatmapLayerOptions untuk mengetahui informasi selengkapnya.

  • dissipating: Menentukan apakah peta panas akan menghilang pada zoom. Jika disipasi salah, radius pengaruh akan meningkat dengan tingkat zoom untuk memastikan intensitas warna dipertahankan di setiap lokasi geografis tertentu. Nilai defaultnya adalah true (benar).
  • gradient: Gradien warna peta panas, ditetapkan sebagai array string warna CSS. Semua warna CSS3 — termasuk RGBA — didukung kecuali untuk warna bernama yang diperluas dan nilai HSL(A).
  • maxIntensity: Intensitas maksimum peta panas. Secara default, warna peta panas diskalakan secara dinamis sesuai dengan konsentrasi titik terbesar pada piksel tertentu di peta. Properti ini memungkinkan Anda menentukan nilai maksimum yang tetap. Menetapkan intensitas maksimum dapat 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