# vue3-cesium-vite

**Repository Path**: rawcloud/vue3-cesium-vite

## Basic Information

- **Project Name**: vue3-cesium-vite
- **Description**: 这是一个基于Vue 3和Cesium的三维地图应用示例，实现了2D与3D地图数据的集成展示、空间分析和可视化功能。项目提供了直观的用户界面和丰富的地理空间分析工具，适用于城市规划、灾害模拟、地形分析等场景。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-06
- **Last Updated**: 2025-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Cesium, JavaScript

## README

# Vue3+Cesium+vite+pnpm 三维地图集成应用示例

## 项目概述

这是一个基于Vue 3和Cesium的三维地图应用示例，实现了2D与3D地图数据的集成展示、空间分析和可视化功能。项目提供了直观的用户界面和丰富的地理空间分析工具，适用于城市规划、灾害模拟、地形分析等场景。

## 技术栈

- **前端框架**: Vue 3 (版本 3.3.4)
- **构建工具**: Vite (版本 4.4.9)
- **三维地图引擎**: Cesium (版本 1.113.0)
- **UI组件库**: Element Plus (版本 2.3.1)
- **包管理器**: pnpm (版本 8.6.12)

## 主要功能

1. **三维地图展示**
   - 支持多种地图数据源
   - 交互式地图控制（缩放、旋转、平移）
   - 地形和影像数据展示

2. **淹没分析**
   - 动态水位上升/下降模拟
   - 自定义淹没区域和目标高度
   - 实时水位变化监控

3. **雷达扫描可视化**
   - 动态扫描雷达效果
   - 自定义扫描半径和速度
   - 雷达覆盖范围展示

4. **3D模型集成**
   - 支持GLTF/GLB模型加载
   - 模型贴地功能
   - 模型属性编辑

5. **地形分析**
   - 坡度坡向分析
   - 自定义分析范围
   - 分析结果可视化

6. **模拟飞行**
   - 飞机模型加载和飞行路径控制
   - 手动控制飞行状态（开始、暂停、重置）
   - 自定义飞行速度
   - 相机跟随飞机功能

7. **北斗网格码**
   - 动态网格绘制和显示
   - 多级网格级别控制（1-20级）
   - 网格编码显示和隐藏
   - 点击地图获取位置编码

8. **台风可视化**
   - 台风路径和中心位置展示
   - 动态风圈绘制（7级、10级、12级）
   - 台风节点详细信息弹窗
   - 台风动画播放控制（开始、暂停、重置）
   - 台风等级颜色映射
   - 预报台路径展示

9. **卫星云图**
   - 从接口获取实时卫星云图数据
   - 动态卫星云图播放（支持播放、暂停、快进、快退）
   - 可调整播放速度（0.5x - 5x）
   - 可调整云图透明度（0-100%）
   - 自动适配云图范围
   - 时间轴控制，支持任意时间点跳转

10. **CZML展示**
    - 支持加载和显示CZML格式的卫星轨道数据
    - 动态播放卫星运动轨迹
    - 可调整播放速度（0.1x - 60x）
    - 自动调整视角以显示所有卫星实体
    - 显示当前卫星实体数量

11. **海量点示例**
    - 支持生成1000到100000个随机点
    - 点大小可在1px到10px之间调整
    - 随机颜色点，透明度为0.8
    - 点分布在全球范围内，具有随机高度
    - 实时显示当前点数量

12. **点聚合展示**
    - 支持海量点数据的聚合展示
    - 自定义聚合距离（10-200像素）
    - 动态调整点数量和大小
    - 自定义聚合样式，显示聚合数量
    - 实时显示当前点数量和聚合数量
    - 支持近大远小效果

## 项目结构

```
├── src/
│   ├── components/       # Vue组件
│   │   ├── BeidouGridComponent.vue  # 北斗网格码组件
│   │   ├── CesiumViewer.vue       # Cesium主视图组件
│   │   ├── CustomPopup.vue        # 自定义弹窗组件
│   │   ├── FlightSimulation.vue   # 模拟飞行组件
│   │   ├── PlottingComponent.vue  # 绘图组件
│   │   ├── PropEditor.vue         # 属性编辑器组件
│   │   ├── SlopeAspectAnalysis.vue # 坡度坡向分析组件
│   │   ├── SubmergenceAnalysis.vue # 淹没分析组件
│   │   ├── TyphoonComponent.vue   # 台风可视化组件
│   │   ├── SatelliteCloudComponent.vue # 卫星云图组件
│   │   ├── CZMLViewerComponent.vue # CZML展示组件
│   │   ├── MassPointsComponent.vue # 海量点示例组件
│   │   └── PointClusteringComponent.vue # 点聚合展示组件
│   ├── utils/            # 工具类
│   │   ├── MapUtils.js            # 地图通用工具
│   │   ├── SubmergenceAnalysis.js # 淹没分析工具
│   │   ├── ThreeDTilesUtils.js    # 3D Tiles工具
│   │   ├── TrackMatte.js          # 雷达扫描工具
│   │   ├── TyphoonUtils.js        # 台风可视化工具
│   │   ├── WmsWmtsUtils.js        # WMS/WMTS服务工具
│   │   ├── slopeAspectUtils.js    # 坡度坡向分析工具
│   │   └── SatelliteCloudUtils.js # 卫星云图工具
│   ├── App.vue           # 应用主组件
│   ├── main.js           # 应用入口
│   └── style.css         # 全局样式
├── public/               # 静态资源
│   ├── lib/              # 第三方库
│   └── model/            # 3D模型文件
├── vite.config.js        # Vite配置
├── package.json          # 项目依赖
└── README.md             # 项目说明文档
```

## 安装与运行

### 前置要求

- Node.js 16+
- pnpm (推荐)

### 安装步骤

1. 克隆项目

```bash
git clone [仓库地址]
cd vue3-cesium-vite
```

2. 安装依赖

```bash
pnpm install
```

3. 启动开发服务器

```bash
pnpm dev
```

4. 构建生产版本

```bash
pnpm build
```

构建产物将输出到 `dist` 目录。

## 使用说明

### 淹没分析功能

1. 在界面中选择淹没分析工具
2. 绘制淹没区域多边形
3. 设置目标水位高度和变化速度
4. 点击开始按钮启动淹没模拟
5. 可以通过实时显示的水位信息监控淹没过程

### 雷达扫描可视化

1. 选择雷达扫描工具
2. 设置雷达中心点位置和扫描半径
3. 调整扫描速度
4. 启动雷达扫描动画

### 3D模型加载

1. 点击模型加载按钮
2. 选择本地或远程模型文件
3. 调整模型位置、缩放和旋转
4. 使用贴地功能将模型贴合到地形表面

### 坡度坡向分析

1. 选择坡度坡向分析工具
2. 绘制分析区域
3. 设置分析参数
4. 查看分析结果的可视化展示

### 模拟飞行

1. 点击界面右侧的飞机图标展开模拟飞行控制面板
2. 点击"开始"按钮启动飞行模拟
3. 可通过"暂停"按钮暂停飞行，"重置"按钮重置飞行状态
4. 使用滑块调整飞行速度（0.5x - 3x）
5. 勾选"相机跟随"选项可让相机自动跟随飞机飞行
6. 飞行过程中可随时调整速度和相机跟随状态

### 北斗网格码

1. 点击界面右侧的网格图标展开北斗网格码控制面板
2. 勾选"显示网格"选项启用北斗网格显示
3. 使用滑块调整网格级别（1-20级），级别越高网格越精细
4. 勾选"显示编码"选项可在网格上显示对应的北斗网格码
5. 点击地图上任意位置可在面板中查看该位置的北斗网格码
6. 相机移动时，网格会自动更新以适应当前视口范围

### 台风可视化

1. 点击界面右侧的台风图标展开台风可视化控制面板
2. 勾选"显示台风"选项启用台风数据显示
3. 点击"开始"按钮启动台风动画，台风GIF将沿着路径移动，同时显示当前位置的风圈信息
4. 可通过"暂停"按钮暂停动画，"重置"按钮重置台风位置到初始状态
5. 使用滑块调整动画播放速度（0.5x - 3x）
6. 鼠标悬停在台风节点上时，会显示该节点的详细信息（包括时间、位置、风速、气压等）
7. 图例说明：
   - 台风中心：白色台风GIF图标
   - 7级风圈：浅绿色不规则多边形
   - 10级风圈：黄色不规则多边形
   - 12级风圈：红色不规则多边形
   - 预报路径：蓝色虚线
   - 历史路径：红色实线

### 卫星云图

1. 点击界面右侧的卫星云图图标展开卫星云图控制面板
2. 勾选"显示卫星云图"选项启用卫星云图显示
3. 点击"开始"按钮启动卫星云图动画，云图将按照时间顺序自动播放
4. 可通过"暂停"按钮暂停动画，"快退"和"快进"按钮调整播放进度
5. 使用滑块调整动画播放速度（0.5x - 5x）
6. 使用滑块调整云图透明度（0-100%）
7. 拖动时间轴滑块可跳转到任意时间点
8. 面板中显示当前云图的时间信息
9. 关闭面板时，卫星云图会自动清除，释放资源

### CZML展示

1. 点击界面右侧的CZML图标展开CZML展示控制面板
2. 勾选"显示CZML数据"选项启用CZML数据显示
3. 数据加载完成后，卫星将自动开始运动
4. 点击"播放"/"暂停"按钮控制卫星动画播放
5. 使用下拉菜单调整播放速度（0.1x - 60x）
6. 面板中显示当前卫星实体数量
7. 关闭面板时，CZML数据会自动清除，释放资源

### 海量点示例

1. 点击界面右侧的海量点图标展开海量点控制面板
2. 勾选"显示海量点"选项启用海量点显示
3. 使用"点数量"滑块调整生成的点数量（1000-100000个）
4. 使用"点大小"滑块调整点的大小（1px-10px）
5. 面板中显示当前点数量
6. 关闭面板时，海量点会自动清除，释放资源

### 点聚合展示

1. 点击界面右侧的聚合点图标展开点聚合控制面板
2. 勾选"显示点聚合"选项启用点聚合显示
3. 使用"点数量"滑块调整生成的点数量（1000-100000个）
4. 使用"聚合距离"滑块调整点聚合的距离阈值（10-200像素）
5. 使用"点大小"滑块调整单个点的大小（1px-10px）
6. 面板中显示当前点数量和聚合数量
7. 关闭面板时，点聚合图层会自动清除，释放资源

## 开发指南

### 添加新功能组件

1. 在 `src/components` 目录下创建新的Vue组件
2. 在 `src/utils` 目录下实现相关的工具类
3. 在 `App.vue` 中引入并注册新组件
4. 更新路由配置（如果需要）

### 集成新的Cesium功能

1. 在 `src/utils` 下创建相应的工具类
2. 确保处理好Cesium对象的生命周期
3. 注意性能优化，避免不必要的重绘和计算

## 许可证

[MIT License](LICENSE)

## 贡献指南

欢迎提交Issue和Pull Request来改进项目。在提交代码前，请确保遵循项目的代码风格和最佳实践。

## 联系信息

如有问题或建议，请联系1359741047@qq.com。