生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
233
src/FIELD_EDITOR_QUICK_START.md
Normal file
233
src/FIELD_EDITOR_QUICK_START.md
Normal file
@@ -0,0 +1,233 @@
|
||||
# 地块编辑器快速上手指南
|
||||
|
||||
## ✅ 已修复问题
|
||||
|
||||
地图初始化错误已修复！系统现在支持**占位地图模式**，即使没有配置高德地图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文件，体验完整的地块管理功能吧！
|
||||
Reference in New Issue
Block a user