# CollaborativePlotting

**Repository Path**: rawcloud/collaborative-plotting

## Basic Information

- **Project Name**: CollaborativePlotting
- **Description**: 本项目是一个基于 Vue3 + OpenLayers + ol-plot 的协同标绘系统，支持多用户实时协同标绘。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-01-23
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 协同标绘系统

## 项目简介
本项目是一个基于 Vue3 + OpenLayers + ol-plot 的协同标绘系统，支持多用户在地图上实时协同标绘。系统加载 EGIS 天地图服务（CGCS2000 / EPSG:4490）作为底图，提供点、线、面、箭头、旗帜等多种标绘图元，并通过 WebSocket 实现标绘要素的实时同步与多端协同编辑。

## 技术构成
- 前端框架：Vue 3（`<script setup>` 语法）
- 构建工具：Vite 5
- 地图引擎：OpenLayers 7
- 标绘工具：ol-plot、ol-ext
- UI 组件库：Element Plus + @element-plus/icons-vue
- 地图服务：EGIS SDK（WMTS，EPSG:4490 / CGCS2000）
- 坐标转换：proj4
- 实时通讯：WebSocket
- 其他：`axios`（HTTP 请求）、`htht-xiaopai-voice`（语音能力）

## 环境要求
- Node.js >= 16
- 包管理器：npm（或 pnpm / yarn）

## 安装与运行
```bash
# 安装依赖
npm install

# 启动开发服务器（默认监听 0.0.0.0，端口 3000）
npm run dev

# 构建生产包
npm run build

# 预览构建产物
npm run preview
```

启动后访问 `http://localhost:3000` 即可使用。

## 主要功能
1. 地图显示与操作
   - 加载 EGIS 矢量底图与注记图层（WMTS）
   - 地图缩放、平移、拖拽等基本交互
   - EPSG:4490 坐标系支持与坐标转换

2. 标绘功能
   - 点标、线标、面标、圆形、矩形、椭圆、弓形、曲线、闭合曲面、扇形等基础图元
   - 集结地、细直箭头、进攻方向、战斗行动、分队战斗行动、双箭头、粗单直箭头等军用标绘
   - 矩形/三角/曲线标志旗、文本框等辅助标绘
   - 图形绘制、编辑、删除
   - 图元样式编辑与图层管理

3. 协同功能
   - 基于 WebSocket 的标绘要素实时同步
   - 多用户协同编辑与要素状态同步

## 项目结构
```
src/
├── assets/            # 静态资源（images 等）
├── components/
│   ├── Map.vue        # 地图主组件（底图加载、标绘图层）
│   ├── PlotTools.vue  # 标绘工具栏（各类标绘图元入口）
│   ├── LayerManager.vue # 图层管理器
│   └── StyleEditor.vue  # 图元样式编辑器
├── config/
│   └── plotStyles.js  # 标绘样式配置
├── plot/
│   ├── shapes/        # 自定义标绘图形
│   ├── PlotTypes.js   # 标绘类型定义
│   └── PlotUtils.js   # 标绘工具方法
├── services/
│   ├── egisService.js # EGIS 地图服务（OAuth 鉴权 + WMTS 瓦片）
│   ├── plotService.js # 标绘服务
│   └── wsService.js   # WebSocket 实时协同服务
├── styles/
│   └── global.css     # 全局样式
├── utils/
│   ├── coordinate.js  # 坐标转换工具
│   └── request.js     # 基于 axios 的 HTTP 封装
├── App.vue            # 主应用组件
└── main.js            # 应用入口
```

## 配置说明
- **EGIS 服务**：`src/services/egisService.js` 中已内置 `clientId`、`clientSecret` 与基础服务域名（`https://bncs.mem.gov.cn/egis`）。如需更换服务方凭证，请修改该文件中的对应常量。底图通过 OAuth 获取 `access_token` 后，以 `Basic` 鉴权方式请求 WMTS 瓦片。
- **开发服务器**：端口等配置见根目录 `vite.config.js`（默认端口 `3000`，并配置了 `@` 指向 `src` 的别名）。
- **WebSocket 地址**：协同服务地址在 `src/services/wsService.js` 中通过 `new WebSocket(url)` 传入，请按实际后端服务修改连接地址。

## 使用说明
1. 启动项目后，地图默认加载 EGIS 矢量底图与注记。
2. 点击左侧标绘工具栏中的图元按钮，在地图上按下并拖拽即可完成绘制。
3. 通过图层管理器可控制各图层显隐，通过样式编辑器调整选中图元的样式。
4. 当 WebSocket 协同服务连接成功后，本端绘制的标绘要素将实时同步给其他在线用户，并接收他人标绘更新。

## 注意事项
- EGIS 服务需有效的 `clientId` / `clientSecret` 凭证，凭证失效时将无法加载底图瓦片。
- 当前 WebSocket 服务仅实现了基础连接与消息收发，重连逻辑已预留注释位，生产环境请根据需要补充。
- 语音能力依赖 `htht-xiaopai-voice`，如需使用请参考其文档进行相关接入。