@fleet-frontend/mower-maps 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/index.esm.js

@@ -136,7 +136,7 @@ const SVG_MAP_VIEW_ID = 'fleet-maps-svg-map-view';
  * 使用真正的矢量SVG渲染替代Canvas位图渲染
  */
 class SvgMapView {
-    constructor(containerElement, width = 800, height = 600) {
+    constructor(sn, containerElement, width = 800, height = 600) {
         // 图层管理
         this.layers = [];
         // 简单变换参数
@@ -149,6 +149,7 @@ class SvgMapView {
         this.isDragging = false;
         this.lastMouseX = 0;
         this.lastMouseY = 0;
+        this.sn = sn;
         this.container = containerElement;
         // 创建SVG元素
         this.svg = this.createSVGElement();
@@ -186,7 +187,7 @@ class SvgMapView {
         this.svg.setAttribute('shape-rendering', 'geometricPrecision');
         this.svg.setAttribute('text-rendering', 'geometricPrecision');
         this.svg.setAttribute('image-rendering', 'optimizeQuality');
-        this.svg.setAttribute('id', SVG_MAP_VIEW_ID);
+        this.svg.setAttribute('id', `${this.sn}-${SVG_MAP_VIEW_ID}`);
     }
     /**
      * 创建SVG组元素
@@ -641,6 +642,7 @@ class BaseLayer {
         this.needsRedraw = true;
         this.mapView = null;
         this.type = '';
+        this.sn = '';
         this.level = 0; // 中等层级
     }
     // ==================== 基础属性方法 ====================
@@ -780,11 +782,17 @@ const usePartitionDataStore = create((set, get) => ({
     addSubBoundaryBorder: (key, element) => set((state) => ({
         subBoundaryBorder: {
             ...state.subBoundaryBorder,
-            [key]: element,
+            [key]: { ...element },
         },
     })),
     // 清空所有数据
-    clearSubBoundaryBorder: () => set({ subBoundaryBorder: {} }),
+    deleteSubBoundaryBorder: (key) => set((state) => {
+        const newSubBoundaryBorder = { ...state.subBoundaryBorder };
+        delete newSubBoundaryBorder[key];
+        return {
+            subBoundaryBorder: newSubBoundaryBorder,
+        };
+    }),
     // 障碍物
     obstacles: {},
     addObstacles: (key, element) => set((state) => ({
@@ -793,7 +801,13 @@ const usePartitionDataStore = create((set, get) => ({
             [key]: element,
         },
     })),
-    clearObstacles: () => set({ obstacles: {} }),
+    deleteObstacles: (key) => set((state) => {
+        const newObstacles = { ...state.obstacles };
+        delete newObstacles[key];
+        return {
+            obstacles: newObstacles,
+        };
+    }),
     // svg数据
     svgElements: {},
     addSvgElements: (key, element) => set((state) => ({
@@ -802,7 +816,13 @@ const usePartitionDataStore = create((set, get) => ({
             [key]: element,
         },
     })),
-    clearSvgElements: () => set({ svgElements: {} }),
+    deleteSvgElements: (key) => set((state) => {
+        const newSvgElements = { ...state.svgElements };
+        delete newSvgElements[key];
+        return {
+            svgElements: newSvgElements,
+        };
+    }),
 }));
 
 /**
@@ -3288,11 +3308,12 @@ var index = {
  * 专门处理路径元素的渲染
  */
 class ChannelLayer extends BaseLayer {
-    constructor() {
+    constructor(sn) {
         super();
         this.level = 1;
         this.scale = 1;
         this.type = LAYER_DEFAULT_TYPE.CHANNEL;
+        this.sn = sn;
     }
     /**
      * 获取元素
@@ -3325,7 +3346,10 @@ class ChannelLayer extends BaseLayer {
     createExclusionClipPathDefinitions(svgGroup) {
         // 获取所有分区边界数据
         const subBoundaryBorder = usePartitionDataStore.getState().subBoundaryBorder;
-        if (!subBoundaryBorder || Object.keys(subBoundaryBorder).length === 0) {
+        const currentSubBoundaryBorder = subBoundaryBorder[this.sn];
+        console.info('subBoundaryBorder===', subBoundaryBorder);
+        console.info('currentSubBoundaryBorder===', currentSubBoundaryBorder);
+        if (!currentSubBoundaryBorder || Object.keys(currentSubBoundaryBorder).length === 0) {
             return {};
         }
         const clipPathIdsMap = {};
@@ -3338,7 +3362,7 @@ class ChannelLayer extends BaseLayer {
         // 计算包含所有分区和通道的边界框
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
         // 1. 先计算所有分区的边界,如果能拿到边界的svg的大小，就使用这个如果拿不到，就根据分区去计算
-        const svg = document.getElementById(SVG_MAP_VIEW_ID);
+        const svg = document.getElementById(`${this.sn}-${SVG_MAP_VIEW_ID}`);
         if (svg && svg instanceof SVGSVGElement && svg.viewBox) {
             const viewBox = svg.viewBox.baseVal;
             minX = viewBox.x;
@@ -3347,8 +3371,8 @@ class ChannelLayer extends BaseLayer {
             maxY = viewBox.y + viewBox.height;
         }
         else {
-            for (const partitionId in subBoundaryBorder) {
-                const boundaryData = subBoundaryBorder[partitionId];
+            for (const partitionId in currentSubBoundaryBorder) {
+                const boundaryData = currentSubBoundaryBorder[partitionId];
                 if (boundaryData && boundaryData.coordinates && boundaryData.coordinates.length > 0) {
                     for (const coord of boundaryData.coordinates) {
                         minX = Math.min(minX, coord[0]);
@@ -3360,7 +3384,7 @@ class ChannelLayer extends BaseLayer {
             }
         }
         // 整理出clipPath路径
-        const clipPathId = 'channel-exclude-all';
+        const clipPathId = `${this.sn}-channel-exclude-all`;
         // 创建 clipPath
         const clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
         clipPath.setAttribute('id', clipPathId);
@@ -3369,7 +3393,7 @@ class ChannelLayer extends BaseLayer {
         // 外轮廓（顺时针）
         let d = `M ${minX} ${minY} L ${maxX} ${minY} L ${maxX} ${maxY} L ${minX} ${maxY} Z`;
         // 获取所有需要挖空的分区路径
-        const partitionPaths = this.mergeOverlappingPartitions(subBoundaryBorder);
+        const partitionPaths = this.mergeOverlappingPartitions(currentSubBoundaryBorder || {});
         // 将所有分区路径追加到clipPath中（逆时针，形成挖空）
         partitionPaths.forEach((partitionCoords) => {
             if (partitionCoords.length >= 3) {
@@ -3495,12 +3519,12 @@ class ChannelLayer extends BaseLayer {
     /**
      * 智能合并重叠的分区，返回所有需要挖空的路径
      */
-    mergeOverlappingPartitions(subBoundaryBorder) {
+    mergeOverlappingPartitions(currentSubBoundaryBorder) {
         try {
             // 将所有分区转换为polygon-clipping格式
             const polygons = [];
             const partitionIds = [];
-            Object.entries(subBoundaryBorder).forEach(([partitionId, boundaryData]) => {
+            Object.entries(currentSubBoundaryBorder || {}).forEach(([partitionId, boundaryData]) => {
                 if (boundaryData?.coordinates && boundaryData.coordinates.length >= 3) {
                     // 确保坐标格式正确（去掉第三个z坐标）
                     const coords = boundaryData.coordinates.map((coord) => [coord[0], coord[1]]);
@@ -3585,7 +3609,7 @@ class ChannelLayer extends BaseLayer {
         catch (error) {
             console.error('polygon-clipping union failed:', error);
             // 如果合并失败，返回原始分区
-            return Object.values(subBoundaryBorder)
+            return Object.values(currentSubBoundaryBorder)
                 .filter((boundaryData) => boundaryData?.coordinates && boundaryData.coordinates.length >= 3)
                 .map((boundaryData) => boundaryData.coordinates.map((coord) => [coord[0], coord[1]]));
         }
@@ -3597,19 +3621,21 @@ class ChannelLayer extends BaseLayer {
  * 专门处理路径元素的渲染
  */
 class PathLayer extends BaseLayer {
-    constructor() {
+    constructor(sn) {
         super();
         this.level = 3;
         this.scale = 1;
         this.lineScale = 1;
         this.boundaryPaths = {};
         this.type = LAYER_DEFAULT_TYPE.PATH;
+        this.sn = sn;
     }
     /**
      * 为每个分区创建独立的 clipPath
      */
     createPartitionClipPaths(svgGroup) {
         const { subBoundaryBorder, obstacles, svgElements } = usePartitionDataStore.getState();
+        const currentSubBoundaryBorder = subBoundaryBorder[this.sn];
         // 确保 defs 元素存在
         let defs = svgGroup.querySelector('defs');
         if (!defs) {
@@ -3618,9 +3644,9 @@ class PathLayer extends BaseLayer {
         }
         const clipPathIds = {};
         // 为每个分区创建独立的 clipPath
-        Object.keys(subBoundaryBorder).forEach((partitionId) => {
-            const partitionData = subBoundaryBorder[partitionId];
-            const clipPathId = `clip-partition-${partitionId}`;
+        Object.keys(currentSubBoundaryBorder || {}).forEach((partitionId) => {
+            const partitionData = currentSubBoundaryBorder[partitionId];
+            const clipPathId = `clip-partition-${this.sn}-${partitionId}`;
             // 如果已存在，先移除
             const existing = defs.querySelector(`#${clipPathId}`);
             if (existing)
@@ -3637,7 +3663,8 @@ class PathLayer extends BaseLayer {
                 d += ' Z ';
             }
             // 2. 所有禁区（逆时针）- 禁区影响所有分区
-            Object.values(obstacles).forEach((item) => {
+            const currentObstacles = obstacles[this.sn];
+            Object.values(currentObstacles || {}).forEach((item) => {
                 const obstacleCoords = item.coordinates;
                 if (obstacleCoords.length >= 3) {
                     d += `M ${obstacleCoords[obstacleCoords.length - 1][0]} ${obstacleCoords[obstacleCoords.length - 1][1]}`;
@@ -3648,7 +3675,8 @@ class PathLayer extends BaseLayer {
                 }
             });
             // 3. 所有 svgElements（逆时针）- SVG元素影响所有分区
-            Object.values(svgElements).forEach((svgPath) => {
+            const currentSvgElements = svgElements[this.sn];
+            Object.values(currentSvgElements || {}).forEach((svgPath) => {
                 const svgPathString = svgPath?.metadata?.svg;
                 if (svgPathString && typeof svgPathString === 'string' && svgPathString.trim()) {
                     // 处理转义字符
@@ -3743,7 +3771,7 @@ class PathLayer extends BaseLayer {
                     lineColor = style.lineColor || '#000000';
                 }
                 // 按分区+类型+样式分组存储
-                const groupKey = `${id}-${lineColor}-${style.lineWidth || 1}`;
+                const groupKey = `${id}-${lineColor}-${style.lineWidth || 1}-${this.sn}`;
                 if (!partitionTypeGroups.has(groupKey)) {
                     partitionTypeGroups.set(groupKey, {
                         pathData: [],
@@ -3895,9 +3923,7 @@ class BoundaryLayer extends BaseLayer {
     createBoundaryFill(svgGroup, coordinates, style) {
         const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
         // 构建点集合，使用整数坐标（只取x,y坐标）
-        const points = coordinates
-            .map((coord) => `${coord[0]},${coord[1]}`)
-            .join(' ');
+        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
         const fillColor = style.fillColor;
         polygon.setAttribute('points', points);
         polygon.setAttribute('fill', fillColor);
@@ -3941,9 +3967,7 @@ class ObstacleLayer extends BaseLayer {
             return;
         const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
         // 构建点集合，使用整数坐标
-        const points = coordinates
-            .map((coord) => `${coord[0]},${coord[1]}`)
-            .join(' ');
+        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
         polygon.setAttribute('points', points);
         polygon.setAttribute('fill', style.fillColor || 'rgba(220, 53, 69, 0.2)');
         polygon.setAttribute('stroke', style.lineColor || '#dc3545');
@@ -4223,9 +4247,7 @@ class VisionOffLayer extends BaseLayer {
             return;
         const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
         // 构建点集合，使用整数坐标
-        const points = coordinates
-            .map((coord) => `${coord[0]},${coord[1]}`)
-            .join(' ');
+        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
         const fillColor = style.fillColor || 'rgba(0, 255, 0, 0.4)';
         polygon.setAttribute('points', points);
         polygon.setAttribute('fill', fillColor);
@@ -7923,7 +7945,7 @@ class BoundaryBorderLayer extends BaseLayer {
      */
     setMowingBoundarys(mowingBoundarys) {
         if (!mowingBoundarys) {
-            this.mowingBoundarys = this.elements?.map(item => item?.originalData?.id);
+            this.mowingBoundarys = this.elements?.map((item) => item?.originalData?.id);
         }
         else {
             this.mowingBoundarys = mowingBoundarys;
@@ -8243,14 +8265,15 @@ class AntennaLayer extends BaseLayer {
  * 使用具体的图层类来处理不同类型的渲染
  */
 class DrawLayer extends BaseLayer {
-    constructor() {
+    constructor(sn) {
         super();
+        this.sn = sn;
         // 初始化各种具体图层
         this.antennaLayer = new AntennaLayer();
         // 通道图层
-        this.channelLayer = new ChannelLayer();
+        this.channelLayer = new ChannelLayer(sn);
         // 路径图层
-        this.pathLayer = new PathLayer();
+        this.pathLayer = new PathLayer(sn);
         // 边界图层
         this.boundaryLayer = new BoundaryLayer();
         // 边界边框图层
@@ -8673,8 +8696,9 @@ class MapDataProcessor {
     /**
      * 处理地图数据，返回绘制图层
      */
-    static processMapData(mapData, mapConfig) {
+    static processMapData(sn, mapData, mapConfig) {
         this.mapConfig = mapConfig;
+        this.sn = sn;
         // 收集所有地图元素
         const allElements = [];
         // 处理子地图中的元素
@@ -8754,6 +8778,9 @@ class MapDataProcessor {
      */
     static processMapElements(elements) {
         const result = [];
+        let subBoundaryBorderObj = {};
+        let obstaclesObj = {};
+        let svgElementsObj = {};
         for (const element of elements) {
             try {
                 // 检查必要的基础字段
@@ -8772,10 +8799,18 @@ class MapDataProcessor {
                                 result.push(boundaryBorderElement);
                                 // 将边界边框存储到 store 中，以分区ID为key
                                 if (element.id) {
+                                    subBoundaryBorderObj = {
+                                        ...subBoundaryBorderObj,
+                                        [`${element.id.toString()}`]: {
+                                            ...boundaryBorderElement,
+                                        },
+                                    };
                                     const { addSubBoundaryBorder } = usePartitionDataStore.getState();
-                                    addSubBoundaryBorder(element.id.toString(), {
-                                        ...boundaryBorderElement,
-                                    });
+                                    addSubBoundaryBorder(`${this.sn}`, subBoundaryBorderObj);
+                                    // const { addSubBoundaryBorder } = usePartitionDataStore.getState();
+                                    // addSubBoundaryBorder(`${element.id.toString()}`, {
+                                    //   ...boundaryBorderElement,
+                                    // });
                                 }
                             }
                         }
@@ -8791,10 +8826,15 @@ class MapDataProcessor {
                             const obstacleElement = ObstacleDataBuilder.fromMapElement(mapElement, this.mapConfig.obstacle);
                             if (obstacleElement) {
                                 result.push(obstacleElement);
-                                const { addObstacles } = usePartitionDataStore.getState();
-                                addObstacles(`obstacle-${obstacleElement.originalData.id}`, {
+                                obstaclesObj[`obstacle-${obstacleElement.originalData.id}`] = {
                                     ...obstacleElement,
-                                });
+                                };
+                                const { addObstacles } = usePartitionDataStore.getState();
+                                addObstacles(`${this.sn}`, obstaclesObj);
+                                // const { addObstacles } = usePartitionDataStore.getState();
+                                // addObstacles(`obstacle-${obstacleElement.originalData.id}`, {
+                                //   ...obstacleElement,
+                                // });
                             }
                         }
                         catch (error) {
@@ -8858,10 +8898,15 @@ class MapDataProcessor {
                                 const svgElement = SvgElementDataBuilder.fromMapElement(mapElement, this.mapConfig.doodle);
                                 if (svgElement) {
                                     result.push(svgElement);
-                                    const { addSvgElements } = usePartitionDataStore.getState();
-                                    addSvgElements(`time-limit-obstacle-${svgElement.originalData.id}`, {
+                                    svgElementsObj[`time-limit-obstacle-${svgElement.originalData.id}`] = {
                                         ...svgElement,
-                                    });
+                                    };
+                                    const { addSvgElements } = usePartitionDataStore.getState();
+                                    addSvgElements(`${this.sn}`, svgElementsObj);
+                                    // const { addSvgElements } = usePartitionDataStore.getState();
+                                    // addSvgElements(`time-limit-obstacle-${svgElement.originalData.id}`, {
+                                    //   ...svgElement,
+                                    // });
                                 }
                             }
                             // 如果有points数据，按传统方式绘制
@@ -8873,10 +8918,15 @@ class MapDataProcessor {
                                 const polygonElement = ObstacleDataBuilder.createTimeLimitObstacle(mapElement, this.mapConfig.obstacle);
                                 if (polygonElement) {
                                     result.push(polygonElement);
-                                    const { addObstacles } = usePartitionDataStore.getState();
-                                    addObstacles(`time-limit-obstacle-${polygonElement.originalData.id}`, {
+                                    svgElementsObj[`time-limit-obstacle-${polygonElement.originalData.id}`] = {
                                         ...polygonElement,
-                                    });
+                                    };
+                                    const { addSvgElements } = usePartitionDataStore.getState();
+                                    addSvgElements(`${this.sn}`, svgElementsObj);
+                                    // const { addObstacles } = usePartitionDataStore.getState();
+                                    // addObstacles(`time-limit-obstacle-${polygonElement.originalData.id}`, {
+                                    //   ...polygonElement,
+                                    // });
                                 }
                             }
                         }
@@ -10593,24 +10643,29 @@ function isMobileDevice() {
 // 记录割草状态，状态变更的时候，变量不触发重新渲染
 const useCurrentMowingDataStore = create((set) => ({
     // 当前进度数据返回的割草状态是否为在割草
-    processStateIsMowing: false,
-    updateProcessStateIsMowing: (isMowing) => set({ processStateIsMowing: isMowing }),
-    resetProcessStateIsMowing: () => set({ processStateIsMowing: false }),
+    processStateIsMowing: {},
+    updateProcessStateIsMowing: (sn, isMowing) => set((state) => ({ processStateIsMowing: { ...state.processStateIsMowing, [sn]: isMowing } })),
+    resetProcessStateIsMowing: (key) => set((state) => ({ processStateIsMowing: { ...state.processStateIsMowing, [key]: false } })),
     // 当前割草的分区id
-    currentMowingPartitionId: '',
-    updateCurrentMowingPartitionId: (partitionId) => set({ currentMowingPartitionId: partitionId }),
-    resetCurrentMowingPartitionId: () => set({ currentMowingPartitionId: '' }),
+    currentMowingPartitionId: {},
+    updateCurrentMowingPartitionId: (sn, partitionId) => set((state) => ({
+        currentMowingPartitionId: { ...state.currentMowingPartitionId, [sn]: partitionId },
+    })),
+    resetCurrentMowingPartitionId: (key) => set((state) => ({
+        currentMowingPartitionId: { ...state.currentMowingPartitionId, [key]: '' },
+    })),
 }));
 
 // Google Maps 叠加层类 - 带编辑功能
 class MowerMapOverlay {
-    constructor(bounds, mapData, partitionBoundary, mowerPositionConfig, modelType, pathData, isEditMode = false, unitType = UnitsType.Imperial, language = 'en', mapConfig = {}, antennaConfig = {}, mowPartitionData = null, defaultTransform, onMapLoad, onPathLoad, dragCallbacks) {
+    constructor(sn, bounds, mapData, partitionBoundary, mowerPositionConfig, modelType, pathData, isEditMode = false, unitType = UnitsType.Imperial, language = 'en', mapConfig = {}, antennaConfig = {}, mowPartitionData = null, defaultTransform, onMapLoad, onPathLoad, dragCallbacks) {
         this.div = null;
         this.svgMapView = null;
         this.offscreenContainer = null;
         this.overlayView = null;
         this.defaultTransform = { x: 0, y: 0, rotation: 0 };
         this.hasEdger = false;
+        this.sn = '';
         // boundary数据
         this.boundaryData = [];
         // 边界标签管理器
@@ -10648,6 +10703,7 @@ class MowerMapOverlay {
             leading: true,
             trailing: false,
         });
+        this.sn = sn;
         this.bounds = bounds;
         this.mapData = mapData;
         this.partitionBoundary = partitionBoundary;
@@ -11459,7 +11515,7 @@ class MowerMapOverlay {
             return;
         try {
             // 创建SvgMapView实例
-            this.svgMapView = new SvgMapView(this.offscreenContainer, 800, 600);
+            this.svgMapView = new SvgMapView(this.sn, this.offscreenContainer, 800, 600);
             // 加载地图数据
             this.loadMapData();
             // 加载路径数据
@@ -11488,12 +11544,12 @@ class MowerMapOverlay {
             return;
         try {
             // 使用现有的MapDataProcessor处理地图数据
-            const elements = MapDataProcessor.processMapData(this.mapData, this.mapConfig);
+            const elements = MapDataProcessor.processMapData(this.sn, this.mapData, this.mapConfig);
             // 分离充电桩和天线元素，其他元素添加到SVG图层
             const svgElements = elements.filter((element) => element.type !== 'charging_pile' && element.type !== 'antenna');
             const chargingPileElements = elements.filter((element) => element.type === 'charging_pile');
             // 处理SVG图层元素
-            const drawLayer = new DrawLayer();
+            const drawLayer = new DrawLayer(this.sn);
             drawLayer.addElements(svgElements);
             // 处理天线数据
             let antennaElements = [];
@@ -11562,9 +11618,9 @@ class MowerMapOverlay {
                     return pathElement;
                 }
             });
-            const pathLayer = new PathLayer();
+            const pathLayer = new PathLayer(this.sn);
             pathLayer.addElements(newPathElements);
-            // 添加图层到SvgMapView
+            // // 添加图层到SvgMapView
             this.svgMapView.removeLayerByType(LAYER_DEFAULT_TYPE.PATH);
             this.svgMapView.addLayer(pathLayer);
             this.svgMapView.renderLayer(LAYER_DEFAULT_TYPE.PATH);
@@ -11583,8 +11639,10 @@ class MowerMapOverlay {
     updatePathDataByMowingPosition(position) {
         // 找到当前position所在的分区id，将该点更新到pathData中
         // 先查找当前的分区id是多少，然后确定当前的点是否在当前分区id中，如果不在，则重新获取分区id并重新设置
-        const currentPartitionId = useCurrentMowingDataStore.getState().currentMowingPartitionId;
-        const processStateIsMowing = useCurrentMowingDataStore.getState().processStateIsMowing;
+        const partitionIdMap = useCurrentMowingDataStore.getState().currentMowingPartitionId;
+        const processStateIsMowingMap = useCurrentMowingDataStore.getState().processStateIsMowing;
+        const currentPartitionId = partitionIdMap[this.sn];
+        const processStateIsMowing = processStateIsMowingMap[this.sn];
         if (currentPartitionId && this.pathData?.[currentPartitionId]) {
             const currentPathData = this.pathData[currentPartitionId];
             this.pathData[currentPartitionId] = {
@@ -11889,7 +11947,9 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
 // 默认配置
 const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
-const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imperial, language = 'en', mapConfig, modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance, isEditMode = false, dragCallbacks, defaultTransform, debug = false, }, ref) => {
+const MowerMapRenderer = forwardRef(({ 
+// 唯一的可以标识一个割草机的id
+sn, edger = false, unitType = UnitsType.Imperial, language = 'en', 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);
@@ -11897,10 +11957,9 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
     // const mapRef = useMap();
     const [isGoogleMapsReady, setIsGoogleMapsReady] = useState(false);
     const [hasInitializedBounds, setHasInitializedBounds] = useState(false);
-    const { clearSubBoundaryBorder, clearObstacles, clearSvgElements } = usePartitionDataStore();
-    const { resetCurrentMowingPartitionId } = useCurrentMowingDataStore();
+    const { deleteSubBoundaryBorder, deleteObstacles, deleteSvgElements } = usePartitionDataStore();
     const currentProcessMowingStatusRef = useRef(false);
-    const { updateProcessStateIsMowing, processStateIsMowing, updateCurrentMowingPartitionId, currentMowingPartitionId, } = useCurrentMowingDataStore();
+    const { updateProcessStateIsMowing, processStateIsMowing, updateCurrentMowingPartitionId, currentMowingPartitionId, resetCurrentMowingPartitionId, } = useCurrentMowingDataStore();
     const [mowPartitionData, setMowPartitionData] = useState(null);
     // Debug相关状态
     const [debugInfo, setDebugInfo] = useState({});
@@ -12026,7 +12085,7 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
                 overlayRef.current = null;
             }
             // 创建叠加层
-            const overlay = new MowerMapOverlay(googleBounds, mapJson, partitionBoundary, mowerPositionData, modelType, pathJson || {}, isEditMode, unitType, language, mergedMapConfig, mergedAntennaConfig, null, defaultTransform, (count) => {
+            const overlay = new MowerMapOverlay(sn, googleBounds, mapJson, partitionBoundary, mowerPositionData, modelType, pathJson || {}, isEditMode, unitType, language, mergedMapConfig, mergedAntennaConfig, null, defaultTransform, (count) => {
                 setElementCount(count);
                 onMapLoad?.(count);
             }, (count) => {
@@ -12049,7 +12108,7 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
         }
     };
     const resetInCharginPie = useCallback(() => {
-        const elements = MapDataProcessor.processMapData(mapJson, mergedMapConfig);
+        const elements = MapDataProcessor.processMapData(sn, mapJson, mergedMapConfig);
         const chargingPiles = elements.find((element) => element.type === 'charging_pile');
         if (!overlayRef.current)
             return;
@@ -12066,18 +12125,22 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
         initializeGoogleMapsOverlay();
         // 清理函数
         return () => {
-            clearSubBoundaryBorder();
-            clearObstacles();
-            clearSvgElements();
-            resetCurrentMowingPartitionId();
-            updateProcessStateIsMowing(false);
-            currentProcessMowingStatusRef.current = false;
             if (overlayRef.current) {
                 overlayRef.current.setMap(null);
                 overlayRef.current = null;
             }
         };
-    }, [mapJson, pathJson, mergedMapConfig, mergedAntennaConfig]);
+    }, [sn, mapJson, pathJson, mergedMapConfig, mergedAntennaConfig]);
+    useEffect(() => {
+        return () => {
+            deleteSubBoundaryBorder(sn);
+            deleteObstacles(sn);
+            deleteSvgElements(sn);
+            resetCurrentMowingPartitionId(sn);
+            updateProcessStateIsMowing(sn, false);
+            currentProcessMowingStatusRef.current = false;
+        };
+    }, []);
     // 监听编辑模式变化
     useEffect(() => {
         if (overlayRef.current) {
@@ -12093,7 +12156,7 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
     useEffect(() => {
         if (!mapJson)
             return;
-        const elements = MapDataProcessor.processMapData(mapJson, mergedMapConfig);
+        const elements = MapDataProcessor.processMapData(sn, mapJson, mergedMapConfig);
         const chargingPiles = elements.find((element) => element.type === 'charging_pile');
         if (!mowerPositionData || !overlayRef.current)
             return;
@@ -12304,13 +12367,13 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
         if (realTimeData.length > 1) {
             const { pathData, isMowing, currentMowingPartition } = handleMultipleRealTimeData({
                 realTimeData,
-                isMowing: processStateIsMowing,
+                isMowing: processStateIsMowing[sn],
                 pathData: pathJson,
-                currentMowingPartition: currentMowingPartitionId,
+                currentMowingPartition: currentMowingPartitionId[sn],
             });
-            updateProcessStateIsMowing(isMowing);
-            if (currentMowingPartition !== currentMowingPartitionId) {
-                updateCurrentMowingPartitionId(currentMowingPartition);
+            updateProcessStateIsMowing(sn, isMowing);
+            if (currentMowingPartition !== currentMowingPartitionId[sn]) {
+                updateCurrentMowingPartitionId(sn, currentMowingPartition);
             }
             if (pathData) {
                 overlayRef.current.updatePathData(pathData, curMowPartitionData);
@@ -12320,13 +12383,13 @@ const MowerMapRenderer = forwardRef(({ edger = false, unitType = UnitsType.Imper
         else {
             const { isMowing, pathData, currentMowingPartition } = getProcessMowingDataFromRealTimeData({
                 realTimeData,
-                isMowing: processStateIsMowing,
+                isMowing: processStateIsMowing[sn],
                 pathData: pathJson,
-                currentMowingPartition: currentMowingPartitionId,
+                currentMowingPartition: currentMowingPartitionId[sn],
             });
-            updateProcessStateIsMowing(isMowing);
-            if (currentMowingPartition !== currentMowingPartitionId) {
-                updateCurrentMowingPartitionId(currentMowingPartition);
+            updateProcessStateIsMowing(sn, isMowing);
+            if (currentMowingPartition !== currentMowingPartitionId[sn]) {
+                updateCurrentMowingPartitionId(sn, currentMowingPartition);
             }
             overlayRef.current.updatePathData(pathData, curMowPartitionData);
             // 更新进度数据