ฮีตแมป

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

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