首页 / OpenLayers / 使用示例
图层透明度
两个配色不同的底图叠在一起,调上层透明度就是在两者之间做交叉溶解。 也可用来把专题图压暗,让下层的路网透出来。
源码与运行效果
说明
opacity 取值 0 到 1,构造时可写进图层参数,
运行时用 setOpacity() 修改,改动立即生效且不触发瓦片重新请求。
和 setVisible() 的区别是它保留图层参与渲染,只改变合成时的透明度。
| 取值 | 效果 |
|---|---|
| 0 | 完全透明,效果等同隐藏,但仍参与合成 |
| 0.6 | 两种风格混合,路网密度叠加 |
| 1 | 上层完全覆盖下层 |
示例的上层用 ol.source.XYZ 指向 Humanitarian 瓦片,
与标准 OSM 的城市配色差异明显,混合效果才看得出来。
透明度对瓦片、矢量、WMS 图层都适用。
透明度会参与 canvas 合成。导出图片前如果某层透明度是小数, 合成时按图层顺序逐层绘制,最终 PNG 里的观感与屏幕一致。