Mapbox FillLayer无法渲染及‘SOURCE_ID不在样式中’报错求助

核心问题 #

报错Source SOURCE_ID is not in style的根源是在地图样式未完全加载完成时就尝试添加数据源。Mapbox的样式加载是异步过程，viewDidLoad中直接调用addSource时，样式还未完成初始化，导致数据源无法正确关联。另外，try!强制解包会掩盖真实错误信息，阻碍问题排查。

修复步骤 #

1. 将数据源与图层操作移至样式加载完成回调
   使用.styleLoaded事件而非.mapLoaded，这是样式初始化完成的准确时机，适合处理所有样式相关操作。
2. 替换强制解包为错误捕获
   用do-catch替代try!，能明确打印错误详情，方便调试。
3. 优化数据源初始化逻辑
   直接通过GeoJSONSource(data:)初始化，简化代码同时避免潜在的配置遗漏。

修复后的完整代码 #

override public func viewDidLoad() {
    super.viewDidLoad()
    let myResourceOptions = ResourceOptions(accessToken: "my_key_here")
    guard let styleURL = URL(string: "mapbox://styles/custom_URL_here"),
          let styleURI = StyleURI(url: styleURL) else {
        print("无效的样式URL")
        return
    }
    let myMapInitOptions = MapInitOptions(resourceOptions: myResourceOptions, styleURI: styleURI)
    
    mapView = MapView(frame: view.bounds, mapInitOptions: myMapInitOptions)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.view.addSubview(mapView)
    
    // 监听样式加载完成事件
    mapView.mapboxMap.onNext(event: .styleLoaded) { [weak self] _ in
        guard let self = self else { return }
        let sourceId = "SOURCE_ID"
        let layerId = "LAYER_ID"
        
        // 初始化GeoJSON数据源
        guard let geoJSONURL = URL(string: "https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/manhattan.geojson") else {
            print("无效的GeoJSON URL")
            return
        }
        let geoJSONSource = GeoJSONSource(data: .url(geoJSONURL))
        
        // 添加数据源到样式
        do {
            try self.mapView.mapboxMap.style.addSource(geoJSONSource, id: sourceId)
        } catch {
            print("添加数据源失败: \(error.localizedDescription)")
            return
        }
        
        // 创建并添加填充图层
        var polygonLayer = FillLayer(id: layerId)
        polygonLayer.source = sourceId
        polygonLayer.fillColor = .constant(StyleColor(.green))
        polygonLayer.fillOpacity = .constant(0.5) // 降低透明度，避免遮挡底图
        
        do {
            try self.mapView.mapboxMap.style.addLayer(polygonLayer)
        } catch {
            print("添加图层失败: \(error.localizedDescription)")
        }
    }
}

额外注意事项 #

• 建议将fillOpacity设置在0.3-0.5区间，既能高亮目标区域，又不会完全遮挡底图信息。
• 确认自定义样式URLmapbox://styles/custom_URL_here有效，且你的accessToken拥有该样式的访问权限。
• 闭包中使用[weak self]避免循环引用，防止内存泄漏。

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