生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00
parent 83523dad64
commit 28229ce795
354 changed files with 147599 additions and 7892 deletions
--- a/src/GIS_DRAWING_USAGE_GUIDE.md
+++ b/src/GIS_DRAWING_USAGE_GUIDE.md
@@ -0,0 +1,336 @@
+# 🎨 数字化绘制与编辑功能 - 使用指南
+
+## ✅ 功能修复完成
+
+### 已修复的问题
+
+1. ✅ **线条绘制功能** - 现在可以正常完成线条绘制
+2. ✅ **撤销/重做按钮** - 功能完全正常，显示操作次数
+3. ✅ **清除按钮** - 添加了确认提示，防止误操作
+4. ✅ **保存到地块** - 绘制完成后自动弹出保存对话框
+
+---
+
+## 📝 详细使用说明
+
+### 1️⃣ 绘制多边形地块
+
+**步骤：**
+1. 点击左侧工具面板的 **"多边形"** 按钮
+2. 在画布上依次点击标记顶点（至少3个点）
+3. 有两种方式完成绘制：
+   - **方式A**：点击起点（会出现蓝色吸附圆圈）
+   - **方式B**：点击左侧的 **"完成绘制"** 按钮
+4. 自动弹出 **保存地块对话框**
+5. 输入地块编号和名称，点击 **"保存地块"**
+
+**示例：**
+```
+地块编号：FIELD-001
+地块名称：地块A
+面积：125.5 亩（自动计算）
+周长：1500 米（自动计算）
+```
+
+### 2️⃣ 绘制线条
+
+**步骤：**
+1. 点击左侧工具面板的 **"线"** 按钮
+2. 在画布上依次点击添加节点（至少2个点）
+3. 点击左侧的 **"完成绘制"** 按钮结束
+4. 自动弹出保存对话框
+
+**提示：**
+- 顶部会显示：`已标记 X 个点，点击"完成绘制"按钮结束`
+- 实时显示线的长度（米）
+- 可用于测距或作为分割线
+
+### 3️⃣ 绘制矩形
+
+**步骤：**
+1. 点击左侧工具面板的 **"矩形"** 按钮
+2. 点击第一个角点
+3. 点击对角点自动完成
+4. 自动弹出保存对话框
+
+**特点：**
+- 只需2次点击
+- 自动创建规整矩形
+- 适合规则地块
+
+### 4️⃣ 使用撤销/重做功能
+
+**撤销操作：**
+- 点击 **"撤销"** 按钮
+- 或按键盘 `Ctrl + Z`
+- 按钮显示可撤销次数：`撤销 (2)`
+
+**重做操作：**
+- 点击 **"重做"** 按钮
+- 或按键盘 `Ctrl + Y`
+- 按钮显示可重做次数：`重做 (1)`
+
+**注意：**
+- 支持多步历史记录
+- 完成绘制后历史记录会清空
+- 切换绘制模式会清空历史
+
+### 5️⃣ 使用清除功能
+
+**清除当前绘制：**
+1. 点击左侧的 **"清除"** 按钮
+2. 弹出确认对话框："确定要清除当前绘制吗？"
+3. 点击"确定"清除所有内容
+
+**或使用快捷键：**
+- 按键盘 `Delete` 键
+- 按键盘 `Esc` 键（绘制中）
+
+### 6️⃣ 保存到地块
+
+**自动保存流程：**
+1. 完成绘制后自动弹出 **"保存地块"** 对话框
+2. 系统自动填充：
+   - 地块编号：`FIELD-001`（自动递增）
+   - 地块名称：`地块A`（自动命名）
+3. 可以修改这些信息
+4. 点击 **"保存地块"** 按钮完成保存
+
+**保存的信息：**
+```json
+{
+  "id": "field-1680000000000",
+  "code": "FIELD-001",
+  "name": "地块A",
+  "points": [...],
+  "area": 125.5,
+  "perimeter": 1500,
+  "type": "polygon",
+  "color": "#22c55e",
+  "createdAt": "2025-10-18T10:30:00.000Z"
+}
+```
+
+**查看已保存的地块：**
+- 页面底部显示 **"已保存的地块"** 列表
+- 显示几何类型、面积、周长、顶点数
+- 可以删除已保存的记录
+
+---
+
+## ⌨️ 快捷键列表
+
+| 快捷键 | 功能 | 说明 |
+|--------|------|------|
+| `Ctrl + Z` | 撤销 | 撤销上一步操作 |
+| `Ctrl + Y` | 重做 | 重做被撤销的操作 |
+| `Ctrl + Shift + Z` | 重做 | 重做被撤销的操作 |
+| `Enter` | 完成绘制 | 完成当前绘制（需≥2个点） |
+| `Delete` | 清除 | 清除当前绘制 |
+| `Esc` | 取消 | 取消当前绘制 |
+
+---
+
+## 🎯 核心功能特性
+
+### ✅ 智能吸附
+- 靠近已有点10px内自动吸附
+- 蓝色圆圈提示吸附点
+- 确保边界精确连接
+- 可在配置中开关
+
+### ✅ 几何校验
+- 实时检测多边形自相交
+- 红色标记无效几何
+- 阻止保存无效数据
+- 自动提示错误原因
+
+### ✅ 自动计算
+- **面积计算**：使用Shoelace公式，单位：亩
+- **周长计算**：各边长度之和，单位：米
+- **顶点统计**：显示节点数量
+- **实时更新**：绘制过程中实时显示
+
+### ✅ 历史管理
+- 记录每步操作
+- 支持多步撤销/重做
+- 显示可操作次数
+- 完成后自动清空
+
+---
+
+## 📋 操作示例
+
+### 示例1：绘制三角形地块
+
+```
+1. 点击"多边形"按钮
+2. 点击画布标记第1个顶点 (200, 150)
+3. 点击画布标记第2个顶点 (350, 150)
+4. 点击画布标记第3个顶点 (275, 280)
+5. 点击第1个顶点闭合（或点击"完成绘制"）
+6. 弹出保存对话框
+7. 输入：
+   - 地块编号：FIELD-001
+   - 地块名称：三角地块
+8. 点击"保存地块"
+9. 完成！显示：面积 15.6 亩，周长 450 米
+```
+
+### 示例2：绘制测量线
+
+```
+1. 点击"线"按钮
+2. 点击画布标记起点 (100, 200)
+3. 点击画布标记转折点 (300, 200)
+4. 点击画布标记终点 (300, 400)
+5. 点击"完成绘制"按钮
+6. 显示：总长度 400 米
+7. 可选择保存或取消
+```
+
+### 示例3：使用撤销功能
+
+```
+1. 开始绘制多边形
+2. 标记3个顶点
+3. 发现第3个点位置错误
+4. 点击"撤销"按钮（或按Ctrl+Z）
+5. 第3个点被移除
+6. 重新点击正确位置
+7. 继续完成绘制
+```
+
+---
+
+## 🔧 编辑工具使用
+
+### 节点编辑
+
+**编辑地块边界：**
+1. 切换到 **"编辑工具"** 标签页
+2. 点击 **"节点编辑"** 模式
+3. 点击画布上的地块选中（边界高亮）
+4. 点击节点（变为蓝色）
+5. 拖动节点到新位置
+6. 释放鼠标完成编辑
+7. 面积和周长自动更新
+
+**添加节点：**
+1. 选中地块和节点
+2. 点击 **"添加节点"** 按钮
+3. 在边的中点自动添加新节点
+
+**删除节点：**
+1. 选中要删除的节点
+2. 点击 **"删除节点"** 按钮
+3. 节点被移除（至少保留3个顶点）
+
+### 地块分割
+
+**分割地块：**
+1. 点击 **"地块分割"** 模式
+2. 在地块上绘制分割线
+3. 点击 **"执行分割"** 按钮
+4. 一个地块变为两个
+
+### 地块合并
+
+**合并地块：**
+1. 点击 **"地块合并"** 模式
+2. 依次点击要合并的地块（高亮显示）
+3. 点击 **"执行合并"** 按钮
+4. 创建合并后的新地块
+
+---
+
+## 💡 使用技巧
+
+### 技巧1：精确绘制
+- 利用网格背景对齐
+- 使用吸附功能连接点
+- 放大视图提高精度
+- 使用矩形工具绘制规则地块
+
+### 技巧2：快速修改
+- 先粗略绘制大致轮廓
+- 使用节点编辑精确调整
+- 添加节点细化边界
+- 删除多余节点简化形状
+
+### 技巧3：避免错误
+- 多边形不要自相交
+- 至少保留3个顶点
+- 完成前检查几何有效性
+- 使用撤销功能修正错误
+
+### 技巧4：提高效率
+- 使用快捷键操作
+- 矩形工具绘制规则地块
+- 复制类似地块修改
+- 批量编辑相邻地块
+
+---
+
+## 🚀 高级编辑器
+
+如果需要更强大的功能，可以切换到 **高级编辑器**：
+
+### 高级功能
+- ✅ 文件导入（KML/GeoJSON/SHP）
+- ✅ 真实地图集成（高德/Leaflet）
+- ✅ 坐标转换（WGS84/GCJ02）
+- ✅ 版本管理和历史回滚
+- ✅ 批量导入导出
+- ✅ 数据关联（土壤/种植）
+- ✅ 精确测量（基于真实坐标）
+- ✅ 图层管理
+
+### 切换方式
+1. 点击页面顶部的 **"高级编辑器"** 按钮
+2. 或点击推荐卡片中的按钮
+3. 进入高级编辑器界面
+
+---
+
+## ❓ 常见问题
+
+### Q1：为什么无法完成绘制？
+**A：** 检查以下条件：
+- 线至少需要2个点
+- 多边形至少需要3个点
+- 多边形不能自相交
+- 点击"完成绘制"按钮
+
+### Q2：如何撤销错误操作？
+**A：** 两种方式：
+- 点击左侧"撤销"按钮
+- 按键盘 `Ctrl + Z`
+
+### Q3：绘制的内容保存到哪里？
+**A：** 流程如下：
+1. 完成绘制后弹出保存对话框
+2. 输入地块信息
+3. 保存到地块列表
+4. 实际项目中会保存到后<E588B0><E5908E>数据库
+
+### Q4：如何删除已保存的地块？
+**A：** 在页面底部的"已保存的地块"列表中，点击删除按钮。
+
+### Q5：清除按钮会删除所有内容吗？
+**A：** 不会，清除只会删除当前正在绘制的内容，已保存的地块不受影响。
+
+---
+
+## 📞 技术支持
+
+如有问题或建议，请查看：
+- 📖 使用指南标签页
+- 📋 GIS_DRAWING_EDITING_COMPLETE.md
+- 💬 联系项目团队
+
+---
+
+**版本**：v2.0  
+**更新时间**：2025-10-18  
+**状态**：✅ 所有功能正常