Cesium中实现立体热力图

热力图

在Cesium中实现热力图网上有较为成熟的案例,可参考 CesiumHeatmap

其原理是根据经纬度范围计算 canvas 大小,并将经纬度转化为 canvas 上的坐标。

再利用 heatmap.js 生成热力图,最后将 canvas 贴在地球上即可。

立体热力图

立体热力图事实上是对上面热力图功能的改造。

只不过 CesiumHeatmap 是将 heatmap.js 生成的热力图直接贴在地球上。

而立体热力图是生成一个顶点足够密集的面,再根据热力图上的颜色信息拉伸顶点罢了。

实际效果体验

左键可添加热力点数据,左上方滑动条可调整立体热力图的拉伸高度。

目前发现的问题:

  1. 如果热力点的范围过于小,则生成的面顶点不够密,效果一般。
  2. 如果热力点的范围过于大,则生成的面顶点过于密集,造成卡顿。

目前解决以上问题的方案:

立体热力图面顶点的密度可通过调节参数控制,根据所需要的范围计算合适的参数即可。


Cesium中实现立体热力图
https://www.liaomz.top/2022/10/09/cesium-zhong-shi-xian-li-ti-re-li-tu/
作者
发布于
2022年10月9日
许可协议