# coordinate-tool
**Repository Path**: Tianyu201809/coordinate-tool
## Basic Information
- **Project Name**: coordinate-tool
- **Description**: 坐标可视化查看、编辑工具
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-11
- **Last Updated**: 2025-11-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 🎯 坐标工具 (Coordinate Tool)
**一个基于 Vue 3 + ECharts 的交互式坐标绘图工具** 🚀
---
## 📋 目录
- [✨ 功能特性](#-功能特性)
- [🎨 界面预览](#-界面预览)
- [🛠️ 技术栈](#️-技术栈)
- [📦 安装与运行](#-安装与运行)
- [🎮 使用指南](#-使用指南)
- [📁 项目结构](#-项目结构)
- [🔧 开发指南](#-开发指南)
- [📄 数据格式](#-数据格式)
- [🤝 贡献指南](#-贡献指南)
---
## ✨ 功能特性
### 🎨 绘图功能
- **📍 点绘制**: 支持在画布上精确绘制坐标点
- **📏 线绘制**: 连接点与点，创建线段
- **🔷 多边形绘制**: 绘制封闭的多边形区域
- **📐 矩形绘制**: 快速绘制矩形区域
### 🎛️ 编辑模式
- **👁️ 预览模式**: 查看和浏览已绘制的图形
- **✏️ 编辑模式**: 进入绘图编辑状态
- **🔄 模式切换**: 支持预览/编辑模式无缝切换
### 📊 数据管理
- **📁 数据导入**: 支持 JSON 格式数据导入
- **💾 数据导出**: 导出绘制的坐标数据
- **🗂️ 示例数据**: 内置示例文件供参考
- **🧹 清空画布**: 一键清空所有绘制内容
### 🎯 交互功能
- **🔍 点位高亮**: 点击侧边栏点位可高亮显示
- **📸 截图功能**: 支持画布截图保存
- **🎯 区域筛选**: 按区域筛选显示内容
- **⌨️ 键盘快捷键**: ESC 键快速退出编辑模式
---
## 🛠️ 技术栈
### 前端框架
- **Vue 3** - 渐进式 JavaScript 框架
- **Composition API** - 组合式 API
- **Vite** - 下一代前端构建工具
### 状态管理
- **Pinia** - Vue 的状态管理库
- **EventEmitter3** - 事件发射器
### 图表与绘图
- **ECharts 5.6.0** - 强大的图表库
- **ECharts-stat** - 统计扩展
### UI 组件
- **Naive UI** - Vue 3 组件库
- **Vicons** - 图标库集合
---
## 📦 安装与运行
### 环境要求
- **Node.js** >= 20.0.0
- **npm** 或 **pnpm** 或 **yarn**
### 快速开始
1. **克隆项目**
```bash
git clone
cd coordinate-tool
```
2. **安装依赖**
```bash
# 使用 npm
npm install
# 或使用 pnpm (推荐)
pnpm install
```
3. **启动开发服务器**
```bash
# 使用 npm
npm run dev
# 或使用 pnpm
pnpm dev
```
4. **访问应用**
```
http://localhost:30001
```
### 构建生产版本
```bash
pnpm build
```
---
## 🎮 使用指南
### 🎯 基本操作
#### 1. 模式切换
- 点击工具栏的 **"编辑"** 按钮进入编辑模式
- 点击 **"预览"** 按钮返回预览模式
- 按 **ESC** 键快速退出编辑模式
#### 2. 绘制图形
在编辑模式下，可以使用以下工具：
- **📍 画点**: 点击画布添加坐标点
- **📏 画线**: 连接两个点创建线段
- **🔷 画区域**: 绘制封闭的多边形区域
#### 3. 数据管理
- **📁 导入数据**: 点击 "导入" 按钮上传 JSON 文件
- **💾 下载示例**: 点击 "示例" 按钮下载示例文件
- **🧹 清空画布**: 点击 "清空" 按钮清除所有内容
#### 4. 交互功能
- **🔍 点位高亮**: 点击侧边栏的点位坐标可高亮显示
- **📸 截图**: 点击 "截图" 按钮保存当前画布
- **🎯 区域筛选**: 点击 "区域" 按钮筛选显示内容
### ⌨️ 快捷键
| 按键 | 功能 |
|------|------|
| `ESC` | 退出编辑模式 |
| `右键` | 退出编辑模式 |
---
## 📁 项目结构
```
coordinate-tool/
├── 📁 public/ # 静态资源
│ ├── 📁 example/ # 示例数据文件
│ │ ├── level1.json # 一级示例数据
│ │ └── level2.json # 二级示例数据
│ └── favicon.ico # 网站图标
├── 📁 src/ # 源代码
│ ├── 📁 assets/ # 资源文件
│ │ ├── base.css # 基础样式
│ │ └── 📁 svg/ # SVG 图标
│ ├── 📁 components/ # Vue 组件
│ │ ├── 📁 Common/ # 通用组件
│ │ ├── 📁 CoordinateCanvas/ # 坐标画布组件
│ │ ├── 📁 Dialog/ # 对话框组件
│ │ ├── 📁 PointBall/ # 点位球组件
│ │ ├── 📁 SideBar/ # 侧边栏组件
│ │ └── 📁 ToolBar/ # 工具栏组件
│ ├── 📁 constant/ # 常量定义
│ ├── 📁 format/ # 数据格式化
│ ├── 📁 store/ # Pinia 状态管理
│ ├── 📁 utils/ # 工具函数
│ ├── 📁 view/ # 页面视图
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── README.md # 项目说明
```
---
## 📄 数据格式
### 导入数据格式
项目支持 JSON 格式的数据导入，数据结构如下：
```json
[
{
"name": "房间名称",
"type": "房间类型",
"label": {
"x": 标签X坐标,
"y": 标签Y坐标
},
"cornerList": [
{
"x": 点X坐标,
"y": 点Y坐标
}
],
"link": [
{
"start": {
"x": 起点X坐标,
"y": 起点Y坐标
},
"end": {
"x": 终点X坐标,
"y": 终点Y坐标
}
}
]
}
]
```
### 示例数据
项目内置了示例数据文件：
- `public/example/level1.json` - 一级示例数据
- `public/example/level2.json` - 二级示例数据
---
## 🤝 贡献指南
我们欢迎所有形式的贡献！
### 贡献方式
1. **🐛 报告 Bug**
- 在 GitHub Issues 中创建新的 Issue
- 详细描述问题现象和复现步骤
2. **💡 提出建议**
- 在 GitHub Issues 中提出功能建议
- 描述新功能的用途和实现思路
3. **🔧 提交代码**
- Fork 项目到你的 GitHub 账户
- 创建功能分支进行开发
- 提交 Pull Request
---
**如果这个项目对你有帮助，请给它一个 ⭐ Star！**
❤️