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