项目概述

AI 水务前端项目概述

项目简介

AI 水务前端是一个基于 Vue3 + OpenLayers + Dify AI 的智能水务地理信息系统。该项目集成了地图展示、图层管理、GeoServer 服务对接以及 AI 智能助手功能，支持通过自然语言与地图进行交互。

项目地址： https://github.com/znlgis/ai-water-front

核心特性

地图功能

• 基于 OpenLayers 的地图展示
• 支持 OpenStreetMap 底图
• GeoJSON 数据可视化
• 图层管理与控制

AI 智能助手

• 集成 Dify AI 平台
• 支持流式响应
• 自然语言交互
• 自动识别 GeoJSON 数据并在地图上展示

GeoServer 集成

• GeoServer REST API 对接
• 图层信息获取
• 代理配置支持

界面交互

• 可调整的面板布局
• 图层面板
• AI 助手面板
• 响应式设计

技术栈

技术	版本	说明
Vue	3.3+	渐进式JavaScript框架
OpenLayers	8.1+	开源地图库
Axios	1.7+	HTTP 客户端
Vite	4.4+	前端构建工具
Dify API	-	AI 应用开发平台
GeoServer	-	开源地理服务器

主要功能

1. 地图展示

• OpenStreetMap 底图加载
• 地图平移、缩放控制
• 坐标投影转换

2. 图层管理

• 图层列表展示
• 图层可见性控制
• 图层顺序调整

3. AI 智能助手

• 自然语言对话
• 地理数据查询
• GeoJSON 数据自动渲染
• 流式响应显示

4. GeoServer 对接

• 服务信息获取
• 图层列表查询
• 代理认证配置

项目结构

ai-water-front/
├── public/                          # 静态资源
├── src/
│   ├── assets/                     # 资源文件
│   ├── components/                 # 组件目录
│   │   ├── DemoMap.vue            # 地图组件
│   │   ├── layout/                # 布局组件
│   │   │   └── AppFooter.vue      # 页脚组件
│   │   └── panels/                # 面板组件
│   │       ├── AIAssistantPanel.vue  # AI 助手面板
│   │       └── LayerPanel.vue        # 图层面板
│   ├── geoserver/                  # GeoServer 相关
│   │   ├── About.js               # 服务信息
│   │   ├── GeoServerRestApi.js    # REST API 封装
│   │   └── Layers.js              # 图层管理
│   ├── services/                   # 服务层
│   │   ├── difyClient.js          # Dify AI 客户端
│   │   └── geoJsonService.js      # GeoJSON 服务
│   ├── utils/                      # 工具函数
│   │   └── geoJsonTestUtils.js    # GeoJSON 测试工具
│   ├── App.vue                     # 根组件
│   ├── main.js                     # 入口文件
│   ├── mapInstance.js             # 地图实例管理
│   └── style.css                   # 全局样式
├── .env                            # 环境配置
├── index.html                      # HTML 模板
├── vite.config.js                  # Vite 配置
└── package.json                    # 项目依赖

界面布局

+--------------------------------------------------+
|                    Header                         |
+--------------------------------------------------+
|  Left Panel  |  Resizer  |     Map Container     |
|  +--------+  |     |     |                       |
|  | Layer  |  |     |     |                       |
|  | Panel  |  |     |     |      DemoMap          |
|  +--------+  |     |     |                       |
|  | Resizer|  |     |     |                       |
|  +--------+  |     |     |                       |
|  | AI     |  |     |     |                       |
|  |Assistant| |     |     |                       |
|  +--------+  |     |     |                       |
+--------------------------------------------------+
|                    Footer                         |
+--------------------------------------------------+

依赖说明

核心依赖

{
  "dependencies": {
    "vue": "^3.3.4",
    "ol": "^8.1.0",
    "axios": "^1.7.2",
    "base-64": "^1.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

依赖说明

• vue - Vue.js 核心框架
• ol - OpenLayers 地图库
• axios - HTTP 请求库
• base-64 - Base64 编解码，用于 GeoServer 认证

开源协议

本项目采用 MIT 协议开源。