首页 / OpenLayers / 使用示例
WebGL 海平面淹没
页面内合成的高程数据进入 WebGL 瓦片图层，拖动水位滑块即可看到低地被淹没。
源码与运行效果
说明
高程按 Mapbox Terrain-RGB 公式编码成三波段瓦片，由 ol.source.DataTile 在页面内逐像素生成。ol.layer.WebGLTile 的样式用 ['band', 1] 等表达式还原高程，再用 ['case', ['<=', elevation, ['var', 'level']], ...] 把低于水位的像素染成蓝色。滑块通过 updateStyleVariables() 修改 level，无需重建图层。
| 操作 | 结果 |
|---|---|
| 拖动水位滑块到 0 m | 低洼区域只有少量像素被标蓝 |
| 拖动到 120 m | 大片平原被淹，蓝色覆盖范围明显扩大 |
| 缩放地图 | 新层级瓦片按同一套高程函数重新生成 |
Terrain-RGB 的编码系数必须与数据源一致；band 表达式拿到的是 0–1 归一化值，公式里要乘回 255。