10 KiB
10 KiB
📍 几何计算工具 - 地图选点功能
📋 功能概述
几何计算工具现已支持通过地图选择坐标点，用户可以选择：
- 地图选点模式：直接在地图上点击选择坐标
- 手动输入模式：手动输入经纬度坐标
🎯 使用步骤
步骤1: 打开几何计算工具
空间数据管理 → 点击 "几何计算演示" 按钮
步骤2: 选择计算类型
在对话框中选择需要的计算类型：
- 面积
- 周长
- 中心点
- 距离
- 包围盒
步骤3: 选择输入方式
每个计算类型都提供两种输入方式的切换按钮：
┌─────────────────────────────────────┐
│ [🖱️ 地图选点] [✏️ 手动输入坐标] │
└─────────────────────────────────────┘
🗺️ 地图选点模式
多边形选点（面积/周长/中心点/包围盒）
操作方法：
- 点击 "地图选点" 按钮
- 在地图上点击添加坐标点
- 自动绘制多边形
- 点击已有标记可删除该点
- 至少保留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选择
- 点击地图选择点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：
interface MapPointPickerProps {
points: Point[]; // 坐标点数组
mode: 'polygon' | 'single'; // 多边形或单点模式
onPointsChange: (points: Point[]) => void; // 点变化回调
onClose?: () => void; // 关闭回调
height?: string; // 地图高度
title?: string; // 标题
}
状态管理
// 地图选点模式
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. 实时计算面积或距离
📚 相关文档
更新日期： 2025-10-18
版本： v4.0
新增功能： 地图选点支持
维护团队： 智慧农业研发中心