# 地块编辑器快速上手指南

## ✅ 已修复问题

地图初始化错误已修复！系统现在支持**占位地图模式**，即使没有配置高德地图API Key，您也能正常使用所有核心功能。

## 🎯 功能概览

### 占位模式下可用功能（无需地图SDK）

✅ **文件导入** - 支持 KML/GeoJSON/SHP 格式  
✅ **自动计算** - 面积、周长、中心点自动计算  
✅ **数据录入** - 完整的30+业务属性编辑  
✅ **版本管理** - 完整的版本历史和回溯  
✅ **数据导出** - JSON格式导出所有数据  

### 需要地图SDK的功能

⚠️ **手动绘制** - 多边形/矩形绘制  
⚠️ **地图显示** - 可视化边界显示  
⚠️ **图层切换** - 卫星图/电子地图  

## 🚀 快速测试

### 1. 访问地块编辑器

1. 登录系统
2. 点击顶部导航 **"地块信息管理"**
3. 左侧菜单选择 **"地块数字化与地图管理"** > **"手绘编辑"**
4. 点击 **"新建地块"** 按钮

### 2. 使用示例文件测试导入

创建一个测试文件 `test-field.geojson`：

```json
{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [[
        [116.3974, 39.9087],
        [116.4074, 39.9087],
        [116.4074, 39.9042],
        [116.3974, 39.9042],
        [116.3974, 39.9087]
      ]]
    },
    "properties": {
      "name": "测试地块"
    }
  }]
}
```

### 3. 导入文件

1. 点击地图工具栏中的 **"导入文件"** 按钮（绿色高亮）
2. 选择刚才创建的 `test-field.geojson` 文件
3. 系统会自动：
   - 解析坐标数据
   - 计算面积（约100亩）
   - 计算周长
   - 计算中心点

### 4. 填写地块信息

在右侧表单中填写：

**基础信息**
- 地块编号：`DK001`
- 地块名称：`示范地块`
- 地块类型：选择 "农田"

**权属信息**
- 权属人：`张三`
- 联系方式：`13800138000`

**农学属性**
- 当前作物：`小麦`
- 土壤类型：`壤土`

### 5. 保存地块

点击右上角 **"保存地块"** 按钮，系统会：
- 验证必填项
- 保存到本地存储
- 创建版本历史记录
- 显示成功提示

## 📝 支持的文件格式

### GeoJSON（推荐）

```json
{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [[[lng, lat], [lng, lat], ...]]
  }
}
```

### KML

```xml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <coordinates>
            116.3974,39.9087,0
            116.4074,39.9087,0
            116.4074,39.9042,0
            116.3974,39.9042,0
            116.3974,39.9087,0
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
</kml>
```

## 🔧 启用真实地图（可选）

如需启用手动绘制和地图显示功能：

### 1. 获取高德地图API Key

1. 访问 https://console.amap.com/
2. 注册/登录账号
3. 创建应用获取 Key 和安全密钥

### 2. 配置 API Key

编辑 `/lib/mapLoader.ts`：

```typescript
const AMAP_CONFIG = {
  key: '您的高德地图Key',
  securityJsCode: '您的安全密钥',
  version: '2.0',
  plugins: [],
};
```

### 3. 重启开发服务器

```bash
npm run dev
```

## 💡 使用技巧

### 1. 快速创建测试地块

使用在线GeoJSON编辑器：
- http://geojson.io
- 在地图上绘制多边形
- 导出GeoJSON文件
- 导入到系统中

### 2. 批量导入

准备多个GeoJSON文件，依次导入并保存，快速建立地块数据库。

### 3. 版本管理

每次修改地块信息都会自动创建版本记录，可以随时回溯到历史版本。

### 4. 数据导出

系统将数据存储在浏览器 localStorage 中，可以通过浏览器开发工具导出：

```javascript
// 打开浏览器控制台
const fields = localStorage.getItem('smart_agriculture_fields');
console.log(JSON.parse(fields));
```

## 🎨 界面预览

```
┌─────────────────────────────────────────────────────────┐
│ 地块编辑器                    [版本历史] [取消] [保存]  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  地图区域 (2/3)              │  表单区域 (1/3)         │
│  ┌──────────────────┐        │  ┌──────────────┐      │
│  │ [图层] [多边形]  │        │  │ 基础信息 Tab │      │
│  │ [矩形] [导入]    │        │  ├──────────────┤      │
│  │                  │        │  │ 地块编号     │      │
│  │  占位地图显示    │        │  │ 地块名称     │      │
│  │  或真实地图      │        │  │ 地块类型     │      │
│  │                  │        │  │ ...          │      │
│  └──────────────────┘        │  └──────────────┘      │
│  [✓ 已绘制5个点，面积100亩]  │                         │
│                              │                         │
└─────────────────────────────────────────────────────────┘
```

## ❓ 常见问题

### Q: 为什么地图显示"占位地图模式"？
A: 没有配置高德地图API Key，但不影响核心功能使用。

### Q: 如何知道导入的坐标是否正确？
A: 查看地图下方的统计信息，检查：
- 边界点数是否合理
- 面积是否在预期范围
- 周长计算是否正常

### Q: 支持哪些坐标系？
A: 系统使用 WGS84 坐标系（GPS标准），经纬度格式。

### Q: 数据存储在哪里？
A: 当前版本使用浏览器 localStorage 存储，生产环境建议连接 Supabase 数据库。

## 📚 相关文档

- `/FIELD_EDITOR_COMPLETE.md` - 完整功能说明
- `/MAP_SDK_QUICK_FIX.md` - 地图配置指南
- `/types/field.ts` - 数据类型定义

## 🎉 开始使用

现在就尝试导入一个GeoJSON文件，体验完整的地块管理功能吧！