หน้านี้อธิบายเกี่ยวกับยูทิลิตีแผนที่ความหนาแน่นที่มีอยู่ในระบบสาธารณูปโภค คลังสำหรับ Maps SDK สำหรับ iOS แผนที่ความหนาแน่นมีประโยชน์ในการแสดงการกระจายตัวและ ความหนาแน่นของจุดข้อมูลบนแผนที่
วิดีโอนี้กล่าวถึงการใช้แผนที่ความหนาแน่นเป็นทางเลือกแทนเครื่องหมาย เมื่อ ข้อมูลของคุณจำเป็นต้องมีจุดข้อมูลจำนวนมากบนแผนที่
แผนที่ความหนาแน่น (Heat Map) ทำให้ผู้ดูเข้าใจการกระจายและความสัมพันธ์ ความเข้มของจุดข้อมูลบนแผนที่ แทนที่จะวางเครื่องหมายในแต่ละที่ ตำแหน่ง แผนที่ความหนาแน่นจะใช้สีเพื่อแสดงการกระจายของข้อมูล
ในตัวอย่างด้านล่าง สีแดงแสดงถึงพื้นที่ตำรวจจำนวนมาก ในวิกตอเรีย ประเทศออสเตรเลีย
![แผนที่ที่มีแผนที่ความหนาแน่นแสดงตำแหน่งสถานีตำรวจ](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/heatmap-ios.png?authuser=8&hl=th)
หากยังไม่ได้ตั้งค่าไลบรารี ให้ทำตามการตั้งค่า คำแนะนำก่อนที่จะอ่านเนื้อหาที่เหลือ หน้านี้
เพิ่มแผนที่ความหนาแน่นอย่างง่าย
ในการเพิ่มแผนที่ความหนาแน่นลงในแผนที่ คุณจะต้องมีชุดข้อมูลที่ประกอบด้วย
สำหรับสถานที่ที่สนใจแต่ละแห่ง ก่อนอื่น ให้สร้าง
อินสแตนซ์ GMUHeatmapTileLayer
กำลังตั้งค่าพร็อพเพอร์ตี้ map
เป็น GMSMapView
ดำเนินการนี้ในฟังก์ชัน viewDidLoad()
ของแอป เพื่อให้แน่ใจว่าแผนที่ฐาน
ที่โหลดก่อนใช้แผนที่ความหนาแน่น จากนั้นส่งคอลเล็กชัน
GMUWeightedLatLng
ออบเจ็กต์ไปยังอินสแตนซ์ GMUHeatmapTileLayer
ยูทิลิตีให้คลาส GMUHeatmapTileLayer
ซึ่งยอมรับ
คอลเลกชันของ GMUWeightedLatLng
ออบเจ็กต์ สร้างภาพย่อยสำหรับ
ระดับการซูมต่างๆ ตามตัวเลือกรัศมี การไล่ระดับสี และความทึบแสง
ที่ระบุ
โปรดดูขั้นตอนโดยละเอียดดังนี้
- สร้างอินสแตนซ์
GMUHeatmapTileLayer
โดยตั้งค่าพร็อพเพอร์ตี้map
เป็นGMSMapView
(ดำเนินการนี้ในฟังก์ชันviewDidLoad()
ของแอป) - ส่งคอลเล็กชันของวัตถุ
GMUWeightedLatLng
รายการไปยังGMUHeatmapTileLayer
- โทรหา
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
หรือเมื่อใดก็ได้โดย
กำหนดค่าใหม่สำหรับตัวเลือกดังกล่าว
โดยมีตัวเลือกดังต่อไปนี้
รัศมี: ขนาดของการเบลอแบบเกาส์เชียนที่ใช้กับแผนที่ความหนาแน่น ซึ่งแสดง เป็นพิกเซล ค่าเริ่มต้นคือ 20 ต้องอยู่ระหว่าง 10 ถึง 50 รายการ ใช้
GMUHeatmapTileLayer.radius
เพื่อตั้งค่ารัศมีการไล่ระดับสี: ช่วงของสีที่แผนที่ความหนาแน่นใช้ในการสร้างสี จากระดับความรุนแรงต่ำสุดถึงสูงสุด
GMUGradient
สร้างขึ้นโดยใช้ อาร์เรย์จำนวนเต็มที่มีสี และอาร์เรย์ลอยที่ระบุค่า จุดเริ่มต้นสำหรับแต่ละสี โดยระบุเป็นเปอร์เซ็นต์ของความเข้มสูงสุด และแสดงเป็นเศษส่วนจาก 0 ถึง 1 คุณต้องระบุเพียงสีเดียวสำหรับ การไล่ระดับสีเดียว หรืออย่างน้อย 2 สีสำหรับหลายสี การไล่ระดับสี แผนที่สีจะสร้างขึ้นโดยใช้การประมาณค่าในช่วงระหว่างสีเหล่านั้น การไล่ระดับสีเริ่มต้นมี 2 สี พารามิเตอร์colorMapSize
กำหนด จำนวนขั้นตอนในการไล่ระดับสี ตัวเลขยิ่งมาก จะทำให้ราบรื่น การไล่ระดับสี ส่วนจำนวนที่น้อยกว่า จะให้การเปลี่ยนที่คมชัดกว่า กราฟเส้นโค้ง ใช้GMUHeatmapTileLayer.gradient
เพื่อตั้งค่าการไล่ระดับสีความทึบแสง: คือความทึบแสงของเลเยอร์แผนที่ความหนาแน่นทั้งหมดและช่วง จาก 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;
อัปเดตตัวเลือกที่มีอยู่
หากต้องการอัปเดตตัวเลือกที่ตั้งค่าไว้แล้ว ให้ทำตามขั้นตอนต่อไปนี้
- อัปเดตตัวเลือกเป็นค่าที่ต้องการ
- โทรมาที่
GMUHeatmapTileLayer.clearTileCache()
การเปลี่ยนชุดข้อมูล
หากต้องการเปลี่ยนชุดข้อมูลที่ใช้สร้างแผนที่ความหนาแน่น ให้ทำดังนี้
- อัปเดตการเก็บรวบรวมข้อมูล ใช้
GMUHeatmapTileLayer.weightedData
กําลังส่ง อาร์เรย์ของGMUWeightedLatLng
- โทรมาที่
GMUHeatmapTileLayer.clearTileCache()
การนำแผนที่ความหนาแน่นออก
หากต้องการนำแผนที่ความหนาแน่นออก ให้โทรหา GMUHeatmapTileLayer.map
ผ่าน nil
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
ดูแอปเดโม
อีกตัวอย่างหนึ่งของการใช้แผนที่ความหนาแน่น
HeatmapViewController
ในแอปเดโมที่ส่งมาพร้อมกับไลบรารียูทิลิตี
คู่มือการตั้งค่าจะแสดงวิธีการ
เรียกใช้แอปเดโม