SwiftUI + MapKit 大量Annotation渲染性能优化求助

我正在开发一个使用SwiftUI和MapKit在地图上绘制Annotation的项目，当前方案可处理约1000个Annotation，但需要支持至少10000个且无卡顿或性能问题。我编写了如下示例代码，实现在地图上绘制红色圆形标注，可通过“Add”按钮添加标注，还通过Tracker类追踪标注渲染次数。

import SwiftUI
import MapKit

struct MapAnnotation {
    var id: Int
    var location: CLLocationCoordinate2D
}

class Tracker {
    var done = 0
    static let shared = Tracker()
}

struct ContentView: View {
    @State private var mapAnnotations: [MapAnnotation] = .init()
    var body: some View {
        ZStack {
            Map() {
                ForEach(mapAnnotations, id: \.id) { intensity in
                    Annotation("", coordinate: intensity.location, content: {
                        Circle()
                            .foregroundStyle(Color.red)
                            .frame(width: getWidth(intensity: intensity))
                    })
                }
            }
            
            Button(action: {
                print("Adding")
                Tracker.shared.done = 0
                mapAnnotations.append(.init(id: .random(in: 0 ... Int.max), location: .init(latitude: .random(in: -5 ... 5), longitude: .random(in: -5 ... 5))))
            }, label: {
                Text("Add")
                    .font(.title)
                    .foregroundStyle(Color.red)
            })
        }
    }
    
    private func getWidth(intensity: MapAnnotation) -> CGFloat {
        Tracker.shared.done += 1
        print(Tracker.shared.done)
        return 10
    }
}

#Preview {
    ContentView()
}

运行上述代码（Xcode 15.1，iOS 17.2 SDK）会输出如下内容：

Adding
1
2
Adding
1
2
3
Adding
1
2
3
4

这表明每次添加新标注时，系统会重新渲染所有已存在的标注。因此，当处理5000个标注的数据集时，再添加1个会导致全部5001个标注重绘，引发卡顿和性能问题。请问有什么方法可以优化Annotation渲染以避免性能问题？

更新：批量添加标注后的性能分析 #

我修改了代码以支持批量添加标注：

import SwiftUI
import MapKit

struct MapAnnotation {
    var id: Int
    var location: CLLocationCoordinate2D
    // Other Data
}

struct ContentView: View {
    @State private var mapAnnotations: [MapAnnotation] = .init()
    var body: some View {
        ZStack {
            Map() {
                ForEach(mapAnnotations, id: \.id) { mapAnnotation in
                    Annotation("", coordinate: mapAnnotation.location, content: {
                        Circle()
                            .foregroundStyle(Color.red)
                            .frame(width: 10)
                    })
                }
            }
            
            VStack {
                Button(action: {
                    mapAnnotations.append(.init(id: .random(in: 0 ... Int.max), location: .init(latitude: .random(in: -5 ... 5), longitude: .random(in: -5 ... 5))))
                }, label: {
                    Text("Add One")
                        .font(.title)
                        .foregroundStyle(Color.red)
                })
                
                Button(action: {
                    for _ in 0 ... 999 {
                        mapAnnotations.append(.init(id: .random(in: 0 ... Int.max), location: .init(latitude: .random(in: -5 ... 5), longitude: .random(in: -5 ... 5))))
                    }
                }, label: {
                    Text("Add Many")
                        .font(.title)
                        .foregroundStyle(Color.red)
                })
            }
            .background(Color.black)
        }
    }
}

#Preview {
    ContentView()
}

通过Instruments分析发现，当存在5000个标注时，再添加1个会占用主线程约27秒，导致界面无响应。大部分耗时在MapKit的[MKAnnotationView _metricsDidChange]方法中，不确定能否对此进行优化，恳请提供相关建议。

1. 改用原生MKMapView封装（推荐） #

SwiftUI的Map组件是上层封装，对于大量标注场景，原生MKMapView的标注复用机制能大幅降低开销。通过UIViewRepresentable封装MapView，使用dequeueReusableAnnotationView复用标注视图：

import SwiftUI
import MapKit

// 遵循MKAnnotation协议
class AnnotationModel: NSObject, MKAnnotation {
    let coordinate: CLLocationCoordinate2D
    let id: Int
    
    init(id: Int, coordinate: CLLocationCoordinate2D) {
        self.id = id
        self.coordinate = coordinate
        super.init()
    }
}

// 封装MKMapView
struct MapKitView: UIViewRepresentable {
    var annotations: [AnnotationModel]
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        // 设置初始区域
        let region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))
        mapView.setRegion(region, animated: false)
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 只添加新增的标注，避免全量替换
        let existingIds = Set(uiView.annotations.compactMap { ($0 as? AnnotationModel)?.id })
        let newAnnotations = annotations.filter { !existingIds.contains($0.id) }
        uiView.addAnnotations(newAnnotations)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapKitView
        
        init(_ parent: MapKitView) {
            self.parent = parent
        }
        
        // 复用标注视图
        func mapView(_ mapView: MKMapView, viewFor annotation: any MKAnnotation) -> MKAnnotationView? {
            guard let annotation = annotation as? AnnotationModel else { return nil }
            
            let identifier = "RedCircleAnnotation"
            var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) as? MKMarkerAnnotationView
            
            if annotationView == nil {
                annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: identifier)
                annotationView?.markerTintColor = .red
                annotationView?.glyphImage = nil // 隐藏默认图标，只保留圆形
                annotationView?.displayPriority = .defaultHigh
            } else {
                annotationView?.annotation = annotation
            }
            
            return annotationView
        }
    }
}

// 使用封装的MapView
struct ContentView: View {
    @State private var annotations: [AnnotationModel] = []
    
    var body: some View {
        ZStack {
            MapKitView(annotations: annotations)
            
            VStack {
                Button("Add One") {
                    let newAnnotation = AnnotationModel(id: .random(in: 0...Int.max), coordinate: CLLocationCoordinate2D(latitude: .random(in: -5...5), longitude: .random(in: -5...5)))
                    annotations.append(newAnnotation)
                }
                .font(.title)
                .foregroundColor(.red)
                
                Button("Add Many") {
                    let newAnnotations = (0...999).map { _ in
                        AnnotationModel(id: .random(in: 0...Int.max), coordinate: CLLocationCoordinate2D(latitude: .random(in: -5...5), longitude: .random(in: -5...5)))
                    }
                    // 批量赋值，触发一次更新
                    annotations = annotations + newAnnotations
                }
                .font(.title)
                .foregroundColor(.red)
            }
            .background(.black)
        }
    }
}

2. 优化SwiftUI Map的标注更新 #

如果坚持使用SwiftUI的Map，可以通过让数据模型遵循Equatable，确保ForEach只更新变化的元素：

// 让MapAnnotation遵循Equatable
struct MapAnnotation: Equatable {
    var id: Int
    var location: CLLocationCoordinate2D
    
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.id == rhs.id && lhs.location.latitude == rhs.location.latitude && lhs.location.longitude == rhs.location.longitude
    }
}

// 在Map中使用ForEach时，利用Equatable优化
Map() {
    ForEach(mapAnnotations) { mapAnnotation in
        Annotation("", coordinate: mapAnnotation.location) {
            Circle()
                .foregroundStyle(.red)
                .frame(width: 10)
        }
    }
}

同时，批量添加时避免逐个append，改用数组拼接赋值，减少视图更新次数：

// 批量添加时
let newAnnotations = (0...999).map { _ in
    MapAnnotation(id: .random(in: 0...Int.max), location: CLLocationCoordinate2D(latitude: .random(in: -5...5), longitude: .random(in: -5...5)))
}
mapAnnotations = mapAnnotations + newAnnotations

3. 视口过滤：只渲染可见区域内的标注 #

监听地图的可视区域，只渲染当前可见范围内的标注，大幅减少需要处理的标注数量：

struct ContentView: View {
    @State private var mapAnnotations: [MapAnnotation] = []
    @State private var visibleAnnotations: [MapAnnotation] = []
    @State private var cameraPosition: MapCameraPosition = .region(MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10)))
    
    var body: some View {
        ZStack {
            Map(position: $cameraPosition) {
                ForEach(visibleAnnotations) { mapAnnotation in
                    Annotation("", coordinate: mapAnnotation.location) {
                        Circle()
                            .foregroundStyle(.red)
                            .frame(width: 10)
                    }
                }
            }
            .onChange(of: cameraPosition) { oldValue, newValue in
                guard let region = newValue.region else { return }
                // 过滤出当前区域内的标注
                visibleAnnotations = mapAnnotations.filter { annotation in
                    region.contains(annotation.location)
                }
            }
            
            // 按钮部分...
        }
    }
}

4. 改用MKOverlay（适合大量同类型简单标注） #

如果是大量圆形标注，使用MKCircleOverlay替代单个Annotation，Overlay是基于矢量的渲染，性能远高于单个Annotation：

// 封装带Overlay的MapView
struct OverlayMapView: UIViewRepresentable {
    var coordinates: [CLLocationCoordinate2D]
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        let region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))
        mapView.setRegion(region, animated: false)
        return mapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // 移除旧Overlay，添加新的（也可以增量更新）
        uiView.removeOverlays(uiView.overlays)
        let circles = coordinates.map { MKCircle(center: $0, radius: 500) } // 半径500米
        uiView.addOverlays(circles)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        func mapView(_ mapView: MKMapView, rendererFor overlay: any MKOverlay) -> MKOverlayRenderer {
            guard let circleOverlay = overlay as? MKCircle else { return MKOverlayRenderer(overlay: overlay) }
            let renderer = MKCircleRenderer(circle: circleOverlay)
            renderer.fillColor = .red.withAlphaComponent(0.5)
            renderer.strokeColor = .red
            renderer.lineWidth = 1
            return renderer
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var coordinates: [CLLocationCoordinate2D] = []
    
    var body: some View {
        ZStack {
            OverlayMapView(coordinates: coordinates)
            
            VStack {
                Button("Add One") {
                    coordinates.append(CLLocationCoordinate2D(latitude: .random(in: -5...5), longitude: .random(in: -5...5)))
                }
                // 批量添加按钮...
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者xkam1x