如何拥有两个不透明度不同的mapbox栅格图层?

Question

我使用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"
}
] 
*/

Answer 1

注意在地图中添加图层。负载的事件。这个示例是基于mapbox-gl示例创建的。你可以很容易地添加不同透明度的栅格图层。

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
);

});