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