Mapbox GL JS - 在需要之前加载隐藏的图像叠加层

Question

我在地图加载时加载了多个图像叠加层。我想让它们不可见，或者在以后关闭。通过使用 "visibility:visible" 属性，我打开图像叠加层的按钮工作正常，但我似乎无法弄清楚如何在页面加载时将它们设置为不可见。理想情况下，我希望所有源图像都被加载，但都是不可见的。

这是我正在使用的基本代码片段，注意 "visibility:none" 加载时不起作用。

topleftmapbox.on('load', function() {
topleftmapbox.addSource("source_KEWX_REFLECTIVITY_SWEEP0_4", {
"type": "image",
"url": "KEWX_REFLECTIVITY_SWEEP0_4.gif",
"coordinates": [
[-101.089551, 30.478839], 
[-99.048840, 30.478839], 
[-99.048840, 28.929093],  
[-101.089551, 28.929093] 
]
})



topleftmapbox.addLayer({
"id": "ID_KEWX_REFLECTIVITY_SWEEP0_4",
"source": "source_KEWX_REFLECTIVITY_SWEEP0_4","type": "raster",
"visibility:none",
"paint": {
"raster-opacity": 0.99,

}
})
});

Answer 1

visibility 是一个布局属性，所以你需要这样使用它：

"layout": {"visibility": "none"}

Mapbox GL JS - 在需要之前加载隐藏的图像叠加层

Mapbox GL JS - Loading image overlays as hidden until needed

javascript

image

geospatial

mapbox-gl-js

mapbox-gl