C1——cesium用geojson生成热力图

geojson生成热力图cesium加载

效果图:

转载至:Cesium学习笔记-工具篇38-CesiumHeatmap热力图_用户5880835006_新浪博客

先说原理:创建canvas,遍历json文件中的坐标生成热点,把生成的图片弄到canvas上。

上面那位博主的js文件已经做了封装,我们就直接用不用管其他的。但是由于开启了深度检测,导致热力图生成了,但被后加载的地图影像图覆盖,

<div class="cesium-widget">
    <canvas width="1304" height="665" style="image-rendering: pixelated;"></canvas>
</div>

.cesium-widge的div是自动生成的,手动将的z-index=-1;你会看到热力图有出来了。但是点击和拖拽等交互事件都被canvas阻挡。

查找原因:canvas生成时默认是在最上面,但由于地图影像图加载较慢就会出现canvas上面。

解决办法:关掉深度拾取viewer.scene.globe.depthTestAgainstTerrain = false;//深度拾取

对于那位博主的json数据格式是geojson的。需要保证wgs84坐标,如下几个画圈的地方要一致的。

再来说说生成的热力图为空的问题:

1、CesiumHeatmapGL.js中笔者对热力点的大小以及发光强度规定为20和0.05;我用自己的数据生成的就是空的原因就是size太小。所以自己做了一些修改页面上传入size过来。

2、热力点的坐标,因为是canvas上画的坐标原点在左上角,笔者的xy坐标生成的算法不太好理解。我改成了y = (extent.yMax-feature.geometry.coordinates[1])/(extent.yMax-extent.yMin)*heatmapcanvas.clientHeight;

3、对于size大小以及发光强度,我觉得应该由json文件的某个属性决定才比较有意义。所以我进一步修改了代码。但通用性不强因为不同的项目需求不一样。耶不好专门设定一个属性值,就不放代码了。

代码压缩上传了也不知道在哪里看得到?

感谢cumtzheNo1的博客