How to optimize SwiftUI Map drag performance when many annotaitons showing under macOS? - macos

Question

This is really a curious problem for SwiftUI Map under macOS.
The code is definitely the same both on macOS & iOS/iPadOS, if we add tens of annotations on the map, then drag around, it's very smooth on the iOS/iPadOS, but feeling stuck, stuck and stuck on the macOS.
Is there any special coding thing we forget to setting on macOS for SwiftUI map? It's really confusion for the same code but different performance consequences...
Here is the full project files you may download from OneDrive:
https://1drv.ms/u/s!Ank9gPMc1GKYk_UlZ2V3BC_BArMofQ?e=Nsco9k
Below is the code you can check to:
import SwiftUI
import MapKit
struct ContentView: View {
#State var annotationTrackList = [TyphoonMKAnnotation]()
#State var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 31.7, longitude: 118.4),
latitudinalMeters: 100_000,
longitudinalMeters: 100_000)
var body: some View {
ZStack {
Map(coordinateRegion: $region, annotationItems: annotationTrackList) { item in
MapAnnotation(coordinate: item.coordinate) {
ZStack(alignment: .center) {
//color
Image(systemName: "bubble.middle.bottom.fill")
.resizable()
.frame(width: 32, height: 32)
.foregroundColor(item.color)
.aspectRatio(contentMode: .fit)
//icon
Image(systemName: "tornado")
.resizable()
.frame(width: 16, height: 16)
.aspectRatio(contentMode: .fit)
.foregroundColor(.white)
}
//location title
Text(item.title ?? "")
.font(Font.system(size: 11, weight: .semibold))
.foregroundColor(.white)
}
}
}
.ignoresSafeArea()
.onAppear {
initialValues()
}
}
private func initialValues() {
var annotationList = [TyphoonMKAnnotation]()
let jsonData = TyphoonJsonData()
//forecast
let forecastJson = jsonData.forecast()
guard
let forecastList = forecastJson["forecast"].array
else { return }
for item in forecastList {
let type = item["type"].stringValue
let latitude = item["lat"].stringValue
let longitude = item["lon"].stringValue
let coordinate = CLLocationCoordinate2D(latitude: Double(latitude)!, longitude: Double(longitude)!)
let annotation = TyphoonMKAnnotation(coordinate: coordinate)
annotation.title = type
annotation.color = .pink
annotationList.append(annotation)
}
//history
let trackJson = jsonData.track()
guard
let trackList = trackJson["track"].array
else { return }
for item in trackList {
let type = item["type"].stringValue
let latitude = item["lat"].stringValue
let longitude = item["lon"].stringValue
let coordinate = CLLocationCoordinate2D(latitude: Double(latitude)!, longitude: Double(longitude)!)
let annotation = TyphoonMKAnnotation(coordinate: coordinate)
annotation.title = type
annotation.color = .green
annotationList.append(annotation)
}
self.annotationTrackList = annotationList
}
}
class TyphoonMKAnnotation: Identifiable {
let id = UUID()
var coordinate: CLLocationCoordinate2D
var title: String?
var subtitle: String?
var index: Int?
var color: Color?
init(coordinate: CLLocationCoordinate2D) {
self.coordinate = coordinate
}
}