Cesium

cesium热力图

Mar 16, 2023 • 3 min read

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

cesium 热力图

很多朋友在问热力图怎么做，但是大部分一开口就是问怎么做这么抽象的问题(这种问题很不好回答，顶多别人只能回答一句用heatmap可以做，而这个问题随便谷歌，bing搜一下可以得到结果)，而不是做的过程中遇到了什么具体的问题，这样不好；

其实，有时间还是实践一下比较好，尝试过，碰到了具体问题再提问，这样在提问时，有知道问题答案的朋友也就直接告诉你了。ok，开始

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

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

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

先来创建一个空的cesium-demo页面，我这里基于之前的代码，创建lesson13，不细说
不是很想看说明，二话不说，先把示例代码放到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)
});