Peta Panas

Pilih platform: Android iOS JavaScript

Halaman ini menjelaskan utilitas peta panas yang tersedia di library utilitas untuk Maps SDK for iOS. Peta panas berguna untuk menampilkan distribusi dan kepadatan titik data pada peta.

Video ini membahas penggunaan peta panas sebagai alternatif pananda jika data Anda memerlukan banyak titik data pada peta.

Peta panas memudahkan penampil memahami distribusi dan intensitas relatif titik data pada peta. Daripada menempatkan penanda di setiap lokasi, peta panas menggunakan warna untuk menampilkan distribusi data.

Dalam contoh di bawah ini, merah mewakili area kantor polisi dengan konsentrasi tinggi di Victoria, Australia.

Peta panas di peta

Catatan: Anda dapat menetapkan warna sendiri untuk peta panas, menggunakan properti gradient. Lihat cara menyesuaikan warna dan properti lain dari peta panas Anda.

Jika Anda belum menyiapkan library, ikuti panduan penyiapan sebelum membaca bagian lainnya dari halaman ini.

Menambahkan peta panas sederhana

Untuk menambahkan peta panas ke peta, Anda memerlukan set data yang terdiri dari koordinat untuk setiap lokasi yang diinginkan. Pertama, buat instance GMUHeatmapTileLayer, dengan menetapkan properti map ke GMSMapView. Lakukan ini dalam fungsi viewDidLoad() aplikasi Anda, untuk memastikan bahwa peta dasar dimuat sebelum menggunakan peta panas. Kemudian, teruskan kumpulan objek GMUWeightedLatLng ke instance GMUHeatmapTileLayer.

Utilitas menyediakan class GMUHeatmapTileLayer, yang menerima kumpulan objek GMUWeightedLatLng. Class ini akan membuat gambar ubin untuk berbagai tingkat zoom, berdasarkan opsi radius, gradien, dan opasitas yang disediakan.

Lihat detail selengkapnya untuk langkah-langkah ini:

1. Buat instance GMUHeatmapTileLayer, dengan menetapkan properti map ke GMSMapView (lakukan ini dalam fungsi viewDidLoad() aplikasi Anda).
2. Teruskan kumpulan objek GMUWeightedLatLng ke instance GMUHeatmapTileLayer.
3. Panggil GMUHeatmapTileLayer.map, dengan meneruskan tampilan peta.

   Swift

   class Heatmap: UIViewController {
   
     private var mapView: GMSMapView!
     private var heatmapLayer: GMUHeatmapTileLayer!
   
     override func viewDidLoad() {
       super.viewDidLoad()
       heatmapLayer = GMUHeatmapTileLayer()
       heatmapLayer.map = mapView
     }
   
     // ...
   
     func addHeatmap() {
   
       // Get the data: latitude/longitude positions of police stations.
       guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
         return
       }
       guard let data = try? Data(contentsOf: path) else {
         return
       }
       guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
         return
       }
       guard let object = json as? [[String: Any]] else {
         print("Could not read the JSON.")
         return
       }
   
       var list = [GMUWeightedLatLng]()
       for item in object {
         let lat = item["lat"] as! CLLocationDegrees
         let lng = item["lng"] as! CLLocationDegrees
         let coords = GMUWeightedLatLng(
           coordinate: CLLocationCoordinate2DMake(lat, lng),
           intensity: 1.0
         )
         list.append(coords)
       }
   
       // Add the latlngs to the heatmap layer.
       heatmapLayer.weightedData = list
     }
   }
         

   Objective-C

   @implementation Heatmap {
     GMSMapView *_mapView;
     GMUHeatmapTileLayer *_heatmapLayer;
   }
   
   - (void)viewDidLoad {
     [super viewDidLoad];
     _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
     _heatmapLayer.map = _mapView;
   }
   
   // ...
   
   - (void) addHeatmap {
   
     // Get the data: latitude/longitude positions of police stations.
     NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
     NSData *data = [NSData dataWithContentsOfURL:path];
     NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
   
     NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
     [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
       NSDictionary *item = (NSDictionary *)obj;
       CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
       CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
       GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                       intensity:1.0];
       [list addObject:coords];
     }];
   
   
     // Add the latlngs to the heatmap layer.
     _heatmapLayer.weightedData = list;
   }
   @end
         

Untuk contoh ini, data disimpan dalam file JSON, police_stations.json. Berikut adalah ekstrak dari file tersebut:

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

Menyesuaikan peta panas

Peta panas memiliki beberapa properti yang dapat disesuaikan. Anda dapat menetapkan opsi saat membuat instance GMUHeatmapTileLayer pada awalnya, atau kapan saja dengan menetapkan nilai baru untuk opsi tersebut.

Tersedia opsi-opsi berikut:

1. Radius: Ukuran Gaussian blur yang diterapkan pada peta panas, dinyatakan dalam piksel. Nilai default-nya adalah 20. Harus antara 10 dan 50. Gunakan GMUHeatmapTileLayer.radius untuk menetapkan radius.

2. Gradien: Serangkaian warna yang digunakan peta panas untuk menghasilkan peta warna, berkisar dari intensitas terendah hingga tertinggi. GMUGradient dibuat menggunakan array bilangan bulat yang berisi warna, dan array float yang menunjukkan titik awal untuk setiap warna, diberikan sebagai persentase intensitas maksimum, dan dinyatakan sebagai pecahan dari 0 hingga 1. Anda hanya perlu menentukan satu warna untuk gradien warna tunggal, atau minimum dua warna untuk gradien multiwarna. Peta warna dibuat menggunakan interpolasi antar warna tersebut. Gradien default memiliki dua warna. Parameter colorMapSize menentukan jumlah langkah dalam gradien. Angka yang lebih besar akan menghasilkan gradien yang lebih halus, sedangkan angka yang lebih kecil akan memberikan transisi yang lebih tajam, mirip dengan grafik kontur. Gunakan GMUHeatmapTileLayer.gradient untuk menetapkan gradien.

3. Opasitas: Ini adalah opasitas seluruh lapisan peta panas, dan berkisar antara 0 hingga 1. Nilai defaultnya adalah 0,7. Gunakan GMUHeatmapTileLayer.opacity untuk menetapkan nilai opasitas.

Misalnya, buat Gradient:

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)
      

Objective-C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];
      

Untuk mengubah opasitas peta panas yang sudah ada:

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

Memperbarui opsi yang ada

Untuk memperbarui opsi yang telah ditetapkan, lakukan langkah-langkah berikut:

1. Perbarui opsi ke nilai yang diinginkan.
2. Hubungi GMUHeatmapTileLayer.clearTileCache().

Mengubah set data

Untuk mengubah set data yang digunakan untuk membuat peta panas:

1. Perbarui pengumpulan data Anda. Gunakan GMUHeatmapTileLayer.weightedData, yang meneruskan array GMUWeightedLatLng.
2. Hubungi GMUHeatmapTileLayer.clearTileCache().

Catatan: jika Anda ingin menambahkan titik ke peta panas, atau menghapus titik dari peta panas, perbarui kumpulan data Anda terlebih dahulu, lalu gunakan GMUHeatmapTileLayer.weightedData.

Menghapus peta panas

Untuk menghapus peta panas, panggil GMUHeatmapTileLayer.map, dengan meneruskan nil.

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

Melihat aplikasi demo

Untuk contoh penerapan peta panas lainnya, lihat HeatmapViewController di aplikasi demo yang disertakan dengan library utilitas. Panduan penyiapan menunjukkan cara menjalankan aplikasi demo.