Skip to content

Three Panel Workspace

Jump to bottom
zhouning edited this page Mar 22, 2026 · 1 revision

三面板工作区

GIS Data Agent 采用自定义 React SPA 替代 Chainlit 默认 UI，提供三面板布局（Chat | Map | Data），通过可拖拽分隔线自由调整各面板宽度。

面板概览

┌─────────────────┬──────────────────────────┬─────────────────────┐
│   Chat Panel    │      Map Panel           │    Data Panel       │
│   聊天面板       │      地图面板            │    数据面板         │
│                 │                          │                     │
│  NL Input       │  Leaflet 2D / deck.gl 3D │  19 Tabs, 4 Groups │
│  File Upload    │  GeoJSON Layers          │  Files / Catalog    │
│  Streaming      │  Basemap Switcher        │  Analytics / Charts │
│  Action Cards   │  Annotations / Legend    │  Workflows / MCP    │
│  Multimodal     │  NL Layer Control        │  Knowledge Base     │
│                 │                          │                     │
└─────────────────┴──────────────────────────┴─────────────────────┘
        ↕ 可拖拽分隔线 Draggable Resizer ↕

Chat Panel（聊天面板 — 左侧）

聊天面板是用户与 AI Agent 的主要交互入口：

  • 自然语言输入：支持中文/英文/日文，Intent Router 自动检测语言并路由
  • 文件上传：拖放上传空间数据文件，支持 SHP/GeoJSON/GPKG/KML/KMZ/CSV/Excel。ZIP 包自动解压索引空间文件
  • 流式响应 (Streaming)：Agent 执行过程实时流式展示，包括工具调用进度和中间结果
  • Action Cards（操作卡片）：结构化操作按钮，如"查看详情"、"下载结果"、"在地图上显示"
  • 多模态输入 (Multimodal)：支持上传图片（截图/照片）和 PDF 文件，Gemini 自动分类并提取信息

Map Panel（地图面板 — 中央）

地图面板提供 2D/3D 双模式地理可视化：

2D 模式（Leaflet.js）

  • GeoJSON 图层渲染：支持点/线/面矢量图层，自动着色
  • 底图切换 (Basemap Switcher)：
    • 高德地图 (Gaode) — 中国区域高速访问
    • 天地图 (Tianditu) — 中国官方地理信息底图
    • CartoDB — 简洁灰度底图，适合数据叠加
    • OpenStreetMap — 全球开源底图
  • 标注 (Annotations)：在地图上添加点/线/面标注，数据库持久化
  • 测量工具：距离测量、面积测量
  • 图例 (Legend)：自动生成图例，展示分级色彩、图层名称
  • 图层控制面板 (Layer Control)：勾选/取消图层，调整透明度和叠加顺序

3D 模式（deck.gl + MapLibre GL）

  • 一键 2D/3D 切换：通过面板内切换按钮在两种模式间无缝转换
  • 四种 3D 图层类型：
    • 拉伸图层 (Extrusion)：面状要素按属性值拉伸成立体柱
    • 柱状图层 (Column)：点或面数据以 3D 柱形展示
    • 弧线图层 (Arc)：起止点之间的 3D 弧线，适用于流量/迁徙
    • 散点图层 (Scatterplot)：3D 点云散布
  • 悬浮提示 (Hover Tooltips)：鼠标悬停显示要素属性

自然语言图层控制

用户可直接在聊天框输入自然语言控制地图：

  • "隐藏第二个图层" → 隐藏指定图层
  • "切换到3D视图" → 切换到 deck.gl 3D 模式
  • "只显示耕地图层" → 过滤显示特定图层
  • "修改颜色为红色" → 更改图层样式

系统在工具响应中检测 layer_control 标记，自动注入前端地图控制元数据。

Data Panel（数据面板 — 右侧）

数据面板包含 19 个标签页，按功能分为 4 组：

数据组 (Data Group)

Tab 功能
Files 用户文件列表，上传/下载/删除管理
CSV Preview CSV/Excel 文件预览，支持排序、筛选
Data Catalog 数据资产目录，元数据浏览，血缘追踪
GeoJSON Editor GeoJSON 编辑器，可查看和编辑空间数据
Virtual Sources 虚拟数据源连接：WFS/STAC/OGC API/自定义 API

分析组 (Analysis Group)

Tab 功能
Pipeline History 管道执行历史记录与回放
Token Usage Token 用量仪表盘，按用户/模型统计
Analytics 管道性能分析，执行频次/耗时/成功率
Charts ECharts 交互式图表（柱/线/饼/散点/雷达/箱线/树图等）
Governance 数据治理报告与审计结果展示

扩展组 (Extension Group)

Tab 功能
MCP Tools MCP 外部工具集成管理（3 种传输协议）
Workflows ReactFlow DAG 可视化工作流编辑器
Suggestions AI 智能建议（后续分析推荐）
Tasks 异步任务队列监控
Templates 分析模板库（保存/复用/共享）
Capabilities 系统能力一览（内置技能 + 工具集 + 用户扩展）
Knowledge Base 私有知识库管理（文档上传 + 语义检索 + GraphRAG）
Marketplace 技能与工具市场

记忆组 (Memory Group)

Tab 功能
Memory Search 空间记忆搜索与回忆（持久化的分析上下文）

管理功能

Admin Dashboard（管理员仪表盘）

通过用户菜单下拉进入（仅 admin 角色可见）：

  • 系统指标 (Metrics)：活跃用户数、Pipeline 执行次数、Token 消耗趋势
  • 用户管理 (User Management)：查看/禁用/删除用户，角色调整（admin/analyst/viewer）
  • 审计日志 (Audit Log)：全量操作审计记录，支持按用户/时间/操作类型过滤

User Settings（用户设置）

  • 账户信息：用户名、角色、创建时间
  • 账户删除 (Danger Zone)：自助账户删除，级联清理所有关联数据（token_usage、memories、share_links、team_members、audit_log、annotations）

Three-Panel Workspace

GIS Data Agent uses a custom React SPA replacing Chainlit's default UI, providing a three-panel layout (Chat | Map | Data) with draggable dividers for freely adjusting each panel's width.

Panel Overview

┌─────────────────┬──────────────────────────┬─────────────────────┐
│   Chat Panel    │      Map Panel           │    Data Panel       │
│                 │                          │                     │
│  NL Input       │  Leaflet 2D / deck.gl 3D │  19 Tabs, 4 Groups │
│  File Upload    │  GeoJSON Layers          │  Files / Catalog    │
│  Streaming      │  Basemap Switcher        │  Analytics / Charts │
│  Action Cards   │  Annotations / Legend    │  Workflows / MCP    │
│  Multimodal     │  NL Layer Control        │  Knowledge Base     │
│                 │                          │                     │
└─────────────────┴──────────────────────────┴─────────────────────┘
           ↕ Draggable Resizer ↕

Chat Panel (Left)

The Chat Panel is the primary interaction point between users and AI Agents:

  • Natural language input: Supports Chinese/English/Japanese; the Intent Router auto-detects language and routes
  • File upload: Drag-and-drop spatial data files — SHP/GeoJSON/GPKG/KML/KMZ/CSV/Excel. ZIP archives auto-extract and index spatial files
  • Streaming responses: Real-time streaming of Agent execution, including tool call progress and intermediate results
  • Action Cards: Structured action buttons such as "View Details", "Download Result", "Show on Map"
  • Multimodal input: Supports image (screenshot/photo) and PDF upload; Gemini auto-classifies and extracts information

Map Panel (Center)

The Map Panel provides dual-mode 2D/3D geographic visualization:

2D Mode (Leaflet.js)

  • GeoJSON layer rendering: Point/line/polygon vector layers with automatic styling
  • Basemap Switcher:
    • Gaode Maps — high-speed access for China region
    • Tianditu — China's official geographic information basemap
    • CartoDB — clean grayscale basemap ideal for data overlay
    • OpenStreetMap — global open-source basemap
  • Annotations: Add point/line/polygon annotations on the map, persisted to database
  • Measurement tools: Distance and area measurement
  • Legend: Auto-generated legend showing classification colors and layer names
  • Layer Control panel: Toggle layers, adjust opacity and stacking order

3D Mode (deck.gl + MapLibre GL)

  • One-click 2D/3D toggle: Seamlessly switch between modes via an in-panel toggle button
  • Four 3D layer types:
    • Extrusion: Polygon features extruded by attribute value
    • Column: Point or polygon data rendered as 3D columns
    • Arc: 3D arcs between origin-destination pairs for flow/migration
    • Scatterplot: 3D point cloud distribution
  • Hover Tooltips: Display feature attributes on mouse hover

Natural Language Layer Control

Users can control the map directly via chat input:

  • "Hide the second layer" → hides the specified layer
  • "Switch to 3D view" → switches to deck.gl 3D mode
  • "Show only farmland layer" → filters to display a specific layer
  • "Change color to red" → modifies layer style

The system detects layer_control markers in tool responses and auto-injects frontend map control metadata.

Data Panel (Right)

The Data Panel contains 19 tabs organized into 4 groups:

Data Group

Tab Function
Files User file listing, upload/download/delete management
CSV Preview CSV/Excel file preview with sorting and filtering
Data Catalog Data asset catalog, metadata browsing, lineage tracking
GeoJSON Editor View and edit spatial data in GeoJSON format
Virtual Sources Virtual data source connectors: WFS/STAC/OGC API/custom API

Analysis Group

Tab Function
Pipeline History Pipeline execution history and replay
Token Usage Token usage dashboard, stats by user/model
Analytics Pipeline performance analysis — frequency/duration/success rate
Charts ECharts interactive charts (bar/line/pie/scatter/radar/box/treemap etc.)
Governance Data governance reports and audit results

Extension Group

Tab Function
MCP Tools External MCP tool integration management (3 transport protocols)
Workflows ReactFlow DAG visual workflow editor
Suggestions AI-powered suggestions (follow-up analysis recommendations)
Tasks Async task queue monitoring
Templates Analysis template library (save/reuse/share)
Capabilities System capability overview (built-in skills + toolsets + user extensions)
Knowledge Base Private knowledge base management (document upload + semantic search + GraphRAG)
Marketplace Skills and tools marketplace

Memory Group

Tab Function
Memory Search Spatial memory search and recall (persisted analysis context)

Administrative Features

Admin Dashboard

Accessible via user menu dropdown (admin role only):

  • Metrics: Active users, Pipeline execution counts, Token consumption trends
  • User Management: View/disable/delete users, role adjustment (admin/analyst/viewer)
  • Audit Log: Full operation audit records, filterable by user/time/operation type

User Settings

  • Account Info: Username, role, creation date
  • Account Deletion (Danger Zone): Self-service account deletion with cascade cleanup (token_usage, memories, share_links, team_members, audit_log, annotations)

GIS Data Agent v14.5 · Built on Google ADK · GitHub · Report Issue

🏠 Home

快速开始 Getting Started

核心概念 Core Concepts

使用指南 User Guide

架构与运维 Architecture & Ops

参考 Reference

Clone this wiki locally