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

月降水量的柱状可视化

降水数据不一定要画成格子。十二根柱子按月份排开,高度与颜色双编码,一年趋势一眼看清。

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

这个示例在做什么

十二根圆柱排成一列,柱高与颜色都映射到月降水量:7 月最高,呈现深蓝; 1 月最矮,颜色偏青。柱底在同一高度,便于直接比较。

降水这类格网产品常被做成面状图层或柱状统计。3D 可视化的好处是能同时表达 「时间序列」和「空间位置」:柱高代表数值,柱的排列代表月份, 颜色做二次编码。换成格网点数据时,用同样的大小与颜色映射渲染点云即可。

关键接口

接口作用
cylinder.length柱体高度,按降水量线性缩放
Color.fromHsl用色相与亮度做数值映射,比 RGB 更均匀
label.disableDepthTestDistance标签永远可见,不被柱体遮挡
outline柱体描边,相邻柱更容易分辨

可以直接改的地方

位置改什么效果
rainfall 数组换成其他城市的数据柱高与配色整体变化
v * 0.7改缩放系数柱体整体变高或变矮
topRadius: 4改成 7柱体变粗
150(配色上限)改成实际最大值颜色映射范围

替代说明:官方示例把 GPM 降水格网数据以 3D Tiles 点云形式加载, 点的颜色与高度映射到降水值。这里用柱状统计复现同一套映射关系, 数量级与配色公式可以直接搬到格网数据上。