如何在MKMapView上使用MKOverlayView绘制圆弧/曲线

Question

现在需要帮助。 我可以使用 MKPolyline 和 MKPolylineView 绘制线条，但是如何在 MKMapView 上的两个坐标之间绘制圆弧或曲线？ 非常感谢。

Answer 1

在回答问题之前，重要的是要提到 MKOverlayView 已弃用，并且从 iOS7 及更高版本开始我们应该使用 MKOverlayRenderer：

在 iOS 7 及更高版本中，请使用 MKOverlayRenderer 类来显示叠加层。

现在我们可以分解如何实现圆弧/曲线：

1. 首先，我们需要定义并添加折线。让我们创建一个具有 2 个坐标的折线：

let polyline = MKPolyline(coordinates: coordinates, count: coordinates.count)
mapView.addOverlay(polyline)

2. 添加折线后，MKMapView 将要求我们提供一个与我们已经创建的 MKPolyline 相对应的适当的 MKOverlayRenderer在第 1 节中创建。我们需要的 方法 是：

mapView(_mapView: MKMapView, rendererFor 覆盖: MKOverlay) -> MKOverlayRenderer

基本上：

向委托请求渲染器对象以在绘制指定叠加层时使用。

3. 那么让我们提供该对象。我们希望将 MKOverlayPathRenderer 子类化，它显然继承自 MKOverlayRenderer 并且如文档所述：

当叠加层的形状由 CGPath 对象定义时，请使用此渲染器。默认情况下，此渲染器填充叠加层的形状并使用其当前属性表示路径的笔划。

因此，如果我们按原样使用新的子类对象，我们将得到一个开箱即用的解决方案，它是从第一个坐标到我们在第 1 节中定义的第二个坐标的实线，但由于我们想要一个曲线我们必须重写一个方法：

您可以按原样使用此类或子类来定义其他绘图行为。如果您创建子类，请重写 createPath() 方法并使用该方法构建适当的路径对象。要更改路径，请将其无效并使用子类获得的任何新数据重新创建路径。

这意味着在我们的 CustomObject: MKOverlayPathRenderer 中，我们将重写 createPath：

override func createPath() {
 let polyline = overlay as! MKPolyline
 // Getting the coordinates from the polyline
 let points = polyline.points()
 // Taking the center of the polyline (between the 2 coordiantes) and converting to CGPoint
 let centerMapPoint = MKMapPoint(polyline.coordinate)
 // Converting coordinates to CGPoint corresponding to the specified point on the map
 let startPoint = point(for: points[0])
 let endPoint = point(for: points[1])
 let centerPoint = point(for: centerMapPoint)

 // I would like to thank a co-worker of mine for the controlPoint formula :)
 let controlPoint = CGPoint(x: centerPoint.x + (startPoint.y - endPoint.y) / 3,
                            y: centerPoint.y + (endPoint.x - startPoint.x) / 3)

 // Defining our new curved path using Bezier path
 let myPath = UIBezierPath()
 myPath.move(to: startPoint)
 myPath.addQuadCurve(to: endPoint,
                     controlPoint: controlPoint)
 // Mutates the solid line with our curved one
 path = myPath.cgPath
}

我们基本上完成了。您可能需要考虑添加宽度/描边/颜色等，以便您可以看到曲线。

4. （可选）如果您对渐变曲线感兴趣，有一个非常好的解决方案 此处，但您必须在代码中进行 2 处更改才能使其正常工作：

4.1。重写 override func draw(_ mapRect: MKMapRect, ZoomScale: MKZoomScale, in context: CGContext) 后，在添加渐变之前，您必须添加第 3 节中的相同代码，但不要更改在内部 path 中，您必须将其添加到提供的上下文中：

context.move(to: startPoint)
context.addQuadCurve(to: endPoint,
                     control: controlPoint)

这基本上为我们提供了一条关于渐变着色所需的曲线。

4.2.我们需要使用 path.boundingBox 而不是使用 path.boundingBoxOfPath ，因为：

...包括贝塞尔曲线和二次曲线的控制点。

与 boundingBoxOfPath 不同：

...不包括贝塞尔曲线和二次曲线的控制点。

希望有帮助:)

Answer 2

阅读文档后，您似乎可以创建 MKOverlayPathView 实例并将任意 CGPathRef 对象分配给其 path 属性。该路径可以包含直线和圆弧。

我不知道（并且文档没有提到）路径的坐标应该采用什么格式（MKMapPoint 或 CLLocationCooperative2D 浮现在脑海中），但你可能可以通过尝试一下就能找到答案。

Answer 3

您已经在评论中回答了自己，但我想向大家指出优秀的 AIMapViewWrapper 项目GitHub，其中包含用于绘制圆弧的示例代码一组坐标上的路径。在该项目中，它用于绘制飞机所采用的路径，包括其下方的阴影路径（以及其他内容，例如沿该路径制作飞机动画）。对于任何对此感兴趣的人来说应该派上用场。

Answer 4

如果你想：

1. 只在地图上绘制圆弧路径
2. 只在地图上绘制图像
3. 将圆弧路径和图像叠加在地图上

所以解决方案是：

1. 有 MKPolyline 和 MKPolylineView绘制直线，MKPolygon和MKPolygonView绘制多边形，MKCircle和MKCircleView绘制圆形。没人适合吗？哪里有弧线？哦是的。现在真正的解决方案：您创建一个从 MKOverlayPathView 派生的自定义类并覆盖 -createPath 方法，在 -createPath 中创建一个弧线使用CGContextAddArcToPoint或者其他你喜欢的函数，将刚刚创建的路径关联到MKOverlayPathView的path属性，自定义工作就完成了。然后在地图中添加 MKPolyline（是的！只是 MKPolyline！），然后在 -mapView:viewForOverlay: 方法中创建自定义类，采用该折线。然后，运行它，一切都会如你所愿地运行。魔法？您可以将 MKPolyline 绘制为圆弧！
2. 只是一个图像？使用MKAnnotationView。这样就完成了！你能做到的！我相信！
3. 在我的问题中，我想在叠加层中绘制带有图像的圆弧。因此，我创建了一个符合 MKOverlay 协议的自定义类，以及一个从 MKOverlayView 派生的自定义类来绘制该叠加层。一切正常，但我无法在地图上绘制任何路径！我已将 lineWidth 设置为 1,2,3,4...但它不起作用！啊..解决办法是用MKRoadWidthAtZoomScale(zoomScale)函数设置线宽，就可以看到路径了！大功告成……

这里还有一些提示：

1. 使用Core Graphic来绘制路径，而不是MapKit坐标或UIView坐标！
2. 在 CG 函数中，请记住线宽应通过此函数转换：MKRoadWidthAtZoomScale(zoomScale)
3. 希望有所帮助