经纬志
首页 / OpenLayers / 使用示例

图层透明度

两个配色不同的底图叠在一起,调上层透明度就是在两者之间做交叉溶解。 也可用来把专题图压暗,让下层的路网透出来。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

opacity 取值 0 到 1,构造时可写进图层参数, 运行时用 setOpacity() 修改,改动立即生效且不触发瓦片重新请求。 和 setVisible() 的区别是它保留图层参与渲染,只改变合成时的透明度。

取值效果
0完全透明,效果等同隐藏,但仍参与合成
0.6两种风格混合,路网密度叠加
1上层完全覆盖下层

示例的上层用 ol.source.XYZ 指向 Humanitarian 瓦片, 与标准 OSM 的城市配色差异明显,混合效果才看得出来。 透明度对瓦片、矢量、WMS 图层都适用。

透明度会参与 canvas 合成。导出图片前如果某层透明度是小数, 合成时按图层顺序逐层绘制,最终 PNG 里的观感与屏幕一致。