如何在iOS端Mapbox SDK中添加雾层以优化3D地图效果

方法一：利用内置大气散射（Atmosphere）实现雾效果（推荐） #

Mapbox iOS SDK的大气散射功能可直接模拟雾层效果，结合相机俯仰角监听动态调整参数，就能实现90°俯仰时遮挡远处地图内容的需求。

实现步骤：

• 地图加载完成后配置大气散射参数，初始设置低浓度雾
• 监听相机状态变化，当俯仰角接近90°时，调大雾浓度和缩短衰减距离

import MapboxMaps

class MapViewController: UIViewController, MGLMapViewDelegate {
    var mapView: MGLMapView!

    override func viewDidLoad() {
        super.viewDidLoad()
        mapView = MGLMapView(frame: view.bounds)
        mapView.delegate = self
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)
    }

    func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
        guard let style = mapView.style else { return }
        
        // 初始化大气散射（雾）配置
        let atmosphere = MGLStyleAtmosphere()
        atmosphere.isEnabled = true
        // 地平线雾浓度（0=完全透明，1=完全不透明）
        atmosphere.hazeHorizon = 0.2
        // 雾衰减距离（单位：米，值越小，雾的遮挡范围越近）
        atmosphere.hazeRange = 6000.0
        style.atmosphere = atmosphere

        // 监听相机动画结束事件，调整雾参数
        mapView.cameraDidChangeAnimationState = { [weak self] mapView, state in
            guard state == .ended else { return }
            self?.adjustFog(for: mapView)
        }
    }

    private func adjustFog(for mapView: MGLMapView) {
        guard let atmosphere = mapView.style?.atmosphere else { return }
        let pitch = mapView.camera.pitch
        
        // 俯仰角≥85°时，强化雾效果
        if pitch >= 85 {
            atmosphere.hazeHorizon = 0.6
            atmosphere.hazeRange = 2500.0
        } else {
            // 恢复默认雾参数
            atmosphere.hazeHorizon = 0.2
            atmosphere.hazeRange = 6000.0
        }
        mapView.style?.atmosphere = atmosphere
    }
}

方法二：自定义样式雾层（精细控制需求） #

如果内置大气效果不够灵活，可以直接在Mapbox样式中配置fog字段，动态修改参数实现效果。

实现要点：

1. 在Mapbox Studio中编辑你的样式，添加fog配置（支持Mapbox Streets v11及以上样式）：

"fog": {
  "range": [2, 10], // 雾的生效缩放级别范围
  "color": "#f0f0f0", // 雾的颜色
  "horizon-blend": 0.6 // 地平线与雾的融合度
}

2. 在代码中监听俯仰角，动态修改样式的fog参数：

private func adjustFog(for mapView: MGLMapView) {
    guard let style = mapView.style else { return }
    let pitch = mapView.camera.pitch
    
    if pitch >= 85 {
        // 缩小雾的生效范围，让近处就开始有雾
        style.setJSONValue([2, 6] as [NSNumber], forKey: "fog.range")
    } else {
        style.setJSONValue([2, 10] as [NSNumber], forKey: "fog.range")
    }
}

注意事项 #

• 确保使用Mapbox iOS SDK v10+版本，旧版本不支持完整的大气散射和雾配置
• 需开启Metal渲染（默认开启，模拟器需支持Metal）
• 雾参数需结合你的地图常用缩放级别调整，避免出现近处遮挡或远处无效果的问题

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