แผนที่ความหนาแน่น

เลือกแพลตฟอร์ม: Android iOS

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

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

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

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

แผนที่ความหนาแน่นบนแผนที่

หมายเหตุ: คุณตั้งค่าสีของคุณเองสำหรับแผนที่ความหนาแน่นได้โดยใช้พร็อพเพอร์ตี้ gradient ดูวิธีปรับแต่งสีและพร็อพเพอร์ตี้อื่นๆ ของแผนที่ความหนาแน่น

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

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

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

Swift

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

Objective-C

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

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

Swift

heatmapLayer.opacity = 0.7
      

Objective-C

_heatmapLayer.opacity = 0.7;
      

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

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

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

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

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

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

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

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

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

Swift

heatmapLayer.map = nil
      

Objective-C

_heatmapLayer.map = nil;
      

ดูแอปสาธิต

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