cesium热力图
  lG7RE7vNF4mc 2023年11月02日 58 0

cesium热力图_场景编辑器



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

cesium 热力图

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

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

搜索引擎

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

  1. heatmap可以做
  2. 一些地址:
  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. 刷新可看到效果

cesium热力图_数字孪生_02

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

​参考源码​

Sign up for more like this.


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  lG7RE7vNF4mc   2023年11月13日   30   0   0 3d权重字段
  lG7RE7vNF4mc   2023年11月13日   24   0   0 加载3dWindows
lG7RE7vNF4mc