SwiftUI 无法捕获 MapView 的图像

Question

我有一个包含地图的 SwiftUI 应用程序。我想捕获地图的图像并将该图像显示为另一个视图上的 SwiftUI 图像。我一直无法找到关于此的任何文档。我尝试了两种捕获方法，但都不起作用。请参阅下面的扩展。

这是一个简化的例子：

内容视图：

struct ContentView: View {

    @State private var showDetail: Bool = false
    @State private var thumbImage: Image = Image(systemName: "gear")

    var body: some View {
        VStack {
            Text("This is the ContentView")

            if showDetail {
                DetailMapView(thumbImage: $thumbImage)
            }

            if !showDetail {
            Image(systemName: "gear")
                .resizable()
                .frame(width: 200, height: 200)
            }
            Button(action: {
                self.showDetail.toggle()
            }) {
                Text("Tap for Map")
            }
        }
    }
}

和 MapView：

struct DetailMapView: UIViewRepresentable {
    typealias UIViewType = MKMapView

    @Binding var thumbImage: Image

    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: DetailMapView

        init(_ parent: DetailMapView) {
            self.parent = parent
        }
    }//coordinator

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.showsUserLocation = true
        mapView.delegate = context.coordinator

        // this does not work - it crashes  
        // let s = mapView.pb_takeSnapshot()
        // self.thumbImage = Image(uiImage: s)

        //this does not work either - it produces lots of console complaints
        let t = mapView.screenshot
        DispatchQueue.main.async {
            self.thumbImage = Image(uiImage: t)
        }

        return mapView
    }
}

extension UIView {

    func pb_takeSnapshot() -> UIImage {
        UIGraphicsBeginImageContextWithOptions(bounds.size, false, UIScreen.main.scale)
        drawHierarchy(in: self.bounds, afterScreenUpdates: true)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

extension UIView {

    var screenshot: UIImage{
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, 0)
        guard let context = UIGraphicsGetCurrentContext() else { return UIImage() }
        self.layer.render(in: context)
        guard let screenShot = UIGraphicsGetImageFromCurrentImageContext() else { return UIImage() };
        UIGraphicsEndImageContext()
        return screenShot
    }
}

屏幕截图版本的控制台输出：

[VKDefault] TextureAtlasPage: Atlas page destroyed with outstanding references.: Assertion with expression - _textureRefs == 0 : Failed in file - /AppleInternal/BuildRoot/Library/Caches/com.apple.xbs/Sources/VectorKit_Sim/VectorKit-1606.34.10.29.27/src/TextureAtlas.cpp line - 604
[VKDefault] TextureAtlasPage: Atlas page destroyed with outstanding references.: Assertion with expression - _textureRefs == 0 : Failed in file - /AppleInternal/BuildRoot/Library/Caches/com.apple.xbs/Sources/VectorKit_Sim/VectorKit-1606.34.10.29.27/src/TextureAtlas.cpp line - 604

任何指导将不胜感激。 Xcode11.4 (11E146)

Answer 1

对于其他人：这对我有用——忘记上面的扩展。关键是用 mapViewDidFinishRenderingMap 并且该函数需要在 Coordinator 内部 class.

func mapViewDidFinishRenderingMap(_ mapView: MKMapView, fullyRendered: Bool) {

    //setup whatever region you want to see :mapView.setRegion(region, animated: true)
    let render = UIGraphicsImageRenderer(size: mapView.bounds.size)
    let ratio = mapView.bounds.size.height / mapView.bounds.size.width
    let img = render.image { (ctx) in
        mapView.drawHierarchy(in: CGRect(x: 100, y: 100, width: 300, height: 300 * ratio), afterScreenUpdates: true)
    }
    DispatchQueue.main.async {
        self.parent.thumbImage = Image(uiImage: img)
    }
}

Answer 2

我建议使用 Apple 的 MKMapSnapshotter，因为如果您自己手动渲染地图，您总是会得到 Apple 符号...您 "normally" 不想要 ;)

SwiftUI 无法捕获 MapView 的图像

SwiftUI Can't Capture Image of MapView

xcode

mapkit

ios