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

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

Cesium中三维热力图的实现思路_第1张图片

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。对应的是一张正常的热力图纹理,一张灰度纹理。

 Cesium中三维热力图的实现思路_第2张图片

 正常的热力图纹理

 

Cesium中三维热力图的实现思路_第3张图片

灰度纹理

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

5、着色器处理

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

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

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

 

三维热力图效果 

你可能感兴趣的:(Cesium,图形渲染,前端)