如何在 MKMapView 上绘制自定义形状

Question

我需要绘制自定义形状，例如圆弧、半圆？我尝试了下面的代码，但它没有在 MKMapView.

上呈现任何内容

这是绘制自定义形状的正确方法吗？

class ViewController: UIViewController {

  @IBOutlet weak var mapView: MKMapView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.

    mapView.delegate = self

    let center = CLLocationCoordinate2D(latitude: 15.463157486154865, longitude: 73.78846049308775)
    let radius = CLLocationCoordinate2D(latitude: 15.495608080208948, longitude: 73.83418584279791)
    addCircle(center: center, radius: radius)
  }

  private func createArcPath() -> UIBezierPath {
    let center = CLLocationCoordinate2D(latitude: 15.463157486154865, longitude: 73.78846049308775)
    // converting the coordinates to CGPoint with respect to MKMapView.
    let centerPoint = mapView.convert(center, toPointTo: self.mapView)
    // Creating bezierPath of arc.
    let path = UIBezierPath(arcCenter: centerPoint, radius: 6080.205481929489, startAngle: CGFloat.pi, endAngle: CGFloat.pi * 2, clockwise: true)
    return path
  }
}

extension ViewController: MKMapViewDelegate {
  func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    if overlay is MKCircle {
      let arcRenderer = MKOverlayPathRenderer()
      arcRenderer.path = createArcPath().cgPath
      arcRenderer.strokeColor = UIColor.red
      arcRenderer.fillColor = UIColor.red
      arcRenderer.lineWidth = 10
      arcRenderer.alpha = 1
      arcRenderer.lineCap = .round
      return arcRenderer
    }
    return MKOverlayRenderer()
  }
}

extension ViewController {
  private func addCircle(center ccoordinate: CLLocationCoordinate2D, radius rcoordinate: CLLocationCoordinate2D) {
    let centerLocation = CLLocation.init(latitude: ccoordinate.latitude, longitude: ccoordinate.longitude)
    let radiusLocation = CLLocation.init(latitude: rcoordinate.latitude, longitude: rcoordinate.longitude)
    let radius = centerLocation.distance(from: radiusLocation)
    let circle = MKCircle(center: ccoordinate, radius: radius)

    mapView.addOverlay(circle)
  }
}

Answer 1

使用它在 MAPVIEW 中添加自定义形状

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer
    {
        if overlay is MKCircle
        {
            print("overlay latitude: "+String(overlay.coordinate.latitude))
            print("overlay longitude: "+String(overlay.coordinate.longitude))
            let circleOverlay = overlay as! MKCircle
            if(circleOverlay.accessibilityPath != nil)
            {
                let arcRenderer = MKOverlayPathRenderer()
                arcRenderer.path = circleOverlay.accessibilityPath?.cgPath
                arcRenderer.strokeColor = UIColor.red
                arcRenderer.lineWidth = 10
                arcRenderer.alpha = 0.3
                return arcRenderer
            }
            let circle = MKCircleRenderer(overlay: overlay)
            circle.strokeColor = UIColor.black
            circle.fillColor = UIColor(red: 255, green: 0, blue: 0, alpha: 0.1)
            circle.lineWidth = 1
            circle.alpha = 0.3
            return circle
        }
}

Answer 2

经过一些 RND 我遇到了一个库 curvyRoute 并用它在 MKMapView 上绘制了拱门。

// Adds arch overlay to the mapView
private func addArcOverlays() {
  let pointA = CLLocationCoordinate2D(latitude: 15.463157486154865, longitude: 73.78846049308775)
  let pointB = CLLocationCoordinate2D(latitude: 15.495608080208948, longitude: 73.83418584279791)

  mapView.addOverlay(LineOverlay(origin: pointA, destination: pointB))
  let style = LineOverlayStyle(strokeColor: .red, lineWidth: 4, alpha: 1)
  let arc = ArcOverlay(origin: pointA, destination: pointB, style: style)
  arc.radiusMultiplier = 0.5
  mapView.addOverlay(arc)
}

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
  switch overlay {
  case let lineOverlay as LineOverlay:
    let linerender = MapLineOverlayRenderer(lineOverlay)
    setVisibleMapRect(linerender.overlay, animated: true)
    return linerender

  case let polyline as MKPolyline:
    let renderer = MKPolylineRenderer(overlay: polyline)
    renderer.strokeColor = UIColor.yellow.withAlphaComponent(0.5)
    renderer.lineWidth = 4
    return renderer

  default:
    return MKOverlayRenderer()
  }
}

如何在 MKMapView 上绘制自定义形状

How to draw custom shapes on MKMapView

mkmapview

mkoverlay

mkoverlaypathrenderer

swift