geo-disaster: 本项目开发了一个面向四川省的地质灾害数据管理平台。平台集成了地质灾害可视化、GIS制图画笔工具和空间分析功能。通过采用现代Web技术，平台增强了用户交互体验，并有助于快速决策，以有效管理和缓解地质灾害。

# 四川省地质灾害数据管理平台

## 简介

本项目是一个基于Vue3、OpenLayers、ECharts和Turf.js的地质灾害数据管理平台，旨在通过大屏可视化的方式展示和管理四川省的地质灾害数据。平台提供多种交互功能，包括地图可视化、图层管理、测量工具、热力图等，支持地质灾害的监测和决策支持。

## 技术栈

- **前端框架**：Vue3
- **地图库**：OpenLayers（通过CDN方式导入）
- **图表库**：ECharts
- **空间分析库**：Turf.js

## 功能模块

### 1. 地图可视化

- 使用OpenLayers实例化地图对象，加载高德影像图层、路网图层及注记图层。
- 支持加载GeoJSON格式的四川省地质灾害数据，并进行聚类显示。

### 2. 地图控件与图层管理

- 实现常用地图控件：导航、缩放、鼠标位置、缩放至图层等功能。
- 提供图层管理功能，支持图层的动态切换和控制。

### 3. 地图视图飞行

- 实现地图视角的动态切换和动画效果，支持视图飞行功能。

### 4. 地图下载功能

- 支持用户保存当前地图视图，提供地图截图和下载功能。

### 5. 地图交互工具

- 封装多种画笔工具，支持点、线、多边形、矩形、圆形等绘图操作。
- 提供测距、测面积工具，支持在地图上进行空间测量。

### 6. 热力图

- 使用地质灾害数据生成热力图，对高风险区域进行可视化展示。

### 7. 点击弹窗 (Popup)

- 实现点击地图要素后弹出详细信息的功能，展示灾害体的详细属性信息。

### 8. 天气显示

- 集成高德API，通过IP解析获取用户位置信息，并显示当前天气状况。
- 提供天气按钮，点击后显示或隐藏天气信息，展示当前城市、天气情况、温度、风向和湿度等信息。

### 9.数据图表

- **灾害体类型分布**：使用ECharts展示四川省不同类型地质灾害体的分布情况，帮助用户直观了解灾害类型的多样性和空间分布特征。
- **威胁人口和财产分布**：利用ECharts图表显示各地区受地质灾害威胁的人口和财产分布，支持区域风险评估。
- **市级灾害点占比**：通过饼图展示市级范围内不同类型灾害点的比例，直观反映各市级区域的灾害状况。
- **灾害点威胁等级分布**：利用柱状图显示灾害点的威胁等级分布，帮助识别高风险区域。
- **词云图**：基于灾害相关关键词生成词云图，展示关键词的频率和重要性。

## 使用说明

### 环境准备

- Node.js (>= 12.x)
- npm (>= 6.x)

### 安装步骤

1. 安装依赖：

```bash
   npm install
   ```

2. 启动开发服务器：

```bash
   npm run serve
   ```

### 使用CDN导入OpenLayers

在项目的`public/index.html`文件中，通过以下方式导入OpenLayers：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四川省地质灾害管理平台</title>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
  <script src="https://cdn.jsdelivr.net/npm/ol/ol.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>
```

### 部署

1. 构建生产环境代码：

```bash
   npm run build
   ```

2. 部署`dist`目录到你的Web服务器。

## 目录结构

```
geo-hazard-management/
├── public/                     # 静态资源
│   └── index.html              # HTML模板文件
├── src/                        # 源代码
│   ├── assets/                 # 图片、图标等静态资源
│   ├── components/             # Vue组件
│   ├── views/                  # 页面视图
│   ├── store/                  # 状态管理
│   ├── App.vue                 # 主组件
│   ├── main.js                 # 入口文件
├── .gitignore                  # Git忽略文件
├── README.md                   # 项目说明文档
├── package.json                # 项目配置文件
└── vue.config.js               # Vue CLI配置
```

## 许可证

本项目基于MIT许可证进行发布，详情请参考[LICENSE](LICENSE)文件。

## 联系方式

如有任何问题或建议，欢迎通过邮件联系我：[yqxlearning@gmail.com](mailto:yqxlearning@gmail.com)

Nasty/geo-disaster

简介

发行版

贡献者

近期动态

Nasty/geo-disaster .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Nasty/geo-disaster