如何为Mapbox SwiftUI视图添加兼容任意视口状态的缩放按钮

嘿，我刚好碰到过类似的问题！你当前的实现只在.camera视口状态下有效，核心原因是.idle状态下viewport.camera会返回nil，根本拿不到当前的相机参数。别担心，下面给你一个通用方案，不管视口处于.camera、.idle还是其他自定义状态，都能完美实现缩放功能。

核心思路 #

我们需要实时获取地图当前的实际相机状态，而不是依赖视口的配置参数。Mapbox SwiftUI的Map视图提供了onCameraChange回调，能在相机变化时实时返回当前的相机信息——这就解决了.idle状态下拿不到参数的问题。之后我们基于这个实时相机参数计算新的缩放级别，再通过视口动画更新地图即可。

完整实现代码 #

import MapboxMaps
import SwiftUI

struct MapZoomDemoView: View {
    @State private var viewport: Viewport = .idle
    // 保存当前地图的实时相机状态
    @State private var currentCamera: CameraOptions?

    var body: some View {
        Map(viewport: $viewport)
            // 实时监听相机变化，更新currentCamera
            .onCameraChange(for: .continuous) { context in
                currentCamera = context.camera
            }
            .overlay(alignment: .trailing) {
                VStack(spacing: 12) {
                    // 放大按钮
                    Button {
                        adjustZoom(by: 1)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .buttonStyle(MapFloatingButtonStyle())

                    // 缩小按钮
                    Button {
                        adjustZoom(by: -1)
                    } label: {
                        Image(systemName: "minus")
                    }
                    .buttonStyle(MapFloatingButtonStyle())
                }
                .padding(.trailing, 16)
                .padding(.bottom, 80)
            }
    }

    // 统一的缩放调整方法
    private func adjustZoom(by delta: Double) {
        guard let currentCam = currentCamera else { return }
        // 处理缩放级别为nil的情况，默认设为10
        let currentZoom = currentCam.zoom ?? 10
        // 限制缩放范围在Mapbox支持的合理区间（2-22，你可以根据需求调整）
        let newZoom = min(max(currentZoom + delta, 2), 22)
        
        // 通过视口动画更新相机，保留原有的方位角和俯仰角
        withViewportAnimation {
            viewport = .camera(
                center: currentCam.center,
                zoom: newZoom,
                bearing: currentCam.bearing,
                pitch: currentCam.pitch
            )
        }
    }
}

// 自定义浮动按钮样式（你可以根据自己的UI需求修改）
struct MapFloatingButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(width: 44, height: 44)
            .background(Color.white)
            .cornerRadius(22)
            .shadow(color: .black.opacity(0.2), radius: 4, x: 0, y: 2)
            .opacity(configuration.isPressed ? 0.8 : 1.0)
            .foregroundColor(.black)
    }
}

关键细节解释 #

1. 实时相机监听：onCameraChange(for: .continuous)会在地图相机有任何变化时触发，确保currentCamera始终是最新的状态，不管视口是什么类型。
2. 缩放范围限制：加入min(max(...))是为了避免缩放超出Mapbox地图支持的范围，防止出现异常显示。
3. 保留原有视角：更新视口时保留了原有的bearing（方位角）和pitch（俯仰角），用户缩放时不会突然改变视角，体验更连贯。
4. 动画流畅性：使用withViewportAnimation来更新视口，Mapbox会自动处理平滑的过渡动画，比直接修改相机参数更自然。

额外说明 #

如果你不想切换到.camera视口状态（比如想保持.idle），也可以直接通过MapboxMap实例调用setCamera(to:)方法，但用视口的方式更符合SwiftUI的声明式状态管理，代码也更简洁易维护。

内容来源于stack exchange