# 几何计算地图选点功能 - 手动修复指南

## 问题描述
`/components/field/FieldSpatialQuery.tsx` 文件包含重复的代码结构：
- 页面主体部分有一套几何计算代码
- **对话框**（Dialog）中有另一套几何计算代码（第1457-1914行）

需要为**对话框中**的以下3个Tab添加地图选点功能：
1. 中心点计算 (centroid) - 第1692-1750行
2. 距离计算 (distance) - 第1754-1836行  
3. 包围盒计算 (bbox) - 第1840-1910行

## 修复步骤

### 步骤1：修改中心点计算Tab（第1692-1750行左右）

**查找位置**：在对话框中找到以下代码（约第1692行）：
```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>
```

**继续替换按钮部分**：
找到（约第1720行）：
```tsx
                <Button 
                  onClick={handleCalculateCentroid}
                  className="w-full mt-4 bg-purple-600 hover:bg-purple-700"
                >
```

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

              <Button 
                onClick={handleCalculateCentroid}
                className="w-full bg-purple-600 hover:bg-purple-700"
              >
```

### 步骤2：修改距离计算Tab（第1754-1836行左右）

**查找位置**：在对话框中找到以下代码（约第1754行）：
```tsx
            {/* 距离计算 */}
            <TabsContent value="distance" className="space-y-4">
              <Card className="p-6">
                <h3 className="mb-4">两点坐标</h3>
```

**替换为**：
```tsx
            {/* 距离计算 */}
            <TabsContent value="distance" className="space-y-4">
              {/* 选择方式切换 */}
              <div className="flex gap-2">
                <Button
                  variant={mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2' ? 'default' : 'outline'}
                  onClick={() => {
                    if (mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') {
                      setMapPickMode(null);
                    } else {
                      setMapPickMode('distance-p1');
                    }
                  }}
                  className="flex-1"
                >
                  <MousePointer2 className="w-4 h-4 mr-2" />
                  {(mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') ? '正在使用地图选点' : '地图选点'}
                </Button>
                <Button
                  variant={mapPickMode === null ? 'default' : 'outline'}
                  onClick={() => setMapPickMode(null)}
                  className="flex-1"
                >
                  <Edit3 className="w-4 h-4 mr-2" />
                  手动输入坐标
                </Button>
              </div>

              {(mapPickMode === 'distance-p1' || mapPickMode === 'distance-p2') ? (
                <div className="space-y-4">
                  <Card className="p-4 bg-orange-50 border-orange-200">
                    <p className="text-sm text-orange-800">
                      💡 当前模式：选择{mapPickMode === 'distance-p1' ? '点1' : '点2'}坐标
                    </p>
                  </Card>
                  
                  <MapPointPicker
                    points={mapPickMode === 'distance-p1' ? [distPoint1] : [distPoint2]}
                    mode="single"
                    onPointsChange={(points) => {
                      if (points.length > 0) {
                        if (mapPickMode === 'distance-p1') {
                          setDistPoint1(points[0]);
                        } else {
                          setDistPoint2(points[0]);
                        }
                      }
                    }}
                    height="400px"
                    title={`在地图上选择${mapPickMode === 'distance-p1' ? '点1' : '点2'}位置`}
                  />
                  
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      className="flex-1"
                      onClick={() => setMapPickMode('distance-p1')}
                      disabled={mapPickMode === 'distance-p1'}
                    >
                      选择点1
                    </Button>
                    <Button
                      variant="outline"
                      className="flex-1"
                      onClick={() => setMapPickMode('distance-p2')}
                      disabled={mapPickMode === 'distance-p2'}
                    >
                      选择点2
                    </Button>
                  </div>
                </div>
              ) : (
                <Card className="p-6">
                  <h3 className="mb-4">两点坐标</h3>
```

**继续替换按钮部分**：
找到（约第1808行）：
```tsx
                <Button 
                  onClick={handleCalculateDistance}
                  className="w-full mt-4 bg-orange-600 hover:bg-orange-700"
                >
```

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

              <Button 
                onClick={handleCalculateDistance}
                className="w-full bg-orange-600 hover:bg-orange-700"
              >
```

### 步骤3：修改包围盒计算Tab（第1840-1910行左右）

**查找位置**：在对话框中找到以下代码（约第1840行）：
```tsx
            {/* 包围盒计算 */}
            <TabsContent value="bbox" className="space-y-4">
              <Card className="p-6">
                <h3 className="mb-4">多边形坐标点</h3>
```

**替换为**：
```tsx
            {/* 包围盒计算 */}
            <TabsContent value="bbox" 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>
```

**继续替换按钮部分**：
找到（约第1868行）：
```tsx
                <Button 
                  onClick={handleCalculateBBox}
                  className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700"
                >
```

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

              <Button 
                onClick={handleCalculateBBox}
                className="w-full bg-indigo-600 hover:bg-indigo-700"
              >
```

## 验证

修改完成后，请验证：

1. ✅ 打开几何计算对话框
2. ✅ 切换到"中心点"Tab，可以看到"地图选点"和"手动输入坐标"两个按钮
3. ✅ 点击"地图选点"按钮，应该显示地图组件
4. ✅ 在地图上点击可以添加坐标点
5. ✅ 切换到"距离"Tab，可以分别选择点1和点2
6. ✅ 切换到"包围盒"Tab，可以使用地图选点

## 注意事项

- 确保只修改**对话框中**的代码（第1457-1914行区域）
- 不要修改页面主体部分的代码
- MapPointPicker组件已经存在，无需创建
- 高德地图SDK已经在组件中加载（第79-93行）

## 修复完成后

删除此文件，地图选点功能已集成完毕。