更新时间:2023-04-06
绘制线简介
折线类为 BMKPolyline,由一组经纬度坐标组成,并以有序序列形式建立一系列的线段。
注意:V5.0.0后的版本,绘制线宽会变细,lineWidth统一为画笔宽度,请注意适配。
绘制折线
1创建BMKMapView,并设置delegate
Objective-C
Swift
BMKMapView *mapView = [[BMKMapView alloc]initWithFrame:self.view.bounds]; mapView.delegate = self; [self.view addSubView:mapView];
class ViewController: UIViewController, BMKMapViewDelegate { var mapView: BMKMapView? override func viewDidLoad() { super.viewDidLoad() mapView = BMKMapView(frame: self.view.frame) mapView?.delegate = self self.view.addSubview(mapView!); } }
2添加折线覆盖物数据
Objective-C
Swift
// 添加折线覆盖物 CLLocationCoordinate2D coords[5] = {0}; coords[0] = CLLocationCoordinate2DMake(39.968, 116.260); coords[1] = CLLocationCoordinate2DMake(39.912, 116.324); coords[2] = CLLocationCoordinate2DMake(39.968, 116.373); coords[3] = CLLocationCoordinate2DMake(39.912, 116.439); coords[4] = CLLocationCoordinate2DMake(39.968, 116.490); BMKPolyline *polyline = [BMKPolyline polylineWithCoordinates:coors count:5]; [_mapView addOverlay:polyline];
var coords = [CLLocationCoordinate2D]() coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.260)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.324)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.373)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.439)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.490)) /** *根据指定坐标点生成一段折线 *@param coords 指定的经纬度坐标点数组 *@param count 坐标点的个数 *@return 新生成的折线对象 */ let polyline: BMKPolyline = BMKPolyline(coordinates: &coords, count: 5) mapView?.add(polyline)
3实现代理方法
Objective-C
Swift
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{ if ([overlay isKindOfClass:[BMKPolyline class]]){ BMKPolylineView *polylineView = [[BMKPolylineView alloc] initWithPolyline:overlay]; //设置polylineView的画笔颜色为蓝色 polylineView.strokeColor = [[UIColor alloc] initWithRed:19/255.0 green:107/255.0 blue:251/255.0 alpha:1.0]; //设置polylineView的画笔宽度为16 polylineView.lineWidth = 16; //圆点虚线,V5.0.0新增 // polylineView.lineDashType = kBMKLineDashTypeDot; //方块虚线,V5.0.0新增 // polylineView.lineDashType = kBMKLineDashTypeSquare; return polylineView; } return nil; }
//MARK:BMKMapViewDelegate /** 根据overlay生成对应的BMKOverlayView @param mapView 地图View @param overlay 指定的overlay @return 生成的覆盖物View */ func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) -> BMKOverlayView! { if overlay.isKind(of: BMKPolyline.self) { //初始化一个overlay并返回相应的BMKPolylineView的实例 let polylineView = BMKPolylineView(polyline: overlay as? BMKPolyline) if overlay.isEqual(polyline) { //设置polylineView的画笔颜色为蓝色 polylineView?.strokeColor = UIColor(red: 19 / 255.0, green: 107/255.0, blue: 251/255.0, alpha: 1.0) //设置polylineView的画笔宽度为16 polylineView?.lineWidth = 16 //圆点虚线,V5.0.0新增 //polylineView?.lineDashType = kBMKLineDashTypeDot //方块虚线,V5.0.0新增 //polylineView?.lineDashType = kBMKLineDashTypeSquare } return polylineView } return nil }
4运行程序
效果如图:
绘制大地曲线
iOS地图SDK支持大地曲线绘制能力。
1添加大地曲线数据
Objective-C
Swift
CLLocationCoordinate2D coords[2] = {0}; coords[1] = CLLocationCoordinate2DMake(36.53, -121.47); coords[0] = CLLocationCoordinate2DMake(22.33, 114); BMKGeodesicLine *geodesicLine = [BMKGeodesicLine geodesicLineWithCoordinates:coords count:2]; // 若经度跨180,则须设置lineDirectionCross180参数 _geodesicLine.lineDirectionCross180 = kBMKLineDirectionCross180TypeWEST_TO_EAST; [_mapView addOverlay:geodesicLine];
var coords = [CLLocationCoordinate2D]() coords.append(CLLocationCoordinate2DMake(22.33, 114)) coords.append(CLLocationCoordinate2DMake(36.53, -121.47)) let geodesicLine: BMKGeodesicLine = BMKGeodesicLine(coordinates: &coords, count: 2) // 若经度跨180,则须设置lineDirectionCross180参数 geodesicLine.lineDirectionCross180 = kBMKLineDirectionCross180TypeWEST_TO_EAST; mapView.add(geodesicLine)
2实现代理方法,并设置颜色或者纹理图片
Objective-C
Swift
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay { if ([overlay isKindOfClass:[BMKGeodesicLine class]]) { BMKGeodesicLineView *geodesicView = [[BMKGeodesicLineView alloc] initWithGeodesicLine:overlay]; geodesicView.strokeColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:1]; geodesicView.lineWidth = 6; geodesicView.lineDashType = kBMKLineDashTypeDot; return geodesicView; } return nil; }
func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) -> BMKOverlayView! { if overlay.isKind(of: BMKGeodesicLine.self) { if overlay.isEqual(geodesicLine) { let geodesicLineView = BMKGeodesicLineView(geodesicLine: geodesicLine) geodesicLineView.strokeColor = UIColor.blue geodesicLineView.lineWidth = 6.0 // geodesicLineView.lineDashType = kBMKLineDashTypeDot return geodesicLineView } } return nil }
3运行程序
效果如图:
绘制渐变线
iOS地图SDK支持渐变线绘制能力。
1添加渐变线数据,并构建分段渐变颜色索引数组
Objective-C
Swift
CLLocationCoordinate2D coords[5] = {0}; coords[0] = CLLocationCoordinate2DMake(39.965, 116.404); coords[1] = CLLocationCoordinate2DMake(39.925, 116.454); coords[2] = CLLocationCoordinate2DMake(39.955, 116.494); coords[3] = CLLocationCoordinate2DMake(39.905, 116.554); coords[4] = CLLocationCoordinate2DMake(39.965, 116.604); // 构建分段渐变颜色索引数组 NSArray *drawIndexs = [NSArray arrayWithObjects: [NSNumber numberWithInt:0], [NSNumber numberWithInt:1], [NSNumber numberWithInt:2], [NSNumber numberWithInt:3], nil]; BMKGradientLine *gradientLine = [BMKGradientLine gradientLineWithCoordinates:coords count:5 drawIndexs:drawIndexs]; [_mapView addOverlay:gradientLine];
var coords = [CLLocationCoordinate2D]() coords.append(CLLocationCoordinate2D(latitude: 39.965, longitude: 116.404)) coords.append(CLLocationCoordinate2D(latitude: 39.925, longitude: 116.454)) coords.append(CLLocationCoordinate2D(latitude: 39.955, longitude: 116.494)) coords.append(CLLocationCoordinate2D(latitude: 39.905, longitude: 116.554)) coords.append(CLLocationCoordinate2D(latitude: 39.965, longitude: 116.604)) // 构建分段渐变颜色索引数组 let drawIndexs = [0, 1, 2, 3] let gradientLine: BMKGradientLine = BMKGradientLine(coordinates: &coords, count: 5, drawIndexs: drawIndexs as [NSNumber]) mapView.add(gradientLine)
2实现代理方法,并设置渐变颜色数组
Objective-C
Swift
- (__kindof BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay { if ([overlay isKindOfClass:[BMKGradientLine class]]) { // 初始化一个overlay并返回相应的BMKGradientLineView的实例 BMKGradientLineView *gradientLineView = [[BMKGradientLineView alloc] initWithGradientLine:overlay]; // 渐变线颜色数组 gradientLineView.strokeColors = [NSArray arrayWithObjects: [[UIColor alloc] initWithRed:1 green:0 blue:0 alpha:1], [[UIColor alloc] initWithRed:1 green:1 blue:0 alpha:0.5], [[UIColor alloc] initWithRed:0 green:0 blue:1 alpha:1], [[UIColor alloc] initWithRed:0 green:1 blue:0 alpha:1], nil]; // 画笔宽度为12 gradientLineView.lineWidth = 12; return gradientLineView; } return nil; }
func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) func mapView(_ mapView: BMKMapView!, viewFor overlay: BMKOverlay!) -> BMKOverlayView! { if overlay.isKind(of: BMKGradientLine.self) { // 初始化一个overlay并返回相应的BMKGradientLineView的实例 let gradientLineView = BMKGradientLineView(gradientLine: gradientLine) // 画笔宽度为12 gradientLineView.lineWidth = 12.0 // 渐变线颜色数组 gradientLineView.colors = [UIColor.init(red: 0, green: 1, blue: 0, alpha: 1), UIColor.init(red: 1, green: 0, blue: 0, alpha: 1), UIColor.init(red: 1, green: 1, blue: 0, alpha: 0.5), UIColor.init(red: 0, green: 0, blue: 1, alpha: 1), UIColor.init(red: 0, green: 1, blue: 0, alpha: 1)] return gradientLineView } return nil }
3运行程序
效果如图:
分段颜色绘制折线
iOS地图SDK支持折线多段颜色绘制能力。
1添加分段折线数据,并构建分段颜色索引数组
Objective-C
Swift
CLLocationCoordinate2D coords[5] = {0}; coords[0] = CLLocationCoordinate2DMake(39.968, 116.260); coords[1] = CLLocationCoordinate2DMake(39.912, 116.324); coords[2] = CLLocationCoordinate2DMake(39.968, 116.373); coords[3] = CLLocationCoordinate2DMake(39.912, 116.439); coords[4] = CLLocationCoordinate2DMake(39.968, 116.490); //构建分段颜色索引数组 NSArray *drawIndexs = [NSArray arrayWithObjects: [NSNumber numberWithInt:0], [NSNumber numberWithInt:1], [NSNumber numberWithInt:2], [NSNumber numberWithInt:3], nil]; // 构造分段折线 colorfulPolyline = [BMKMultiPolyline multiPolylineWithCoordinates:coords count:5 drawIndexs:colorIndexs]; [_mapView addOverlay:colorfulPolyline];
var coords = [CLLocationCoordinate2D]() coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.260)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.324)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.373)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.439)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.490)) //构建分段纹理索引数组 let drawIndexs = [0, 1, 2, 3] // 构造分段折线 let colorfulPolyline: BMKMultiPolyline = BMKMultiPolyline(coordinates: &coords, count: 5, drawIndexs: drawIndexs as [NSNumber]) mapView?.add(polyline)
2实现代理方法,并设置分段颜色
Objective-C
Swift
//根据overlay生成对应的View - (__kindof BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay { if ([overlay isKindOfClass:[BMKMultiPolyline class]]){ BMKMultiColorPolylineView *colorfulPolylineView = [[BMKMultiColorPolylineView alloc] initWithMultiPolyline:overlay]; // 设置polylineView的画笔宽度为12 colorfulPolylineView.lineWidth = 12; colorfulPolylineView.colors = [NSArray arrayWithObjects: [[UIColor alloc] initWithRed:246/255.0 green:57/255.0 blue:57/255.0 alpha:1.0], [[UIColor alloc] initWithRed:253/255.0 green:173/255.0 blue:42/255.0 alpha:1.0], [[UIColor alloc] initWithRed:28/255.0 green:188/255.0 blue:82/255.0 alpha:1.0], [[UIColor alloc] initWithRed:19/255.0 green:107/255.0 blue:251/255.0 alpha:1.0], nil]; // 设置头尾处圆帽样式,V5.0.0新增 colorfulPolylineView.lineCapType = kBMKLineCapRound; return colorfulPolylineView; } return nil; }
//MARK:BMKMapViewDelegate /** 根据overlay生成对应的BMKOverlayView */ func mapView(_ mapView: BMKMapView, viewFor overlay: BMKOverlay) -> BMKOverlayView? { if overlay.isKind(of: BMKMultiPolyline.self) { let colorfulPolylineView = BMKMultiColorPolylineView(multiPolyline: overlay as! BMKMultiPolyline) // 设置colorfulPolylineView的画笔宽度为12 colorfulPolylineView?.lineWidth = 12.0 colorfulPolylineView?.strokeColors = [UIColor.init(red: 0, green: 1, blue: 0, alpha: 1), UIColor.init(red: 1, green: 0, blue: 0, alpha: 1), UIColor.init(red: 1, green: 1, blue: 0, alpha: 0.5), UIColor.init(red: 0, green: 0, blue: 1, alpha: 1)] // lineCapType,默认是kBMKLineCapButt (不支持虚线) colorfulPolylineView?.lineCapType = kBMKLineCapRound return colorfulPolylineView } return nil }
3运行程序
分段纹理折线
iOS地图SDK支持折线分段颜色绘制能力。
纹理素材格式:纹理图宽高片须是2的整数幂,如64*64,否则无效;若设置了纹理图片,设置线颜色类型将无效。
注意:目前仅支持对折线设置纹理,其余覆盖物目前暂不支持设置纹理。
1添加分段纹理绘制折线数据,并构建构建分段纹理索引数组
Objective-C
Swift
//构建顶点数组 CLLocationCoordinate2D coords[5] = {0}; coords[0] = CLLocationCoordinate2DMake(39.968, 116.260); coords[1] = CLLocationCoordinate2DMake(39.912, 116.324); coords[2] = CLLocationCoordinate2DMake(39.968, 116.373); coords[3] = CLLocationCoordinate2DMake(39.912, 116.439); coords[4] = CLLocationCoordinate2DMake(39.968, 116.490); //构建分段颜色索引数组 NSArray *drawIndexs = [NSArray arrayWithObjects: [NSNumber numberWithInt:0], [NSNumber numberWithInt:1], [NSNumber numberWithInt:2], [NSNumber numberWithInt:3], nil]; // 构造分段折线 BMKMultiPolyline *mulTexturePolyline = [BMKMultiPolyline multiPolylineWithCoordinates:coords count:5 drawIndexs:drawIndexs]; [_mapView addOverlay:mulTexturePolyline];
// 构建顶点数组 var coords = [CLLocationCoordinate2D]() coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.260)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.324)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.373)) coords.append(CLLocationCoordinate2D(latitude: 39.912, longitude: 116.439)) coords.append(CLLocationCoordinate2D(latitude: 39.968, longitude: 116.490)) //构建分段纹理索引数组 let drawIndexs = [0, 1, 2, 3] let mulTexturePolyline: BMKMultiPolyline = BMKMultiPolyline(coordinates: &coords, count: 5, drawIndexs: drawIndexs as [NSNumber]) mapView?.add(mulTexturePolyline)
2实现代理方法,并加载分段纹理图片
Objective-C
Swift
//根据overlay生成对应的View - (__kindof BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>) overlay { if ([overlay isKindOfClass:[BMKMultiPolyline class]]){ BMKMultiTexturePolylineView *mulTexturePolylineView = [[BMKMultiTexturePolylineView alloc] initWithMultiPolyline:overlay]; // 设置polylineView的画笔宽度为12 mulTexturePolylineView.lineWidth = 12; mulTexturePolylineView.textureImages = @[[UIImage imageNamed:@"traffic_texture_congestion"], [UIImage imageNamed:@"traffic_texture_slow"], [UIImage imageNamed:@"traffic_texture_smooth"], [UIImage imageNamed:@"traffic_texture_unknown"]]; nil]; // LineJoinType,默认是kBMKLineJoinBevel(不支持虚线) // 拐角处圆角衔接 mulTexturePolylineView.lineJoinType = kBMKLineJoinRound; // 拐角处平角衔接 mulTexturePolylineView.lineJoinType = kBMKLineJoinBevel; // 拐角处尖角衔接,ps尖角连接(尖角过长(大于线宽)按平角处理) mulTexturePolylineView.lineJoinType = kBMKLineJoinMiter; return mulTexturePolylineView } return nil; }
//MARK:BMKMapViewDelegate /** 根据overlay生成对应的BMKOverlayView */ func mapView(_ mapView: BMKMapView, viewFor overlay: BMKOverlay) -> BMKOverlayView? { if overlay.isKind(of: BMKMultiPolyline.self) { let mulTexturePolylineView = BMKMultiTexturePolylineView(multiPolyline: overlay as! BMKMultiPolyline) mulTexturePolylineView?.lineWidth = 12.0 // 构建纹理数组 let images: [UIImage] = [UIImage(named: "traffic_texture_congestion")!, UIImage(named: "traffic_texture_slow")!, UIImage(named: "traffic_texture_smooth")!, UIImage(named: "traffic_texture_unknown")!] mulTexturePolylineView?.textureImages = images // LineJoinType,默认是kBMKLineJoinBevel(不支持虚线) // 拐角处圆角衔接 mulTexturePolylineView?.lineJoinType = kBMKLineJoinRound // // 拐角处平角衔接 // mulTexturePolylineView?.lineJoinType = kBMKLineJoinBevel; // // 拐角处尖角衔接,ps尖角连接(尖角过长(大于线宽)按平角处理) // mulTexturePolylineView?.lineJoinType = kBMKLineJoinMiter; return mulTexturePolylineView } return nil }
3运行程序
效果如图:
polyline发光效果
Since 6.5.7 iOS地图SDK支持发光线绘制能力。
Objective-C
Swift
#pragma mark - BMKMapViewDelegate - (__kindof BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay { if ([overlay isEqual:_polyline]) { BMKPolylineView *polylineView = [[BMKPolylineView alloc] initWithPolyline:overlay]; // 设置polylineView的画笔颜色为蓝色 polylineView.strokeColor = [[UIColor yellowColor] colorWithAlphaComponent:1]; // 设置polylineView的画笔宽度为10 polylineView.lineWidth = 10; polylineView.lineCapType = kBMKLineCapRound; polylineView.lineJoinType = kBMKLineJoinBevel; polylineView.lineBloomMode = kBMKLineBloomModeGradient; polylineView.lineBloomWidth = 10 * 1.5f; polylineView.lineBloomAlpha = 255.f; polylineView.lineBloomGradientASPeed = 10; return polylineView; } else if ([overlay isEqual:_gradientLine]) { BMKGradientLineView *gradientLineView = [[BMKGradientLineView alloc] initWithOverlay:overlay]; gradientLineView.strokeColors = @[[[UIColor yellowColor] colorWithAlphaComponent:0.5], [UIColor colorWithRed:1.f green:0.f blue:0.f alpha:0.5f], [UIColor colorWithRed:0.f green:1.f blue:0.f alpha:0.5f], [UIColor colorWithRed:1.f green:0.84 blue:0.f alpha:0.5f], [UIColor colorWithRed:0.58 green:0.44 blue:0.86 alpha:0.5f], [UIColor colorWithRed:1 green:1 blue:0 alpha:1]]; gradientLineView.lineWidth = 8; gradientLineView.isClickable = YES; gradientLineView.lineBloomMode = kBMKLineBloomModeBlur; gradientLineView.lineBloomWidth = 8 * 2.0f; gradientLineView.lineBloomAlpha = 155.f; return gradientLineView; } return nil; }
//MARK:BMKMapViewDelegate /** 根据overlay生成对应的BMKOverlayView @param mapView 地图View @param overlay 指定的overlay @return 生成的覆盖物View */ func mapView(_ mapView: BMKMapView, viewFor overlay: BMKOverlay) -> BMKOverlayView? { if overlay.isKind(of: BMKMultiPolyline.self) { if overlay.isEqual(colorfulPolyline) { let colorfulPolylineView = BMKMultiColorPolylineView(multiPolyline: overlay as! BMKMultiPolyline) // 设置colorfulPolylineView的画笔宽度为12 colorfulPolylineView?.lineWidth = 12.0 colorfulPolylineView?.strokeColors = [UIColor.init(red: 0, green: 1, blue: 0, alpha: 1), UIColor.init(red: 1, green: 0, blue: 0, alpha: 1), UIColor.init(red: 1, green: 1, blue: 0, alpha: 0.5), UIColor.init(red: 0, green: 0, blue: 1, alpha: 1)] // lineCapType,默认是kBMKLineCapButt (不支持虚线) colorfulPolylineView?.lineCapType = kBMKLineCapRound colorfulPolylineView?.isClickable = true colorfulPolylineView?.lineBloomMode = kBMKLineBloomModeGradient colorfulPolylineView?.lineBloomWidth = 12 * 2.0 colorfulPolylineView?.lineBloomAlpha = 155 return colorfulPolylineView } } return nil }
效果如下图所示: