6.4 KiB
6.4 KiB
地块编辑器快速上手指南
✅ 已修复问题
地图初始化错误已修复！系统现在支持占位地图模式，即使没有配置高德地图API Key，您也能正常使用所有核心功能。
🎯 功能概览
占位模式下可用功能（无需地图SDK）
✅ 文件导入 - 支持 KML/GeoJSON/SHP 格式
✅ 自动计算 - 面积、周长、中心点自动计算
✅ 数据录入 - 完整的30+业务属性编辑
✅ 版本管理 - 完整的版本历史和回溯
✅ 数据导出 - JSON格式导出所有数据
需要地图SDK的功能
⚠️ 手动绘制 - 多边形/矩形绘制
⚠️ 地图显示 - 可视化边界显示
⚠️ 图层切换 - 卫星图/电子地图
🚀 快速测试
1. 访问地块编辑器
- 登录系统
- 点击顶部导航 "地块信息管理"
- 左侧菜单选择 "地块数字化与地图管理" > "手绘编辑"
- 点击 "新建地块" 按钮
2. 使用示例文件测试导入
创建一个测试文件 test-field.geojson：
{
"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. 导入文件
- 点击地图工具栏中的 "导入文件" 按钮（绿色高亮）
- 选择刚才创建的
test-field.geojson文件 - 系统会自动：
- 解析坐标数据
- 计算面积（约100亩）
- 计算周长
- 计算中心点
4. 填写地块信息
在右侧表单中填写：
基础信息
- 地块编号：
DK001 - 地块名称：
示范地块 - 地块类型：选择 "农田"
权属信息
- 权属人：
张三 - 联系方式：
13800138000
农学属性
- 当前作物：
小麦 - 土壤类型：
壤土
5. 保存地块
点击右上角 "保存地块" 按钮，系统会：
- 验证必填项
- 保存到本地存储
- 创建版本历史记录
- 显示成功提示
📝 支持的文件格式
GeoJSON（推荐）
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[lng, lat], [lng, lat], ...]]
}
}
KML
<?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
- 访问 https://console.amap.com/
- 注册/登录账号
- 创建应用获取 Key 和安全密钥
2. 配置 API Key
编辑 /lib/mapLoader.ts：
const AMAP_CONFIG = {
key: '您的高德地图Key',
securityJsCode: '您的安全密钥',
version: '2.0',
plugins: [],
};
3. 重启开发服务器
npm run dev
💡 使用技巧
1. 快速创建测试地块
使用在线GeoJSON编辑器：
- http://geojson.io
- 在地图上绘制多边形
- 导出GeoJSON文件
- 导入到系统中
2. 批量导入
准备多个GeoJSON文件，依次导入并保存，快速建立地块数据库。
3. 版本管理
每次修改地块信息都会自动创建版本记录，可以随时回溯到历史版本。
4. 数据导出
系统将数据存储在浏览器 localStorage 中，可以通过浏览器开发工具导出：
// 打开浏览器控制台
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文件，体验完整的地块管理功能吧！