iOS开发-MKMapView苹果原生地图上绘制箭头线-OC

1. 效果图

2. 实现思路

a. 最初想法

起初思路是在MKMapView上点的下方添加一个箭头View或imageView，通过两点计算角度并控制箭头的旋转实现和线重合，一顿操作下来发现角度计算的并不是特别的准确，而且在MKMapview旋转时，箭头也跟着旋转，无法和线重合，最终也是放弃了这个思路。

b. 新思路

通过定义一个MKPolylineRenderer的子类 PVMTPolylineRenderer，重写父类的 - (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context 方法进行箭头绘制。

3. 具体代码实现

a. 创建PVMTPolylineRenderer

#import <MapKit/MapKit.h>
​
NS_ASSUME_NONNULL_BEGIN
​
@interface PVMTPolylineRenderer : MKPolylineRenderer
  
/// 缩放因子
@property (nonatomic, assign) double zoomScale;
​
@end
​
NS_ASSUME_NONNULL_END

#import "PVMTPolylineRenderer.h"
​
@implementation PVMTPolylineRenderer
​
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
    [super drawMapRect:mapRect zoomScale:zoomScale inContext:context];
    
    double lineWidth = 1.5/self.zoomScale;  // 箭头线宽
    double pointWidth = 27/self.zoomScale;  // 点宽
    double arrowWidth = 9.5/self.zoomScale; // 箭头宽（宽高一样）
    
    @autoreleasepool {
        for (int i = 0; i < self.polyline.pointCount; i++) {
            CGPoint currentPoint = [self pointForMapPoint:self.polyline.points[i]];
            if (i > 0) {
                CGPoint lastPoint = [self pointForMapPoint:self.polyline.points[i - 1]];
                double angle = [self getPointAngleWithLastPoint:lastPoint currentPoint:currentPoint];
                // 计算箭头7个点坐标，以箭头尖角为起点
                CGPoint p1 = [self calcCircleCoordinateWithCenter:currentPoint withAngle:angle withRadius:pointWidth/2.0];
                
                CGPoint p2 = CGPointMake(p1.x + arrowWidth * cos([self getRadio:30 + angle]), p1.y - arrowWidth * sin([self getRadio:30 + angle]));
                
                CGPoint p3 = CGPointMake(p2.x + (arrowWidth/2 - lineWidth/2)*sin([self getRadio:angle]), p2.y + (arrowWidth/2 - lineWidth/2)*cos([self getRadio:angle]));
                
                CGPoint p4 = CGPointMake(lastPoint.x - lineWidth/2 * sin([self getRadio:angle]), lastPoint.y - lineWidth/2 * cos([self getRadio:angle]));
                
                CGPoint p5 = CGPointMake(lastPoint.x + lineWidth/2 * sin([self getRadio:angle]), lastPoint.y + lineWidth/2 * cos([self getRadio:angle]));
                
                CGPoint p7 = CGPointMake(p1.x + arrowWidth * cos([self getRadio:30 - angle]), p1.y + arrowWidth * sin([self getRadio:30 - angle]));
                
                CGPoint p6 = CGPointMake(p7.x - (arrowWidth/2 - lineWidth/2)*sin([self getRadio:angle]), p7.y - (arrowWidth/2 - lineWidth/2)*cos([self getRadio:angle]));
                
                // 开始绘制
                CGContextMoveToPoint(context, p1.x, p1.y);
                CGContextAddLineToPoint(context, p2.x, p2.y);
                CGContextAddLineToPoint(context, p3.x, p3.y);
                CGContextAddLineToPoint(context, p4.x, p4.y);
                CGContextAddLineToPoint(context, p5.x, p5.y);
                CGContextAddLineToPoint(context, p6.x, p6.y);
                CGContextAddLineToPoint(context, p7.x, p7.y);
                CGContextClosePath(context);
                // 填充颜色
                CGContextSetRGBFillColor(context, 53/255.0, 70/255.0, 222/255.0, 1);
                CGContextFillPath(context);
            }
        }
    }
}
​
/// 计算两个点之间的角度
/// @param lastPoint 上个点坐标
/// @param currentPoint 当前点坐标
- (double)getPointAngleWithLastPoint:(CGPoint)lastPoint currentPoint:(CGPoint)currentPoint {
    CGFloat bearing = M_PI - atan2(currentPoint.y - lastPoint.y, currentPoint.x - lastPoint.x);
    CGFloat angle = bearing/M_PI * 180;
    return angle;
}
​
/// 计算圆边沿坐标
/// @param center 圆中心点
/// @param angle 角度
/// @param radius 半径
- (CGPoint)calcCircleCoordinateWithCenter:(CGPoint)center withAngle:(double)angle withRadius:(double)radius {
    double x2 = radius*cos([self getRadio:angle]);
    double y2 = radius*sin([self getRadio:angle]);
    return CGPointMake(center.x+x2, center.y-y2);
}
​
/// 角度转换
/// @param angle 角度
- (double)getRadio:(double)angle {
    return angle * M_PI / 180;
}

b. PVMTPolylineRenderer的使用

// PVMKMapView.h
@property (nonatomic, strong) PVMTPolylineRenderer *polylineRenderer;
// PVMKMapView.m
#pragma mark - MKMapViewDelegate
- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay {
  if ([overlay isKindOfClass:[PVMTRouteMKPloyline class]]) {
        PVMTPolylineRenderer *polylineRenderer = [[PVMTPolylineRenderer alloc] initWithOverlay:overlay];
        self.polylineRenderer = polylineRenderer;
        return polylineRenderer;
    }
  if ([overlay isKindOfClass:[MKPolyline class]]) {
    // 其他线
    
  }
  if ([overlay isKindOfClass:[MKPolygon class]]) {
    // 不规则图形
    
  }
}
​
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated {
    if (@available(iOS 11.0, *)){
        // mapViewDidChangeVisibleRegion处理
    } else {
        if (self.frame.size.width > 300) {
            double zoomScale = mapView.bounds.size.width/mapView.visibleMapRect.size.width;
            self.polylineRenderer.zoomScale = zoomScale;
            [self.polylineRenderer setNeedsDisplay];
        }
    }
}
​
- (void)mapViewDidChangeVisibleRegion:(MKMapView *)mapView {
    if (self.frame.size.width > 300) {
        double zoomScale = mapView.bounds.size.width/mapView.visibleMapRect.size.width;
        self.polylineRenderer.zoomScale = zoomScale;
        [self.polylineRenderer setNeedsDisplay];
    }
}

此时画箭头线结束。

📢注意：

zoomScale为手动计算的，通过 mapView.bounds.size.width/mapView.visibleMapRect.size.width 计算，不能使用drawMapRect方法的zoomScale。

如果使用drawMapRect的zoomScale会导致双指缩放地图时箭头坐标计算错误。