@wenle_2523097/agri-map 2.0.1 → 2.0.2

package/dist/hooks/usePolylineDraw.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 折线绘制 Hook
+ * @description 实现折线绘制功能，替代 @geoman-io/leaflet-geoman-free 的 map.pm.enableDraw('Line')
+ *
+ * 支持功能：
+ * - 点击添加顶点
+ * - 双击完成绘制
+ * - Shift+Click 开始绘制
+ * - Escape 取消绘制
+ * - 临时线预览
+ * - 提示线（指向鼠标位置）
+ * - 顶点样式自定义
+ * - 吸附功能（可选）
+ *
+ * @since 2.1.0 移除 @geoman-io/leaflet-geoman-free 依赖重构
+ */
+import L from 'leaflet';
+export interface UsePolylineDrawOptions {
+    /** Leaflet 地图实例 */
+    map: L.Map;
+    /** 绘制完成的回调 */
+    onComplete?: (points: L.LatLng[]) => void;
+    /** 开始绘制的回调 */
+    onStart?: () => void;
+    /** 取消绘制的回调 */
+    onCancel?: () => void;
+    /** 顶点添加时的回调 */
+    onVertexAdd?: (latlng: L.LatLng, index: number) => void;
+    /** 顶点移除时的回调 */
+    onVertexRemove?: (index: number) => void;
+    /** 临时线样式 */
+    tempLineStyle?: L.PathOptions;
+    /** 提示线样式 */
+    hintLineStyle?: L.PathOptions;
+    /** 顶点标记样式 */
+    vertexStyle?: {
+        radius?: number;
+        color?: string;
+        fillColor?: string;
+        fillOpacity?: number;
+        weight?: number;
+    };
+    /** 是否启用吸附 */
+    snappable?: boolean;
+    /** 吸附距离（像素） */
+    snapDistance?: number;
+    /** 最少顶点数（完成绘制所需） */
+    minVertices?: number;
+    /** 单击靠近最后一个顶点时是否完成绘制（闭合） */
+    closeOnLastVertexClick?: boolean;
+    /** 闭合检测距离（像素） */
+    closeDistance?: number;
+}
+export interface UsePolylineDrawReturn {
+    /** 是否正在绘制 */
+    isDrawing: boolean;
+    /** 当前顶点列表 */
+    points: L.LatLng[];
+    /** 开始绘制 */
+    startDraw: () => void;
+    /** 取消绘制 */
+    cancelDraw: () => void;
+    /** 完成绘制 */
+    completeDraw: () => void;
+    /** 获取最后一个顶点 */
+    getLastVertex: () => L.LatLng | null;
+    /** 获取临时线图层 */
+    getTempLine: () => L.Polyline | null;
+    /** 移除最后一个顶点（Undo） */
+    undo: () => void;
+}
+/**
+ * 折线绘制 Hook
+ */
+export declare function usePolylineDraw(options: UsePolylineDrawOptions): UsePolylineDrawReturn;

package/dist/hooks/usePolylineEdit.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 折线顶点编辑 Hook
+ * @description 实现折线顶点的拖拽编辑功能，替代 @geoman-io/leaflet-geoman-free 的 layer.pm.enable()
+ *
+ * 支持功能：
+ * - 顶点拖拽移动
+ * - 顶点添加（在边上点击添加）
+ * - 顶点删除（点击顶点删除）
+ * - 样式自定义
+ *
+ * @since 2.1.0 移除 @geoman-io/leaflet-geoman-free 依赖重构
+ */
+import L from 'leaflet';
+export interface UsePolylineEditOptions {
+    /** Leaflet 地图实例 */
+    map: L.Map;
+    /** 要编辑的折线图层引用（可在后续设置） */
+    layerRef: React.MutableRefObject<L.Polyline | null>;
+    /** 编辑完成时的回调 */
+    onComplete?: (points: L.LatLng[]) => void;
+    /** 编辑取消时的回调 */
+    onCancel?: () => void;
+    /** 顶点开始拖拽的回调 */
+    onVertexDragStart?: (index: number, latlng: L.LatLng) => void;
+    /** 顶点拖拽中的回调 */
+    onVertexDrag?: (index: number, latlng: L.LatLng) => void;
+    /** 顶点拖拽结束的回调 */
+    onVertexDragEnd?: (index: number, latlng: L.LatLng) => void;
+    /** 顶点添加时的回调 */
+    onVertexAdd?: (index: number, latlng: L.LatLng) => void;
+    /** 顶点删除时的回调 */
+    onVertexRemove?: (index: number, latlng: L.LatLng) => void;
+    /** 顶点样式 */
+    vertexStyle?: {
+        radius?: number;
+        color?: string;
+        fillColor?: string;
+        fillOpacity?: number;
+        weight?: number;
+        hoverRadius?: number;
+        hoverColor?: string;
+        hoverFillColor?: string;
+    };
+    /** 是否支持在边上添加顶点 */
+    addVertexOnEdge?: boolean;
+    /** 边上添加顶点的触发距离（像素） */
+    edgeSnapDistance?: number;
+}
+export interface UsePolylineEditReturn {
+    /** 是否正在编辑 */
+    isEditing: boolean;
+    /** 当前顶点列表 */
+    points: L.LatLng[];
+    /** 开始编辑模式 */
+    enableEdit: () => void;
+    /** 结束编辑模式 */
+    disableEdit: (cancel?: boolean) => void;
+    /** 获取当前顶点列表 */
+    getPoints: () => L.LatLng[];
+    /** 添加顶点到指定索引 */
+    addVertex: (index: number, latlng: L.LatLng) => void;
+    /** 删除指定索引的顶点 */
+    removeVertex: (index: number) => void;
+    /** 更新指定索引的顶点位置 */
+    updateVertex: (index: number, latlng: L.LatLng) => void;
+}
+/**
+ * 折线顶点编辑 Hook
+ */
+export declare function usePolylineEdit(options: UsePolylineEditOptions): UsePolylineEditReturn;

package/dist/hooks/usePolylineRenderer.d.ts

@@ -23,7 +23,7 @@ interface UsePolylineRendererOptions<T = unknown> {
  * 管理线要素图层的创建与清理
  *
  * 负责：
- * 1. 编辑模式下过滤数据（create/edit 模式不渲染已有要素）
+ * 1. 编辑模式下过滤数据（create/redraw 模式不渲染已有要素）
  * 2. 创建 LayerGroup 并将数据渲染进去
  * 3. 组件卸载时移除 editingLayerRef
  *

package/dist/hooks/useSnapManager.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 吸附管理 Hook
+ * @description 实现折线绘制时的吸附功能：
+ * - 点到点吸附：当鼠标靠近已有顶点时，吸附到该顶点
+ * - 点到线吸附：当鼠标靠近已有线段时，吸附到线段上的最近点
+ *
+ * @since 2.1.0 移除 @geoman-io/leaflet-geoman-free 依赖重构
+ */
+import L from 'leaflet';
+export interface SnapTarget {
+    latlng: L.LatLng;
+    type: 'vertex' | 'edge';
+    edgeIndex?: number;
+    vertexIndex?: number;
+    distance: number;
+}
+export interface UseSnapManagerOptions {
+    /** Leaflet 地图实例 */
+    map: L.Map;
+    /** 吸附距离阈值（像素） */
+    snapDistance?: number;
+    /** 是否启用吸附 */
+    enabled?: boolean;
+    /** 是否吸附到顶点 */
+    snapToVertices?: boolean;
+    /** 是否吸附到边 */
+    snapToEdges?: boolean;
+}
+export interface UseSnapManagerReturn {
+    /** 设置吸附目标点（已存在的顶点或线段上的点） */
+    setSnapTargets: (points: L.LatLng[], edges?: [L.LatLng, L.LatLng][]) => void;
+    /** 清除吸附目标 */
+    clearSnapTargets: () => void;
+    /** 获取吸附后的坐标（如果鼠标位置在吸附范围内） */
+    getSnapLatlng: (mouseLatlng: L.LatLng) => L.LatLng;
+    /** 查找最近的吸附目标 */
+    findSnapTarget: (mouseLatlng: L.LatLng) => SnapTarget | null;
+    /** 判断是否在吸附范围内 */
+    isInSnapRange: (mouseLatlng: L.LatLng) => boolean;
+    /** 添加吸附目标点 */
+    addSnapTarget: (latlng: L.LatLng) => void;
+    /** 移除吸附目标点 */
+    removeSnapTarget: (index: number) => void;
+}
+/**
+ * 吸附管理 Hook
+ */
+export declare function useSnapManager(options: UseSnapManagerOptions): UseSnapManagerReturn;
+export declare function setSnapMap(map: L.Map): void;
+export declare function getSnapMap(): L.Map | null;

package/dist/hooks/useVertexMarkers.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 顶点标记管理 Hook
+ * @description 管理折线/多边形顶点的标记，支持：
+ * - 顶点标记的创建、更新、删除
+ * - 顶点拖拽功能（使用 Marker + divIcon 实现）
+ * - 样式自定义
+ *
+ * 注意：Leaflet 的 CircleMarker 不支持原生拖拽，因此当 draggable=true 时，
+ * 使用 L.Marker + divIcon 替代方案来实现拖拽功能。
+ *
+ * @since 2.1.0 移除 @geoman-io/leaflet-geoman-free 依赖重构
+ */
+import L from 'leaflet';
+export interface VertexMarkerStyle {
+    radius?: number;
+    color?: string;
+    fillColor?: string;
+    fillOpacity?: number;
+    weight?: number;
+}
+export interface UseVertexMarkersOptions {
+    map: L.Map;
+    style?: VertexMarkerStyle;
+    draggable?: boolean;
+    onVertexDragStart?: (index: number, latlng: L.LatLng) => void;
+    onVertexDrag?: (index: number, latlng: L.LatLng) => void;
+    onVertexDragEnd?: (index: number, latlng: L.LatLng) => void;
+    onVertexClick?: (index: number, latlng: L.LatLng, event: L.LeafletMouseEvent) => void;
+}
+export interface UseVertexMarkersReturn {
+    /** 创建顶点标记 */
+    createMarkers: (points: L.LatLng[]) => L.Marker[];
+    /** 更新所有标记的位置 */
+    updateMarkers: (points: L.LatLng[]) => void;
+    /** 添加单个标记 */
+    addMarker: (latlng: L.LatLng, index: number) => L.Marker;
+    /** 移除指定索引的标记 */
+    removeMarker: (index: number) => void;
+    /** 清除所有标记 */
+    clearMarkers: () => void;
+    /** 获取所有标记 */
+    getMarkers: () => L.Marker[];
+    /** 获取指定索引的标记 */
+    getMarker: (index: number) => L.Marker | undefined;
+    /** 获取标记数量 */
+    getCount: () => number;
+}
+/**
+ * 顶点标记管理 Hook
+ */
+export declare function useVertexMarkers(options: UseVertexMarkersOptions): UseVertexMarkersReturn;

package/dist/index.esm.js

@@ -5360,7 +5360,7 @@ function useEditMode(editModeProp, defaultButtons) {
  * 管理线要素图层的创建与清理
  *
  * 负责：
- * 1. 编辑模式下过滤数据（create/edit 模式不渲染已有要素）
+ * 1. 编辑模式下过滤数据（create/redraw 模式不渲染已有要素）
  * 2. 创建 LayerGroup 并将数据渲染进去
  * 3. 组件卸载时移除 editingLayerRef
  *
@@ -5413,7 +5413,8 @@ function usePolylineRenderer(options) {
       return renderItem(item, layerGroup, index);
     });
     // 数据变化时清理编辑图层（新建保存后数据源更新时，移除临时的编辑图层避免重复）
-    if (dataChanged && editingLayerRef.current) {
+    // 注意：在 redraw 模式下 editingLayerRef 不应被清理（可能在编辑过程中）
+    if (dataChanged && editingLayerRef.current && currentMode !== 'redraw') {
       currentMap.removeLayer(editingLayerRef.current);
       editingLayerRef.current = null;
     }
@@ -16073,7 +16074,9 @@ var PlotGroupLayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         mode: mode,
         value: getSelectedIdsForType(plotType),
         onSelect: handleSelect(plotType),
-        onClick: handleClick(plotType),
+        onClick: function onClick(item) {
+          return handleClick(plotType)(item, undefined);
+        },
         onHover: handleHover(plotType),
         onContextMenu: handleContextMenu(plotType),
         groupKey: groupKey,
@@ -23762,6 +23765,10 @@ var RoadEditToolbar = function RoadEditToolbar(_ref) {
  * - click 模式：点击道路切换 Popup 显示/隐藏（toggle）
  * - hover 模式：鼠标进入道路延迟显示 Popup，离开立即隐藏（带防抖）
  * - 地图点击：点击地图空白区域自动关闭 Popup
+ *
+ * 【稳定性优化】
+ * handleRoadClick 和 handleRoadHover 通过 useRef 保持稳定引用，
+ * 避免因内部状态变化导致回调函数引用改变。
  */
 /**
  * 计算 Popup 位置参数（用于 usePopupTrigger）
@@ -23817,6 +23824,11 @@ function useRoadEvents(options) {
     },
     canClose: popupTrigger.canClosePopup
   });
+  // ========== 稳定性优化：使用 ref 保持 popupTrigger 稳定引用 ==========
+  // popupTrigger 来自 usePopupState，其内部状态变化会导致函数引用改变
+  // 通过 ref 缓存，避免 handleRoadClick/handleRoadHover 依赖变化
+  var popupTriggerLocalRef = useRef(popupTrigger);
+  popupTriggerLocalRef.current = popupTrigger;
   // ========== 业务逻辑 ==========
   /** 计算 Popup 参数的辅助函数 */
   var getPopupParams = useCallback(function (road, layer) {
@@ -23826,30 +23838,30 @@ function useRoadEvents(options) {
   // 处理道路点击
   var handleRoadClick = useCallback(function (roadId, road, layer) {
     // Popup 处理（仅 click 模式）
-    if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'click' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
+    if (popupTriggerRef.current === 'click' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
       var _getPopupParams = getPopupParams(road, layer),
         position = _getPopupParams.position,
         bounds = _getPopupParams.bounds;
-      popupTrigger.handleItemClick(roadId, road, layer, position, bounds);
+      popupTriggerLocalRef.current.handleItemClick(roadId, road, layer, position, bounds);
     }
-  }, [popupTriggerRef, onPopupOpenRef, popupTrigger, getPopupParams]);
+  }, [onPopupOpenRef, getPopupParams, popupTriggerRef]);
   // 处理道路悬停进入
   var handleRoadHover = useCallback(function (roadId, road, layer, type) {
     if (type === 'mouseover') {
       // Popup 处理（仅 hover 模式）
-      if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'hover' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
+      if (popupTriggerRef.current === 'hover' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
         var _getPopupParams2 = getPopupParams(road, layer),
           position = _getPopupParams2.position,
           bounds = _getPopupParams2.bounds;
-        popupTrigger.handleMouseOver(roadId, road, layer, position, bounds);
+        popupTriggerLocalRef.current.handleMouseOver(roadId, road, layer, position, bounds);
       }
     } else {
       // mouseout: 清除防抖定时器
-      if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'hover') {
-        popupTrigger.handleMouseOut();
+      if (popupTriggerRef.current === 'hover') {
+        popupTriggerLocalRef.current.handleMouseOut();
       }
     }
-  }, [popupTriggerRef, onPopupOpenRef, popupTrigger, getPopupParams]);
+  }, [onPopupOpenRef, getPopupParams, popupTriggerRef]);
   // 处理道路右键
   var handleRoadContextMenu = useCallback(function (_roadId, _road, _layer, _event) {
     // 右键默认行为由外层处理，这里仅提供基础支持
@@ -24230,6 +24242,16 @@ var Road = /*#__PURE__*/forwardRef(function RoadComponent(props, ref) {
   }, [map, editEnabled]);
   var renderItem = useCallback(function (road, layerGroup, index) {
     var _onRowRef$current, _onRowRef$current2;
+    // ========== 方案一修复：redraw 模式下跳过正在编辑的道路 ==========
+    // 修复描述：当进入重绘模式时，被选中的道路（id === value）不应该被 renderItem 渲染
+    // 原因：被选中的道路已经通过 editingLayerRef 在地图上以编辑样式（绿色）渲染
+    //      如果 renderItem 仍然渲染，会导致同一道路以两种样式（红色原始样式 + 绿色编辑样式）同时显示
+    // 撤销方法：删除以下 if 块及其注释即可恢复到修改前的状态
+    // 问题根因：usePolylineRenderer 在 currentMode === 'redraw' 时仍然渲染了所有数据，包括被编辑的道路
+    // ========== 方案一修复结束 ==========================================
+    if (currentModeRef.current === 'redraw' && road.id === valueRef.current) {
+      return; // 跳过渲染，由 editingLayerRef 处理该道路的显示
+    }
     var isSelected = road.id === value;
     var style = getRoadStyle(road, isSelected);
     var rowEvents = (_onRowRef$current = (_onRowRef$current2 = onRowRef.current) === null || _onRowRef$current2 === void 0 ? void 0 : _onRowRef$current2.call(onRowRef, road, index)) !== null && _onRowRef$current !== void 0 ? _onRowRef$current : {};
@@ -24398,8 +24420,10 @@ var Road = /*#__PURE__*/forwardRef(function RoadComponent(props, ref) {
     }
   }, [value, normalizedData, onEditRef, enabledButtonsRef]);
   var handleRedraw = useCallback(function () {
-    var _editingPath$vertexBo3, _editingPath$vertexFi3, _editingPath$vertexFi4, _editLayer$pm;
-    if (!map || !enabledButtonsRef.current.includes('redraw') || !value || !map.pm) return;
+    var _editingPath$vertexBo3, _editingPath$vertexFi3, _editingPath$vertexFi4, _map$pm, _map$pm$globalEditMod, _editLayer$pm;
+    if (!map || !enabledButtonsRef.current.includes('redraw') || !value || !map.pm) {
+      return;
+    }
     var layer = layerByIdRef.current[value];
     if (!layer) return;
     var road = normalizedData.find(function (r) {
@@ -24419,6 +24443,10 @@ var Road = /*#__PURE__*/forwardRef(function RoadComponent(props, ref) {
       map.removeLayer(layerGroupRef.current);
       layerGroupRef.current = null;
     }
+    // 禁用全局编辑模式
+    if ((_map$pm = map.pm) !== null && _map$pm !== void 0 && (_map$pm$globalEditMod = _map$pm.globalEditModeEnabled) !== null && _map$pm$globalEditMod !== void 0 && _map$pm$globalEditMod.call(_map$pm)) {
+      map.pm.disableGlobalEditMode();
+    }
     var editLayer = L$1.polyline(road.points, _objectSpread2(_objectSpread2({}, editingPath), {}, {
       className: 'road-line'
     })).addTo(map);
@@ -24440,7 +24468,9 @@ var Road = /*#__PURE__*/forwardRef(function RoadComponent(props, ref) {
   }, [value, normalizedData, map, editingPath, enabledButtonsRef]);
   useEffect(function () {
     var _editingPath$vertexBo4, _editingPath$vertexFi5, _editingPath$vertexFi6;
-    if (currentMode !== 'redraw' || !editingLayerRef.current || !map) return;
+    if (currentMode !== 'redraw' || !editingLayerRef.current || !map) {
+      return;
+    }
     editingLayerRef.current.setStyle(editingPath);
     // 设置顶点样式 CSS 变量（与 PlotLayer 保持一致）
     var vertexBorderColor = (_editingPath$vertexBo4 = editingPath.vertexBorderColor) !== null && _editingPath$vertexBo4 !== void 0 ? _editingPath$vertexBo4 : ROAD_STYLE.editing.vertexBorderColor;
@@ -25372,6 +25402,15 @@ var Irrigation = /*#__PURE__*/forwardRef(function (props, ref) {
     }, animated, detected.type === 'svg' ? detected.config : null, detected.type === 'url' ? detected.src : null, 'irrigation-port-marker');
   }, []);
   var renderItem = useCallback(function (channel, layerGroup, _index) {
+    // ========== 方案一修复：redraw 模式下跳过正在编辑的渠道 ==========
+    // 修复描述：当进入重绘模式时，被选中的渠道（id === value）不应该被 renderItem 渲染
+    // 原因：被选中的渠道已经通过 editingLayerRef 在地图上以编辑样式渲染
+    //      如果 renderItem 仍然渲染，会导致同一渠道以两种样式同时显示
+    // 撤销方法：删除以下 if 块及其注释即可恢复到修改前的状态
+    // ========== 方案一修复结束 ==========================================
+    if (currentModeRef.current === 'redraw' && channel.id === valueRef.current) {
+      return; // 跳过渲染，由 editingLayerRef 处理该渠道的显示
+    }
     var isSelected = channel.id === value;
     var style = getChannelStyle(channel, isSelected);
     var hitArea = L$1.polyline(channel.points, {