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即可。
三维热力图效果