如何使用SwiftUI为Mapbox地图实现无卡顿动态旋转效果

问题根因 #

直接对已经调用.edgesIgnoringSafeArea(.all)的Map视图施加rotationEffect时，视图的渲染边界已经超出屏幕安全区范围，旋转时默认的中心锚点坐标系计算会出现偏移，最终导致图形故障。

正确实现步骤 #

• 调整视图层级，将Map包裹在一个父容器内，将.edgesIgnoringSafeArea(.all)修饰符加在父容器上，避免Map本身的布局边界溢出后影响变换计算
• 给Map视图添加rotationEffect的同时，同步设置.frame(maxWidth: .infinity, maxHeight: .infinity)保证地图撑满父容器，可显式指定anchor: .center作为旋转锚点，避免系统默认计算出现歧义
• 若需要抵消旋转后地图上的标注、自定义控件等元素的旋转偏移，可以同步对叠加的子元素施加反向的rotationEffect

可运行的示例代码 #

import SwiftUI
import MapboxMaps

struct RotatingMapView: View {
    // 存储用户朝向角度，可通过CLLocationManager的heading回调实时更新
    @State private var headingDegree: Double = 0
    
    var body: some View {
        // 父容器统一加忽略安全区修饰符
        ZStack {
            Map()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                // 施加旋转效果，显式指定锚点为中心
                .rotationEffect(Angle(degrees: headingDegree), anchor: .center)
            // 如需保持水平的自定义控件，添加反向旋转即可
            // 例：自定义指南针
            // Image(systemName: "location.north.fill")
            //     .rotationEffect(Angle(degrees: -headingDegree))
            //     .position(x: 50, y: 100)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

额外优化建议 #

• 给headingDegree赋值时添加动画过渡，旋转效果会更顺滑：withAnimation(.linear(duration: 0.2)) { headingDegree = newDegree }
• 如果后续想要进一步提升性能，也可以直接调用Mapbox的map.setCamera方法修改bearing参数实现地图朝向旋转，性能优于视图层级的旋转效果。

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