如何在Mapbox GL JS中基于降雪深度值设置栅格图层透明度？

我有每日降雪深度的栅格数据，想用Mapbox GL JS制作的动画地图叠加展示。选择用JS而非上传到Studio，是因为需要通过脚本每日批量更新大量图层。

我的目标是设置栅格图层透明度，让降雪深度较低的区域呈现透明效果，但没找到合适的相关文档。目前已经把图片裁剪为GIF并添加到地图中，代码如下：

map.addSource('Snow_1', {
    'type': 'image',
    'url': 'MY_SNOW_LAYER.gif',
    'coordinates': [
        [-120.000000, 50.000000],
        [-100.000000, 50.000000],
        [-100.000000, 40.000000],
        [-120.000000, 40.000000]
    ]
});
map.addLayer({
    'id': 'Snow_layer_1',
    'type': 'raster',
    'source': 'Snow_1',
    'paint': {
        'raster-fade-duration': 0,
        'raster-opacity': 0.75,// change to data-driven!
    }
});

我认为可以在paint属性中设置透明度，但尚未找到正确配置方式。

要实现基于降雪深度的动态透明度，不能直接用全局的raster-opacity，需要用数据驱动样式或自定义着色器来实现，以下是两种可行方案：

方案一：基于数值栅格的raster-color-mix映射 #

如果你的GIF是单波段数值栅格（直接存储降雪深度数值，而非彩色渲染图），可以用raster-color-mix将不同深度的像素映射为带透明度的颜色：

map.addLayer({
    'id': 'Snow_layer_1',
    'type': 'raster',
    'source': 'Snow_1',
    'paint': {
        'raster-fade-duration': 0,
        'raster-color-mix': [
            'interpolate',
            ['linear'],
            ['raster-value'], // 获取当前像素的降雪深度数值
            0, ['rgba', 0, 0, 0, 0], // 深度0时完全透明
            5, ['rgba', 173, 216, 230, 0.5], // 深度5时半透明
            20, ['rgba', 255, 255, 255, 1] // 深度20时完全不透明
        ]
    }
});

你可以根据实际降雪深度范围和视觉需求，调整插值的数值和对应的颜色透明度。

方案二：自定义着色器解析彩色GIF #

如果你的GIF是已经渲染好的彩色降雪图，需要通过自定义片段着色器解析像素颜色，反推出降雪深度后再映射透明度：

map.addLayer({
    'id': 'Snow_layer_1',
    'type': 'raster',
    'source': 'Snow_1',
    'paint': {
        'raster-fade-duration': 0,
        'raster-shader-fragment': `
            void main() {
                vec4 color = texture2D(raster, v_texcoord);
                // 假设降雪深度与蓝色通道值正相关，根据你的颜色规则修改
                float snowDepth = color.b * 100.0; // 将0-1的通道值转为0-100的深度
                // 深度<1完全透明，1-20之间透明度从0过渡到1，>20保持不透明
                float opacity = step(1.0, snowDepth) * smoothstep(1.0, 20.0, snowDepth);
                gl_FragColor = vec4(color.rgb, opacity);
            }
        `
    }
});

注意：需要根据你GIF的颜色编码逻辑调整着色器中的通道（比如用color.r对应红色通道）和深度转换系数。

批量更新提示 #

可以把上述图层配置封装成函数，通过循环生成不同的图层ID和数据源路径，配合脚本实现每日批量更新。

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