@wenle_2523097/agri-map 2.0.7 → 2.0.9

package/README.md

@@ -4,6 +4,13 @@
 
 ## 更新日志
 
+### v2.0.8 (2026-06-01)
+#### 新增
+- **TrackPlayer 时间轴功能**：新增 `onTimelineUpdate` 回调，暴露完整时间轴数据
+- **useTimeline Hook**：提供时间轴数据计算逻辑（progress、时间戳、格式化时间等）
+- **时间轴 UI 交互**：Demo 支持滑块拖动跳转、实时进度显示、时间戳标签
+- **TimelineProgressInfo 类型**：完整的时间轴进度信息接口定义
+
 ### v2.0.7 (2026-05-27)
 #### 新增
 - **Panel 面板组件**：新增地图面板组件，支持在地图上渲染 React 内容
@@ -52,11 +59,6 @@ yarn add @wenle_2523097/agri-map
 ```bash
 npm install leaflet@^1.9.4 react@>=18.0.0 react-dom@>=18.0.0
 ```
-
-> ⚠️ **重要提示：**
->
-> - 本库已移除 `react-leaflet` 依赖，直接使用原生 Leaflet API，更轻量、更灵活
-
 ---
 
 ## 快速开始

package/dist/components/PlotLayer/usePlotData.d.ts

@@ -26,5 +26,12 @@ interface UsePlotDataResult {
     /** 当前高亮分组 ref */
     highlightedGroupRef: React.MutableRefObject<string | null>;
 }
+/**
+ * 将坐标转换为原始输入格式
+ * @param coords 内部标准格式坐标 [lat, lng]
+ * @param order 原始输入格式
+ * @returns 原始格式的坐标
+ */
+export declare function convertToOriginalFormat(coords: Coordinate[], order: 'lat-lng' | 'lng-lat' | undefined): Coordinate[];
 export declare function usePlotData({ fieldNames, dataSource, groupKey, }: UsePlotDataOptions): UsePlotDataResult;
 export {};

package/dist/components/TrackPlayer/__tests__/index.test.d.ts

@@ -1,5 +1,5 @@
 /**
- * TrackPlayer 组件单元测试
+ * @fileoverview TrackPlayer 组件单元测试
  * @description 测试轨迹播放组件的渲染、播放控制和状态管理
  */
 export {};

package/dist/components/TrackPlayer/__tests__/useTimeline.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @fileoverview useTimeline hook 单元测试
+ * @module components/TrackPlayer/__tests__/useTimeline.test
+ */
+export {};

package/dist/components/TrackPlayer/hooks/useTimeline.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @fileoverview TrackPlayer 时间轴数据计算 Hook
+ * @module components/TrackPlayer/hooks/useTimeline
+ */
+import type { TrackPointWithState } from '../types';
+/** 时间轴信息 */
+export interface TimelineInfo {
+    /** 起始时间戳 */
+    startTime: number | null;
+    /** 结束时间戳 */
+    endTime: number | null;
+    /** 当前时间戳 */
+    currentTime: number | null;
+    /** 进度百分比 0-1 */
+    progress: number;
+    /** 格式化起始时间 */
+    startTimeStr: string | null;
+    /** 格式化结束时间 */
+    endTimeStr: string | null;
+    /** 格式化当前时间 */
+    currentTimeStr: string | null;
+}
+interface UseTimelineOptions {
+    allPoints: TrackPointWithState[];
+    currentIndex: number;
+}
+/**
+ * 格式化时间戳为 HH:MM:SS 字符串
+ * @param timestamp 时间戳（毫秒），可为 null
+ */
+export declare function formatTimestamp(timestamp: number | null): string | null;
+/**
+ * 计算进度对应的索引
+ * @param allPointsLength 轨迹点总数
+ * @param progress 进度 0-1
+ * @returns 对应的索引
+ */
+export declare function indexFromProgress(allPointsLength: number, progress: number): number;
+/**
+ * 计算时间轴数据
+ * @param allPoints 轨迹点数组
+ * @param currentIndex 当前索引
+ * @returns 时间轴信息
+ */
+export declare function useTimeline({ allPoints, currentIndex }: UseTimelineOptions): TimelineInfo;
+/**
+ * 计算进度信息（用于 onProgress 回调兼容）
+ */
+export declare function calcProgressInfo(allPoints: TrackPointWithState[], currentIndex: number, _distance: number): {
+    progress: number;
+    startTime: number | null;
+    endTime: number | null;
+    currentTime: number | null;
+    startTimeStr: string | null;
+    endTimeStr: string | null;
+    currentTimeStr: string | null;
+};
+export {};

package/dist/components/TrackPlayer/index.d.ts

@@ -52,6 +52,19 @@ export interface TrackPlayerProps {
     onStop?: () => void;
     onProgress?: (currentIndex: number, total: number, point: TrackPoint | null, distance: number, timestamp: number | null, time: string | null) => void;
     onComplete?: () => void;
+    /** 时间轴进度详细回调（提供完整时间轴数据） */
+    onTimelineUpdate?: (info: {
+        currentIndex: number;
+        totalPoints: number;
+        progress: number;
+        startTime: number | null;
+        endTime: number | null;
+        currentTime: number | null;
+        startTimeStr: string | null;
+        endTimeStr: string | null;
+        currentTimeStr: string | null;
+        distance: number;
+    }) => void;
 }
 declare const TrackPlayer: import("react").ForwardRefExoticComponent<TrackPlayerProps & import("react").RefAttributes<TrackPlayerHandle>>;
 export default TrackPlayer;

package/dist/components/TrackPlayer/types.d.ts

@@ -2,7 +2,7 @@
  * @fileoverview TrackPlayer 类型定义
  * @module components/TrackPlayer/types
  */
-import type { TrackData, TrackPoint, IconConfig } from '../../types';
+import type { TrackData, TrackPoint, IconConfig, PathOptions } from '../../types';
 export type PlayStatus = 'idle' | 'playing' | 'paused' | 'stopped';
 /** 轨迹播放控制方法 */
 export interface TrackPlayerHandle {
@@ -32,6 +32,10 @@ export interface TrackPlayerProps {
     trailLength?: number;
     /** 显示轨迹线（完整路径） */
     showTrack?: boolean;
+    /** 播放前轨迹样式（未走过的路径），默认 TRACKPLAYER_STYLE.default */
+    path?: PathOptions | null | false;
+    /** 播放后轨迹样式（已走过的路径），默认 TRACKPLAYER_STYLE.played */
+    playPath?: PathOptions | null | false;
     /** 当前时刻图标配置，默认使用 TRACKPLAYER_DEFAULT_ICON */
     icon?: IconConfig | null | false;
     /** 图标默认朝向角度（度），默认 -90 */
@@ -44,6 +48,31 @@ export interface TrackPlayerProps {
     onStop?: () => void;
     onProgress?: (currentIndex: number, total: number, point: TrackPoint | null, distance: number, timestamp: number | null, time: string | null) => void;
     onComplete?: () => void;
+    /** 时间轴进度详细回调（提供完整时间轴数据） */
+    onTimelineUpdate?: (info: TimelineProgressInfo) => void;
+}
+/** 时间轴进度信息 */
+export interface TimelineProgressInfo {
+    /** 当前索引 */
+    currentIndex: number;
+    /** 总点数 */
+    totalPoints: number;
+    /** 进度百分比 0-1 */
+    progress: number;
+    /** 起始时间戳 */
+    startTime: number | null;
+    /** 结束时间戳 */
+    endTime: number | null;
+    /** 当前时间戳 */
+    currentTime: number | null;
+    /** 格式化起始时间 */
+    startTimeStr: string | null;
+    /** 格式化结束时间 */
+    endTimeStr: string | null;
+    /** 格式化当前时间 */
+    currentTimeStr: string | null;
+    /** 已行进距离（米） */
+    distance: number;
 }
 /** 内部使用的轨迹点（含 state） */
 export interface TrackPointWithState extends TrackPoint {

package/dist/components/plotgrouplayer.esm.js

@@ -7581,6 +7581,73 @@ function parseVirtualizationConfig(virtualization) {
   };
 }
 
+/**
+ * 检测并转换坐标格式
+ * @description 如果第一个坐标值 > 90 且第二个值 <= 90，认为是 [lng, lat] 格式，需要翻转
+ * @param positions 原始坐标数组
+ * @returns 包含坐标顺序和标准化后坐标的结果
+ */
+function detectAndNormalizeCoordinates(positions) {
+  if (!Array.isArray(positions) || positions.length === 0) {
+    return {
+      normalized: positions,
+      order: 'lat-lng'
+    };
+  }
+  // 获取第一个有效坐标进行格式检测
+  var firstItem = positions[0];
+  if (!Array.isArray(firstItem)) {
+    return {
+      normalized: positions,
+      order: 'lat-lng'
+    };
+  }
+  // 获取第一个坐标点
+  var firstCoord = Array.isArray(firstItem[0]) ? firstItem[0] : firstItem;
+  // 检查是否为有效坐标 [lat, lng] 或 [lng, lat]
+  if (firstCoord.length >= 2) {
+    var a = firstCoord[0];
+    var b = firstCoord[1];
+    // 如果 a > 90 && b <= 90，认为是经度值（经度范围 -180~180，纬度 -90~90）
+    if (typeof a === 'number' && a > 90 && typeof b === 'number' && b <= 90) {
+      var flip = function flip(coord) {
+        return [coord[1], coord[0]];
+      };
+      if (Array.isArray(firstItem[0])) {
+        // 三维数组：翻转所有环
+        return {
+          normalized: positions.map(function (inner) {
+            return inner.map(flip);
+          }),
+          order: 'lng-lat'
+        };
+      }
+      // 二维数组
+      return {
+        normalized: positions.map(flip),
+        order: 'lng-lat'
+      };
+    }
+  }
+  return {
+    normalized: positions,
+    order: 'lat-lng'
+  };
+}
+/**
+ * 将坐标转换为原始输入格式
+ * @param coords 内部标准格式坐标 [lat, lng]
+ * @param order 原始输入格式
+ * @returns 原始格式的坐标
+ */
+function convertToOriginalFormat(coords, order) {
+  if (order === 'lng-lat') {
+    return coords.map(function (coord) {
+      return [coord[1], coord[0]];
+    });
+  }
+  return coords;
+}
 function usePlotData(_ref) {
   var fieldNames = _ref.fieldNames,
     dataSource = _ref.dataSource,
@@ -7597,9 +7664,13 @@ function usePlotData(_ref) {
   // 映射原始数据到标准 PlotData 格式
   var mapPlotData = useCallback(function (rawItem) {
     var id = rawItem[mergedFieldNames.id];
-    var positions = rawItem[mergedFieldNames.positions];
+    var rawPositions = rawItem[mergedFieldNames.positions];
     var area = rawItem[mergedFieldNames.area];
     var possessor = rawItem[mergedFieldNames.possessor];
+    // 检测并转换坐标格式
+    var detectResult = detectAndNormalizeCoordinates(rawPositions);
+    var positions = detectResult.normalized;
+    var order = detectResult.order;
     // 二维 positions [[lat,lng],...] → 三维 [[[lat,lng],...]]
     if (Array.isArray(positions) && !is3DPositions(positions)) {
       positions = [positions];
@@ -7623,7 +7694,8 @@ function usePlotData(_ref) {
       positions: positions,
       area: area,
       possessor: possessor,
-      customData: Object.keys(customData).length > 0 ? customData : undefined
+      customData: Object.keys(customData).length > 0 ? customData : undefined,
+      _coordinateOrder: order
     }, extensionProps);
   }, [mergedFieldNames]);
   // 标准化数据源
@@ -8267,12 +8339,16 @@ function usePlotEditActions(_ref) {
    * 获取完整的编辑结果数据
    * @param coords - 编辑后的坐标
    * @param area - 编辑后的面积
-   * @returns 完整的地块数据（包含原始属性+新坐标）
+   * @returns 完整的地块数据（包含原始属性+新坐标），坐标格式保持与输入一致
    */
   var getFullPlotData = useCallback(function (coords, area) {
     if (!localPlotDataRef.current) return null;
+    // 获取输入坐标格式
+    var order = localPlotDataRef.current._coordinateOrder;
+    // 转换为原始格式
+    var originalCoords = convertToOriginalFormat(coords, order);
     return _objectSpread2(_objectSpread2({}, localPlotDataRef.current), {}, {
-      positions: [coords],
+      positions: [originalCoords],
       area: area
     });
   }, []);
@@ -8336,6 +8412,7 @@ function usePlotEditActions(_ref) {
   }, [cleanupEditEvents, cleanupFragmentLayers, setEditMode, editingLayerRef, drawingCoordinatesRef, preserveTempLayerRef, map]);
   // ========== 操作处理函数 ==========
   var handleSave = useCallback(function () {
+    var _localPlotDataRef$cur;
     var currentEditMode = editModeStateRef.current;
     disableDrawMode(map);
     var coords = drawingCoordinatesRef.current;
@@ -8354,12 +8431,16 @@ function usePlotEditActions(_ref) {
       return;
     }
     var areaSquareMeters = calculatePolygonArea(coords);
+    // 获取输入坐标格式并转换为原始格式
+    var order = (_localPlotDataRef$cur = localPlotDataRef.current) === null || _localPlotDataRef$cur === void 0 ? void 0 : _localPlotDataRef$cur._coordinateOrder;
+    var originalCoords = convertToOriginalFormat(coords, order);
     // 获取完整的地块数据（包含原始属性）
     var fullPlotData = getFullPlotData(coords, areaSquareMeters);
     var result = {
       plotId: selectedPlotId,
       mode: currentEditMode,
-      coordinates: coords,
+      coordinates: originalCoords,
+      // 保持与输入一致的坐标格式
       area: areaSquareMeters,
       areaUnit: areaUnit,
       plot: fullPlotData || undefined
@@ -8369,7 +8450,10 @@ function usePlotEditActions(_ref) {
       result.selectedFragment = selectedFragmentRef.current;
     }
     if (currentEditMode === 'clip' && clipHolesRef.current) {
-      result.positions = clipHolesRef.current;
+      // 转换孔洞坐标为原始格式
+      result.positions = clipHolesRef.current.map(function (hole) {
+        return convertToOriginalFormat(hole, order);
+      });
     }
     dispatchEditResult(result);
     cleanupAfterSave(currentEditMode);