MapKit Tile Overlay 需要很长时间才能加载

Question

我正在尝试构建一个循环覆盖图块的应用程序。 问题是地图图块在地图显示时需要永远重新加载。 解决此问题的最佳方法是什么？ 我不确定这是否是我认为 MapKit 本身存在的缓存问题。 我的猜测是这是一个 Swift 重绘问题。 我的代码如下，感谢您的帮助。

//  Copyright 2020 Oklahoma Weather Blog
//

import SwiftUI

import MapKit
import SwiftSoup


/*
struct RadarMapView: UIViewRepresentable {

    
    var coordinate: CLLocationCoordinate2D
    var tileRenderer = MKOverlayRenderer()
    
    func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
        guard let tileOverlay = overlay as? MKTileOverlay else {
            return MKOverlayRenderer()
        }
        
        return MKTileOverlayRenderer(tileOverlay: tileOverlay)
    }
    
    func makeUIView(context: Context) -> MKMapView {
        var template = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        template = "https://tilecache.rainviewer.com/v2/ radar/1600575600/512/{z}/{x}/{y}/6/0_1.png"
        let overlay = MKTileOverlay(urlTemplate:template)

      overlay.canReplaceMapContent = false
        let mapView = MKMapView(frame: .zero)
        var renderedOverlay = MKTileOverlayRenderer(tileOverlay: overlay)
        mapView.addOverlay(overlay, level: .aboveLabels)
        mapView.setNeedsDisplay()
        return mapView
    }

    func updateUIView(_ view: MKMapView, context: Context) {

        let span = MKCoordinateSpan(latitudeDelta: 0.3, longitudeDelta: 0.3)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        
    
        view.setRegion(region, animated: true)
    }
}
 */

func getTimesURL() -> [String] {
    let myURLString = "https://api.rainviewer.com/public/maps.json"
    guard let myURL = URL(string: myURLString) else {
        printToConsole("Error: \(myURLString) doesn't seem to be a valid URL")
        return []
    }

    do {
        let myHTMLString = try String(contentsOf: myURL)
        do {
           let doc: Document = try SwiftSoup.parse(myHTMLString)
            
            let text = try doc.text()
            let resultArray = text.trimmingCharacters(in: CharacterSet(charactersIn: "[]"))
                .components(separatedBy:",")
            return resultArray

            
        } catch Exception.Error( _, let message) {
            printToConsole(message)
        } catch {
            printToConsole("error")
        }
    } catch let error as NSError {
        printToConsole("Error: \(error)")
    }
    return []
    
}




func getOverlays() -> [MKTileOverlay] {
    var overlays: [MKTileOverlay] = []
    for time in getTimesURL() {
        let template = "https://tilecache.rainviewer.com/v2/radar/\(time)/256/{z}/{x}/{y}/7/1_1.png"
        
        let overlay = MKTileOverlay(urlTemplate:template)
        overlays.append(overlay)
    }

    return overlays
    
}


struct RadarView: View {
    private static let mapStyles: [MKMapType] = [.hybrid, .hybridFlyover, .mutedStandard, .satellite, .satelliteFlyover, .standard]
    @State var mapTime = "1600585200"
    

    let cache = NSCache<NSString, MKTileOverlay>()
    
    @AppStorage("selectedMapStyle") var selectedMapStyle = 0
    
    @State private var showingSheet = false
    
    private static var overlayArray: [MKTileOverlay] {
        getOverlays()
    }
    
    private static var timeArray: [String] {
        getTimesURL()
    }
    
    func dateToString(_ epoch: String) -> String{


        let dateFormatterPrint = DateFormatter()
        dateFormatterPrint.dateFormat = "MM/dd hh:mm a"

        let date = Date(timeIntervalSince1970: TimeInterval(Int(epoch)!))
        return dateFormatterPrint.string(from: date)

    }
    
    
    @State private var timeIndex: Double = 0
    @State private var loopMap: Bool = false
    @State var radarTimer: Timer?

    
    
    var body: some View {
        VStack{
            ZStack(alignment: .top) {
                RadarMapView(mapStyle: RadarView.mapStyles[selectedMapStyle], overlay: RadarView.overlayArray[Int(timeIndex)]).edgesIgnoringSafeArea(.bottom)
                
            HStack{
                VStack{
                    Slider(value: $timeIndex.animation(.linear), in: 0...9, step: 1)
                    Text("\(dateToString(RadarView.timeArray[Int(timeIndex)]))")
                }
                
                Button(action: {
                    loopMap.toggle()
                    if loopMap {
                        radarTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
                                // do something here
                            if RadarView.overlayArray.count > 0 {
                                withAnimation{
                                timeIndex = Double((Int(timeIndex) + 1) % RadarView.overlayArray.count )
                                }
                            }

                            }
       

                    } else {
                        radarTimer?.invalidate()
                    }
                }, label: {
                    
                    if !loopMap { Text("Loop") }
                    else { Text("Pause") }
                })
                

            }.padding(.horizontal).padding(.horizontal).background(Color.init(UIColor.systemBackground).opacity(0.75))

            }
            
            HStack(){
                Spacer()
                Button(action: {
                    /*
                    selectedMapStyle = (selectedMapStyle + 1) % mapStyles.count
                    */
                    showingSheet.toggle()
                }, label: {
                    Image(systemName: "map.fill").resizable()
                        .renderingMode(.template)
                        .font(.title)
                        .foregroundColor(Color.primary)
                        .frame(width: 20, height: 20)
                }).padding()
            }.padding(.horizontal).padding(.bottom).background(Color.init(UIColor.systemBackground).opacity(0.75))

        }.actionSheet(isPresented: $showingSheet) {
            ActionSheet(title: Text("What map style do you want?"), message: Text("Please select one option below"), buttons: [
                .default(Text("Muted")) { self.selectedMapStyle = 2 },
                .default(Text("Satellite")) { self.selectedMapStyle = 3 },
                .default(Text("Satellite w/ Roads")) { self.selectedMapStyle = 0 },
                .default(Text("Satellite 3-D")) { self.selectedMapStyle = 4 },
                .default(Text("3-D Satellite w/ Roads")) { self.selectedMapStyle = 1 },
                .default(Text("Standard")) { self.selectedMapStyle = 5 },
                .cancel(Text("Dismiss"))
            ])
        }.edgesIgnoringSafeArea(.bottom).navigationBarTitle("Radar")
    }
}

struct RadarMapView: UIViewRepresentable {
    var mapStyle: MKMapType
    var overlay: MKTileOverlay
    

    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: RadarMapView

        init(_ parent: RadarMapView) {
            self.parent = parent
        }

        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            
            let renderer = MKTileOverlayRenderer(overlay: overlay)
            
            return renderer
        }
    }

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

    func makeUIView(context: Context) -> MKMapView {
        return MKMapView()
    }
    
    
    

    func updateUIView(_ mapView: MKMapView, context: Context) {
        
        // var template = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        //1600626600
    
        mapView.mapType = self.mapStyle
        mapView.delegate = context.coordinator

        let overlays = mapView.overlays
        mapView.addOverlay(overlay)
        
        let regionRadius: CLLocationDistance = 50000
        let location = CLLocationCoordinate2D(latitude: 33.7490, longitude: -84.3880)
        let coordinateRegion = MKCoordinateRegion(center: location,
                                                  latitudinalMeters: regionRadius * 2.0, longitudinalMeters: regionRadius * 2.0)
        mapView.setRegion(coordinateRegion, animated: true)
        for overlay in overlays {
            // remove all MKPolyline-Overlays
            if overlay is MKTileOverlay {
                mapView.removeOverlay(overlay)
            }
        }
        
    }
}

struct RadarView_Previews: PreviewProvider {
    static var previews: some View {
        RadarView()
    }
}

Answer 1

几天前我遇到了类似的问题（使用不同的磁贴服务器）并通过使用 512px 磁贴解决了它。

我的理论是，几乎没有人使用 256 像素的图块，因此服务器不会缓存它们。

做类似的事情

func getOverlays() -> [MKTileOverlay] {
    var overlays: [MKTileOverlay] = []
    for time in getTimesURL() {
        let template = "https://tilecache.rainviewer.com/v2/radar/\(time)/512/{z}/{x}/{y}/7/1_1.png"
    
        let overlay = MKTileOverlay(urlTemplate:template)
        overlay.tileSize = CGSize(width: 512, height: 512)
        overlays.append(overlay)
    }

    return overlays

}