生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
203
src/MAP_SDK_FIX_COMPLETE_GUIDE.md
Normal file
203
src/MAP_SDK_FIX_COMPLETE_GUIDE.md
Normal file
@@ -0,0 +1,203 @@
|
||||
# 高德地图SDK加载与地图选点功能集成 - 完整修复指南
|
||||
|
||||
## 📌 问题分析
|
||||
|
||||
您的`FieldSpatialQuery.tsx`文件约1900行，包含两套重复的代码结构：
|
||||
1. **页面主体部分**：几何计算代码（较早部分）
|
||||
2. **对话框部分**（第1457-1914行）：几何计算对话框中的代码
|
||||
|
||||
### 现状
|
||||
- ✅ 高德地图SDK已加载（第79-93行）
|
||||
- ✅ MapPointPicker组件已创建（`/components/field/MapPointPicker.tsx`）
|
||||
- ✅ 面积计算Tab已集成地图选点功能
|
||||
- ✅ 周长计算Tab已集成地图选点功能
|
||||
- ❌ 中心点计算Tab需要集成
|
||||
- ❌ 距离计算Tab需要集成
|
||||
- ❌ 包围盒计算Tab需要集成
|
||||
|
||||
## 🔧 修复步骤
|
||||
|
||||
### 方法1：使用编辑器手动修改（推荐）
|
||||
|
||||
由于文件包含重复代码，自动化工具无法精确定位。请使用您的代码编辑器按以下步骤手动修改：
|
||||
|
||||
#### 步骤1：定位对话框中的代码
|
||||
|
||||
在文件中搜索以下标识来确定您在对话框内：
|
||||
```tsx
|
||||
{/* 几何计算对话框 */}
|
||||
<Dialog open={showGeometryDialog} onOpenChange={setShowGeometryDialog}>
|
||||
```
|
||||
这应该在第1456-1457行附近。
|
||||
|
||||
#### 步骤2：修改中心点计算Tab（约第1692-1750行）
|
||||
|
||||
**查找以下代码：**
|
||||
```tsx
|
||||
{/* 中心点计算 */}
|
||||
<TabsContent value="centroid" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**完整替换为**（参考`/TEMP_DIALOG_TABS_FIX.txt`文件的第1-89行）：
|
||||
- 添加地图选点和手动输入切换按钮
|
||||
- 使用 MapPointPicker 组件
|
||||
- 保留原有的输入框作为备选
|
||||
|
||||
#### 步骤3：修改距离计算Tab（约第1754-1836行）
|
||||
|
||||
**查找以下代码：**
|
||||
```tsx
|
||||
{/* 距离计算 */}
|
||||
<TabsContent value="distance" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">两点坐标</h3>
|
||||
```
|
||||
|
||||
**完整替换为**（参考`/TEMP_DIALOG_TABS_FIX.txt`文件的第91-268行）：
|
||||
- 添加地图选点功能，支持分别选择点1和点2
|
||||
- 提供切换按钮在点1和点2之间切换
|
||||
- 使用 MapPointPicker 的 single 模式
|
||||
|
||||
#### 步骤4：修改包围盒计算Tab（约第1840-1910行）
|
||||
|
||||
**查找以下代码：**
|
||||
```tsx
|
||||
{/* 包围盒计算 */}
|
||||
<TabsContent value="bbox" className="space-y-4">
|
||||
<Card className="p-6">
|
||||
<h3 className="mb-4">多边形坐标点</h3>
|
||||
```
|
||||
|
||||
**完整替换为**（参考`/TEMP_DIALOG_TABS_FIX.txt`文件的第270-383行）：
|
||||
- 添加地图选点和手动输入切换按钮
|
||||
- 使用 MapPointPicker 组件
|
||||
- 与中心点计算类似的结构
|
||||
|
||||
### 方法2：使用提供的完整代码
|
||||
|
||||
完整的修改后代码已保存在`/TEMP_DIALOG_TABS_FIX.txt`文件中。
|
||||
|
||||
您可以：
|
||||
1. 打开 `/components/field/FieldSpatialQuery.tsx`
|
||||
2. 找到对话框中的三个Tab（中心点、距离、包围盒）
|
||||
3. 用`/TEMP_DIALOG_TABS_FIX.txt`中的对应代码替换
|
||||
|
||||
## ✅ 验证步骤
|
||||
|
||||
修改完成后，请按以下步骤验证：
|
||||
|
||||
### 1. 刷新应用
|
||||
```bash
|
||||
# 确保开发服务器正在运行
|
||||
# 刷新浏览器页面
|
||||
```
|
||||
|
||||
### 2. 测试中心点计算
|
||||
1. 导航到：地块信息管理 > 空间数据管理
|
||||
2. 点击"几何计算演示"按钮打开对话框
|
||||
3. 切换到"中心点"Tab
|
||||
4. 应该看到两个按钮："地图选点"和"手动输入坐标"
|
||||
5. 点击"地图选点"，应该显示地图组件
|
||||
6. 在地图上点击可以添加多边形顶点
|
||||
7. 点击"计算中心点"按钮，验证计算功能正常
|
||||
|
||||
### 3. 测试距离计算
|
||||
1. 切换到"距离"Tab
|
||||
2. 点击"地图选点"按钮
|
||||
3. 应该看到提示"当前模式：选择点1坐标"
|
||||
4. 在地图上点击选择点1
|
||||
5. 点击"选择点2"按钮切换模式
|
||||
6. 在地图上点击选择点2
|
||||
7. 点击"计算距离"按钮，验证计算功能正常
|
||||
|
||||
### 4. 测试包围盒计算
|
||||
1. 切换到"包围盒"Tab
|
||||
2. 点击"地图选点"按钮
|
||||
3. 在地图上点击添加多边形顶点
|
||||
4. 点击"计算包围盒"按钮，验证计算功能正常
|
||||
|
||||
### 5. 检查控制台
|
||||
打开浏览器开发者工具（F12），检查：
|
||||
- ✅ 应该看到"✅ 高德地图SDK加载成功"的日志
|
||||
- ❌ 不应该有"高德地图SDK未加载"的警告
|
||||
- ❌ 不应该有任何 JavaScript 错误
|
||||
|
||||
## 🎯 关键要点
|
||||
|
||||
### MapPointPicker 组件使用
|
||||
|
||||
**多边形模式**（用于中心点和包围盒）：
|
||||
```tsx
|
||||
<MapPointPicker
|
||||
points={geomPoints}
|
||||
mode="polygon"
|
||||
onPointsChange={setGeomPoints}
|
||||
height="400px"
|
||||
title="在地图上选择多边形顶点"
|
||||
/>
|
||||
```
|
||||
|
||||
**单点模式**（用于距离计算的两个点）：
|
||||
```tsx
|
||||
<MapPointPicker
|
||||
points={[distPoint1]} // 或 [distPoint2]
|
||||
mode="single"
|
||||
onPointsChange={(points) => {
|
||||
if (points.length > 0) {
|
||||
setDistPoint1(points[0]); // 或 setDistPoint2
|
||||
}
|
||||
}}
|
||||
height="400px"
|
||||
title="在地图上选择点1位置"
|
||||
/>
|
||||
```
|
||||
|
||||
### 地图选点模式状态
|
||||
|
||||
```tsx
|
||||
// mapPickMode 的可能值：
|
||||
'polygon' // 多边形选点（用于中心点、包围盒、面积、周长）
|
||||
'distance-p1' // 距离计算-点1
|
||||
'distance-p2' // 距离计算-点2
|
||||
null // 手动输入模式
|
||||
```
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### 问题1：地图不显示
|
||||
**原因**：高德地图SDK未加载完成
|
||||
**解决**：等待几秒，SDK在后台加载中
|
||||
|
||||
### 问题2：点击地图没有反应
|
||||
**原因**：可能处于手动输入模式
|
||||
**解决**：点击"地图选点"按钮切换模式
|
||||
|
||||
### 问题3："高德地图SDK未加载"警告
|
||||
**原因**：SDK加载较慢或加载失败
|
||||
**解决**：
|
||||
1. 检查网络连接
|
||||
2. 查看 `/lib/mapLoader.ts` 中的 API Key 是否正确
|
||||
3. 刷新页面重新加载
|
||||
|
||||
## 📁 相关文件
|
||||
|
||||
- `/components/field/FieldSpatialQuery.tsx` - 主文件（需要修改）
|
||||
- `/components/field/MapPointPicker.tsx` - 地图选点组件（已完成）
|
||||
- `/lib/mapLoader.ts` - 地图SDK加载器（已完成）
|
||||
- `/TEMP_DIALOG_TABS_FIX.txt` - 修改后的完整代码
|
||||
|
||||
## 🎉 完成后
|
||||
|
||||
所有3个Tab（中心点、距离、包围盒）集成地图选点功能后：
|
||||
1. ✅ 删除 `/GEOMETRY_MAP_INTEGRATION_MANUAL_FIX.md`
|
||||
2. ✅ 删除 `/TEMP_DIALOG_TABS_FIX.txt`
|
||||
3. ✅ 删除本文件 `/MAP_SDK_FIX_COMPLETE_GUIDE.md`
|
||||
4. ✅ 更新相关文档记录功能完成状态
|
||||
|
||||
---
|
||||
|
||||
**修改时间**: 2025-10-18
|
||||
**状态**: 等待手动修复
|
||||
**预计修复时间**: 10-15分钟
|
||||
Reference in New Issue
Block a user