iossdk

更新时间：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运行程序

效果如图：

newIos%2Fpolyline1v5.png newIos%2Fpolyline2v5.png

绘制大地曲线

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运行程序

newIos%2Fpolyline3v5.png

分段纹理折线

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运行程序

效果如图：

newIos%2Fpolyline4v5.png

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
    }

效果如下图所示：

文档全面上新