Vue3+Cesium实现一些基础的可视化功能

爱吃火锅和烤肉

已于 2024-06-14 17:06:58 修改

阅读量462

点赞数 6

文章标签：前端 vue typescript 数据可视化

于 2024-06-14 17:00:51 首次发布

本文链接：https://blog.csdn.net/m0_67946993/article/details/139683880

版权

前段时间在系统学习了Ceisum后，基于Vue3+TS设计了一个可视化系统，写了一些常见功能，主要分为三大类：

空间数据的交互操作
空间数据分析
粒子系统与三维模型

下面先展示出系统的框架

空间数据的交互操作

空间要素的绘制及编辑

功能区如下图所示，可以实现点、线、面等绘制与编辑

点、线、面要素的空间距离量测（贴地非贴地

包括动态距离量测、角度量测、面积量测，量测结果会展示在页面上

空间数据分析

洪水淹没分析

用户首先选择研究区域，圈定一定的范围后，系统会自动计算出该区域的最大最小高度展示在表中，用户可根据实际情况进行修改以及设定洪水的速度，点击开始分析后，进行可视化展示

可视域分析

用户点击可视域分析，选择视点以及视线方向，系统会计算出可视和不可视的部分，在这里使用一系列线条来表示，绿色表示可视部分，红色表示不可视部分。

透视分析

缓冲区分析

三维模型和粒子系统

这两块更多的是使用cesium的库函数来调用，设定一定的参数，最后进行可视化。

包括3DTile数据加载，三维模型静态动态加载，其中需要了解很多API并且进行使用，比如对于静态三维模型数据往往是gltf数据格式

const entity = viewer.entities.add({
    name:'plane',
    position:Cesium.Cartesian3.fromDegrees(102.3187,24.4923,10000),
    model:{
      uri:'../public/static/Cesium/data/gltf/Cesium_Air.glb', // gltf模型 注意是glb文件
      scale:2, //模型本身大小
      minimumPixelSize:128, // 最大的模型像素
      maximumScale:20000, // 最大的模型像素
      runAnimations:true, // 是否显示动画
      clampAnimations:true, // 是否保持最后一帧的动画
      // color:Cesium.Color.RED, // 模型加颜色
      show:true // 是否显示或隐藏
    }
  })
  viewer.trackedEntity = entity // 设置摄像头定位到模型处