ฮีตแมป

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