# vue3-cesium

**Repository Path**: akaedu2012/vue3-cesium

## Basic Information

- **Project Name**: vue3-cesium
- **Description**: 基于vite、vue3的cesium项目。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-01-24
- **Last Updated**: 2025-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-cesium

## 主要技术及功能

### 使用的技术

vue3、cesium

### 实现的功能

1. 飞行到指定位置和高度（含初始加载飞行效果和 home 时效果）；
2. 项目区域显示：加载边界及区域高亮显示；
3. 多个点图层加载及显隐控制，各点图层加载使用不同图例；
4. 多个线图层加载及显隐控制，各线图层加载使用不同颜色；
5. 河流线图层添加动画流向效果；
6. 多个面图层加载及显隐控制，各面图层加载使用不同颜色设置边界和填充；
7. 鼠标移至（点线面）弹出气泡提示显示不同信息（信息显示使用富文本）；
8. 鼠标点击热点弹出模态框或打开新窗口；
9. 地图上直接显示文本信息，用于显示监测数据值；
10. 点图层图例根据数据值显示不同图例，通过使用 gif 图片方式呈现闪烁报警效果；
11. 线图层图例根据数据值显示不同颜色，呈现监测河段健康状态效果；
12. 等值线、等值面；
13. 飞行图，用于展示监测站点向中心发送数据效果；
14. 加载地形，并设置合适的高度和角度展示项目全貌；
15. 轮播飞行效果，按设定路线以 3D 视角按站点进行飞行，到每个站点后展示站点的信息和数据；
16. 叠加倾斜摄影，呈现街景效果；

## 项目运行步骤

1. 安装依赖包

```
yarn
```

2. 调试运行

```
yarn dev
```

3. 编译发布

```
yarn build
```

## 开发配置要求

### VSCode 设置保存时自动格式化

1. 打开设置“Settings”，点击“Open Setting(JSON)”图标；
2. 在打开的“setting.json”文件中输入如下代码

```
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
```

### git 提交配置

1. 请勿修改项目中的“.gitignore”文件；
2. 使用 prettier 格式化代码

## 项目开发规范

### 项目结构说明

web
|——node_modules //下载的包
|——public //不被编译打包的资源，包含项目的 icon 和 index 文件
|——src //项目源代码目录
|————api //与后台 api 调用有关的定义，按微服务分文件列出需要调用的方法
|————assets //被编译打包的静态资源，包含图片等
|————components //可复用的组件
|————locales //多国语言
|————router //路由定义
|————store //store 定义
|————utils //封装的公用工具类
|————views //视图目录，公用、子系统分子目录
|——————exception //异常公用视图
|————App.vue //
|————main.ts //项目启动 js
|——.gitignore //git 忽略的目录和文件配置
|——babel.config.js
|——package-lock.json
|——package.json
|——README.md
|——tsconfig.json
|——vue.config.js

### 项目开发说明