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 协议开源。