热力图点
二百六十个半透明光斑叠在地表上,中心红、外围蓝,边界靠透明度自然过渡。 贴图由 canvas 现画,不引入任何图片文件。
为什么用图标叠加而不是栅格
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 加载,热力强度和色带在服务端算好。