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

WebGL 瓦片调色

三个滑块分别调整曝光、对比度和饱和度,画面变化由 GPU 完成,无需重新请求瓦片。

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

说明

WebGLTile 的样式支持 exposure、contrast、saturation 三个顶层属性,值可以是样式变量。滑块通过 updateStyleVariables() 写入新值,瓦片纹理保持不变,只重跑片元着色。这个能力适合做底图调色、夜间模式或影像增强。

操作结果
拖动「曝光」整体亮度变化,暗部细节随之提亮或压暗
拖动「对比度」明暗差异加大或收敛
拖动「饱和度」颜色从灰阶过渡到浓艳

三项参数都作用在归一化像素上,取值一般在 -1 到 1;超过范围容易过曝或产生色带。