如何拥有两个具有不同不透明度的 mapbox 栅格图层？答案

【问题标题】：How to have two mapbox raster layers with different opacities?如何拥有两个具有不同不透明度的 mapbox 栅格图层？
【发布时间】：2022-12-11 03:16:10
【问题描述】：

我使用的是 Mapbox GL API，我遇到了一个问题，如果我添加 2 个图块层，那么绘画对象中第二层的不透明度将被忽略。有谁知道这是为什么？在浏览器中，两个图块图层的不透明度均为 1。

let style1 = {
    id: "source1-tile",
    type: "raster",
    source: "source1",
    paint: {
        "raster-opacity": 1.0
    },
}
this.map.addLayer(style1);

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


// print result
console.log(this.map.getStyle().layers)

// this shows the following:
/* 
[
    {
        id: "source1-tile"
        paint: Object { "raster-opacity": 1 }
        source: "source1"
        type: "raster"
    },
    {
        id: "source2-tile"
        source: "source2"
        type: "raster"
    }
] 
*/

【问题讨论】：

该代码看起来不错。请发布指向 codepen 或类似内容的链接，以显示实际问题。

标签： mapbox opacity mapbox-gl-js

【解决方案1】：

注意在 map.load 事件中添加图层。我根据 mapbox-gl 示例制作了这个example。轻松您可以添加更多具有不同不透明度的栅格图层。

    mapboxgl.accessToken = 'pk.eyJ1IjoibHN0aXoiLCJhIjoiY2s5dGtnNTZ2MWVybzNobjEyam0yd2E3MyJ9.6dCvGbS93SKGMbOqZA4Qag';
        const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-87.62, 41.86], 
        zoom: 9 
    });

    map.on('load', () => {
        map.addSource('chicago', {
            'type': 'raster',
            'url': 'mapbox://mapbox.u8yyzaor'
        });
        map.addLayer({
            'id': 'chicago',
            'source': 'chicago',
            'type': 'raster'
        });

  map.setPaintProperty(
    'chicago',
    'raster-opacity',
    0.5
  );

});

【讨论】：