如何使Mapbox GL API中两个栅格图层拥有不同透明度？

问题现象 #

添加两个栅格瓦片图层时，第二个图层的raster-opacity设置被忽略，浏览器中两个图层透明度均为1；打印地图样式发现第二个图层的paint属性完全丢失。

可能原因 #

1. 第二个图层的配置对象（style2）在调用addLayer前，其paint属性被其他代码意外修改或删除
2. Mapbox GL对图层配置对象的引用处理存在问题，导致配置未被正确解析
3. 使用的Mapbox GL版本存在图层配置相关的bug

解决方案 #

方案1：检查配置对象是否被篡改

在调用addLayer前打印style2，确认paint属性是否存在：

console.log('添加前的style2:', style2);
this.map.addLayer(style2);

如果此时paint已经丢失，排查其他代码是否修改了该对象。

方案2：传递配置副本避免引用问题

使用对象展开运算符或Object.assign创建配置副本后再添加，避免引用共享导致的意外修改：

let style2 = {
    id: "source2-tile",
    type: "raster",
    source: "source2",
    paint: {
        "raster-opacity": 0.5
    },
};
// 传递副本
this.map.addLayer({...style2});

方案3：直接在addLayer中传入完整配置

跳过变量赋值，直接将配置对象传入addLayer方法：

this.map.addLayer({
    id: "source2-tile",
    type: "raster",
    source: "source2",
    paint: {
        "raster-opacity": 0.5
    },
});

方案4：手动设置paint属性

如果上述方法无效，先添加图层再用setPaintProperty手动设置透明度：

// 先添加无paint配置的图层
this.map.addLayer({
    id: "source2-tile",
    type: "raster",
    source: "source2",
});
// 手动设置透明度
this.map.setPaintProperty("source2-tile", "raster-opacity", 0.5);

方案5：升级Mapbox GL版本

如果使用的是较旧版本，尝试升级到最新稳定版，修复可能存在的已知bug。

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