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

河流的属性驱动样式

一条河的宽度、颜色、标注,都可以由属性驱动。视距一变,细节随之增减,这就是属性 LOD。

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

这个示例在做什么

一条河从西向东穿过城区,河宽与颜色随「流量」属性变化,分段标注显示每段的瞬时流量。 流量用正弦函数模拟涨落,颜色由浅蓝到深蓝。

拉近到 900 米以内会显示分段数值,拉远则自动隐藏,只保留河流主体。 这就是属性 LOD:细节随视距增减。真实数据里,属性 LOD 由瓦片层级自动完成, 同一份数据在不同层级带不同详细程度的属性。

关键接口

接口作用
CallbackProperty宽度与颜色逐帧求值,实现动态样式
ColorMaterialProperty折线材质,可包一层回调属性
label.show按视距切换标注显隐
Cartesian3.distance判断当前处于近景还是远景

可以直接改的地方

位置改什么效果
flow 初值数组换成真实流量河流宽度与颜色的基准
Math.sin(t * 0.8 + i * 0.7)改频率与相位涨落节奏与各段的差异
d < 900改成 300标注只在更近处显示
width: 4 + flow[3]/8改公式河宽对流量的响应幅度

替代说明:官方示例按属性选择不同层级的瓦片渲染河流细节。 这里用视距控制标注显隐来演示同一思路;真实数据的属性 LOD 由 tileset 的层级结构自动切换。