推荐：将 NSDT场景编辑器 加入你的3D开发工具链

很多朋友在问热力图怎么做，但是大部分一开口就是问怎么做这么抽象的问题(这种问题很不好回答，顶多别人只能回答一句用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/

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

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

先下载源码网页的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.最后缩放一下

viewer.camera.setView({
    destination: Cesium.Rectangle.fromDegrees(bounds.west,bounds.south,bounds.east,bounds.north)
});

• g. 刷新可看到效果

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

参考源码

专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。 联系我们