AI 水务前端项目启动

快速启动

开发模式

npm run dev

启动后访问 http://localhost:3000

生产构建

npm run build

构建产物将输出到 dist 目录。

预览构建结果

npm run preview

可用脚本

命令	说明
`npm run dev`	启动开发服务器
`npm run build`	生产环境构建
`npm run preview`	预览构建结果

启动配置

修改开发服务器端口

编辑 vite.config.js：

server: {
  port: 8080,  // 修改为你需要的端口
  open: true
}

禁用自动打开浏览器

server: {
  port: 3000,
  open: false  // 设置为 false
}

启动后页面功能

1. 左侧面板

图层面板（上半部分）

显示地图图层列表
支持图层可见性控制
支持图层顺序调整
与 GeoServer 图层联动

AI 助手面板（下半部分）

自然语言对话输入
流式响应显示
GeoJSON 数据自动识别
地图数据可视化

2. 中心区域 - 地图

OpenStreetMap 底图展示
默认中心点：北京（116.4074, 39.9042）
默认缩放级别：10
支持平移、缩放操作
AI 返回的 GeoJSON 自动渲染

3. 面板调整

水平分隔条：调整左侧面板宽度
垂直分隔条：调整图层面板和 AI 面板高度
布局状态自动保存到 localStorage

交互功能

AI 助手使用

在 AI 助手面板输入问题
点击发送或按 Enter 键
等待 AI 响应（支持流式显示）
如果 AI 返回 GeoJSON 数据，自动在地图上展示

示例对话

用户：查询北京市的水系分布
AI：[返回 GeoJSON 数据，自动渲染到地图上]

用户：显示海淀区的供水管网
AI：[查询数据并返回 GeoJSON]

地图操作

平移：拖拽地图
缩放：滚轮或双击
图层控制：在图层面板操作

GeoServer 功能

查看图层列表

启动项目后，图层面板会自动从 GeoServer 获取图层列表。

添加图层

在图层面板中选择要添加的图层，即可加载到地图上。

开发调试

启用开发模式工具

项目在开发模式下会自动加载测试工具：

// App.vue 中
if (import.meta.env.DEV) {
  import('./utils/geoJsonTestUtils.js')
}

控制台调试

可以在浏览器控制台使用以下方法：

// 测试 GeoJSON 渲染
window.testGeoJson(geoJsonData)

// 清除 GeoJSON 图层
window.clearGeoJsonLayers()

常见问题

Q: 地图无法显示？

A: 检查以下几点：

网络是否正常（需要加载 OpenStreetMap 瓦片）
浏览器控制台是否有错误信息
确认 OpenLayers 依赖已正确安装

Q: AI 助手无响应？

A: 检查以下几点：

确认已配置 Dify API Key
检查 .env.local 文件是否存在
查看浏览器控制台是否有 “未检测到 VITE_DIFY_API_KEY” 警告
检查网络是否能访问 Dify 服务

Q: GeoServer 图层加载失败？

A: 检查以下几点：

GeoServer 服务是否已启动
代理配置是否正确
认证信息是否正确

Q: 面板布局保存失败？

A: 检查浏览器 localStorage 是否被禁用或已满。

部署说明

Nginx 部署

执行 npm run build 生成 dist 目录
将 dist 目录内容复制到 Nginx 的 html 目录
配置 Nginx 代理 GeoServer：

server {
    listen 80;
    server_name your-domain.com;
    
    root /path/to/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # GeoServer 代理
    location /geoserver/ {
        proxy_pass http://geoserver-host:8765/geoserver/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Authorization "Basic 基于base64编码的用户名:密码";
    }
}

Docker 部署

创建 Dockerfile：

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建并运行：

docker build -t ai-water-front .
docker run -d -p 80:80 ai-water-front

环境变量注入

生产环境中，可以通过 Nginx 或 Docker 环境变量注入配置：

# Docker 运行时注入
docker run -d -p 80:80 \
  -e VITE_DIFY_API_KEY=your-key \
  ai-water-front