@fleet-frontend/mower-maps 0.0.9-beta.3 → 0.0.9-beta.4

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
 
 /**
@@ -14,7 +14,6 @@ class SvgMapView {
         this.lineScale = 1; // 线条缩放系数
         // 状态标志
         this.destroyed = false;
-        this.showScale = false;
         // 渲染系统 - 移除节流以确保用户操作的实时响应
         // 拖动功能
         this.isDragging = false;
@@ -97,6 +96,7 @@ class SvgMapView {
      */
     removeLayer(layer) {
         const index = this.layers.indexOf(layer);
+        console.log('removeLayer----->', index);
         if (index !== -1) {
             this.layers.splice(index, 1);
             this.refresh();
@@ -153,43 +153,8 @@ class SvgMapView {
             // 宽高比差异较大，使用meet确保内容完全可见
             this.svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
         }
+        console.log('fitToView');
         this.updateViewBox();
-        this.refresh();
-    }
-    /**
-     * 重置变换
-     */
-    resetTransform() {
-        this.scale = 1;
-        // 重置viewBox到默认状态
-        const containerRect = this.container.getBoundingClientRect();
-        this.viewBox = {
-            x: 0,
-            y: 0,
-            width: containerRect.width,
-            height: containerRect.height,
-        };
-        this.updateViewBox();
-        this.refresh();
-    }
-    /**
-     * 设置缩放级别
-     */
-    setZoom(zoomLevel) {
-        if (zoomLevel <= 0)
-            return;
-        const oldScale = this.scale;
-        this.scale = zoomLevel;
-        // 调整viewBox以实现缩放
-        const scaleFactor = oldScale / this.scale;
-        const centerX = this.viewBox.x + this.viewBox.width / 2;
-        const centerY = this.viewBox.y + this.viewBox.height / 2;
-        this.viewBox.width *= scaleFactor;
-        this.viewBox.height *= scaleFactor;
-        this.viewBox.x = centerX - this.viewBox.width / 2;
-        this.viewBox.y = centerY - this.viewBox.height / 2;
-        this.updateViewBox();
-        this.refresh();
     }
     /**
      * 获取当前缩放级别
@@ -197,15 +162,6 @@ class SvgMapView {
     getZoom() {
         return this.scale;
     }
-    /**
-     * 设置线条缩放系数
-     */
-    setLineScale(lineScale) {
-        if (lineScale <= 0)
-            return;
-        this.lineScale = lineScale;
-        this.refresh();
-    }
     /**
      * 获取当前线条缩放系数
      */
@@ -268,6 +224,7 @@ class SvgMapView {
      * 绘制图层，不传参数则默认绘制所有图层
      */
     onDrawLayers(type) {
+        console.log('onDrawLayers----->', type);
         if (type) {
             const layer = this.layers.find((layer) => layer.getType() === type);
             if (layer) {
@@ -344,14 +301,9 @@ class SvgMapView {
     refresh() {
         if (this.destroyed)
             return;
+        console.log('refresh----->');
         this.render();
     }
-    /**
-     * 重新初始化SVG（用于容器大小变化）
-     */
-    reinitializeSVG() {
-        this.refresh();
-    }
     // ==================== 拖拽功能 ====================
     /**
      * 设置拖拽事件处理器
@@ -476,22 +428,6 @@ class SvgMapView {
             return null;
         }
     }
-    /**
-     * 自动适配viewBox到实际内容
-     */
-    autoFitToContent() {
-        if (this.destroyed || this.layers.length === 0)
-            return;
-        const bounds = this.getLayersGroupBounds();
-        if (bounds) {
-            this.fitToView({
-                minX: bounds.x,
-                minY: bounds.y,
-                maxX: bounds.x + bounds.width,
-                maxY: bounds.y + bounds.height,
-            });
-        }
-    }
     /**
      * 获取ViewBox信息
      */
@@ -512,13 +448,6 @@ class SvgMapView {
      * 诊断SVG尺寸信息
      */
     diagnosticSizeInfo() { }
-    /**
-     * 设置是否显示比例尺
-     */
-    setShowScale(show) {
-        this.showScale = show;
-        this.refresh();
-    }
     /**
      * 获取SVG元素
      */
@@ -1894,26 +1823,7 @@ function generateBoundaryData(mapData, pathData) {
     }
     // 第一步：收集所有TUNNEL数据的connection信息
     const connectedBoundaryIds = new Set();
-    // 1.1 遍历子地图中的TUNNEL元素
-    for (const subMap of mapData.sub_maps) {
-        if (!subMap.elements)
-            continue;
-        // 找到该子地图中所有 type 为 TUNNEL 的元素
-        const tunnelElements = subMap.elements.filter(element => element.type === 'TUNNEL');
-        for (const tunnelElement of tunnelElements) {
-            const connection = tunnelElement.connection;
-            if (connection) {
-                // connection可能是单个数字或数组
-                if (Array.isArray(connection)) {
-                    connection.forEach(id => connectedBoundaryIds.add(id));
-                }
-                else if (typeof connection === 'number') {
-                    connectedBoundaryIds.add(connection);
-                }
-            }
-        }
-    }
-    // 1.2 遍历mapData中的tunnels字段
+    // 遍历mapData中的tunnels字段
     if (mapData.tunnels && Array.isArray(mapData.tunnels)) {
         for (const tunnel of mapData.tunnels) {
             const connection = tunnel.connection;
@@ -1935,6 +1845,8 @@ function generateBoundaryData(mapData, pathData) {
             continue;
         // 每个sub_map的elements是边界坐标，没有sub_map只有一个boundary数据
         const boundaryElement = subMap.elements.find(element => element.type === 'BOUNDARY');
+        //  如果当前subMap存在充电桩且充电桩存在tunnel，说明当前subMap中的boundary是初始boundary，这个boundary不为孤立区域
+        const hasTunnelToChargingPile = subMap.elements.some(element => element.type === 'CHARGING_PILE' && element.tunnel);
         // 创建基础的 boundary 数据（来自 mapData）
         const boundary = {
             // 从 BOUNDARY 元素复制属性
@@ -1944,7 +1856,7 @@ function generateBoundaryData(mapData, pathData) {
             points: convertPointsFormat(boundaryElement?.points) || [],
             type: boundaryElement.type,
             // 判断是否为孤立子区域
-            isIsolated: !connectedBoundaryIds.has(boundaryElement.id)
+            isIsolated: hasTunnelToChargingPile ? false : !connectedBoundaryIds.has(boundaryElement.id)
         };
         // 如果有 pathData，尝试匹配对应的分区数据
         if (pathData) {
@@ -2212,10 +2124,10 @@ function getNoPositionMowerImageByModal(mowerModal) {
     }
     return iNoPosition;
 }
-function getMowerImage(positonConfig) {
+function getMowerImage(positonConfig, modelType) {
     if (!positonConfig)
         return '';
-    const model = positonConfig.vehicleModel || '';
+    const model = modelType?.toLowerCase() || 'i';
     const state = positonConfig.vehicleState;
     const mowerImage = getMowerImageByModal(model);
     const disabledImage = getDisabledMowerImageByModal(model);
@@ -4955,6 +4867,13 @@ class BoundaryBorderLayer extends BaseLayer {
         this.level = LAYER_LEVELS.BOUNDARY_BORDER; // 中等层级
         this.type = LAYER_DEFAULT_TYPE.BOUNDARY_BORDER;
         this.boudaryBorderPaths = {};
+        this.mowingBoundarys = [];
+    }
+    /**
+     * 设置当前割草任务的边界
+     */
+    setMowingBoundarys(mowingBoundarys) {
+        this.mowingBoundarys = mowingBoundarys;
     }
     /**
      * SVG渲染方法
@@ -4964,6 +4883,7 @@ class BoundaryBorderLayer extends BaseLayer {
             return;
         }
         this.scale = scale;
+        console.log('draw boundary border->', this.elements, this.mowingBoundarys);
         // 只渲染边界边框类型的元素
         for (const element of this.elements) {
             if (element.type === 'boundary_border') {
@@ -5000,7 +4920,8 @@ class BoundaryBorderLayer extends BaseLayer {
      * 创建直接路径（type=2）
      */
     createDirectPath(svgGroup, points, style, id) {
-        const strokeColor = style.lineColor;
+        const isMowing = this.mowingBoundarys.includes(Number(id));
+        const strokeColor = isMowing ? style.mowingLineColor : style.lineColor;
         const lineWidth = dp2px(style.lineWidth || 3);
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
         // 构建路径数据
@@ -5033,7 +4954,8 @@ class BoundaryBorderLayer extends BaseLayer {
      * 使用PathMeasure逻辑创建平行路径（type=1）
      */
     createParallelPathsWithMeasure(svgGroup, points, style, id) {
-        const strokeColor = style.lineColor;
+        const isMowing = this.mowingBoundarys.includes(Number(id));
+        const strokeColor = isMowing ? style.mowingLineColor : style.lineColor;
         const lineWidth = dp2px(style.lineWidth || 3);
         // 获取当前SVG的缩放级别，计算固定屏幕像素间距
         const fixedScreenDistance = lineWidth; // 固定的屏幕像素距离
@@ -6427,12 +6349,6 @@ class BoundaryLabelsManager {
             this.container.style.display = visible ? 'block' : 'none';
         }
     }
-    /**
-     * 获取边界数据
-     */
-    getBoundaryData() {
-        return this.boundaryData;
-    }
     /**
      * 根据ID获取特定边界的标签元素
      */
@@ -6482,18 +6398,6 @@ class BoundaryLabelsManager {
             }
         });
     }
-    /**
-     * 重置标签层级（公共方法）
-     */
-    resetZIndex() {
-        this.resetLabelZIndex();
-    }
-    /**
-     * 获取层级常量（静态方法）
-     */
-    static getZIndexConstants() {
-        return BoundaryLabelsManager.Z_INDEX;
-    }
     /**
      * 设置标签旋转角度，使其与地图旋转相反，保持水平状态
      * @param rotation 地图的旋转角度（度）
@@ -6510,19 +6414,6 @@ class BoundaryLabelsManager {
             labelElement.style.transform = `translate(-50%, -50%) rotate(${counterRotation}deg)`;
         });
     }
-    /**
-     * 重置标签旋转角度
-     */
-    resetLabelsRotation() {
-        if (!this.container)
-            return;
-        const labels = this.container.querySelectorAll('.boundary-label');
-        labels.forEach((label) => {
-            const labelElement = label;
-            // 重置为默认的居中变换
-            labelElement.style.transform = 'translate(-50%, -50%)';
-        });
-    }
 }
 // 简化的层级定义
 BoundaryLabelsManager.Z_INDEX = {
@@ -6698,26 +6589,6 @@ class ChargingPileManager {
             this.container.innerHTML = '';
         }
     }
-    /**
-     * 设置可见性
-     */
-    setVisible(visible) {
-        if (this.container) {
-            this.container.style.display = visible ? 'block' : 'none';
-        }
-    }
-    /**
-     * 获取充电桩数量
-     */
-    getElementCount() {
-        return this.chargingPileElements.length;
-    }
-    /**
-     * 充电桩不需要动态层级调整（为了接口统一而保留）
-     */
-    resetZIndex() {
-        // 充电桩层级始终保持固定，无需重置
-    }
     /**
      * 销毁管理器
      */
@@ -6740,17 +6611,6 @@ class ChargingPileManager {
             pileElement.style.transform = `translate(-50%, -50%) rotate(${this.originalRotation - this.rotation}deg)`;
         });
     }
-    /**
-     * 重置充电桩旋转角度
-     */
-    resetRotation() {
-        this.rotation = 0;
-        const allContainers = this.container.querySelectorAll('.charging-pile');
-        allContainers.forEach((container) => {
-            const pileElement = container;
-            pileElement.style.transform = `translate(-50%, -50%) rotate(${this.originalRotation - this.rotation}deg)`;
-        });
-    }
 }
 // 简化的层级定义 - 充电桩只需要一个固定层级
 ChargingPileManager.Z_INDEX = {
@@ -7136,32 +6996,6 @@ class AntennaManager {
             this.container.innerHTML = '';
         }
     }
-    /**
-     * 设置可见性
-     */
-    setVisible(visible) {
-        if (this.container) {
-            this.container.style.display = visible ? 'block' : 'none';
-        }
-    }
-    /**
-     * 获取天线数量
-     */
-    getElementCount() {
-        return this.antennaElements.length;
-    }
-    /**
-     * 重置天线层级（公共方法）
-     */
-    resetZIndex() {
-        this.resetAntennaZIndex();
-    }
-    /**
-     * 获取层级常量（静态方法）
-     */
-    static getZIndexConstants() {
-        return AntennaManager.Z_INDEX;
-    }
     /**
      * 销毁管理器
      */
@@ -7189,17 +7023,6 @@ class AntennaManager {
             antennaContainer.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
         });
     }
-    /**
-     * 重置天线旋转角度
-     */
-    resetRotation() {
-        this.rotation = 0;
-        const allContainers = this.container.querySelectorAll('.antenna-container-item');
-        allContainers.forEach((container) => {
-            const antennaContainer = container;
-            antennaContainer.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
-        });
-    }
 }
 // 简化的层级定义
 AntennaManager.Z_INDEX = {
@@ -7255,7 +7078,7 @@ const EDIT_BEHAVIOR = {
 };
 
 class MowerPositionManager {
-    constructor(svgView, mowerPositionConfig, overlayDiv, onAnimationComplete, onMowingPositionChange) {
+    constructor(svgView, mowerPositionConfig, modelType, overlayDiv, onAnimationComplete, onMowingPositionChange) {
         this.container = null;
         this.overlayDiv = null;
         this.mowerElement = null;
@@ -7273,6 +7096,7 @@ class MowerPositionManager {
         this.onlyUpdateTheta = false;
         this.svgView = svgView;
         this.mowerPositionConfig = mowerPositionConfig;
+        this.modelType = modelType;
         this.overlayDiv = overlayDiv;
         this.onAnimationComplete = onAnimationComplete;
         this.onMowingPositionChange = onMowingPositionChange;
@@ -7327,6 +7151,7 @@ class MowerPositionManager {
         }
         this.mowerElement.appendChild(imgElement);
         this.container.appendChild(this.mowerElement);
+        this.updatePosition(this.mowerPositionConfig);
     }
     /**
      * 设置叠加层div引用（用于坐标转换）
@@ -7348,9 +7173,9 @@ class MowerPositionManager {
             return;
         this.mowerPositionConfig = chargingPilesPositionConfig;
         const lastPosition = this.lastPosition;
-        const postureX = chargingPilesPositionConfig.postureX || chargingPilesPositionConfig.lastPostureX || lastPosition?.x;
-        const postureY = chargingPilesPositionConfig.postureY || chargingPilesPositionConfig.lastPostureY || lastPosition?.y;
-        const postureTheta = chargingPilesPositionConfig.postureTheta || chargingPilesPositionConfig.lastPostureTheta || lastPosition?.rotation;
+        const postureX = chargingPilesPositionConfig.postureX ?? chargingPilesPositionConfig.lastPostureX ?? lastPosition?.x ?? 0;
+        const postureY = chargingPilesPositionConfig.postureY ?? chargingPilesPositionConfig.lastPostureY ?? lastPosition?.y ?? 0;
+        const postureTheta = chargingPilesPositionConfig.postureTheta ?? chargingPilesPositionConfig.lastPostureTheta ?? lastPosition?.rotation ?? 0;
         // 检查是否需要更新图片
         this.updateMowerImage(chargingPilesPositionConfig);
         // 立即更新位置
@@ -7364,9 +7189,10 @@ class MowerPositionManager {
         this.updateMowerImage(positionConfig);
         // 更新配置
         this.mowerPositionConfig = positionConfig;
-        const postureX = positionConfig.postureX || this.lastPosition?.x;
-        const postureY = positionConfig.postureY || this.lastPosition?.y;
-        const postureTheta = positionConfig.postureTheta || this.lastPosition?.rotation;
+        const postureX = positionConfig?.postureX ?? this.lastPosition?.x;
+        const postureY = positionConfig?.postureY ?? this.lastPosition?.y;
+        const postureTheta = positionConfig?.postureTheta ?? this.lastPosition?.rotation;
+        console.log('updatePosition  manager', positionConfig, this.lastPosition);
         // 停止当前动画（如果有）
         this.stopAnimation();
         // 第一个点
@@ -7397,9 +7223,14 @@ class MowerPositionManager {
         const imgElement = this.mowerElement.querySelector('img');
         if (!imgElement)
             return;
-        const imageSrc = getMowerImage(positonConfig);
+        const imageSrc = getMowerImage(positonConfig, this.modelType);
         if (imageSrc) {
             imgElement.src = imageSrc;
+            imgElement.style.display = 'block';
+        }
+        else {
+            imgElement.style.display = 'none';
+            return;
         }
     }
     /**
@@ -7420,6 +7251,7 @@ class MowerPositionManager {
         if (!positonOutOfRange && !positionValid) {
             this.lastPosition = { x, y, rotation: theta };
         }
+        // console.log('setElementPosition', x, y, targetRotation, positonOutOfRange, positionValid, targetPixelPosition);
         if (!this.mowerElement)
             return;
         this.mowerElement.style.left = `${targetPixelPosition?.x}px`;
@@ -7557,12 +7389,6 @@ class MowerPositionManager {
             this.container.style.display = visible ? 'block' : 'none';
         }
     }
-    /**
-     * 检查是否正在动画中
-     */
-    getIsAnimating() {
-        return this.isAnimating;
-    }
     /**
      * 销毁管理器
      */
@@ -7627,7 +7453,7 @@ function throttleAdvanced(func, delay, options = { leading: true, trailing: true
 
 // Google Maps 叠加层类 - 带编辑功能
 class MowerMapOverlay {
-    constructor(bounds, mapData, partitionBoundary, mowerPositionConfig, pathData, isEditMode = false, mapConfig = {}, antennaConfig = {}, mowPartitionData = null, defaultTransform, onMapLoad, onPathLoad, dragCallbacks) {
+    constructor(bounds, mapData, partitionBoundary, mowerPositionConfig, modelType, pathData, isEditMode = false, mapConfig = {}, antennaConfig = {}, mowPartitionData = null, defaultTransform, onMapLoad, onPathLoad, dragCallbacks) {
         this.div = null;
         this.svgMapView = null;
         this.offscreenContainer = null;
@@ -7682,6 +7508,7 @@ class MowerMapOverlay {
         this.dragCallbacks = dragCallbacks;
         this.mowerPositionConfig = mowerPositionConfig;
         this.mowPartitionData = mowPartitionData;
+        this.modelType = modelType;
         // 设置默认的transform
         if (defaultTransform) {
             this.defaultTransform = {
@@ -7720,12 +7547,14 @@ class MowerMapOverlay {
         this.isUserAnimation = animationTime > 0;
         // 更新割草机位置配置
         this.mowerPositionConfig = positionConfig;
+        console.log('updatePosition  overlay', positionConfig);
         // 更新割草机位置管理器
         if (this.mowerPositionManager) {
             this.mowerPositionManager.updatePosition(positionConfig, animationTime);
         }
     }
     updatePositionByLastPosition(chargingPilesPositionConfig) {
+        this.mowerPositionConfig = chargingPilesPositionConfig;
         // 更新配置
         if (this.mowerPositionManager) {
             this.mowerPositionManager.updatePositionByLastPosition(chargingPilesPositionConfig);
@@ -7746,30 +7575,24 @@ class MowerMapOverlay {
         return this.overlayView ? this.overlayView.getPanes() : null;
     }
     resetBorderLayerHighlight() {
+        this.mowPartitionData = null;
         const boundaryBorderLayer = this.svgMapView?.getLayer(LAYER_DEFAULT_TYPE.BOUNDARY_BORDER);
-        Object.keys(boundaryBorderLayer?.boudaryBorderPaths || {}).forEach((key) => {
-            const paths = boundaryBorderLayer?.boudaryBorderPaths?.[key];
-            if (paths) {
-                paths.forEach((path) => {
-                    path.setAttribute('stroke', BOUNDARY_STYLES.lineColor);
-                });
-            }
-        });
+        if (!boundaryBorderLayer)
+            return;
+        boundaryBorderLayer.setMowingBoundarys([]);
+        this.svgMapView?.renderLayer(LAYER_DEFAULT_TYPE.BOUNDARY_BORDER);
     }
     setBorderLayerHighlight(mowPartitionData) {
         this.mowPartitionData = mowPartitionData;
         const boundaryBorderLayer = this.svgMapView?.getLayer(LAYER_DEFAULT_TYPE.BOUNDARY_BORDER);
         const partitionIds = mowPartitionData?.partitionIds || [];
-        for (const partitionId of partitionIds) {
-            const boundaryBorderPaths = boundaryBorderLayer?.boudaryBorderPaths?.[partitionId];
-            if (boundaryBorderPaths) {
-                boundaryBorderPaths.forEach((path) => {
-                    path.setAttribute('stroke', BOUNDARY_STYLES.mowingLineColor);
-                });
-            }
-        }
+        if (!boundaryBorderLayer)
+            return;
+        boundaryBorderLayer.setMowingBoundarys(partitionIds);
+        this.svgMapView?.renderLayer(LAYER_DEFAULT_TYPE.BOUNDARY_BORDER);
     }
     onAdd() {
+        console.log('onAdd');
         // 创建包含SVG的div
         this.div = document.createElement('div');
         this.div.style.borderStyle = 'none';
@@ -7830,16 +7653,6 @@ class MowerMapOverlay {
         const map = this.getMap();
         if (!map || !this.svgMapView)
             return;
-        // const currentZoom = map.getZoom();
-        // const center = map.getCenter();
-        // 基础公式：像素/米 = 156543.03392 * cos(latitude) / (2 ^ zoom)
-        // const metersPerPixel =
-        // (156543.03392 * Math.cos((center.lat() * Math.PI) / 180)) / Math.pow(2, currentZoom);
-        // 缩放比例 = 1 / 米/像素
-        // const scale = (1 / metersPerPixel) * 50;
-        // 应用缩放到SVG
-        // this.svgMapView.setZoom(scale);
-        // 当缩放变化时，重新绘制以确保位置正确
         this.draw();
     }
     // 创建边界标签管理器
@@ -7891,7 +7704,7 @@ class MowerMapOverlay {
         if (!this.div || !this.svgMapView)
             return;
         // 创建割草机位置管理器，传入动画完成回调
-        this.mowerPositionManager = new MowerPositionManager(this.svgMapView, this.mowerPositionConfig, this.div, () => {
+        this.mowerPositionManager = new MowerPositionManager(this.svgMapView, this.mowerPositionConfig, this.modelType, this.div, () => {
             console.log('动画完成');
         }, this.updatePathDataByMowingPositionThrottled.bind(this));
         // 设置叠加层div引用
@@ -7924,7 +7737,7 @@ class MowerMapOverlay {
         this.boundaryLabelsManager.updatePositionsWithPrecomputedData(width, height, viewBoxInfo);
     }
     // 更新管理器位置
-    updateManagerPositions(width, height) {
+    updateManagerPositions(_width, _height) {
         if (!this.div)
             return;
         // 更新充电桩位置
@@ -8489,13 +8302,13 @@ class MowerMapOverlay {
         try {
             // 创建SvgMapView实例
             this.svgMapView = new SvgMapView(this.offscreenContainer, 800, 600);
-            window.svgMapView = this.svgMapView;
             // 加载地图数据
             this.loadMapData();
             // 加载路径数据
             if (this.pathData && this.svgMapView) {
                 this.loadPathData(this.pathData, this.mowPartitionData);
             }
+            console.log('initializeSvgMapView');
             // 刷新绘制图层
             this.svgMapView.refresh();
             // 获取生成的SVG并添加到叠加层div中
@@ -8520,9 +8333,6 @@ class MowerMapOverlay {
             // 使用现有的MapDataProcessor处理地图数据
             const elements = MapDataProcessor.processMapData(this.mapData, this.mapConfig);
             // 分离充电桩和天线元素，其他元素添加到SVG图层
-            // const svgElements = elements.filter(element =>
-            //   element.type !== 'charging_pile' && element.type !== 'antenna'
-            // );
             const svgElements = elements.filter((element) => element.type !== 'charging_pile' && element.type !== 'antenna');
             const chargingPileElements = elements.filter((element) => element.type === 'charging_pile');
             // 处理SVG图层元素
@@ -8537,6 +8347,10 @@ class MowerMapOverlay {
             const layers = drawLayer.getLayers();
             this.svgMapView.clear();
             this.svgMapView.addLayers(layers);
+            const boundaryBorderLayer = this.svgMapView.getLayer(LAYER_DEFAULT_TYPE.BOUNDARY_BORDER);
+            if (boundaryBorderLayer) {
+                boundaryBorderLayer.setMowingBoundarys(this.mowPartitionData?.partitionIds || []);
+            }
             this.createChargingPileManager();
             // 使用管理器处理充电桩和天线
             if (this.chargingPileManager && chargingPileElements.length > 0) {
@@ -8801,6 +8615,10 @@ class MowerMapOverlay {
             this.mowerPositionManager.setVisible(visible);
         }
     }
+    // 获取SvgMapView实例（用于debug）
+    getSvgMapView() {
+        return this.svgMapView;
+    }
 }
 
 var RealTimeDataType;
@@ -8810,6 +8628,35 @@ var RealTimeDataType;
     RealTimeDataType[RealTimeDataType["PARTITION"] = 3] = "PARTITION";
 })(RealTimeDataType || (RealTimeDataType = {}));
 
+// 获取车辆状态的中文文案
+const getVehicleStateText = (vehicleState) => {
+    switch (vehicleState) {
+        case RobotStatus.PARKED:
+            return 'PARKED';
+        case RobotStatus.CHARGING:
+            return 'CHARGING';
+        case RobotStatus.STANDBY:
+            return 'STANDBY';
+        case RobotStatus.MOWING:
+            return 'MOWING';
+        case RobotStatus.WORKING:
+            return 'WORKING';
+        case RobotStatus.MAPPING:
+            return 'MAPPING';
+        case RobotStatus.ERROR:
+            return 'ERROR';
+        case RobotStatus.UPGRADING:
+            return 'UPGRADING';
+        case RobotStatus.DISCONNECTED:
+            return 'DISCONNECTED';
+        case RobotStatus.TASK_DELAY:
+            return 'TASK_DELAY';
+        case RobotStatus.UNKNOWN:
+            return '未知';
+        default:
+            return `未知状态(${vehicleState})`;
+    }
+};
 // 验证GPS坐标是否有效
 const isValidGpsCoordinate = (coordinate) => {
     if (!coordinate || coordinate.length < 2)
@@ -8892,7 +8739,7 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
 // 默认配置
 const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
-const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance, isEditMode = false, dragCallbacks, defaultTransform, }, ref) => {
+const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance, isEditMode = false, dragCallbacks, defaultTransform, debug = false, }, ref) => {
     const [elementCount, setElementCount] = useState(0);
     const [pathCount, setPathCount] = useState(0);
     const [currentError, setCurrentError] = useState(null);
@@ -8904,6 +8751,8 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
     const currentProcessMowingStatusRef = useRef(false);
     const { updateProcessStateIsMowing, processStateIsMowing } = useProcessMowingState();
     const [mowPartitionData, setMowPartitionData] = useState(null);
+    // Debug相关状态
+    const [debugInfo, setDebugInfo] = useState({});
     // 处理地图分区边界
     const partitionBoundary = useMemo(() => {
         const allBoundaryElements = [];
@@ -8928,7 +8777,12 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
     const mowerPositionData = useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         if (!realTimeData || realTimeData.length === 0)
-            return undefined;
+            return {
+                postureX: 0,
+                postureY: 0,
+                postureTheta: 0,
+                vehicleState: RobotStatus.PARKED,
+            };
         let currentPositionData;
         if (realTimeData.length === 1 && realTimeData[0].type === RealTimeDataType.LOCATION) {
             currentPositionData = realTimeData[0];
@@ -8950,7 +8804,6 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
             lastPostureX: currentPositionData?.lastPostureX ? Number(currentPositionData.lastPostureX) : 0,
             lastPostureY: currentPositionData?.lastPostureY ? Number(currentPositionData.lastPostureY) : 0,
             vehicleState: currentPositionData?.vehicleState || RobotStatus.CHARGING,
-            vehicleModel: modelType?.toLowerCase() || '',
         };
     }, [realTimeData, modelType]);
     console.log('mowerPositionData', mowerPositionData);
@@ -9019,8 +8872,9 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
                 overlayRef.current.setMap(null);
                 overlayRef.current = null;
             }
+            console.log('initializeGoogleMapsOverlay', mowPartitionData);
             // 创建叠加层
-            const overlay = new MowerMapOverlay(googleBounds, mapJson, partitionBoundary, mowerPositionData, pathJson || {}, isEditMode, mergedMapConfig, mergedAntennaConfig, null, defaultTransform, (count) => {
+            const overlay = new MowerMapOverlay(googleBounds, mapJson, partitionBoundary, mowerPositionData, modelType, pathJson || {}, isEditMode, mergedMapConfig, mergedAntennaConfig, null, defaultTransform, (count) => {
                 setElementCount(count);
                 onMapLoad?.(count);
             }, (count) => {
@@ -9078,6 +8932,7 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
         const isOffLine = mowerPositionData.vehicleState === RobotStatus.DISCONNECTED;
         const isInChargingPile = inChargingPiles.includes(mowerPositionData.vehicleState);
         // 如果在充电桩上，则直接更新位置到充电桩的位置
+        console.log('usefeect mowerPositionData----->', mowerPositionData);
         if (isInChargingPile) {
             overlayRef.current.updatePosition({
                 ...mowerPositionData,
@@ -9115,19 +8970,137 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
             }
         }
     }, [mowerPositionData]);
+    // 更新debug信息
     useEffect(() => {
+        if (!debug)
+            return;
+        const updateDebugInfo = () => {
+            const newDebugInfo = {};
+            // 获取地图GPS边界
+            if (mapJson) {
+                newDebugInfo.mapBounds = getValidGpsBounds(mapJson, defaultTransform?.rotation);
+            }
+            // 获取SVG viewBox信息
+            if (overlayRef.current) {
+                const overlay = overlayRef.current;
+                const svgMapView = overlay.getSvgMapView?.();
+                if (svgMapView) {
+                    const viewBoxInfo = svgMapView.getViewBoxInfo();
+                    // 计算实际的米单位数据（除以缩放比例）
+                    const SCALE_FACTOR = 50; // 根据项目中的缩放因子
+                    newDebugInfo.viewBox = {
+                        x: viewBoxInfo.x / SCALE_FACTOR,
+                        y: viewBoxInfo.y / SCALE_FACTOR,
+                        width: viewBoxInfo.width / SCALE_FACTOR,
+                        height: viewBoxInfo.height / SCALE_FACTOR,
+                        scale: SCALE_FACTOR,
+                        // 计算左下角和右上角坐标
+                        sw: {
+                            x: viewBoxInfo.x / SCALE_FACTOR,
+                            y: viewBoxInfo.y / SCALE_FACTOR
+                        },
+                        ne: {
+                            x: (viewBoxInfo.x + viewBoxInfo.width) / SCALE_FACTOR,
+                            y: (viewBoxInfo.y + viewBoxInfo.height) / SCALE_FACTOR
+                        }
+                    };
+                }
+            }
+            // 获取当前割草机位置
+            if (mowerPositionData) {
+                newDebugInfo.mowerPosition = {
+                    x: mowerPositionData.postureX || 0,
+                    y: mowerPositionData.postureY || 0,
+                    theta: mowerPositionData.postureTheta || 0,
+                    lastX: mowerPositionData.lastPostureX || 0,
+                    lastY: mowerPositionData.lastPostureY || 0,
+                    lastTheta: mowerPositionData.lastPostureTheta || 0,
+                    vehicleState: mowerPositionData.vehicleState || RobotStatus.UNKNOWN,
+                    vehicleStateText: getVehicleStateText(mowerPositionData.vehicleState || RobotStatus.UNKNOWN)
+                };
+            }
+            // 获取当前割草地块数据
+            newDebugInfo.partitionData = mowPartitionData;
+            setDebugInfo(newDebugInfo);
+        };
+        updateDebugInfo();
+        // 设置定时更新（仅在没有数据变化时使用）
+        const interval = setInterval(updateDebugInfo, 1000);
+        return () => clearInterval(interval);
+    }, [debug, mapJson, mowerPositionData, mowPartitionData, defaultTransform]);
+    // 当关键数据变化时立即更新debug信息
+    useEffect(() => {
+        if (!debug)
+            return;
+        const updateDebugInfo = () => {
+            const newDebugInfo = {};
+            // 获取地图GPS边界
+            if (mapJson) {
+                newDebugInfo.mapBounds = getValidGpsBounds(mapJson, defaultTransform?.rotation);
+            }
+            // 获取SVG viewBox信息
+            if (overlayRef.current) {
+                const overlay = overlayRef.current;
+                const svgMapView = overlay.getSvgMapView?.();
+                if (svgMapView) {
+                    const viewBoxInfo = svgMapView.getViewBoxInfo();
+                    // 计算实际的米单位数据（除以缩放比例）
+                    const SCALE_FACTOR = 50; // 根据项目中的缩放因子
+                    newDebugInfo.viewBox = {
+                        x: viewBoxInfo.x / SCALE_FACTOR,
+                        y: viewBoxInfo.y / SCALE_FACTOR,
+                        width: viewBoxInfo.width / SCALE_FACTOR,
+                        height: viewBoxInfo.height / SCALE_FACTOR,
+                        scale: SCALE_FACTOR,
+                        // 计算左下角和右上角坐标
+                        sw: {
+                            x: viewBoxInfo.x / SCALE_FACTOR,
+                            y: viewBoxInfo.y / SCALE_FACTOR
+                        },
+                        ne: {
+                            x: (viewBoxInfo.x + viewBoxInfo.width) / SCALE_FACTOR,
+                            y: (viewBoxInfo.y + viewBoxInfo.height) / SCALE_FACTOR
+                        }
+                    };
+                }
+            }
+            // 获取当前割草机位置
+            if (mowerPositionData) {
+                newDebugInfo.mowerPosition = {
+                    x: mowerPositionData.postureX || 0,
+                    y: mowerPositionData.postureY || 0,
+                    theta: mowerPositionData.postureTheta || 0,
+                    lastX: mowerPositionData.lastPostureX || 0,
+                    lastY: mowerPositionData.lastPostureY || 0,
+                    lastTheta: mowerPositionData.lastPostureTheta || 0,
+                    vehicleState: mowerPositionData.vehicleState || RobotStatus.UNKNOWN,
+                    vehicleStateText: getVehicleStateText(mowerPositionData.vehicleState || RobotStatus.UNKNOWN)
+                };
+            }
+            // 获取当前割草地块数据
+            newDebugInfo.partitionData = mowPartitionData;
+            setDebugInfo(newDebugInfo);
+        };
+        updateDebugInfo();
+    }, [debug, mowerPositionData, mowPartitionData]);
+    useEffect(() => {
+        if (!realTimeData || realTimeData.length === 0 || !Array.isArray(realTimeData)) {
+            return;
+        }
+        console.log('usefeect realTimeData----->', realTimeData, mapJson, pathJson, overlayRef.current);
+        // realtime中包含当前割草任务的数据，根据数据进行path路径和边界的高亮操作,
+        const mowingPartition = realTimeData.find((item) => item.type === RealTimeDataType.PARTITION);
+        if (mowingPartition) {
+            setMowPartitionData(mowingPartition);
+        }
+        const curMowPartitionData = mowingPartition || mowPartitionData;
         if (!mapJson ||
             !pathJson ||
-            !realTimeData ||
-            realTimeData.length === 0 ||
-            !Array.isArray(realTimeData) ||
             !overlayRef.current)
             return;
         // 根据后端推送的实时数据，进行不同处理
         // TODO：需要根据返回的数据，处理车辆的移动位置
-        console.log('realTimeData----->', realTimeData);
-        // realtime中包含当前割草任务的数据，根据数据进行path路径和边界的高亮操作
-        const curMowPartitionData = realTimeData.find((item) => item.type === RealTimeDataType.PARTITION) || mowPartitionData;
+        console.log('realTimeData----->', realTimeData, curMowPartitionData);
         if (curMowPartitionData) {
             setMowPartitionData(curMowPartitionData);
             const isMowing = curMowPartitionData?.partitionIds && curMowPartitionData.partitionIds.length > 0;
@@ -9170,12 +9143,9 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
         }
     }, [realTimeData, mapJson, pathJson]);
     useEffect(() => {
-        console.log('defaultTransform----->', defaultTransform, overlayRef.current);
+        console.log('defaultTransform----->', defaultTransform, overlayRef.current, mapJson);
         if (!overlayRef.current || !defaultTransform)
             return;
-        if (defaultTransform.x === 0 && defaultTransform.y === 0 && defaultTransform.rotation === 0) {
-            return;
-        }
         overlayRef.current?.setTransform(defaultTransform);
         const validBounds = getValidGpsBounds(mapJson, defaultTransform?.rotation);
         // 地图数据中的坐标格式是 [longitude, latitude]
@@ -9223,12 +9193,31 @@ const MowerMapRenderer = forwardRef(({ mapConfig, modelType, mapRef, mapJson, pa
         setTransform: (t) => overlayRef.current?.setTransform(t),
         resetToDefaultTransform: () => overlayRef.current?.resetToDefaultTransform(),
     }));
+    // Debug信息组件
+    const DebugInfo = () => {
+        if (!debug)
+            return null;
+        return (jsxs("div", { style: {
+                position: 'fixed',
+                bottom: '10px',
+                left: '10px',
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                color: 'white',
+                padding: '10px',
+                borderRadius: '5px',
+                fontSize: '12px',
+                fontFamily: 'monospace',
+                zIndex: 10000,
+                maxWidth: '300px',
+                lineHeight: '1.4'
+            }, children: [jsx("div", { style: { fontWeight: 'bold', marginBottom: '8px' }, children: "\uD83D\uDC1B Debug Info" }), debugInfo.mapBounds && (jsxs("div", { style: { marginBottom: '6px' }, children: [jsx("div", { style: { fontWeight: 'bold' }, children: "\uD83D\uDCCD Map GPS Bounds:" }), jsxs("div", { children: ["SW: [", debugInfo.mapBounds.sw[0].toFixed(6), ", ", debugInfo.mapBounds.sw[1].toFixed(6), "]"] }), jsxs("div", { children: ["NE: [", debugInfo.mapBounds.ne[0].toFixed(6), ", ", debugInfo.mapBounds.ne[1].toFixed(6), "]"] })] })), debugInfo.viewBox && (jsxs("div", { style: { marginBottom: '6px' }, children: [jsx("div", { style: { fontWeight: 'bold' }, children: "\uD83D\uDCD0 SVG ViewBox (meters):" }), jsxs("div", { children: ["SW: [", debugInfo.viewBox.sw.x.toFixed(2), ", ", debugInfo.viewBox.sw.y.toFixed(2), "]"] }), jsxs("div", { children: ["NE: [", debugInfo.viewBox.ne.x.toFixed(2), ", ", debugInfo.viewBox.ne.y.toFixed(2), "]"] }), jsxs("div", { children: ["Size: ", debugInfo.viewBox.width.toFixed(2), "m \u00D7 ", debugInfo.viewBox.height.toFixed(2), "m"] }), jsxs("div", { children: ["Scale: 1:", debugInfo.viewBox.scale] })] })), debugInfo.mowerPosition && (jsxs("div", { style: { marginBottom: '6px' }, children: [jsx("div", { style: { fontWeight: 'bold' }, children: "\uD83D\uDE9C Mower Position:" }), jsxs("div", { children: ["Current: X=", debugInfo.mowerPosition.x.toFixed(2), ", Y=", debugInfo.mowerPosition.y.toFixed(2)] }), jsxs("div", { children: ["Theta: ", (debugInfo.mowerPosition.theta * 180 / Math.PI).toFixed(1), "\u00B0"] }), jsxs("div", { children: ["Last: X=", debugInfo.mowerPosition.lastX.toFixed(2), ", Y=", debugInfo.mowerPosition.lastY.toFixed(2)] }), jsxs("div", { children: ["Last Theta: ", (debugInfo.mowerPosition.lastTheta * 180 / Math.PI).toFixed(1), "\u00B0"] }), jsxs("div", { children: ["Status: ", debugInfo.mowerPosition.vehicleStateText, " (", debugInfo.mowerPosition.vehicleState, ")"] })] })), debugInfo.partitionData && (jsxs("div", { style: { marginBottom: '6px' }, children: [jsx("div", { style: { fontWeight: 'bold' }, children: "\uD83D\uDD32 Mow Partition Data:" }), jsxs("div", { children: ["Type: ", debugInfo.partitionData.type || 'N/A'] }), debugInfo.partitionData.partitionIds && debugInfo.partitionData.partitionIds.length > 0 ? (jsxs("div", { children: ["Active IDs: [", debugInfo.partitionData.partitionIds.join(', '), "]"] })) : (jsx("div", { children: "No active partitions" })), debugInfo.partitionData.time && (jsxs("div", { children: ["Updated: ", new Date(debugInfo.partitionData.time).toLocaleTimeString()] }))] })), !debugInfo.partitionData && (jsxs("div", { style: { marginBottom: '6px' }, children: [jsx("div", { style: { fontWeight: 'bold' }, children: "\uD83D\uDD32 Mow Partition Data:" }), jsx("div", { style: { color: '#888' }, children: "No partition data available" })] }))] }));
+    };
     // 错误显示
     if (currentError) {
-        return (jsx("div", { className: className, style: style, children: jsxs("div", { style: { color: 'red', padding: '10px' }, children: ["\u9519\u8BEF: ", currentError] }) }));
+        return (jsxs("div", { className: className, style: style, children: [jsxs("div", { style: { color: 'red', padding: '10px' }, children: ["\u9519\u8BEF: ", currentError] }), jsx(DebugInfo, {})] }));
     }
-    // 使用goole maps自定义叠加层，不需要实际返回组件内容
-    return null;
+    // 使用goole maps自定义叠加层，返回debug信息（如果启用）
+    return debug ? jsx(DebugInfo, {}) : null;
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';