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