iOS開(kāi)發(fā)-MKMapView蘋(píng)果原生地圖上繪制箭頭線-OC

1. 效果圖

[圖片上傳失敗...(image-16bbdc-1658242187106)]

2. 實(shí)現(xiàn)思路

2.1. 最初想法

起初思路是在 MKMapView上點(diǎn)的下方添加一個(gè)箭頭View或imageView，通過(guò)兩點(diǎn)計(jì)算角度并控制箭頭的旋轉(zhuǎn)實(shí)現(xiàn)和線重合，一頓操作下來(lái)發(fā)現(xiàn)角度計(jì)算的并不是特別的準(zhǔn)確，而且在 MKMapview旋轉(zhuǎn)時(shí)，箭頭也跟著旋轉(zhuǎn)，無(wú)法和線重合，最終也是放棄了這個(gè)思路。

2.2. 新思路

通過(guò)定義一個(gè) MKPolylineRenderer的子類 PVMTPolylineRenderer，重寫(xiě)父類的 \- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context 方法進(jìn)行箭頭繪制。

3. 具體代碼實(shí)現(xiàn)

3.1 在 iOS系統(tǒng)中，使用 MKMapView進(jìn)行地圖定位并繪制；

3.2 在地圖上根據(jù)多個(gè)點(diǎn)的經(jīng)緯度繪制標(biāo)注(點(diǎn))，并根據(jù)這些標(biāo)注控制地圖畫(huà)布大小和縮放比例；

3.3 使用 MKPolyline創(chuàng)建線 MyMKPolyline；

3.4 使用一個(gè)繼承自 MKPolylineRenderer的對(duì)象 MyMKPolylineRenderer對(duì)線條進(jìn)行樣式更新。

其中，3.3步驟的具體實(shí)現(xiàn)方式如下：

  1. 3.3.1 創(chuàng)建一個(gè)對(duì)象 MyMKPolylineRenderer繼承自 MKPolylineRenderer；
  2. 3.3.2 在 MyMKPolylineRenderer.h中添加地圖縮放因子;
  3. 3.3.3 重寫(xiě) MKPolylineRenderer的 drawMapRect方法；
  4. 3.3.4 在 drawMapRect方法中計(jì)算出所需畫(huà)箭頭線的7個(gè)點(diǎn)P1-P7的坐標(biāo)；
  5. 3.3.5 在 MKMapView的代理 regionDidChangeAnimated和 mapViewDidChangeVisibleRegion方法中計(jì)算縮放因子并將縮放因子傳值給 MyMKPolylineRenderer。

說(shuō)明：縮放因子 = mapView.bounds.size.width/mapView.visibleMapRect.size.width;

其中3.3.3步驟的計(jì)算方式為:

    1. 通過(guò) pointForMapPoint獲取 MyMKPolyline的所有標(biāo)注；
    1. 通過(guò)兩標(biāo)注坐標(biāo)計(jì)算角度；
    2. 分別計(jì)算P1-P7點(diǎn)坐標(biāo)，計(jì)算方式如圖2

輔助說(shuō)明圖

[圖片上傳失敗...(image-f1232d-1658242187105)]

[圖片上傳失敗...(image-f56626-1658242187105)]

3.1. 創(chuàng)建 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; // 點(diǎn)寬
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];
// 計(jì)算箭頭7個(gè)點(diǎn)坐標(biāo)，以箭頭尖角為起點(diǎn)
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]));

// 開(kāi)始繪制
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);
}
}
}
}

/// 計(jì)算兩個(gè)點(diǎn)之間的角度
/// @param lastPoint 上個(gè)點(diǎn)坐標(biāo)
/// @param currentPoint 當(dāng)前點(diǎn)坐標(biāo)

  • (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;
    }

/// 計(jì)算圓邊沿坐標(biāo)
/// @param center 圓中心點(diǎn)
/// @param angle 角度
/// @param radius 半徑

  • (CGPoint)calcCircleCoordinateWithCenter:(CGPoint)center withAngle:(double)angle withRadius:(double)radius {
    double x2 = radiuscos([self getRadio:angle]);
    double y2 = radius    sin([self getRadio:angle]);
    return CGPointMake(center.x+x2, center.y-y2);
    }

/// 角度轉(zhuǎn)換
/// @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]]) {
// 不規(guī)則圖形

}
}

  • (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>

|

此時(shí)畫(huà)箭頭線結(jié)束。

[圖片上傳失敗...(image-98c7ee-1658242187105)]

??注意：

zoomScale為手動(dòng)計(jì)算的，通過(guò) mapView.bounds.size.width/mapView.visibleMapRect.size.width 計(jì)算，不能使用 drawMapRect方法的 zoomScale。

如果使用 drawMapRect的 zoomScale會(huì)導(dǎo)致雙指縮放地圖時(shí)箭頭坐標(biāo)計(jì)算錯(cuò)誤。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容