绘制海量点图层 最后更新时间: 2021年01月22日
简介
应用于移动端的海量点图层用于批量展现具有相似属性的坐标点数据。海量点图层支持处理的点数量级跨度较大，从几十个点至十万个点（建议不超过100000个点数据）都可以应用海量点图层进行处理。该功能自 iOS 地图 SDK 5.1.0 版本起开始支持。
如下图所示的处理上万个点的海量点图层效果：
展示海量点
第 1 步：创建海量点图层
包含读取创建的海量点数据，构造海量点图层，示例如下：
///根据file读取出经纬度数组
NSString *file = [[NSBundle mainBundle] pathForResource:@"10w" ofType:@"txt"];
NSString *locationString = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
NSArray *locations = [locationString componentsSeparatedByString:@"\n"];
///创建MultiPointItems数组，并更新数据
NSMutableArray *items = [NSMutableArray array];
for (int i = 0; i < locations.count; ++i)
{
@autoreleasepool {
MAMultiPointItem *item = [[MAMultiPointItem alloc] init];
NSArray *coordinate = [locations[i] componentsSeparatedByString:@","];
if (coordinate.count == 2)
{
item.coordinate = CLLocationCoordinate2DMake([coordinate[1] floatValue], [coordinate[0] floatValue]);
[items addObject:item];
}
}
}
///根据items创建海量点Overlay MultiPointOverlay
MAMultiPointOverlay *_overlay = [[MAMultiPointOverlay alloc] initWithMultiPointItems:items];
///把Overlay添加进mapView
[self.mapView addOverlay:_overlay];///根据file读取出经纬度数组
let file = Bundle.main.path(forResource: "10w", ofType: "txt")
guard let locationString = try? String(contentsOfFile: file!) else {
return
}
let locations = locationString.components(separatedBy: "\n")
///创建MultiPointItems数组，并更新数据
var items = [MAMultiPointItem]()
for oneLocation in locations {
let item = MAMultiPointItem()
let coordinate = oneLocation.components(separatedBy: ",")
if (coordinate.count == 2)
{
item.coordinate = CLLocationCoordinate2D(latitude: Double(coordinate[1])!, longitude: Double(coordinate[0])!)
items.append(item)
}
}
///根据items创建海量点Overlay MultiPointOverlay
var overlay: MAMultiPointOverlay! = MAMultiPointOverlay(multiPointItems: items)
///把Overlay添加进mapView
self.mapView.add(self.overlay)第 2 步：自定义海量点样式
通过 renderer 调整海量点的icon、锚点，示例如下：
- (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
{
if ([overlay isKindOfClass:[MAMultiPointOverlay class]])
{
MAMultiPointOverlayRenderer * renderer = [[MAMultiPointOverlayRenderer alloc] initWithMultiPointOverlay:overlay];
///设置图片
renderer.icon = [UIImage imageNamed:@"marker_blue"];
///设置锚点
renderer.anchor = CGPointMake(0.5, 1.0);
renderer.delegate = self;
return renderer;
}
return nil;
}func mapView(_ mapView: MAMapView!, rendererFor overlay: MAOverlay!) -> MAOverlayRenderer! {
if (overlay.isKind(of: MAMultiPointOverlay.self))
{
let renderer = MAMultiPointOverlayRenderer(multiPointOverlay: overlay as! MAMultiPointOverlay!)
renderer!.delegate = self
///设置图片
renderer!.icon = UIImage(named: "marker_blue")
///设置锚点
renderer!.anchor = CGPoint(x: 0.5, y: 1.0)
return renderer;
}
return nil;
}海量点点击事件
海量点点击回调如下：
- (void)multiPointOverlayRenderer:(MAMultiPointOverlayRenderer *)renderer didItemTapped:(MAMultiPointItem *)item
{
NSLog(@"item :%@ <%f, %f>", item, item.coordinate.latitude, item.coordinate.longitude);
}func multiPointOverlayRenderer(_ renderer: MAMultiPointOverlayRenderer!, didItemTapped item: MAMultiPointItem!) {
print("item :\(item) <\(item.coordinate)>")
}