Trang này mô tả tiện ích bản đồ nhiệt có trong tiện ích thư viện cho SDK Bản đồ dành cho iOS. Bản đồ nhiệt rất hữu ích trong việc biểu thị sự phân phối và mật độ của các điểm dữ liệu trên bản đồ.
Video này thảo luận về công dụng của bản đồ nhiệt như một giải pháp thay thế cho điểm đánh dấu, khi dữ liệu của bạn đòi hỏi một số lượng lớn các điểm dữ liệu trên bản đồ.
Bản đồ nhiệt giúp người xem dễ dàng hiểu được sự phân bổ và cường độ của các điểm dữ liệu trên bản đồ. Thay vì đặt điểm đánh dấu tại mỗi vị trí, bản đồ nhiệt sử dụng màu sắc để thể hiện sự phân phối dữ liệu.
Trong ví dụ bên dưới, màu đỏ thể hiện các khu vực cảnh sát tập trung cao độ các trạm sạc ở Victoria, Úc.
Nếu bạn chưa thiết lập thư viện, hãy làm theo hướng dẫn thiết lập trước khi đọc phần còn lại của trang này.
Thêm một bản đồ nhiệt đơn giản
Để thêm bản đồ nhiệt vào bản đồ của mình, bạn sẽ cần một tập dữ liệu bao gồm
toạ độ cho từng vị trí quan tâm. Trước tiên, hãy tạo một
Thực thể GMUHeatmapTileLayer
, đặt thuộc tính map
thành GMSMapView
.
Hãy thực hiện việc này trong hàm viewDidLoad()
của ứng dụng để đảm bảo rằng bản đồ cơ sở được
trước khi làm việc với bản đồ nhiệt. Sau đó, truyền một tập hợp
Các đối tượng GMUWeightedLatLng
cho thực thể GMUHeatmapTileLayer
.
Tiện ích này cung cấp lớp GMUHeatmapTileLayer
, lớp này chấp nhận một
tập hợp các đối tượng GMUWeightedLatLng
. Tạo các hình ảnh xếp kề cho
các mức thu phóng khác nhau, dựa trên tuỳ chọn bán kính, độ dốc và độ mờ
đã cung cấp.
Xem các bước chi tiết hơn:
- Tạo một thực thể
GMUHeatmapTileLayer
, đặt thuộc tínhmap
thành mộtGMSMapView
(hãy thực hiện việc này trong hàmviewDidLoad()
của ứng dụng). - Truyền một tập hợp đối tượng
GMUWeightedLatLng
vào Thực thểGMUHeatmapTileLayer
. - Gọi
GMUHeatmapTileLayer.map
, truyền chế độ xem bản đồ.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
Trong ví dụ này, dữ liệu được lưu trữ trong tệp JSON, police_stations.json
.
Dưới đây là trích xuất từ tệp:
[
{"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 }
]
Tuỳ chỉnh bản đồ nhiệt
Bản đồ nhiệt có một số thuộc tính có thể tuỳ chỉnh. Bạn có thể đặt các tuỳ chọn khi
ban đầu tạo thực thể GMUHeatmapTileLayer
hoặc bất cứ lúc nào bằng cách
đặt một giá trị mới cho tuỳ chọn.
Bạn có các tuỳ chọn sau đây:
Bán kính: Kích thước của hiệu ứng làm mờ Gaussian được áp dụng cho bản đồ nhiệt, được biểu thị tính bằng pixel. Giá trị mặc định là 20. Phải nằm trong khoảng từ 10 đến 50. Sử dụng
GMUHeatmapTileLayer.radius
để đặt bán kính.gradient: Dải màu mà bản đồ nhiệt sử dụng để tạo màu cho nó bản đồ, dao động từ cường độ thấp nhất đến cao nhất.
GMUGradient
được tạo bằng một mảng số nguyên chứa các màu và một mảng số thực cho biết điểm bắt đầu cho mỗi màu, được cho dưới dạng phần trăm của cường độ tối đa, và biểu diễn dưới dạng phân số từ 0 đến 1. Bạn chỉ cần chỉ định một màu cho một dải chuyển màu đơn sắc hoặc tối thiểu hai màu để tạo một dải màu nhiều màu chuyển màu. Bản đồ màu được tạo bằng cách sử dụng nội suy giữa các màu đó. Độ dốc mặc định có hai màu. Tham sốcolorMapSize
xác định số bước trong độ dốc. Số lớn hơn sẽ đảm bảo suôn sẻ hơn chuyển màu, trong khi các số nhỏ hơn sẽ tạo ra sự chuyển tiếp sắc nét hơn tương tự như biểu đồ đường viền. Sử dụngGMUHeatmapTileLayer.gradient
để đặt độ dốc.Độ mờ: Đây là độ mờ của toàn bộ lớp bản đồ nhiệt và dải ô từ 0 đến 1. Giá trị mặc định là 0,7. Sử dụng
GMUHeatmapTileLayer.opacity
để đặt giá trị độ mờ.
Ví dụ: tạo một 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];
Cách thay đổi độ mờ của bản đồ nhiệt hiện có:
Swift
heatmapLayer.opacity = 0.7
Objective-C
_heatmapLayer.opacity = 0.7;
Cập nhật một lựa chọn hiện có
Để cập nhật một lựa chọn đã được đặt, hãy làm theo các bước sau:
- Cập nhật tuỳ chọn này thành giá trị mong muốn.
- Gọi cho
GMUHeatmapTileLayer.clearTileCache()
.
Thay đổi tập dữ liệu
Cách thay đổi tập dữ liệu mà bạn dùng để tạo bản đồ nhiệt:
- Cập nhật hoạt động thu thập dữ liệu của bạn. Sử dụng
GMUHeatmapTileLayer.weightedData
, truyền một mảngGMUWeightedLatLng
. - Gọi cho
GMUHeatmapTileLayer.clearTileCache()
.
Xoá bản đồ nhiệt
Để xoá bản đồ nhiệt, hãy gọi GMUHeatmapTileLayer.map
, truyền nil
.
Swift
heatmapLayer.map = nil
Objective-C
_heatmapLayer.map = nil;
Xem ứng dụng minh hoạ
Để biết một ví dụ khác về cách triển khai bản đồ nhiệt, hãy xem
HeatmapViewController
trong ứng dụng minh hoạ đi kèm với thư viện tiện ích.
Hướng dẫn thiết lập sẽ hướng dẫn bạn cách
chạy ứng dụng minh hoạ.