Cesium中三维热力图的实现思路

1、普通热力图的绘制基于开源库heatmap.js，将数据组织成它需要的格式

heatmap.js需要的输入数据格式 

 

2、使用同一份数据通过heatmap.js绘制两张二维热力图， 一张正常的热力图，一张用灰度表示的热力图（只有黑白两种颜色的渐变）

Heatmap.create({
	// ...
	gradient: {
		'0.3': 'green',
		'0.5': 'blue',
		'0.8': 'yellow',
		'0.95': 'red'
	}
});

heatmap.js中正常热力图的渐变颜色设置

Heatmap.create({
	// ...
	gradient: {
		'0.0': 'black',
		'1.0': 'white'
	}
});

 heatmap.js中灰度热力图的渐变颜色设置

3、heatmap.js绘制出来的是canvas，可以很容易地转换成Cesium的Texture。对应的是一张正常的热力图纹理，一张灰度纹理。

 

 正常的热力图纹理

 

灰度纹理

4、将热力图显示范围的多边形几何体进行三角细分（Cesium提供了三角细分相关的算法，PolygonGeometry.fromPositions方法的granularity参数） ，三角细分后才有足够多的顶点来拉伸不同的高度，产生三维的效果，不然只有多边形的几个角点。

5、着色器处理

在顶点着色器中，从灰度纹理上取颜色值的R分量（0-1范围的浮点数），在模型坐标系下指定顶点坐标的z值为：

底部高程 + 拉伸高度 * R分量

片元着色器很简单，直接从正常的热力图纹理上取颜色值赋给gl_FragColor即可。

 

三维热力图效果