项目启动

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 助手使用

1. 在 AI 助手面板输入问题
2. 点击发送或按 Enter 键
3. 等待 AI 响应（支持流式显示）
4. 如果 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: 检查以下几点：

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

Q: AI 助手无响应？

A: 检查以下几点：

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

Q: GeoServer 图层加载失败？

A: 检查以下几点：

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

Q: 面板布局保存失败？

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

部署说明

Nginx 部署

1. 执行 npm run build 生成 dist 目录
2. 将 dist 目录内容复制到 Nginx 的 html 目录
3. 配置 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