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

瓦片图层样式切换

同一份页面内生成的单波段数据,用灰度、伪彩、分级三种映射重绘,切换时替换 ImageStatic 的源。

OpenLayers 10.3.1 · 对应官方 cog-style.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

同一份数据换一种像素映射就是另一种「图层样式」。灰度直接 v × 255; 伪彩把归一化值送进三段色带;分级先量化到 6 个等级再套色带,便于判读等值区间。

示例每次重绘 canvas 后新建一个 ol.source.ImageStatic 赋给图层; WebGL 瓦片图层则可以直接改 style 里的 color 表达式, 不重新解码数据。

操作结果
选择「灰度」按原始值输出灰阶
选择「伪彩」按色带映射,层次更明显
选择「分级」画面变成 6 个色阶,便于分区判读