ฮีตแมป

หน้านี้อธิบายยูทิลิตีแผนที่ความร้อนที่มีอยู่ในไลบรารียูทิลิตีสำหรับ 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. รัศมี: ขนาดของการเบลอแบบกaussian ที่ใช้กับแผนที่ความร้อน ซึ่งแสดงเป็นพิกเซล ค่าเริ่มต้นคือ 20 ต้องอยู่ระหว่าง 10 ถึง 50 ใช้ GMUHeatmapTileLayer.radius เพื่อกำหนดรัศมี

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