vue-vite-cesium-demo

CN 中文 / EN English

本demo项目使用Vue.js（v3.0）、Vite、Cesium.js进行开发，解决了市面上没有这几个框架同时出现的痛点。本项目有大量现成的解决方案，可根据自己情况裁剪使用，在使用之前请阅读并遵循LICENSE协议。

项目包含以下功能

• 1、生成大量节点；
• 2、卫星与探测区域展示；
• 3、可视域分析；
• 4、通视度分析；
• 5、加载geojson；
• 6、地形展示；
• 7、高危报警功能；
• 8、地面雷达展示；
• 9、地图动态通联展示；
• 10、菲涅尔区展示；
• 11、对空雷达区域展示；
• 12、河流淹没（要有地形才能看到效果）；
• 13、动态河流（要有地形才能看到效果）；
• 14、追踪扫描；
• 15、天气展示：雨、雪、雾；
• 16、实时绘制飞机飞行轨迹（直飞、绕飞、盘旋）；
• 17、扩散墙;
• 18、白膜建筑;
• 19、结合Echarts。
• 20、结合rtsp视频推流软件，实现无人机侦察视频实时传输图像；

预览

在线网站

https://lihanqiang.github.io/vue-vite-cesium-demo/

Demo结构

• public

• geojson

• models

• plugins

• tilesets

• setting.js

• src

• assets

• cesiumUtils

• components

• mocks

• styles

• App.vue

• main.js

cesiumUtils:

请重点关注该文件夹，提供本demo的大量工具函数。

项目运行

使用npm（也可以使用yarn）进行项目依赖安装。进入项目根目录运行下列代码：

npm install
npm run dev

或者通过yarn：

yarn 
yarn run dev

运行: npm run dev 命令报下面类似错误, 在项目根目录执行命令: node .\node_modules\esbuild\install.js。

Error: spawn H:\node_modules\esbuild\esbuild.exe ENOENT
  at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
  at onErrorNT (node:internal/child_process:477:16)
Emitted 'error' event on ChildProcess instance at:
  at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
  at onErrorNT (node:internal/child_process:477:16)
  at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  path: 'H:\node_modules\\esbuild\\esbuild.exe',
  spawnargs: [ '--service=0.12.9', '--ping' ]
}

RTSP项目运行说明

本项目使用开源的WEB RTSP视频推流方案，下载解压缩你在网络上下载的视频推流软件，按照说明安装和部署。关注setting.js进行协议端口配置。也可按照我的RTSP方案进行配置：

下载

链接：https://pan.baidu.com/s/1Hovu2CRr8N7MOlKm1MsPNw?pwd=txvg

安装

• 将文件解压后放置于D:\rtsp目录下:

• 首先安装vc++lib_v2020.8.2.exe。

运行

• 以管理员身份打开cmd，进入D:/rtsp/h5s-r10.8.0330.20-win64-release目录。

• 先运行regservice.bat，再运行h5ss.bat。

• 点击UAV detection (video streaming)按钮，在界面左上角即可看到画面。

说明

本项目的代码，大部分为自创（70%以上），也有少部分代码借鉴他人，如有侵权问题，请联系删除。

TIPS

.env.development以及.env.production文件为开发环境和生产环境的配置文件，这里的 VITE_BUILD_PATH_PREFIX 变量是本系统部署时（ https://lihanqiang.github.io/vue-vite-cesium-demo/ ），因为有 /vue-vite-cesium-demo 的缘故，需要在引用 /public 静态文件时，加上/vue-vite-cesium-demo前缀。

** 在一般情况下，你只需设置 VITE_BUILD_PATH_PREFIX='' ，完成后打包发布即可。**

注意由于Cesium版本一直更替，有可能出现安装依赖报错，运行报错问题。所以在升级Cesium版本前，要注意Cesium API的变化，以免引起不必要的麻烦。