# waterconservancy

**Repository Path**: Midvale/waterconservancy

## Basic Information

- **Project Name**: waterconservancy
- **Description**: Openlayers项目，广西水利信息在线分析服务系统。模拟广西壮族自治区的水利信息相关数据，结合GIS应用，通过地图标注、 图表与动态推演等方式，直观模拟展现广西壮族自治区当前的水情、雨情状况，以及台风情况。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-04-21
- **Last Updated**: 2024-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# waterconservancy

#### 介绍
Openlayers项目，广西水利信息在线分析服务系统。模拟广西壮族自治区的水利信息相关数据，结合GIS应用，通过地图标注、
图表与动态推演等方式，直观模拟展现广西壮族自治区当前的水情、雨情状况，以及台风情况。  
 :heavy_exclamation_mark: 本仓库代码为后端代码，所用数据都是模拟的。  
 :confetti_ball: 前端代码网址：[https://github.com/Shunrai1/waterConservancy.git](https://github.com/Shunrai1/waterConservancy.git)
#### 软件架构

前端：vue3+ts+openlayers+elementplus
后端：springboot3+mysql

#### 安装教程

1.  下载后端代码，找到resources/sql目录下的water.sql文件，导入mysql数据库，修改application.yml配置文件数据库配置信息。启动运行项目
2.  下载前端代码,执行代码安装包,运行程序
```js
    pnpm i
    pnpm run dev
```

#### 使用说明
后端API解释说明：启动程序后，输入网址：localhost:8081/doc.html。可以看到接口文档。
![接口文档](src/main/resources/static/APIS.png)
前端界面：
1.  基本使用：切换底图，地图缩放，地图平移到广西省，动态图例
2.  实时水情：可查询水库、河流两类水情信息。点击表格行可以缩放到具体位置信息，同时打开popup框。可按河流名或者水库名搜索。水库有聚合要素。点击要素点弹出popup。
![水库popup](https://foruda.gitee.com/images/1699973506268614466/875a63b1_11046506.png "屏幕截图")
![聚合popup](src/main/resources/static/image.png)
![河流popup](src/main/resources/static/river.png)
3.  实时雨情：雨量分级可视化，根据勾选不同等级雨量范围筛选数据。点击表格行可以缩放到具体位置信息，同时打开popup框。统计各市最大雨量，和量级统计功能。点击要素点弹出popup。
![雨情popup](src/main/resources/static/rain.png)
![量级统计](src/main/resources/static/level.png)
4.  台风路径：勾选台风数据，绘制台风实际路径和预测路径。点击台风路径表格行可以缩放到具体位置信息，同时打开popup框。绘制风圈，点击播放按钮动态播放台风。点击台风点要素弹出popup。
![台风数据表格](src/main/resources/static/typhoon.png)
![台风路径](src/main/resources/static/typhoonRoute.png)
![台风popup和circle](src/main/resources/static/typhoonCircle.png)
![预测点popup](src/main/resources/static/forecast.png)
![动态台风路径](src/main/resources/static/GIF%202023-11-15%2010-18-26.gif)
5.  卫星云图：
![卫星云图](src/main/resources/static/satellite.png)

#### 参考资料

1.WebGIS之OpenLayers全面解析(第二版)