5.7 KiB
5.7 KiB
⚠️ 需要手动更新 - 几何计算地图选点功能
📋 现状
由于 /components/field/FieldSpatialQuery.tsx 文件较大（约1900行），且存在重复的TabsContent结构，自动修改工具无法精确定位需要修改的代码块。
已完成的工作：
- ✅ 创建了
MapPointPicker组件 (/components/field/MapPointPicker.tsx) - ✅ 添加了必要的状态管理
- ✅ 导入了必要的组件和图标
需要手动完成：
- ⚠️ 修改对话框中的5个 TabsContent 部分
🔧 手动修改步骤
步骤1: 打开文件
打开 /components/field/FieldSpatialQuery.tsx 文件
步骤2: 定位到对话框
搜索 {/* 几何计算对话框 */}（约第1435行）
步骤3: 修改5个TabsContent
3.1 面积计算（约第1470行）
找到：
{/* 面积计算 */}
<TabsContent value="area" className="space-y-4">
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<h3>多边形坐标点</h3>
...
替换为：
{/* 面积计算 */}
<TabsContent value="area" className="space-y-4">
{/* 选择方式切换 */}
<div className="flex gap-2">
<Button
variant={mapPickMode === 'polygon' ? 'default' : 'outline'}
onClick={() => setMapPickMode(mapPickMode === 'polygon' ? null : 'polygon')}
className="flex-1"
>
<MousePointer2 className="w-4 h-4 mr-2" />
{mapPickMode === 'polygon' ? '正在使用地图选点' : '地图选点'}
</Button>
<Button
variant={mapPickMode === null ? 'default' : 'outline'}
onClick={() => setMapPickMode(null)}
className="flex-1"
>
<Edit3 className="w-4 h-4 mr-2" />
手动输入坐标
</Button>
</div>
{mapPickMode === 'polygon' ? (
<MapPointPicker
points={geomPoints}
mode="polygon"
onPointsChange={setGeomPoints}
height="400px"
title="在地图上选择多边形顶点"
/>
) : (
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<h3>多边形坐标点</h3>
...原有的手动输入代码保持不变...
注意：保留原有的：
- 所有坐标输入框代码
- 添加点/删除点按钮
- 结果显示部分
3.2 周长计算（约第1550行）
使用相同的模式修改
3.3 中心点计算（约第1610行）
使用相同的模式修改
3.4 包围盒计算（约最后一个多边形计算）
使用相同的模式修改
3.5 距离计算（在 "distance" TabsContent中）
这个需要为两个点分别添加地图选择：
{/* 距离计算 */}
<TabsContent value="distance" className="space-y-4">
{/* 点1选择 */}
<Card className="p-6">
<h3 className="mb-4">点1坐标</h3>
<div className="flex gap-2 mb-4">
<Button
variant={mapPickMode === 'distance-p1' ? 'default' : 'outline'}
onClick={() => setMapPickMode(mapPickMode === 'distance-p1' ? null : 'distance-p1')}
className="flex-1"
>
<MousePointer2 className="w-4 h-4 mr-2" />
{mapPickMode === 'distance-p1' ? '正在使用地图选点' : '地图选点'}
</Button>
<Button
variant={mapPickMode !== 'distance-p1' ? 'default' : 'outline'}
onClick={() => setMapPickMode(null)}
className="flex-1"
>
<Edit3 className="w-4 h-4 mr-2" />
手动输入坐标
</Button>
</div>
{mapPickMode === 'distance-p1' ? (
<MapPointPicker
points={[distPoint1]}
mode="single"
onPointsChange={(points) => setDistPoint1(points[0] || distPoint1)}
height="300px"
title="在地图上选择点1位置"
/>
) : (
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-sm text-muted-foreground">纬度</label>
<Input
type="number"
step="0.000001"
value={distPoint1.lat}
onChange={(e) => setDistPoint1({ ...distPoint1, lat: parseFloat(e.target.value) || 0 })}
/>
</div>
<div>
<label className="text-sm text-muted-foreground">经度</label>
<Input
type="number"
step="0.000001"
value={distPoint1.lng}
onChange={(e) => setDistPoint1({ ...distPoint1, lng: parseFloat(e.target.value) || 0 })}
/>
</div>
</div>
)}
</Card>
{/* 点2选择 - 类似结构，使用 mapPickMode === 'distance-p2' */}
...
📝 详细示例
完整的修改示例已保存在：
/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md- 完整实现指南/MAP_POINT_PICKER_GUIDE.md- 用户使用指南
✅ 验证清单
修改完成后，测试以下功能：
面积计算
- 切换到地图选点模式
- 在地图上点击添加4个点
- 验证多边形自动绘制
- 切换回手动输入模式
- 验证坐标保留
- 计算面积成功
周长、中心点、包围盒
- 使用相同测试流程
距离计算
- 点1使用地图选择
- 点2使用地图选择
- 计算距离成功
🎯 关键点
- 保留原有代码：只在前面添加地图/手动切换按钮和地图组件，不要删除原有的手动输入代码
- 条件渲染：使用
mapPickMode状态来控制显示地图还是手动输入 - 计算按钮：保留在外面，无论哪种模式都可以使用
- 结果显示：保持原样不变
📞 需要帮助？
如果在修改过程中遇到问题：
- 参考
/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md中的完整代码示例 - 查看 MapPointPicker 组件的 Props 定义
- 确保所有导入都已正确添加
创建日期： 2025-10-18
状态： 等待手动修改
预计时间： 15-20分钟