生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
365
src/MAP_POINT_PICKER_GUIDE.md
Normal file
365
src/MAP_POINT_PICKER_GUIDE.md
Normal file
@@ -0,0 +1,365 @@
|
||||
# 📍 几何计算工具 - 地图选点功能
|
||||
|
||||
## 📋 功能概述
|
||||
|
||||
几何计算工具现已支持通过地图选择坐标点，用户可以选择：
|
||||
- **地图选点模式**：直接在地图上点击选择坐标
|
||||
- **手动输入模式**：手动输入经纬度坐标
|
||||
|
||||
---
|
||||
|
||||
## 🎯 使用步骤
|
||||
|
||||
### 步骤1: 打开几何计算工具
|
||||
|
||||
```
|
||||
空间数据管理 → 点击 "几何计算演示" 按钮
|
||||
```
|
||||
|
||||
### 步骤2: 选择计算类型
|
||||
|
||||
在对话框中选择需要的计算类型：
|
||||
- 面积
|
||||
- 周长
|
||||
- 中心点
|
||||
- 距离
|
||||
- 包围盒
|
||||
|
||||
### 步骤3: 选择输入方式
|
||||
|
||||
每个计算类型都提供两种输入方式的切换按钮：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [🖱️ 地图选点] [✏️ 手动输入坐标] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🗺️ 地图选点模式
|
||||
|
||||
### 多边形选点（面积/周长/中心点/包围盒）
|
||||
|
||||
**操作方法：**
|
||||
1. 点击 "地图选点" 按钮
|
||||
2. 在地图上点击添加坐标点
|
||||
3. 自动绘制多边形
|
||||
4. 点击已有标记可删除该点
|
||||
5. 至少保留3个点
|
||||
|
||||
**界面展示：**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 📍 在地图上选择多边形顶点 4个点 │
|
||||
│ [清除所有点] [完成选择] │
|
||||
├─────────────────────────────────────┤
|
||||
│ 💡 点击地图添加坐标点，点击标记 │
|
||||
│ 删除该点（至少保留3个点） │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ [地图显示区域] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ 选中的坐标点： │
|
||||
│ 点1: 39.904000, 116.407000 │
|
||||
│ 点2: 39.908000, 116.407000 [×] │
|
||||
│ 点3: 39.908000, 116.412000 [×] │
|
||||
│ 点4: 39.904000, 116.412000 [×] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 单点选择（距离计算）
|
||||
|
||||
**操作方法：**
|
||||
1. 点击 "地图选点" 按钮
|
||||
2. 点击地图选择点1位置
|
||||
3. 切换到点2选择
|
||||
4. 点击地图选择点2位置
|
||||
|
||||
**界面展示：**
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 点1: [🖱️ 地图选择] [✏️ 手动输入] │
|
||||
│ │
|
||||
│ [地图显示点1] │
|
||||
│ │
|
||||
│ 当前坐标: 39.904200, 116.407400 │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ 点2: [🖱️ 地图选择] [✏️ 手动输入] │
|
||||
│ │
|
||||
│ [地图显示点2] │
|
||||
│ │
|
||||
│ 当前坐标: 39.915000, 116.415000 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✏️ 手动输入模式
|
||||
|
||||
### 多边形坐标输入
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 多边形坐标点 [+ 添加点] │
|
||||
├─────────────────────────────────────┤
|
||||
│ 点1 [纬度: 39.9040] [经度: 116.4070] [🗑️] │
|
||||
│ 点2 [纬度: 39.9080] [经度: 116.4070] [🗑️] │
|
||||
│ 点3 [纬度: 39.9080] [经度: 116.4120] [🗑️] │
|
||||
│ 点4 [纬度: 39.9040] [经度: 116.4120] [🗑️] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 两点坐标输入
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 点1坐标 │
|
||||
│ 纬度: [39.9042] 经度: [116.4074] │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ 点2坐标 │
|
||||
│ 纬度: [39.9150] 经度: [116.4150] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 地图功能特性
|
||||
|
||||
### ✅ 可视化显示
|
||||
|
||||
- **标记编号**：每个点显示序号标签
|
||||
- **多边形绘制**：自动连接点形成多边形
|
||||
- **颜色区分**：绿色边框和半透明填充
|
||||
- **自适应视图**：自动缩放到合适范围
|
||||
|
||||
### ✅ 交互操作
|
||||
|
||||
- **点击添加**：点击地图任意位置添加点
|
||||
- **点击删除**：点击已有标记删除该点
|
||||
- **清除所有**：一键清除所有坐标点
|
||||
- **拖拽地图**：可以拖拽查看不同区域
|
||||
- **缩放控制**：滚轮缩放或缩放按钮
|
||||
|
||||
### ✅ 坐标显示
|
||||
|
||||
- **实时更新**：显示当前所有坐标点
|
||||
- **精确显示**：6位小数精度
|
||||
- **快速删除**：每个坐标旁有删除按钮
|
||||
|
||||
---
|
||||
|
||||
## 💡 使用场景
|
||||
|
||||
### 场景1: 规则地块面积计算
|
||||
|
||||
**适合**：手动输入模式
|
||||
```
|
||||
已知地块是矩形，4个角点坐标明确
|
||||
→ 使用手动输入模式，直接输入4个坐标
|
||||
```
|
||||
|
||||
### 场景2: 不规则地块面积计算
|
||||
|
||||
**适合**：地图选点模式
|
||||
```
|
||||
地块形状不规则，边界较多
|
||||
→ 使用地图选点，直接在地图上标记边界点
|
||||
→ 更直观，更准确
|
||||
```
|
||||
|
||||
### 场景3: 两地距离计算
|
||||
|
||||
**适合**：地图选点模式
|
||||
```
|
||||
需要测量农机库到地块的距离
|
||||
→ 在地图上点击农机库位置
|
||||
→ 再点击地块位置
|
||||
→ 立即得到距离
|
||||
```
|
||||
|
||||
### 场景4: 精确坐标调整
|
||||
|
||||
**适合**：手动输入模式
|
||||
```
|
||||
地图选点后需要微调坐标
|
||||
→ 切换到手动输入模式
|
||||
→ 精确修改经纬度数值
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### MapPointPicker 组件
|
||||
|
||||
**功能：**
|
||||
- 高德地图集成
|
||||
- 标记管理
|
||||
- 多边形绘制
|
||||
- 事件处理
|
||||
|
||||
**Props：**
|
||||
```typescript
|
||||
interface MapPointPickerProps {
|
||||
points: Point[]; // 坐标点数组
|
||||
mode: 'polygon' | 'single'; // 多边形或单点模式
|
||||
onPointsChange: (points: Point[]) => void; // 点变化回调
|
||||
onClose?: () => void; // 关闭回调
|
||||
height?: string; // 地图高度
|
||||
title?: string; // 标题
|
||||
}
|
||||
```
|
||||
|
||||
### 状态管理
|
||||
|
||||
```typescript
|
||||
// 地图选点模式
|
||||
const [mapPickMode, setMapPickMode] = useState<'polygon' | 'distance-p1' | 'distance-p2' | null>(null);
|
||||
|
||||
// 编辑中的点索引
|
||||
const [editingPointIndex, setEditingPointIndex] = useState<number | null>(null);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 完整工作流程
|
||||
|
||||
### 面积计算示例
|
||||
|
||||
```
|
||||
1. 打开几何计算工具
|
||||
↓
|
||||
2. 选择 "面积" 标签
|
||||
↓
|
||||
3. 点击 "地图选点" 按钮
|
||||
↓
|
||||
4. 在地图上依次点击地块的4个角点
|
||||
↓
|
||||
5. 地图自动绘制多边形
|
||||
↓
|
||||
6. 确认坐标无误
|
||||
↓
|
||||
7. 点击 "计算面积 (ST_Area)" 按钮
|
||||
↓
|
||||
8. 查看结果：平方米、亩、公顷
|
||||
```
|
||||
|
||||
### 距离计算示例
|
||||
|
||||
```
|
||||
1. 打开几何计算工具
|
||||
↓
|
||||
2. 选择 "距离" 标签
|
||||
↓
|
||||
3. 点1部分点击 "地图选点"
|
||||
↓
|
||||
4. 在地图上点击起点位置
|
||||
↓
|
||||
5. 点2部分点击 "地图选点"
|
||||
↓
|
||||
6. 在地图上点击终点位置
|
||||
↓
|
||||
7. 点击 "计算距离 (ST_Distance)" 按钮
|
||||
↓
|
||||
8. 查看结果：米、千米
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
### 1. 地图加载
|
||||
|
||||
**问题：** 地图未加载时无法使用
|
||||
**解决：** 等待地图SDK加载完成
|
||||
|
||||
### 2. 最小点数
|
||||
|
||||
**限制：** 多边形至少需要3个点
|
||||
**提示：** 删除点时会检查，不足3个点无法删除
|
||||
|
||||
### 3. 坐标精度
|
||||
|
||||
**显示：** 6位小数
|
||||
**范围：**
|
||||
- 纬度：-90 到 90
|
||||
- 经度：-180 到 180
|
||||
|
||||
### 4. 模式切换
|
||||
|
||||
**行为：** 切换模式时坐标数据保留
|
||||
**建议：** 可以先用地图选点大致定位，再切换到手动输入微调
|
||||
|
||||
---
|
||||
|
||||
## 🎯 优势总结
|
||||
|
||||
### 相比纯手动输入
|
||||
|
||||
| 特性 | 地图选点 ✅ | 纯手动输入 |
|
||||
|------|-----------|-----------|
|
||||
| 直观性 | 可视化，所见即所得 | 抽象，难以想象 |
|
||||
| 准确性 | 直接点击，精确定位 | 容易输错数字 |
|
||||
| 效率 | 点击即可，快速 | 需要逐个输入 |
|
||||
| 易用性 | 无需记忆坐标 | 需要已知坐标 |
|
||||
| 验证 | 实时看到多边形 | 计算后才知道 |
|
||||
|
||||
### 相比纯地图操作
|
||||
|
||||
| 特性 | 混合模式 ✅ | 纯地图模式 |
|
||||
|------|-----------|-----------|
|
||||
| 灵活性 | 可切换调整 | 固定方式 |
|
||||
| 精确性 | 支持手动微调 | 受缩放影响 |
|
||||
| 适用性 | 各种场景 | 仅适合可视化 |
|
||||
|
||||
---
|
||||
|
||||
## 🎉 使用建议
|
||||
|
||||
### 推荐方案1: 地图为主，手动为辅
|
||||
|
||||
```
|
||||
1. 使用地图选点快速定位所有坐标点
|
||||
2. 切换到手动输入模式查看精确坐标
|
||||
3. 必要时微调个别坐标值
|
||||
4. 执行计算
|
||||
```
|
||||
|
||||
### 推荐方案2: 已知坐标直接输入
|
||||
|
||||
```
|
||||
1. 已有准确的坐标数据
|
||||
2. 直接使用手动输入模式
|
||||
3. 复制粘贴或输入坐标
|
||||
4. 执行计算
|
||||
```
|
||||
|
||||
### 推荐方案3: 现场勘测使用
|
||||
|
||||
```
|
||||
1. 在地块现场打开系统
|
||||
2. 使用GPS定位当前位置
|
||||
3. 在地图上标记关键点
|
||||
4. 实时计算面积或距离
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- [空间数据管理完整文档](/SPATIAL_DATA_SERVICE_COMPLETE.md)
|
||||
- [几何计算详细指南](/SPATIAL_GEOMETRY_CALCULATOR_GUIDE.md)
|
||||
- [几何计算对话框实现](/GEOMETRY_CALCULATOR_IN_DIALOG.md)
|
||||
|
||||
---
|
||||
|
||||
**更新日期：** 2025-10-18
|
||||
**版本：** v4.0
|
||||
**新增功能：** 地图选点支持
|
||||
**维护团队：** 智慧农业研发中心
|
||||
Reference in New Issue
Block a user