省水利三维模型资源汇聚平台
基于 RuoYi-Vue + SuperMap iClient3D + Cesium 的水利三维 GIS 可视化平台
项目简介 |
技术栈 |
项目启动 |
功能模块 |
功能使用说明 |
项目结构
---
## 项目简介
**省水利三维模型资源汇聚平台** 是一个面向水利行业的二三维一体化 GIS 可视化管理系统。平台基于 RuoYi-Vue 前后端分离框架（v3.9.1）构建，深度融合 SuperMap iClient3D for WebGL 和 Cesium 三维地球引擎，实现水利工程模型资源的汇聚、管理、展示与分析。
平台提供水利工程模型的上传、分类管理、三维场景展示、空间分析、自定义服务接入等功能，旨在为水利信息化建设提供三维可视化基础支撑。
---
## 技术栈
### 后端技术
| 技术 | 说明 | 版本 |
|------|------|------|
| Spring Boot | 应用框架 | 2.5.15 |
| Spring Security | 安全认证框架 | 5.7.14 |
| MyBatis | ORM 框架 | - |
| Druid | 数据库连接池 | 1.2.27 |
| Redis | 分布式缓存 | - |
| JWT | 令牌认证 | 0.9.1 |
| Swagger | API 文档 | 3.0.0 |
| Fastjson | JSON 处理 | 2.0.60 |
| PageHelper | 分页插件 | 1.4.7 |
| Oshi | 系统监控 | 6.9.1 |
| Apache POI | Excel 处理 | 4.1.2 |
| Druid | 数据库连接池/监控 | - |
### 前端技术
| 技术 | 说明 | 版本 |
|------|------|------|
| Vue 3 | 前端框架 | 3.5.16 |
| Element Plus | UI 组件库 | 2.10.7 |
| Vite | 构建工具 | 6.3.5 |
| Pinia | 状态管理 | 3.0.2 |
| Vue Router | 路由管理 | 4.5.1 |
| Axios | HTTP 请求库 | 1.9.0 |
| ECharts | 数据可视化 | 5.6.0 |
| Cesium | 三维地球引擎 | 1.140.0 |
| SuperMap iClient3D | 三维 GIS 组件库 | 1.2.2 |
| Three.js | 3D 渲染引擎 | 0.182.0 |
### 数据库
- **达梦数据库（DM8）**：主数据库
- **Redis**：缓存与会话管理
---
## 项目启动
### 环境要求
- **JDK**：1.8+
- **Maven**：3.6+
- **Node.js**：20+
- **Redis**：5.0+
- **达梦数据库（DM8）**
- **IDE**：推荐使用 IntelliJ IDEA + VS Code
### 1. 数据库初始化
创建达梦数据库实例（如 `WATERSHED`），执行初始化 SQL 脚本：
```bash
# 按顺序执行以下脚本
sql/ry_20250522.sql # RuoYi 系统核心表（用户、角色、菜单等）
sql/quartz.sql # 定时任务 quartz 表
sql/watershed_model.sql # 水利工程模型表
sql/watershed_facility.sql # 水利设施表
sql/watershed_equipment.sql # 机电设备表
sql/create_service_table.sql # 自定义服务表
sql/cesium_map_config.sql # Cesium 地图配置表
sql/cesium_geojson.sql # GeoJSON 数据表
sql/watershed_menu.sql # 流域管理菜单权限配置
```
> 默认管理员账号：`admin` / `admin123`
> 如果使用 MySQL，请使用 `ry_20250522.sql`（该脚本为 MySQL 语法），其它 SQL 脚本为达梦语法。请根据实际数据库类型选择对应的初始化脚本。
### 2. 修改配置文件
#### 后端配置 `ruoyi-admin/src/main/resources/`
**application-druid.yml** — 配置数据库连接：
```yaml
spring:
datasource:
druid:
master:
url: jdbc:dm://192.168.0.145:30236?charSet=utf8
username: YOUR_DB_USERNAME
password: YOUR_DB_PASSWORD
```
**application.yml** — 配置 Redis 和文件上传路径：
```yaml
spring:
redis:
host: YOUR_REDIS_HOST
port: 6379
password: YOUR_REDIS_PASSWORD
database: 14
ruoyi:
profile: uploads/models # 模型文件上传路径
```
### 3. 启动后端服务
```bash
cd ruoyi-admin
mvn spring-boot:run
```
- 后端默认端口：**8448**
- 访问地址：`http://localhost:8448`
- Swagger 接口文档：`http://localhost:8448/swagger-ui.html`
- Druid 监控页面：`http://localhost:8448/druid`（账号：ruoyi / 密码：123456）
### 4. 启动前端服务
```bash
cd RuoYi-Vue3
# 首次启动需安装依赖
npm install
# 启动开发服务器
npm run dev
```
- 前端默认端口：**80**
- 访问地址：`http://localhost`
- 开发环境 API 代理：`/dev-api` → `http://localhost:8448`
### 5. 访问系统
1. 浏览器打开 `http://localhost`
2. 默认登录账号：`admin` / `admin123`（需输入验证码）
3. 登录后将进入 **水利三维模型平台首页**（3D 场景），可通过导航栏切换到 **模型管理** 或 **后台管理**
### 前端构建部署
```bash
cd RuoYi-Vue3
# 生产环境构建
npm run build:prod
# 预发布环境构建
npm run build:stage
```
构建产物在 `RuoYi-Vue3/dist/` 目录，部署到 Nginx 即可。
---
## 功能模块
### 一、系统基础管理（RuoYi）
基于 RuoYi-Vue 框架内置权限管理系统，提供完整的用户、角色、权限管理能力：
#### 1. 用户管理
用户是系统操作者，支持用户的增删改查、状态管理、角色分配。
- **使用方式**：进入「后台管理 → 系统管理 → 用户管理」，可添加/编辑/删除用户，分配角色和部门
#### 2. 部门管理
配置系统组织机构（公司、部门、小组），树结构展现，支持数据权限。
- **使用方式**：进入「后台管理 → 系统管理 → 部门管理」，可新增/编辑/删除部门节点
#### 3. 岗位管理
配置系统用户所属担任职务。
- **使用方式**：进入「后台管理 → 系统管理 → 岗位管理」，管理岗位编码、名称、排序
#### 4. 菜单管理
配置系统菜单、操作权限、按钮权限标识等，支持外链和内链。
- **使用方式**：进入「后台管理 → 系统管理 → 菜单管理」，可配置树形菜单结构及权限标识
#### 5. 角色管理
角色菜单权限分配、设置角色按机构进行数据范围权限划分。
- **使用方式**：进入「后台管理 → 系统管理 → 角色管理」，分配菜单权限和数据权限
#### 6. 字典管理
对系统中经常使用的一些较为固定的数据进行维护。
- **使用方式**：进入「后台管理 → 系统管理 → 字典管理」，管理字典类型和字典数据
#### 7. 参数管理
对系统动态配置常用参数。
- **使用方式**：进入「后台管理 → 系统管理 → 参数管理」，添加/编辑系统参数配置
#### 8. 通知公告
系统通知公告信息发布维护。
- **使用方式**：进入「后台管理 → 系统管理 → 通知公告」，发布和管理公告
#### 9. 操作日志
系统正常操作日志记录和查询；系统异常信息日志记录和查询。
- **使用方式**：进入「后台管理 → 系统监控 → 操作日志」，查看操作记录
#### 10. 登录日志
系统登录日志记录查询包含登录异常。
- **使用方式**：进入「后台管理 → 系统监控 → 登录日志」，查看登录记录
#### 11. 在线用户
当前系统中活跃用户状态监控，支持强制下线。
- **使用方式**：进入「后台管理 → 系统监控 → 在线用户」，查看并管理在线用户
#### 12. 定时任务
在线（添加、修改、删除）任务调度包含执行结果日志。
- **使用方式**：进入「后台管理 → 系统监控 → 定时任务」，管理 Cron 任务
#### 13. 代码生成
前后端代码的生成（Java、HTML、Vue、SQL），支持 CRUD 下载。
- **使用方式**：进入「后台管理 → 系统工具 → 代码生成」，导入数据库表，一键生成前后端代码
#### 14. 系统接口（Swagger）
根据业务代码自动生成相关的 API 接口文档。
- **使用方式**：进入「后台管理 → 系统工具 → 系统接口」，或直接访问 `/swagger-ui.html`
#### 15. 服务监控
监视当前系统 CPU、内存、磁盘、堆栈等相关信息。
- **使用方式**：进入「后台管理 → 系统监控 → 服务监控」，查看服务器运行状态
#### 16. 缓存监控
对系统的缓存信息查询，命令统计等。
- **使用方式**：进入「后台管理 → 系统监控 → 缓存监控」，查看 Redis 缓存状态
#### 17. 在线构建器
拖动表单元素生成相应的 HTML 代码。
- **使用方式**：进入「后台管理 → 系统工具 → 表单构建」，拖拽组件生成表单
#### 18. 连接池监视（Druid）
监视当前系统数据库连接池状态，可进行分析 SQL 找出系统性能瓶颈。
- **使用方式**：访问 `/druid`，输入账号密码查看 SQL 监控
---
### 二、水利三维模型平台（核心业务）
#### 1. 首页 — 三维 GIS 场景
三维地球主界面，集成 SuperMap Cesium 3D 引擎，提供丰富的地图交互能力。
**页面布局**：
- **顶部导航栏**：首页 / 模型管理 / 后台管理 切换入口
- **左侧侧边栏**：数据服务、三维分析、地形分析、裁剪分析、图层、场景、绘制、特效等工具菜单
- **主区域**：Cesium 三维地球场景
**使用方式**：
- 鼠标中键拖拽旋转视角，左键拖拽平移，滚轮缩放
- 点击左侧菜单展开功能面板
- 支持切换多种在线底图（BingMap、天地图、OSM、SuperMap 等）
#### 2. 数据服务
加载各类 GIS 数据服务到三维场景中。
**公共服务**（预配置）：
| 服务名称 | 类型 | 说明 |
|---------|------|------|
| CBD | S3M 场景 | SuperMap 在线三维城市数据 |
| 倾斜摄影模型 | S3M | 倾斜摄影三维模型 |
| 白模 | S3M | 城市建筑白模（线框模式） |
| BIM 建筑 | S3M | BIM 建筑模型展示 |
| 珠峰地形影像 | 影像+地形 | 珠穆朗玛峰区域地形与影像 |
| 点云 | S3M 点云 | 三维点云数据 |
| 京津地区 MVT | MVT 矢量瓦片 | 矢量地图服务 |
**在线底图**：
- BingMap、天地图（影像/矢量/地形）、OSM、SuperMap 暗色/亮色底图
- STK 地形、天地图地形
**自定义服务**：
- 支持添加场景、S3M、影像、地形、矢量瓦片五种类型的自定义服务
- 双击服务名称加载到场景，已加载的服务可卸载
**使用方式**：
- 点击侧边栏「数据服务」展开菜单
- 单击公共服务缩略图加载/卸载数据
- 点击「自定义服务 +」按钮添加自定义 GIS 服务 URL
#### 3. 模型管理
水利工程模型的上传、分类、查看与管理。
**模型分类体系**：
| 一级分类 | 二级分类 | 示例 |
|---------|---------|------|
| 水利工程实体 | 水库工程、水闸工程、泵站工程、灌区工程、堤防与护岸工程 | |
| 水系水利设施 | 河流、湖泊与水库水面、渠道与输水管道、河口与海岸带 | |
| 地理环境要素 | 地形地貌、行政区划、重要地物 | |
| 自然生态景观 | 湖泊湿地、森林公园、地质公园、海岸带景观 | |
| 模型集与项目 | 待分类模型、XX 市防洪排涝工程 | |
**使用方式**：
**模型查看**：
1. 进入「模型管理」页面
2. 左侧菜单选择模型分类
3. 右侧表格展示该类模型列表
4. 双击模型名称在 3D 场景中加载展示
**模型上传**：
1. 在模型管理页面点击「上传模型」按钮
2. 选择模型文件（支持 S3M、GLB、GLTF、OSGB 等格式）
3. 填写模型名称、类型、格式等信息
4. 上传完成后在对应分类中查看
**模型预览**：
- 点击模型列表中的「预览」按钮，在新对话框中查看 3D 模型
- 支持环境光、主光源强度调节
- 支持鼠标拖拽旋转/缩放查看模型细节
#### 4. 自定义服务管理
管理用户自定义的 GIS 服务，持久化保存服务配置。
**使用方式**：
- 在数据服务菜单中点击「自定义服务 +」按钮
- 输入服务名称、类型（场景/S3M/影像/地形/矢量瓦片）和 URL
- 支持配置是否需要 Token 认证
- 保存后服务出现在自定义服务列表中，双击加载到场景
#### 5. 三维分析工具
提供丰富的三维空间分析能力：
| 分析类型 | 功能 | 使用方式 |
|---------|------|---------|
| **量算** | 测量距离、面积、高度 | 点击「三维分析 → 量算」，在地图上点选测量 |
| **阴影分析** | 模拟建筑物阴影覆盖范围 | 点击「三维分析 → 阴影分析」，设置时间参数 |
| **天际线分析** | 分析场景天际线轮廓 | 点击「三维分析 → 天际线分析」 |
| **通视分析** | 分析两点间可视性 | 点击「三维分析 → 通视分析」，设置观察点和目标点 |
| **剖面分析** | 分析地形剖面 | 点击「三维分析 → 剖面分析」，绘制剖面线 |
| **可视域分析** | 分析观察点的可视范围 | 点击「三维分析 → 可视域分析」，设置观察点参数 |
| **开敞度分析** | 分析空间开敞程度 | 点击「三维分析 → 开敞度分析」 |
| **三维空间查询** | 三维场景空间查询 | 点击「三维分析 → 三维空间查询」 |
| **拾取坐标** | 拾取场景中任意点坐标 | 点击「三维分析 → 拾取坐标」，点击地图获取经纬度 |
#### 6. 地形分析
| 功能 | 说明 | 使用方式 |
|-----|------|---------|
| 地形操作 | 地形开挖、填方等操作 | 点击「地形分析 → 地形操作」，绘制区域 |
| 淹没分析 | 模拟水位上升淹没范围 | 点击「地形分析 → 淹没分析」，设置水位高度 |
| 坡度坡向分析 | 分析地形坡度和坡向 | 点击「地形分析 → 坡度坡向分析」 |
| 等值线分析 | 生成地形等高线 | 点击「地形分析 → 等值线分析」 |
#### 7. 裁剪分析
| 功能 | 说明 | 使用方式 |
|-----|------|---------|
| Box 裁剪 | 长方体裁剪三维模型 | 点击「裁剪分析 → Box 裁剪」，调整裁剪盒 |
| 平面裁剪 | 平面裁剪三维模型 | 点击「裁剪分析 → 平面裁剪」，调整裁切面 |
| Cross 裁剪 | 交叉裁剪 | 点击「裁剪分析 → Cross 裁剪」 |
| 多边形裁剪 | 多边形区域裁剪 | 点击「裁剪分析 → 多边形裁剪」，绘制多边形 |
#### 8. 图层管理
| 功能 | 说明 |
|-----|------|
| S3M 图层属性设置 | 查看和修改 S3M 图层属性 |
| S3M 图层风格设置 | 调整 S3M 图层显示风格（颜色、透明度等） |
| S3M 图层操作 | S3M 图层的显示/隐藏、移除等操作 |
| 图层管理 | 统一管理所有已加载图层 |
| 影像图层属性设置 | 影像图层的属性设置 |
| 倾斜摄影模型操作 | 倾斜摄影模型的交互操作 |
| MVT 矢量瓦片 | 矢量瓦片图层风格设置 |
| PBR | PBR 材质渲染 |
#### 9. 场景
| 功能 | 说明 | 使用方式 |
|-----|------|---------|
| 分屏 | 左右分屏对比显示 | 点击「场景 → 分屏」 |
| 卷帘 | 上下卷帘对比 | 点击「场景 → 卷帘」，拖动卷帘线 |
| 场景属性设置 | 设置场景背景色、雾效等 | 点击「场景 → 场景属性设置」 |
| 灯光 | 添加点光源、聚光灯 | 点击「场景 → 灯光」，设置灯光位置和参数 |
| 沿线飞行 | 沿指定路径飞行浏览 | 点击「场景 → 沿线飞行」，绘制飞行路径 |
| 视频投放 | 将视频投射到三维模型表面 | 点击「场景 → 视频投放」 |
| 体元栅格 | 带时序的体元栅格数据渲染 | 点击「场景 → 带时序的体元栅格」 |
| 鹰眼 | 鹰眼概览图 | 点击「场景 → 鹰眼」，显示小窗口概览 |
#### 10. 绘制
| 功能 | 说明 | 使用方式 |
|-----|------|---------|
| 绘制线面 | 在场景中绘制线和面 | 点击「绘制 → 绘制线面」，点击地图绘制 |
| 绘制体 | 绘制立方体、球体等几何体 | 点击「绘制 → 绘制体」 |
| 添加点符号 | 在场景中添加带图标标记 | 点击「绘制 → 添加点符号」，选择符号类型 |
#### 11. 特效
| 功能 | 说明 |
|-----|------|
| 扫描线 | 添加扫描线特效 |
| 粒子 | 粒子系统特效（火焰、烟雾、雨水、喷泉等） |
支持多种粒子预设：化学火焰、基础火焰、小型火焰、干粉、建筑火焰、暗火、森林火焰、水柱、油气火焰、流淌火、烟熏火、烟雾、爆炸起火、环状火焰、雨水、雾状水等。
#### 12. 台风路径
加载和查看台风路径数据，在三维场景中动态展示台风轨迹。
**使用方式**：
- 点击侧边栏「台风」菜单
- 点击台风名称（如「竹节草」）在场景中加载台风路径
- 可从「首页 → 台风路径」页面查看台风数据表格
- 支持上传新的台风路径数据（JSON 格式）
#### 13. 模型预览器
独立的 3D 模型预览查看工具，支持 GLB/GLTF 等格式模型的详细查看。
**使用方法**：
- 在模型管理页面点击「预览」按钮
- 支持光照调节（环境光、主光源、辅助光的强度与角度）
- 鼠标拖拽旋转、滚轮缩放
- 支持 Three.js 和 Cesium 两种渲染模式
#### 14. 水利设施管理
管理水利设施的基本信息、位置、负责人等。
**使用方式**：
- 进入「后台管理 → 流域管理 → 水利设施」
- 可新增、编辑、删除水利设施
- 支持经度/纬度坐标标注，可在三维场景中定位显示
- 关联三维模型路径，支持设施三维展示
#### 15. 机电设备管理
管理泵站、闸门等机电设备的详细参数和维护信息。
**使用方式**：
- 进入「后台管理 → 流域管理 → 机电设备」
- 管理设备编号、名称、型号、额定参数等
- 支持维护周期管理，记录安装日期和保养计划
- 设备状态管理（正常运行/维护中/故障/待机）
---
## 项目结构
```
PlatformModel
├── ruoyi-admin # 后台管理模块（启动入口）
│ └── src/main/
│ ├── java/com/ruoyi/web/
│ │ └── controller/
│ │ └── watershed/ # 水利业务 Controller
│ │ ├── WatershedModelController.java
│ │ └── WatershedServiceController.java
│ └── resources/
│ ├── application.yml # 主配置
│ ├── application-druid.yml # 数据源配置
│ └── sql/ # SQL 初始化脚本
├── ruoyi-common # 公共模块（工具类、通用组件）
├── ruoyi-framework # 核心框架（安全、配置、权限）
├── ruoyi-system # 系统模块（业务实体、Service、Mapper）
├── ruoyi-quartz # 定时任务模块
├── ruoyi-generator # 代码生成模块
├── RuoYi-Vue3 # 前端项目
│ ├── src/
│ │ ├── api/ # API 接口封装
│ │ │ ├── watershed/ # 水利业务 API
│ │ │ ├── system/ # 系统管理 API
│ │ │ ├── monitor/ # 系统监控 API
│ │ │ └── cesium/ # Cesium 地图配置 API
│ │ ├── views/ # 页面组件
│ │ │ ├── front/ # 前台页面（三维平台首页、模型管理）
│ │ │ │ ├── HydrologicalPlatform.vue # 三维平台首页
│ │ │ │ ├── ModelManagement.vue # 模型管理页面
│ │ │ │ ├── PageHeader.vue # 顶部导航栏
│ │ │ │ └── content/ # 内容组件
│ │ │ │ ├── ShuiliGongcheng.vue # 水利工程模型列表
│ │ │ │ ├── ShuiliSheshi.vue # 水利设施
│ │ │ │ ├── JidianShebei.vue # 机电设备
│ │ │ │ ├── TyphoonPath.vue # 台风路径
│ │ │ │ └── ModelPreview.vue # 模型预览
│ │ │ ├── system/ # 系统管理页面
│ │ │ ├── monitor/ # 系统监控页面
│ │ │ ├── tool/ # 系统工具页面
│ │ │ └── login.vue # 登录页面
│ │ ├── supermap-cesium-module/ # SuperMap Cesium 三维模块
│ │ │ ├── config/ # 配置文件
│ │ │ │ ├── views_config.js # 三维分析组件配置
│ │ │ │ └── server_config.js # 服务数据配置
│ │ │ ├── components/ # 三维分析功能组件
│ │ │ │ ├── analysis_3d/ # 三维分析
│ │ │ │ ├── clip/ # 裁剪分析
│ │ │ │ ├── draw/ # 绘制
│ │ │ │ ├── fly/ # 飞行
│ │ │ │ └── layer/ # 图层
│ │ │ └── views/layout/ # 三维场景布局
│ │ ├── router/index.js # 路由配置
│ │ ├── store/ # 状态管理
│ │ └── main.js # 入口文件
│ ├── public/
│ │ ├── Cesium/ # Cesium 引擎库
│ │ ├── img/ # 图片资源
│ │ └── data/ # 三维模型数据
│ ├── index.html
│ ├── vite.config.js
│ └── package.json
└── pom.xml # Maven 父项目配置
```
---
## 默认账号
| 角色 | 账号 | 密码 |
|-----|------|------|
| 超级管理员 | admin | admin123 |
| 普通用户 | ry | admin123 |
---
## 相关链接
- [RuoYi-Vue 官方文档](http://doc.ruoyi.vip)
- [SuperMap iClient3D for WebGL](https://iclient.supermap.io/)
- [Cesium 官方文档](https://cesium.com/learn/)
- [Element Plus 组件库](https://element-plus.org/)
- [Vue 3 官方文档](https://cn.vuejs.org/)