ฮีตแมป

หน้านี้อธิบายยูทิลิตีแผนที่ความหนาแน่นที่มีอยู่ในไลบรารียูทิลิตีสำหรับ Maps SDK สำหรับ iOS แผนที่ความหนาแน่นมีประโยชน์ในการแสดงการกระจายและความหนาแน่นของจุดข้อมูลบนแผนที่

วิดีโอนี้กล่าวถึงการใช้แผนที่ความร้อนเป็นทางเลือกแทนเครื่องหมายเมื่อข้อมูลต้องใช้จุดข้อมูลจำนวนมากบนแผนที่

แผนที่ความหนาแน่นช่วยให้ผู้ชมเข้าใจการกระจายและความเข้มของจุดข้อมูลบนแผนที่ได้อย่างง่ายดาย แทนที่จะวางเครื่องหมายไว้ที่แต่ละตำแหน่ง แผนที่ความร้อนจะใช้สีเพื่อแสดงการกระจายข้อมูล

ในตัวอย่างด้านล่าง สีแดงหมายถึงพื้นที่ของสถานีตำรวจในเมืองวิกตอเรีย ประเทศออสเตรเลียที่มีปริมาณความเข้มข้นสูง

หากยังไม่ได้ตั้งค่าไลบรารี ให้ทำตามคู่มือการตั้งค่าก่อนอ่านส่วนที่เหลือของหน้านี้

การเพิ่มแผนที่ความหนาแน่นแบบง่าย

ในการเพิ่มแผนที่ความร้อนลงในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วยพิกัดของสถานที่ที่สนใจแต่ละแห่ง ก่อนอื่น ให้สร้างอินสแตนซ์ GMUHeatmapTileLayer โดยตั้งค่าพร็อพเพอร์ตี้ map เป็น GMSMapView ทำเช่นนี้ในฟังก์ชัน viewDidLoad() ของแอป เพื่อให้แน่ใจว่าแผนที่ฐานโหลดขึ้นก่อนที่จะทำงานกับแผนที่ความหนาแน่น จากนั้นส่งคอลเล็กชันของออบเจ็กต์ GMUWeightedLatLng รายการไปยังอินสแตนซ์ GMUHeatmapTileLayer

ยูทิลิตีนี้จะจัดเตรียมคลาส GMUHeatmapTileLayer ซึ่งยอมรับคอลเล็กชันออบเจ็กต์ GMUWeightedLatLng รายการ โดยจะสร้างภาพย่อยสำหรับระดับการซูมต่างๆ ตามรัศมี การไล่ระดับสี และความทึบแสงที่ให้มา

มาดูขั้นตอนอย่างละเอียดกัน

1. สร้างอินสแตนซ์ GMUHeatmapTileLayer โดยตั้งค่าพร็อพเพอร์ตี้ map เป็น GMSMapView (ดำเนินการในฟังก์ชัน viewDidLoad() ของแอป)
2. ส่งคอลเล็กชันของออบเจ็กต์ GMUWeightedLatLng รายการไปยังอินสแตนซ์ GMUHeatmapTileLayer
3. โทร GMUHeatmapTileLayer.map ผ่านมุมมองแผนที่

   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
         

ตัวอย่างนี้จัดเก็บข้อมูลไว้ในไฟล์ JSON ชื่อ police_stations.json ข้อมูลที่คัดมาจากไฟล์มีดังนี้

[
{"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 }
]

การปรับแต่งแผนที่ความหนาแน่น

แผนที่ความหนาแน่นมีพร็อพเพอร์ตี้ที่ปรับแต่งได้หลายรายการ คุณตั้งค่าตัวเลือกเมื่อสร้างอินสแตนซ์ GMUHeatmapTileLayer ครั้งแรก หรือเมื่อใดก็ได้โดยตั้งค่าใหม่สำหรับตัวเลือก

โดยมีตัวเลือกดังต่อไปนี้

1. รัศมี: ขนาดของการเบลอแบบเกาส์เชียนที่ใช้กับแผนที่ความร้อน ซึ่งแสดงเป็นพิกเซล ค่าเริ่มต้นคือ 20 ต้องอยู่ระหว่าง 10 ถึง 50 ใช้ GMUHeatmapTileLayer.radius เพื่อกำหนดรัศมี

2. การไล่ระดับสี: ช่วงสีที่แผนที่ความหนาแน่นใช้ในการสร้างแผนที่สี โดยมีตั้งแต่ความเข้มต่ำสุดไปจนถึงสูงสุด GMUGradient จะสร้างขึ้นโดยใช้อาร์เรย์จำนวนเต็มที่มีสี และอาร์เรย์แบบลอยที่ระบุจุดเริ่มต้นสำหรับแต่ละสี โดยกำหนดเป็นเปอร์เซ็นต์ของความเข้มสูงสุด และแสดงเป็นเศษส่วนตั้งแต่ 0 ถึง 1 คุณต้องระบุสีเพียงสีเดียวสำหรับการไล่ระดับสีเดียว หรืออย่างน้อย 2 สีสำหรับการไล่ระดับสี ระบบจะสร้างแผนที่สีโดยใช้การประมาณค่าระหว่างสีเหล่านั้น การไล่ระดับสีเริ่มต้นจะมี 2 สี พารามิเตอร์ colorMapSize จะกำหนดจำนวนขั้นตอนในการไล่ระดับสี ตัวเลขที่มากกว่าจะทำให้การไล่ระดับสีเรียบขึ้น ส่วนตัวเลขที่น้อยจะทำให้การเปลี่ยนที่คมชัดมีความคล้ายคลึงกับกราฟเส้นโค้ง ใช้ GMUHeatmapTileLayer.gradient เพื่อตั้งค่าการไล่ระดับสี

3. ความทึบแสง: นี่คือความทึบแสงของเลเยอร์แผนที่ความหนาแน่นทั้งหมด และมีค่าตั้งแต่ 0 ถึง 1 ค่าเริ่มต้นคือ 0.7 ใช้ GMUHeatmapTileLayer.opacity เพื่อตั้งค่าความทึบแสง

เช่น สร้าง Gradient ดังนี้

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

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

วิธีเปลี่ยนความทึบแสงของแผนที่ความหนาแน่นที่มีอยู่

heatmapLayer.opacity = 0.7
      

_heatmapLayer.opacity = 0.7;
      

อัปเดตตัวเลือกที่มีอยู่

หากต้องการอัปเดตตัวเลือกที่ตั้งค่าไว้แล้ว ให้ทำตามขั้นตอนต่อไปนี้

1. อัปเดตตัวเลือกเป็นค่าที่ต้องการ
2. โทรมาที่ GMUHeatmapTileLayer.clearTileCache()

การเปลี่ยนชุดข้อมูล

วิธีเปลี่ยนชุดข้อมูลที่ใช้สร้างแผนที่ความร้อน

1. อัปเดตการเก็บรวบรวมข้อมูล ใช้ GMUHeatmapTileLayer.weightedData ส่งผ่านอาร์เรย์ของ GMUWeightedLatLng
2. โทรมาที่ GMUHeatmapTileLayer.clearTileCache()

การนําแผนที่ความหนาแน่นออก

หากต้องการนำแผนที่ความหนาแน่นออก ให้โทรหา GMUHeatmapTileLayer.map ที่ผ่าน nil

heatmapLayer.map = nil
      

_heatmapLayer.map = nil;
      

ดูแอปเดโม

อีกตัวอย่างหนึ่งของการใช้งานแผนที่ความหนาแน่น โปรดดู HeatmapViewController ในแอปเดโมที่มาพร้อมกับไลบรารียูทิลิตี คู่มือการตั้งค่าจะแสดงวิธีเรียกใช้แอปเดโม