ฮีตแมป

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

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

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

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

วันที่

หากยังไม่ได้ตั้งค่าไลบรารี ให้ทำตามการตั้งค่า คำแนะนำก่อนที่จะอ่านเนื้อหาที่เหลือ หน้านี้

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

ในการเพิ่มแผนที่ความหนาแน่นลงในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วย สำหรับสถานที่ที่สนใจแต่ละแห่ง ก่อนอื่น ให้สร้าง อินสแตนซ์ 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 ในแอปเดโมที่ส่งมาพร้อมกับไลบรารียูทิลิตี คู่มือการตั้งค่าจะแสดงวิธีการ เรียกใช้แอปเดโม