cavin/smart-crop-ui

Fork 0

Files

peng 28229ce795 生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00

7.4 KiB

Raw Blame History

✅ 几何计算工具 - 对话框实现

📋 实现概述

几何计算工具已成功整合到"空间数据管理"页面的几何计算演示按钮中，通过对话框的方式提供完整的计算功能。

🎯 访问方式

步骤1: 进入空间数据管理

导航路径：
地块信息管理 → 地块数字化与地图管理 → 空间数据管理

步骤2: 点击几何计算演示按钮

在页面右上角，点击 "几何计算演示" 按钮
→ 打开几何计算对话框

🎨 界面结构

主页面 - 4个空间查询标签

┌──────────────────────────────────────────────────┐
│ 点面查询 | 面面相交 | 相邻查询 | 缓冲区分析 │
└──────────────────────────────────────────────────┘

对话框 - 5个几何计算功能

┌─────────────────────────────────────────────────┐
│         几何计算工具                            │
│  精确计算多边形面积、周长、中心点等             │
├─────────────────────────────────────────────────┤
│ 面积 | 周长 | 中心点 | 距离 | 包围盒 │
└─────────────────────────────────────────────────┘

🔧 功能清单

1. 面积计算 (ST_Area)

输入: 多边形坐标点（至少3个）
输出: 平方米、亩、公顷
算法: L'Huilier球面三角形面积定理
精度: ±0.1%

2. 周长计算 (ST_Perimeter)

输入: 多边形坐标点
输出: 米、千米
算法: Haversine公式
特性: 考虑地球曲率

3. 中心点计算 (ST_Centroid)

输入: 多边形坐标点
输出: 几何中心经纬度
算法: 加权质心法
特性: 确保中心点在多边形内

4. 距离计算 (ST_Distance)

输入: 两个点的坐标
输出: 米、千米
算法: Haversine公式
精度: ±0.1米

5. 包围盒计算 (ST_Envelope)

输入: 多边形坐标点
输出: 最小/最大纬度和经度
算法: AABB（轴对齐包围盒）
用途: 快速空间索引

📖 使用示例

示例1: 计算地块面积

步骤：

1. 点击 "几何计算演示" 按钮
2. 选择 "面积" 标签
3. 输入或编辑坐标点：
   点1: 39.9040, 116.4070
   点2: 39.9080, 116.4070
   点3: 39.9080, 116.4120
   点4: 39.9040, 116.4120
4. 点击 "计算面积 (ST_Area)"
5. 查看结果

结果示例：

✅ 计算结果
平方米: 100,000.50 m²
亩: 150.00 亩
公顷: 10.0000 ha

示例2: 计算两点距离

步骤：

1. 点击 "几何计算演示" 按钮
2. 选择 "距离" 标签
3. 输入点1坐标: 39.9042, 116.4074
4. 输入点2坐标: 39.9150, 116.4150
5. 点击 "计算距离 (ST_Distance)"
6. 查看结果

结果示例：

✅ 两点间距离
米: 1,250.50 m
千米: 1.251 km

🎨 对话框特性

✅ 大尺寸显示

对话框尺寸: max-w-6xl
最大高度: max-h-[90vh]
支持滚动: overflow-y-auto

✅ 完整功能

所有5种几何计算功能
实时输入和编辑
即时计算结果显示

✅ 独立状态

坐标点数据独立存储
不影响主页面查询功能
关闭对话框后数据保留

✅ 易于操作

添加/删除坐标点
多种单位自动转换
清晰的结果展示

💡 优势

相比独立页面：

✅ 减少菜单层级

不占用导航菜单项
随用随开，不用时不占空间

✅ 快速访问

一键打开对话框
无需页面跳转

✅ 专注体验

大尺寸对话框
专注于计算任务

✅ 灵活使用

可在任何空间查询页面使用
不中断当前工作流程

🔍 技术实现

状态管理

// 对话框显示状态
const [showGeometryDialog, setShowGeometryDialog] = useState(false);

// 计算类型
const [geomCalcType, setGeomCalcType] = useState<'area' | 'perimeter' | 'centroid' | 'distance' | 'bbox'>('area');

// 坐标点数据
const [geomPoints, setGeomPoints] = useState<Point[]>([...]);

// 计算结果
const [geomResult, setGeomResult] = useState<any>(null);

打开对话框

const handleGeometryCalculation = () => {
  setShowGeometryDialog(true);
};

Dialog组件

<Dialog open={showGeometryDialog} onOpenChange={setShowGeometryDialog}>
  <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
    {/* 完整的几何计算界面 */}
  </DialogContent>
</Dialog>

📊 完整流程

用户操作流程：
┌─────────────────────────┐
│  进入空间数据管理       │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│ 点击"几何计算演示"      │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  打开计算对话框         │
│  ┌────────────────────┐ │
│  │ 选择计算类型       │ │
│  │ 输入坐标数据       │ │
│  │ 点击计算按钮       │ │
│  │ 查看计算结果       │ │
│  └────────────────────┘ │
└───────────┬─────────────┘
            │
            ▼
┌─────────────────────────┐
│  关闭对话框/继续计算    │
└─────────────────────────┘

❓ 常见问题

Q1: 对话框的数据会保存吗？

在当前会话中，数据会保留
关闭对话框后再打开，数据仍然存在
刷新页面会重置为默认值

Q2: 能同时打开多个计算吗？

对话框是单例的，同一时间只能打开一个
但可以在不同计算类型间快速切换
所有多边形计算共享同一组坐标点

Q3: 对话框会影响主页面功能吗？

不会！对话框是独立的
主页面的空间查询功能正常工作
两者状态完全分离

Q4: 对话框能导出结果吗？

目前对话框内主要用于快速计算
如需导出，可以使用主页面的导出功能
或手动复制结果数据

🎉 总结

几何计算工具现在通过对话框的方式提供：

✅ 易于访问 - 一键打开，无需导航 ✅ 功能完整 - 5种计算功能全部保留
✅ 界面清晰 - 大尺寸对话框，专注体验 ✅ 灵活使用 - 不占菜单，随用随开

立即体验：

空间数据管理 → 点击右上角 "几何计算演示" 按钮

实现日期： 2025-10-18
版本： v3.0
维护团队： 智慧农业研发中心

7.4 KiB Raw Blame History Unescape Escape