# ⚠️ 需要手动更新 - 几何计算地图选点功能

## 📋 现状

由于 `/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行）

**找到：**
```tsx
{/* 面积计算 */}
<TabsContent value="area" className="space-y-4">
  <Card className="p-6">
    <div className="flex items-center justify-between mb-4">
      <h3>多边形坐标点</h3>
      ...
```

**替换为：**
```tsx
{/* 面积计算 */}
<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中）

这个需要为两个点分别添加地图选择：

```tsx
{/* 距离计算 */}
<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使用地图选择
- [ ] 计算距离成功

---

## 🎯 关键点

1. **保留原有代码**：只在前面添加地图/手动切换按钮和地图组件，不要删除原有的手动输入代码
2. **条件渲染**：使用 `mapPickMode` 状态来控制显示地图还是手动输入
3. **计算按钮**：保留在外面，无论哪种模式都可以使用
4. **结果显示**：保持原样不变

---

## 📞 需要帮助？

如果在修改过程中遇到问题：

1. 参考 `/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md` 中的完整代码示例
2. 查看 MapPointPicker 组件的 Props 定义
3. 确保所有导入都已正确添加

---

**创建日期：** 2025-10-18  
**状态：** 等待手动修改  
**预计时间：** 15-20分钟