在 SwiftUI 中从 Observable 视图模型初始化 Map

Question

我正在尝试在视图模型的 SwiftUI 视图上实现 Map。我在网上找到的每个例子都硬编码一个坐标。就我而言，我正在使用 Codable 结构初始化视图模型，但我不知道坐标是什么。

我在构建项目时没有遇到编译器问题，但是画布崩溃了。我尝试过关闭 Xcode、清理派生数据等，但这似乎并没有解决问题。

非常感谢任何关于我的错误的建议。

class EarthquakeViewModel: ObservableObject {
    @Published private(set) var quakeData: Feature
    @State var region: MKCoordinateRegion
    
    
    init(quakeData: Feature) {
        self.quakeData = quakeData
        let center = CLLocationCoordinate2D(latitude: quakeData.geometry.coordinates[0],
                                        longitude: quakeData.geometry.coordinates[1])
        let span = MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0)
        region = MKCoordinateRegion(center: center,
                                    span: span)
    }

        public lazy var title: String = {
        quakeData.properties.title
    }()
}

这是我的ContentView：

struct EarthquakeView: View {
    @ObservedObject var viewModel: EarthquakeViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.title)
//            makeMapView()
            Map(coordinateRegion: $viewModel.region)
        }
    }
}

// 这个我也试过了，还是不行。

extension EarthquakeView {
    @ViewBuilder func makeMapView() -> some View {
        Map(coordinateRegion: $viewModel.region)
    }
}

更新

这是来自诊断的消息。关闭 Xcode 清理派生数据似乎无法解决它，所以我认为我的问题在于我的声明之一：

RemoteHumanReadableError: Failed to update preview.

The preview process appears to have crashed.

Error encountered when sending 'render' message to agent.

==================================

|  RemoteHumanReadableError: The operation couldn’t be completed. (BSServiceConnectionErrorDomain error 3.)
|  
|  BSServiceConnectionErrorDomain (3):
|  ==BSErrorCodeDescription: OperationFailed

更新 2

我调整了我的数据模型并从中添加了一个计算区域变量，所以我现在是如何获取该区域的：

extension Feature /* Feature is a Codable struct */ {
    var region: MKCoordinateRegion {
        let center = CLLocationCoordinate2D(latitude: geometry.coordinates[0],
                                            longitude: geometry.coordinates[1])
        let span = MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0)
        let region = MKCoordinateRegion(center: center,
                                        span: span)
        
        return region
    }
}

在jnpdx's 的建议下，我将视图模型上的区域更新为 @Published。

class EarthquakeViewModel: ObservableObject {
    `@Published private(set) var quakeData: Feature
    `@Published var region: MKCoordinateRegion
    
    init(quakeData: Feature) {
        self.quakeData = quakeData
        region = quakeData.region
    }
    
    public lazy var title: String = {
        quakeData.properties.title
    }()
}

最后，我的观点如下：

struct EarthquakeView: View {
    @ObservedObject var viewModel: EarthquakeViewModel
    
    @State var region: MKCoordinateRegion
    
    init(viewModel: EarthquakeViewModel) {
        self.viewModel = viewModel
        _region = State(initialValue: viewModel.region)
    }
    
    var body: some View {
        VStack {
            Text(viewModel.title)
            Map(coordinateRegion: $region)
        }
    }
}

新的错误是这样的。关闭 Xcode、重新启动、清理派生数据等似乎无法解决它，所以我很快得出结论，我缺少一些基本的东西：

PreviewUpdateTimedOutError：更新时间超过 5 秒 来自 CombineQuake.app (16766) 中 EarthquakeView_Previews 的预览 耗时超过 5 秒。

更新 3

预览初始化：

struct EarthquakeView_Previews: PreviewProvider {
    static var previews: some View {
        
        let quakeData = EarthQuakeData(mag: 6.5,
                                       place: "32km W of Sola, Vanuatu",
                                       time: 1388592209000,
                                       updated: 1594407529032,
                                       tz: 660,
                                       url: "https://earthquake.usgs.gov/earthquakes/eventpage/usc000lvb5",
                                       detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=usc000lvb5&format=geojson",
                                       felt: nil,
                                       cdi: nil,
                                       mmi: nil,
                                       alert: nil,
                                       status: "reviewed",
                                       tsunami: 1,
                                       sig: 650,
                                       net: "us",
                                       code: "c0001vb5",
                                       ids: ",pt14001000,at00myqcls,usc000lvb5,",
                                       sources: "pt,at,us",
                                       types: "cap,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary",
                                       nst: nil,
                                       dmin: 3.997,
                                       rms: 0.76,
                                       gap: 14.0,
                                       magType: "mww",
                                       type: "earthquake",
                                       title: "M 6.5 - 32km W of Sola, Vanuatu")
        let geometry = Geometry(type: "Point",
                                coordinates: [167.249, -13.8633, 187.0])
        let earthquake = Feature(type: "Feature",
                                 properties: quakeData,
                                 geometry: geometry,
                                 id: "usc000lvb5")
        
        let viewModel = EarthquakeViewModel(quakeData: earthquake)
        
        
        EarthquakeView(viewModel: viewModel)
    }
}

Answer 1

如果您在模拟器而不是预览版上运行它，您会得到一个更有用的错误：

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Invalid Region <center:+167.24900000, -13.86330000 span:+1.00000000, +1.00000000>'

我变了：

let geometry = Geometry(type: "Point",
                                coordinates: [167.249, -13.8633, 187.0])

到

let geometry = Geometry(type: "Point",
                                coordinates: [45, 34, 187.0])

效果很好。

您的纬度 167.249 超出了 -90 到 90 的范围，这是有效范围。