浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
绘制线简介

折线类为 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[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 *colorIndexs = [NSArray arrayWithObjects:
                                [NSNumber numberWithInt:0],
                                [NSNumber numberWithInt:1],
                                [NSNumber numberWithInt:2],
                                [NSNumber numberWithInt:3], nil];
BMKPolyline *polyline  = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:colorIndexs];
[_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))
//构建分段纹理索引数组
let textureIndexs = [0, 1, 2, 3]
/**
 *根据指定坐标点生成一段折线
 *
 *分段纹理绘制:其对应的BMKPolylineView必须使用 - (BOOL)loadStrokeTextureImages:(NSArray <UIImage *>*)textureImages; 加载纹理图片;否则使用默认的灰色纹理绘制
 *分段颜色绘制:其对应的BMKPolylineView必须设置colors属性
 *
 *@param coords 指定的经纬度坐标点数组
 *@param count 坐标点的个数
 *@param textureIndex 纹理索引数组(颜色索引数组),成员为NSNumber,且为非负数,负数按0处理
 *@return 新生成的折线对象
 */
let polyline: BMKPolyline = BMKPolyline(coordinates: &coords, count: 5, textureIndex: colorIndexs as [NSNumber])
mapView?.add(polyline)
2实现代理方法,并设置分段颜色
Objective-C
Swift
//根据overlay生成对应的View
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{
    if ([overlay isKindOfClass:[BMKPolyline class]]){
           BMKPolylineView *polylineView = [[BMKPolylineView alloc] initWithPolyline:overlay];
           //设置polylineView的画笔宽度为12
            polylineView.lineWidth = 12;
            /**
             分段设置polylineView的颜色
             注:初始化UIColor请使用-initWithRed:green:blue:alpha:,若使用[UIColor **Color]
             个别case转换成RGB后会有问题
             */
            polylineView.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新增
 //           polylineView.lineCapType = kBMKLineCapRound;
            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的画笔宽度为12
            polylineView?.lineWidth = 12.0
            /**
             分段设置polylineView的颜色
             注:初始化UIColor请使用-initWithRed:green:blue:alpha:,若使用[UIColor **Color]
             个别case转换成RGB后会有问题
             */
            polylineView?.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)]
            //lineCapType,默认是kBMKLineCapButt (不支持虚线)
            polylineView?.lineCapType = kBMKLineCapRound;
        }
        return polylineView
    }
    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 *colorIndexs = [NSArray arrayWithObjects:
                                [NSNumber numberWithInt:0],
                                [NSNumber numberWithInt:1],
                                 [NSNumber numberWithInt:2],
                                [NSNumber numberWithInt:3], nil];
BMKPolyline *polyline  = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:colorIndexs];
        [_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))
//构建分段纹理索引数组
let textureIndexs = [0, 1, 2, 3]
/**
 *根据指定坐标点生成一段折线
 *
 *分段纹理绘制:其对应的BMKPolylineView必须使用 - (BOOL)loadStrokeTextureImages:(NSArray <UIImage *>*)textureImages; 加载纹理图片;否则使用默认的灰色纹理绘制
 *分段颜色绘制:其对应的BMKPolylineView必须设置colors属性
 *
 *@param coords 指定的经纬度坐标点数组
 *@param count 坐标点的个数
 *@param textureIndex 纹理索引数组(颜色索引数组),成员为NSNumber,且为非负数,负数按0处理
 *@return 新生成的折线对象
 */
let polyline: BMKPolyline = BMKPolyline(coordinates: &coords, count: 5, textureIndex: colorIndexs as [NSNumber])
mapView?.add(polyline)
2实现代理方法,并加载分段纹理图片
Objective-C
Swift
//根据overlay生成对应的View

- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{

   if ([overlay isKindOfClass:[BMKPolyline class]]){
          BMKPolylineView *polylineView = [[BMKPolylineView alloc] initWithPolyline:overlay];
          //设置polylineView的画笔宽度为12
            polylineView.lineWidth = 12;
           
           /**
            *加载分段纹理绘制 所需的纹理图片
            @param textureImages 必须UIImage数组,opengl要求图片宽高必须是2的n次幂,否则,返回NO,无法分段纹理绘制
            @return 是否成功
            */ 
           [polylineView loadStrokeTextureImages:@[[UIImage imageNamed:@"traffic_texture_congestion"],
                                                   [UIImage imageNamed:@"traffic_texture_slow"],
                                                   [UIImage imageNamed:@"traffic_texture_smooth"],
                                                   [UIImage imageNamed:@"traffic_texture_unknown"]]];
            //拐角处尖角衔接,V5.0.0新增
//           polylineView.lineJoinType = kBMKLineJoinMiter;//尖角
//            polylineView.lineJoinType = kBMKLineJoinRound//圆角
           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?.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")!]
            /**
             *加载分段纹理绘制 所需的纹理图片
             @param textureImages 必须UIImage数组,opengl要求图片宽高必须是2的n次幂,否则,返回NO,无法分段纹理绘制
             @return 是否成功
             */
            polylineView?.loadStrokeTextureImages(images)
            //LineJoinType,默认是kBMKLineJoinBevel(不支持虚线)
            //拐角处圆角衔接,V5.0.0新增
            //polylineView?.lineJoinType = kBMKLineJoinRound
            //拐角处平角衔接,V5.0.0新增
            //polylineView?.lineJoinType = kBMKLineJoinBevel;
            //拐角处尖角衔接,ps尖角连接(尖角过长(大于线宽)按平角处理),V5.0.0新增
            //polylineView?.lineJoinType = kBMKLineJoinMiter;
        }
        return polylineView
    }
    return nil
}
3运行程序
效果如图:

newIos%2Fpolyline4v5.png

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消