cesium 热力图

很多朋友在问热力图怎么做，但是大部分是问的怎么做(这种问题很不好回答，顶多别人只能回答一句用heatmap可以做，而这个问题随便谷歌，bing搜一下可以得到结果)，而不是做的过程中遇到了什么具体的问题，其实，有时间还是实践一下比较好，这样在提问时，有知道问题答案的朋友也就直接告诉你了。ok，开始

搜索引擎

搜索一下 “cesium 热力图”你可以很轻松拿到一些信息：

1. heatmap可以做

2. 一些地址：

   • cesium-heatmap地址 https://www.npmjs.com/package/cesium-heatmap

   • 源码地址 https://github.com/danwild/CesiumHeatmap

   • 官网地址 https://www.patrick-wied.at/static/heatmapjs/

3. 一些效果，可以评估这个效果是不是你要的，官网鼠标移动也可以预览效果

但是一般这个时候对于怎么做还是很懵逼，那么，尝试一下吧：

实践

先下载源码网页的readme里面写了一个例子，那我们的目标显示搭建例子环境

1. 先来创建一个空的cesium-demo页面，我这里基于之前的代码，创建lesson13，不细说

2. 不是很想看说明，二话不说，先把示例代码放到index.html中，引入相关的两个js到页面中，看看什么情况；这里运行时发现报错，说是不认识’define’，cesium的源码组织走的是requirejs的路子( requirejs en cn ),找到错误的地方，熟悉的人一看就知道可能改怎么改，不知道的朋友可以看看HeatmapImageryProvider.js 文件顶部的说明，5个步骤，4个修改步骤，最后一个提示做完这些操作就可用，这里我使用未压缩的打包版本CesiumUnminified来测试

   • a. 添加类， 代码内容 “define(‘Scene/HeatmapImageryProvider’,[“……” return HeatmapImageryProvider;});”整段，添加到define定义之后，Cesium定义之前，cesium里面provider有很多，如果你知道一两个就更好了，HeatmapImageryProvider和他们的角色相似，这里我们可以搜索BingMapsImageryProvider，可以查找它，然后把定义代码放在它之后，这样，应该不会错

   • b. 添加 ‘./Scene/HeatmapImageryProvider’ 到Cesium另一的第一个参数 搜索”define(‘Cesium’,[” 将它加到BingMapsImageryProvider类似配置之后，

   • c. 添加 Scene_HeatmapImageryProvider 到Cesium第二个参数，同上思路

   • d. 添加Cesium[‘HeatmapImageryProvider’] = Scene_HeatmapImageryProvider;到cesium内部,搜索”var Cesium = {“，添加

   • e. 移除HeatmapImageryProvider.js 文件中的heatmap.js v2.0.0 之前的内容(最后一段压缩过的代码就是heatmap.js的内容)

   • f.最后为了方便缩放，添加一个点entity到viewer

   viewer.entities.add({
       point: {
           coordinates: Cesium.Rectangle.fromDegrees(147.1385, -41.435)
       }
   });
   viewer.zoomTo(viewer.entities);
   

   • g. 刷新可看到效果

   

3. 如果想将功能加入cesium的生产包，需要修改源码，修改方法类似，打包可以参考cesium编程中级(二)源码编译

参考源码