当前位置:   article > 正文

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

cesium 三维热力图

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

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

 

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

  1. Heatmap.create({
  2. // ...
  3. gradient: {
  4. '0.3': 'green',
  5. '0.5': 'blue',
  6. '0.8': 'yellow',
  7. '0.95': 'red'
  8. }
  9. });

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

  1. Heatmap.create({
  2. // ...
  3. gradient: {
  4. '0.0': 'black',
  5. '1.0': 'white'
  6. }
  7. });

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

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

 

 正常的热力图纹理

 

灰度纹理

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

5、着色器处理

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

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

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

 

三维热力图效果 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/760738
推荐阅读
相关标签
  

闽ICP备14008679号