1. 效果图
[图片上传失败...(image-16bbdc-1658242187106)]
2. 实现思路
2.1. 最初想法
起初思路是在 MKMapView上点的下方添加一个箭头View或imageView，通过两点计算角度并控制箭头的旋转实现和线重合，一顿操作下来发现角度计算的并不是特别的准确，而且在 MKMapview旋转时，箭头也跟着旋转，无法和线重合，最终也是放弃了这个思路。
2.2. 新思路
通过定义一个 MKPolylineRenderer的子类 PVMTPolylineRenderer，重写父类的 \- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context 方法进行箭头绘制。
3. 具体代码实现
3.1 在 iOS系统中，使用 MKMapView进行地图定位并绘制；
3.2 在地图上根据多个点的经纬度绘制标注(点)，并根据这些标注控制地图画布大小和缩放比例；
3.3 使用 MKPolyline创建线 MyMKPolyline；
3.4 使用一个继承自 MKPolylineRenderer的对象 MyMKPolylineRenderer对线条进行样式更新。
其中，3.3步骤的具体实现方式如下：
- 3.3.1 创建一个对象
MyMKPolylineRenderer继承自MKPolylineRenderer； - 3.3.2 在
MyMKPolylineRenderer.h中添加地图缩放因子; - 3.3.3 重写
MKPolylineRenderer的drawMapRect方法； - 3.3.4 在
drawMapRect方法中计算出所需画箭头线的7个点P1-P7的坐标； - 3.3.5 在
MKMapView的代理regionDidChangeAnimated和mapViewDidChangeVisibleRegion方法中计算缩放因子并将缩放因子传值给MyMKPolylineRenderer。
说明：缩放因子 = mapView.bounds.size.width/mapView.visibleMapRect.size.width;
其中3.3.3步骤的计算方式为:
- 通过
pointForMapPoint获取MyMKPolyline的所有标注；
- 通过
- 通过两标注坐标计算角度；
- 分别计算P1-P7点坐标，计算方式如图2
辅助说明图
[图片上传失败...(image-f1232d-1658242187105)]
[图片上传失败...(image-f56626-1658242187105)]
3.1. 创建 PVMTPolylineRenderer
|
<pre style="font-family: consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei"; font-size: 1em; background-color: rgb(253, 246, 227); color: rgb(88, 110, 117); line-height: 1.6; margin: 0px; overflow: auto; padding: 10px 0px 10px 10px; border: 0px; width: 417px;">#import <MapKit/MapKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface PVMTPolylineRenderer : MKPolylineRenderer
/// 缩放因子
@property (nonatomic, assign) double zoomScale;
@end
NS_ASSUME_NONNULL_END
</pre>
|
|
<pre style="font-family: consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei"; font-size: 1em; background-color: rgb(253, 246, 227); color: rgb(88, 110, 117); line-height: 1.6; margin: 0px; overflow: auto; padding: 10px 0px 10px 10px; border: 0px; width: 1332.71875px;">#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 = radiuscos([self getRadio:angle]);
double y2 = radiussin([self getRadio:angle]);
return CGPointMake(center.x+x2, center.y-y2);
}
/// 角度转换
/// @param angle 角度
- (double)getRadio:(double)angle {
return angle * M_PI / 180;
}
</pre>
|
3.2. PVMTPolylineRenderer的使用
|
<pre style="font-family: consolas, Menlo, monospace, "PingFang SC", "Microsoft YaHei"; font-size: 1em; background-color: rgb(253, 246, 227); color: rgb(88, 110, 117); line-height: 1.6; margin: 0px; overflow: auto; padding: 10px 0px 10px 10px; border: 0px; width: 823.984375px;">// 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];
}
}
</pre>
|
此时画箭头线结束。
[图片上传失败...(image-98c7ee-1658242187105)]
📢注意：
zoomScale为手动计算的，通过 mapView.bounds.size.width/mapView.visibleMapRect.size.width 计算，不能使用 drawMapRect方法的 zoomScale。
如果使用 drawMapRect的 zoomScale会导致双指缩放地图时箭头坐标计算错误。
