# 几何计算工具 - 地图选点功能集成状态

## ✅ 已完成 (2/5)

### 1. 面积计算 Tab ✅
- ✅ 地图/手动切换按钮
- ✅ MapPointPicker 组件集成
- ✅ 条件渲染完整
- ✅ 计算按钮位置正确
- ✅ 语法正确，无错误

### 2. 周长计算 Tab ✅  
- ✅ 地图/手动切换按钮
- ✅ MapPointPicker 组件集成
- ✅ 条件渲染完整
- ✅ 计算按钮位置正确
- ✅ 语法正确，无错误

---

## 🔧 剩余需要完成的 (3/5)

### 3. 中心点计算 Tab ⏳
位置：约第1669行  
模式：`'polygon'` (多边形)  
按钮：紫色 `bg-purple-600`

### 4. 距离计算 Tab ⏳
位置：约第1700行  
模式：`'distance-p1'` 和 `'distance-p2'` (两个独立的点)  
特殊：需要为点1和点2分别创建Card和地图选择器  
按钮：橙色 `bg-orange-600`

### 5. 包围盒计算 Tab ⏳
位置：约第1787行  
模式：`'polygon'` (多边形)  
按钮：靛蓝色 `bg-indigo-600`

---

## 📝 修改模板

### 对于多边形计算（中心点、包围盒）

在 TabsContent 开始处，将：
```tsx
<TabsContent value="centroid" className="space-y-4">
  <Card className="p-6">
    <h3 className="mb-4">多边形坐标点</h3>
```

替换为：
```tsx
<TabsContent value="centroid" 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">
      <h3 className="mb-4">多边形坐标点</h3>
```

在坐标输入循环结束后，将：
```tsx
                </div>

                <Button 
                  onClick={handleCalculateCentroid}
                  className="w-full mt-4 bg-purple-600 hover:bg-purple-700"
                >
                  <MapPin className="w-4 h-4 mr-2" />
                  计算中心点 (ST_Centroid)
                </Button>
              </Card>
```

替换为：
```tsx
                </div>
              </Card>
              )}

              <Button 
                onClick={handleCalculateCentroid}
                className="w-full bg-purple-600 hover:bg-purple-700"
              >
                <MapPin className="w-4 h-4 mr-2" />
                计算中心点 (ST_Centroid)
              </Button>
```

---

### 对于距离计算（特殊处理）

距离计算需要完全重写，因为它有两个独立的点。找到整个距离计算的 TabsContent，从：
```tsx
<TabsContent value="distance" className="space-y-4">
```

到下一个：
```tsx
</TabsContent>
```

替换为完整的新结构（包含点1和点2的独立Card和地图选择器）。

详细代码请参考 `/GEOMETRY_MAP_PICKER_IMPLEMENTATION.md` 文件中的"距离计算Tab"部分。

---

## 🎯 快速完成步骤

### 步骤1：完成中心点计算
1. 找到第1669行附近的 `<TabsContent value="centroid"`
2. 应用上面的"多边形计算"模板
3. 保存文件

### 步骤2：完成包围盒计算
1. 找到第1787行附近的 `<TabsContent value="bbox"`
2. 应用上面的"多边形计算"模板（将centroid改为bbox，purple改为indigo）
3. 保存文件

### 步骤3：完成距离计算
1. 找到第1700行附近的整个距离计算TabsContent
2. 使用完整的距离计算新结构替换
3. 保存文件

---

## ⚡ 注意事项

1. **语法检查**：每次修改后确保：
   - `{mapPickMode === 'xxx' ? (` 有对应的 `)}` 闭合
   - Card 标签正确闭合
   - 按钮移到条件渲染外面

2. **缩进对齐**：保持原有的缩进风格

3. **类名修改**：
   - 移除按钮的 `mt-4` 类
   - 保持其他所有样式不变

4. **文件中有重复代码**：确保修改的是对话框内的代码（约第1440-1870行之间）

---

## 📊 进度追踪

- [x] 面积计算 - 100%
- [x] 周长计算 - 100%
- [ ] 中心点计算 - 0%
- [ ] 距离计算 - 0%
- [ ] 包围盒计算 - 0%

**总进度：40% (2/5)**

---

## 🚀 完成后的测试

1. 打开几何计算对话框
2. 依次测试5个Tab
3. 验证：
   - ✓ 切换按钮正常工作
   - ✓ 地图选点可以点击添加点
   - ✓ 手动输入坐标正常
   - ✓ 计算功能正常工作
   - ✓ 在两种模式间切换时坐标保留

---

**当前状态**：面积和周长计算已完成，可以正常使用地图选点功能！  
**下一步**：完成中心点、距离和包围盒计算的集成
