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

热力图点

二百六十个半透明光斑叠在地表上,中心红、外围蓝,边界靠透明度自然过渡。 贴图由 canvas 现画,不引入任何图片文件。

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

为什么用图标叠加而不是栅格

Cesium 没有内置的热力图图层。常见做法有两种:把热度渲染成一张图片贴在地表, 或者像示例这样用大量半透明光斑叠加。前者在地球曲面上会被拉伸变形, 缩放后还会糊;后者完全在 GPU 上合成,任意视角都清晰,代价是光斑数量不能太夸张。

贴图是一张 64×64 的径向渐变:中心不透明,边缘完全透明。每张图标的颜色由 billboard.color 与贴图相乘得到,所以改热度只需要换颜色, 不用重新画图。

权重和颜色的映射

每个采样点到所属簇中心的距离决定权重,距离越近权重越高。权重再走一次 分段线性插值,蓝 → 青绿 → 黄 → 红。光斑尺寸也跟着权重走, 高热区既更红也更大,两层信息叠在一起才像热力图。

数据用固定种子的线性同余随机数生成,刷新页面后分布完全一致, 便于对比不同参数下的效果。

可调参数

位置改什么效果
CLUSTERS改中心坐标、半径、权重热区位置与集中程度
n < 260改成 80 或 600光斑密度,600 以上开始吃 GPU
滑杆「模糊半径」0.3 到 2 倍整体光斑大小,不影响颜色
STOPS换色标与分界点配色方案与冷热分界

光斑边界发脏。图标靠 alpha 叠加,贴图边缘如果还有 1 像素的实色, 大量重叠后会出现方形轮廓。渐变终点必须写成完全透明的 rgba(255,255,255,0),不要写成 rgba(255,255,255,0.01)。

换成真实数据的两种走法

数据是散点表时,直接把每个点按字段值算成权重即可,示例里的随机分布换成 真实坐标就行。数据本身是栅格时,不要逐格建图标,应该把栅格渲染成瓦片, 用 ImageryLayer 加载,热力强度和色带在服务端算好。