# 📍 几何计算工具 - 地图选点功能 ## 📋 功能概述 几何计算工具现已支持通过地图选择坐标点，用户可以选择： - **地图选点模式**：直接在地图上点击选择坐标 - **手动输入模式**：手动输入经纬度坐标 --- ## 🎯 使用步骤 ### 步骤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(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 **新增功能：** 地图选点支持 **维护团队：** 智慧农业研发中心