Cesium基本工具封装展示

很久没更新博客了，最近一段时间主要是忙着整理之前项目中实现的 Cesium 相关功能，结合 Vue 对这些工具进行封装，提供一个管理的工具条组件。能按照配置文件加载需要显示的工具，以及工具间的激活互斥。同时创建 Viewer 的时候，添加了一些辅助和美化。说了再多都没用，直接上链接 演示地址

演示中的模型是在群文件里面下载的，如有侵权请联系我，及时修改！

功能总览

先说一哈，视频很多，道友的流量记得备足！(视频的比gif还小，我用视频了)

  • 整体界面

    界面上能到到，近地天空图我换成了蓝天白云（照片也是网上找的，很粗糙 O.o）。右下角添加了经纬度坐标以及当前的帧率显示。同时美化了鼠标操作以及修改了默认的操作按键顺序（右键《==》中键）。
  • 雪效果
  • 雨效果
  • 空间测距
  • 贴地测距
  • 空间测面
  • 贴地测面
  • 高程测量
  • 方位角测量
  • 土方量测量
  • 可视域分析
  • 通视分析
  • 缓冲区分析
  • 日照分析
  • 多边形视频融合
  • 第一人称路径漫游

总结

上面的功能很多都是按照 火星科技 里面的案例为原型来实现。还有一部分功能没有加上去，后续会添加。比如标绘，二三维联动等等。在封装的过程中，因为是结合 Vue 来实现的，由于Vue 的监听机制原因，所以三维里面很多定义的变量是不能放到 data 里面去的， 切记 props 也不行。当然知道和去真正实现还是有差距的，前面就是因为吃过这个亏，所以每次激活功能的时候，帧率就会下降。也是调了半天才发现的。在这里当作反面教材给大家提醒一下，切记！！！

实例化的 Cesium.Viewer() 不能放到 Vue 中的 data 和 props中。不然会很卡顿！！！

音乐小憩