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

动态墙面

一条三百多米长的墙面,高度按正弦波沿路径起伏并缓慢推进, 墙顶再叠一条同步变化的光带,用来表达信号强度、水位或热流。

CesiumJS 1.121 · 更新 2026-10-27
源码与运行效果
运行效果

墙的几何是怎么定义的

wall.positions 给出墙面在地表的走向,只包含经纬度; 高度由 minimumHeights 与 maximumHeights 两个数组逐点指定,长度必须和 positions 一致。示例的底边固定为 0, 顶边则在 1200 米的基础上叠加波动。

两个数组长度不一致时不会报错,但会缺一段墙或者整面墙消失,排查起来很费时间。 生成时统一用同一个 for 循环产出三个数组,是避免这类问题的简单办法。

为什么每帧重建数组

高度数组是普通 JS 数组,Cesium 不会感知它的内容变化。把它包进 CallbackProperty 并设 isConstant: false 之后, 每帧都会重新调用取值函数,墙的顶点才会更新。

墙顶的光带用同一个高度函数生成三维坐标数组,两处共用一份相位, 所以光带始终贴着墙沿。两处各写一份相位计算,稍有偏差就会看到光带浮空。

可调参数

位置改什么效果
波动幅度滑杆200 到 1200 米波峰波谷的落差
Math.sin(f * Math.PI * 3 - t)3 改成 6波长减半,波更密
% 8000改成 20000波动推进速度变慢
WALL_COLOR 的 alpha0.42 改成 0.8墙面更实,光带对比减弱
N = 56改成 16墙的折面变粗,起伏变成折线

开了光照才有明暗。墙面是竖直的几何体,示例打开了 globe.enableLighting,墙的两侧才会呈现不同亮度, 否则看上去是一片纯色平面,起伏只能靠轮廓判断。

同类用法

波浪墙只是动态墙面的一种。把高度函数换成真实数据即可: 沿河的水位变化、沿管线的压力分布、沿边界的信号强度。 数据是固定时刻的剖面时,不需要 CallbackProperty, 直接把一次算好的数组赋给 maximumHeights 更省性能。