@wenle_2523097/agri-map 1.0.0

package/README.en.md

@@ -0,0 +1,36 @@
+# agri-map
+
+#### Description
+农业地图组件库 - 基于React-Leaflet的农业专用地图组件
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,407 @@
+# agri-map-components
+
+基于 React-Leaflet 的农业专用地图组件库，提供地块管理、标注点、道路、灌溉渠等农业场景常用组件。
+
+## 特性
+
+- 🗺️ **地块管理** - 支持大规模地块数据渲染，提供绘制、剪辑、移动等编辑功能
+- 📍 **标注点** - 多种预设图标，支持自定义 SVG 图标，提供新建、移动、删除编辑模式
+- 🛤️ **道路绘制** - 田间道路绘制与管理，支持距离显示
+- 💧 **灌溉渠** - 灌溉渠绘制与流向箭头显示
+- 🌍 **天地图** - 内置天地图图层支持
+- 📐 **双向标尺** - 地图比例尺组件
+- ⚡ **高性能** - 支持上万条地块数据渲染
+
+## 安装
+
+```bash
+npm install agri-map
+# 或
+yarn add agri-map
+```
+
+## 依赖
+
+确保项目已安装以下 peerDependencies：
+
+```bash
+npm install leaflet react react-dom react-leaflet
+```
+
+## 快速开始
+
+```tsx
+import { MapContainer } from 'react-leaflet';
+import { TianDiTuLayer, PlotLayer, Marker } from 'agri-map';
+import 'leaflet/dist/leaflet.css';
+import 'agri-map/dist/index.css';
+
+function App() {
+  const plotData = [
+    {
+      id: 1,
+      name: '地块A',
+      type: 'farmland',
+      status: 'planting',
+      boundaries: [[30.0, 120.0], [30.0, 120.1], [30.1, 120.1], [30.1, 120.0]],
+      area: 1000,
+      crop: '水稻',
+    },
+  ];
+
+  const markers = [
+    { id: 1, position: [30.05, 120.05], title: '标注点1' },
+  ];
+
+  return (
+    <MapContainer center={[30.0, 120.0]} zoom={12} style={{ height: '100vh' }}>
+      <TianDiTuLayer apiKey="your-tianditu-key" />
+      <PlotLayer dataSource={plotData} />
+      <Marker dataSource={markers} />
+    </MapContainer>
+  );
+}
+```
+
+## 组件列表
+
+### PlotLayer 地块图层
+
+高性能地块渲染组件，支持大规模数据。
+
+```tsx
+import { PlotLayer, PlotData } from 'agri-map';
+
+const plots: PlotData[] = [
+  {
+    id: 'plot-1',
+    name: '农田A',
+    type: 'farmland',
+    status: 'planting',
+    boundaries: [[30.0, 120.0], [30.0, 120.1], [30.1, 120.1], [30.1, 120.0]],
+    area: 1000,
+    crop: '水稻',
+  },
+];
+
+<PlotLayer
+  dataSource={plots}
+  onClick={(data, layer) => console.log('点击地块:', data)}
+  onContextMenu={(data, layer, e) => console.log('右键菜单:', data)}
+  style={(data) => ({
+    color: data.status === 'planting' ? '#4CAF50' : '#9E9E9E',
+    fillColor: data.status === 'planting' ? '#81C784' : '#BDBDBD',
+    fillOpacity: 0.6,
+  })}
+  editMode={['create', 'delete']}
+  onCreate={(result) => console.log('新建地块:', result)}
+  onDelete={(result) => console.log('删除地块:', result)}
+  showLabel={true}
+  labelFields={['name', 'area']}
+/>
+```
+
+#### PlotLayer Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `PlotData[]` | `[]` | 地块数据数组 |
+| `onClick` | `(data, layer) => void` | - | 点击回调 |
+| `onContextMenu` | `(data, layer, event) => void` | - | 右键菜单回调 |
+| `style` | `(data) => PlotStyle` | - | 动态样式函数 |
+| `path` | `PathOptions` | - | 默认路径样式 |
+| `selectedPath` | `PathOptions` | - | 选中样式 |
+| `editMode` | `boolean \| string[]` | `false` | 编辑模式 |
+| `onCreate` | `(result) => void` | - | 新建回调 |
+| `onRedraw` | `(result) => void` | - | 重绘回调 |
+| `onClip` | `(result) => void` | - | 剪辑回调 |
+| `onMove` | `(result) => void` | - | 移动回调 |
+| `onDelete` | `(result) => void` | - | 删除回调 |
+| `showLabel` | `boolean \| 'all'` | `false` | 显示标签 |
+| `labelFields` | `string[]` | `['name']` | 标签字段 |
+
+---
+
+### Marker 标注点
+
+地图标注点组件，支持多种图标和编辑功能。
+
+```tsx
+import { Marker, MarkerData } from 'agri-map';
+
+const markers: MarkerData[] = [
+  { id: 1, position: [30.0, 120.0], title: '标注点1', description: '描述信息' },
+  { id: 2, position: [30.1, 120.1], title: '标注点2', icon: 'drone' },
+];
+
+<Marker
+  dataSource={markers}
+  icon="point"
+  iconSize={[48, 48]}
+  animated={false}
+  onClick={(item) => console.log('点击:', item)}
+  editMode={['create', 'move', 'delete']}
+  onCreate={(result) => console.log('新建:', result)}
+/>
+```
+
+#### 预设图标
+
+- `point` - 默认点位图标
+- `position` - 定位图标
+- `position-red` - 红色定位图标
+- `drone` - 无人机图标
+- `down` - 下载图标
+- `marker-red/blue/green/orange/yellow` - 彩色标记图标
+
+#### 自定义 SVG 图标
+
+```tsx
+// 使用 SVG 字符串
+<Marker svgIcon="<svg>...</svg>" />
+
+// 使用 SVG 配置对象
+<Marker svgIcon={{
+  path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z',
+  viewBox: '0 0 24 24',
+  fill: '#e53935',
+}} />
+
+// 使用远程图标 URL
+<Marker icon="https://example.com/icon.png" />
+```
+
+#### Marker Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `MarkerData[]` | `[]` | 标注数据 |
+| `icon` | `string \| SvgIconConfig` | `'point'` | 图标类型 |
+| `iconSize` | `[number, number]` | `[48, 48]` | 图标尺寸 |
+| `animated` | `boolean` | `false` | 是否动画 |
+| `permanent` | `boolean` | `false` | 永久显示提示 |
+| `editMode` | `boolean \| string[]` | `false` | 编辑模式 |
+| `onCreate` | `(result) => void` | - | 新建回调 |
+| `onMove` | `(result) => void` | - | 移动回调 |
+| `onDelete` | `(result) => void` | - | 删除回调 |
+
+---
+
+### Road 道路组件
+
+田间道路绘制与管理组件。
+
+```tsx
+import { Road, RoadData } from 'agri-map';
+
+const roads: RoadData[] = [
+  {
+    id: 1,
+    name: '田间道1号',
+    points: [[30.0, 120.0], [30.1, 120.1], [30.2, 120.2]],
+  },
+];
+
+<Road
+  dataSource={roads}
+  path={{ color: '#795548', weight: 3 }}
+  showDistance={true}
+  editMode={['create', 'edit', 'delete']}
+  onCreate={(result) => console.log('新建道路:', result)}
+/>
+```
+
+#### Road Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `RoadData[]` | `[]` | 道路数据 |
+| `path` | `PathOptions` | - | 路径样式 |
+| `showDistance` | `boolean` | `false` | 显示距离 |
+| `editMode` | `boolean \| string[]` | `false` | 编辑模式 |
+
+---
+
+### Irrigation 灌溉渠组件
+
+灌溉渠绘制与流向显示组件。
+
+```tsx
+import { Irrigation, IrrigationData } from 'agri-map';
+
+const channels: IrrigationData[] = [
+  {
+    id: 1,
+    name: '主干渠',
+    points: [[30.0, 120.0], [30.1, 120.1]],
+    inlet: true,
+    outlet: false,
+  },
+];
+
+<Irrigation
+  dataSource={channels}
+  path={{ color: '#2196F3', weight: 4 }}
+  editMode={['create', 'edit', 'delete', 'reverse']}
+  onCreate={(result) => console.log('新建渠道:', result)}
+  onReverse={(result) => console.log('反转流向:', result)}
+/>
+```
+
+#### Irrigation Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `dataSource` | `IrrigationData[]` | `[]` | 灌溉渠数据 |
+| `path` | `PathOptions` | - | 路径样式 |
+| `editMode` | `boolean \| string[]` | `false` | 编辑模式 |
+| `onReverse` | `(result) => void` | - | 反转流向回调 |
+
+---
+
+### TianDiTuLayer 天地图图层
+
+天地图底图组件。
+
+```tsx
+import { TianDiTuLayer, LAYER_TYPES } from 'agri-map';
+
+// 矢量底图 + 标注
+<TianDiTuLayer
+  apiKey="your-tianditu-key"
+  layerType="vector"
+  showAnnotation={true}
+/>
+
+// 卫星影像
+<TianDiTuLayer
+  apiKey="your-tianditu-key"
+  layerType="satellite"
+/>
+
+// 地形图
+<TianDiTuLayer
+  apiKey="your-tianditu-key"
+  layerType="terrain"
+/>
+
+// 自定义叠加层
+<TianDiTuLayer
+  apiKey="your-tianditu-key"
+  overlayUrl="https://your-server.com/overlay/{z}/{x}/{y}.png"
+  overlayOpacity={0.5}
+/>
+```
+
+#### TianDiTuLayer Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `apiKey` | `string` | - | 天地图 API Key（必填） |
+| `layerType` | `'vector' \| 'satellite' \| 'terrain'` | `'vector'` | 图层类型 |
+| `showAnnotation` | `boolean` | `true` | 显示标注 |
+| `overlayUrl` | `string` | - | 叠加瓦片 URL |
+| `overlayOpacity` | `number` | `1` | 叠加层透明度 |
+
+---
+
+### DualScaleControl 双向标尺
+
+地图比例尺组件，缩放控件固定在左下角。
+
+```tsx
+import { DualScaleControl } from 'agri-map';
+
+<DualScaleControl
+  metric={true}
+  imperial={false}
+  showZoomControl={true}
+  theme="light"
+/>
+```
+
+---
+
+### ConfigProvider 全局配置
+
+提供主题等全局配置。
+
+```tsx
+import { ConfigProvider } from 'agri-map';
+
+<ConfigProvider theme="dark">
+  <MapContainer>...</MapContainer>
+</ConfigProvider>
+```
+
+---
+
+### Icons 图标组件
+
+内置 SVG 图标组件库。
+
+```tsx
+import {
+  Icons,
+  RedrawIcon,
+  ClipIcon,
+  MoveIcon,
+  DeleteIcon,
+  CancelIcon,
+  SaveIcon,
+  CreateIcon
+} from 'agri-map';
+
+// 使用方式一
+<CreateIcon />
+
+// 使用方式二
+<Icons.Create />
+```
+
+## 类型定义
+
+```typescript
+// 坐标点 [lat, lng]
+type Coordinate = [number, number];
+
+// 地块类型
+type PlotType = 'farmland' | 'vegetable' | 'orchard' | 'forest' | 'grassland' | 'paddy' | 'greenhouse';
+
+// 地块状态
+type PlotStatus = 'cultivating' | 'fallow' | 'harvesting' | 'planting' | 'irrigating';
+
+// 编辑模式
+type PlotEditMode = 'idle' | 'redraw' | 'clip' | 'move' | 'create';
+
+// 路径样式
+interface PathOptions {
+  color?: string;
+  fillColor?: string;
+  weight?: number;
+  opacity?: number;
+  fillOpacity?: number;
+  dashArray?: string | number[];
+  className?: string;
+}
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 类型检查
+npm run type-check
+```
+
+## 许可证
+
+MIT