在UIImage中渲染MKPolyline

Question

如果可能的MKPolyline ，我需要在不使用MKMapView情况下在UIImage渲染MKPolyline （主要是出于性能原因，我想尽快显示路径，而Map截图提供异步地提供地图，就像Strava所做的那样）。

我想出了这段代码：

func pathImageForSize(size: CGSize) -> UIImage {
    let region = regionForPath() // MKCoordinateRegion
    let coordinates = locations.map { $0.coordinate }
    UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.mainScreen().scale)

    let context = UIGraphicsGetCurrentContext()

    CGContextSetStrokeColorWithColor(context, UIColor.palette_mainColor().CGColor)
    CGContextSetLineWidth(context, 4.0)
    CGContextBeginPath(context)

    let origin = CGPoint(x: region.center.latitude - region.span.latitudeDelta / 2, y: region.center.longitude - region.span.longitudeDelta / 2)

    for (index, coordinate) in coordinates.enumerate() {
        let point = CGPoint(x: ((CGFloat(coordinate.latitude) - origin.x) / CGFloat(region.span.latitudeDelta)) * size.width,
                            y: ((CGFloat(coordinate.longitude) - origin.y) / CGFloat(region.span.longitudeDelta)) * size.height)

        if index == 0 {
            CGContextMoveToPoint(context, point.x, point.y)
        } else {
            CGContextAddLineToPoint(context, point.x, point.y)
        }
    }

    CGContextStrokePath(context)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

代码基本上重新调整坐标并使用CoreGraphics绘制它们。 绘制路径，但它也会旋转90度，如下所示：

MapKit呈现的折线：

我的代码呈现的折线：

关于我做错了什么的任何想法？

Answer 1

我怀疑这是因为你使用纬度为'x'，经度使用'y'。 纬度是垂直尺寸（在顶部为北方的地图上），经度是水平尺寸。

Answer 2

好吧，想通了，我的前提是错误的：我正在计算的区域封装了路径的坐标，但是当渲染时，mapview会调整这个区域。 解决方案是缩放区域以适应mapview的框架：

let map = MKMapView(frame: CGRect(origin: CGPoint.zero, size: size))
let region = map.regionThatFits(regionForPath())

此外，正如BrentM所建议的那样 ，坐标被翻转。 结果代码是这样的：

func pathImageForSize(size: CGSize) -> UIImage {
  let map = MKMapView(frame: CGRect(origin: CGPoint.zero, size: size))
  let region = map.regionThatFits(regionForPath())
  let coordinates = locations.map { $0.coordinate }
  UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.mainScreen().scale)

  let context = UIGraphicsGetCurrentContext()
  CGContextSetLineJoin(context, .Round)
  CGContextSetLineCap(context, .Round)
  CGContextSetStrokeColorWithColor(context, UIColor.palette_mainColor().CGColor)
  CGContextSetLineWidth(context, 4.0)
  CGContextBeginPath(context)

  let origin = CGPoint(x: region.center.longitude - region.span.longitudeDelta / 2, y: region.center.latitude - region.span.latitudeDelta / 2)

  for (index, coordinate) in coordinates.enumerate() {
    let point = CGPoint(x: ((CGFloat(coordinate.longitude) - origin.x) / CGFloat(region.span.longitudeDelta)) * size.width,
                        y: ((CGFloat(coordinate.latitude) - origin.y) / CGFloat(region.span.latitudeDelta)) * size.height)

    if index == 0 {
      CGContextMoveToPoint(context, point.x, size.height - point.y)
    } else {
      CGContextAddLineToPoint(context, point.x, size.height - point.y)
    }
  }

  CGContextStrokePath(context)

  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}