Cesium中实现立体热力图

Cesium中实现立体热力图

热力图

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

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

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

立体热力图

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

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

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

实际效果展示

cesium立体热力图

目前发现的问题：

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

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

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

原文链接

由于csdn无法放置自定义的html，因此如果想体验实际效果，请移步Cesium中实现立体热力图