@fleet-frontend/mower-maps 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/index.js

@@ -138,7 +138,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 = [];
         // 简单变换参数
@@ -151,6 +151,7 @@ class SvgMapView {
         this.isDragging = false;
         this.lastMouseX = 0;
         this.lastMouseY = 0;
+        this.sn = sn;
         this.container = containerElement;
         // 创建SVG元素
         this.svg = this.createSVGElement();
@@ -188,7 +189,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组元素
@@ -643,6 +644,7 @@ class BaseLayer {
         this.needsRedraw = true;
         this.mapView = null;
         this.type = '';
+        this.sn = '';
         this.level = 0; // 中等层级
     }
     // ==================== 基础属性方法 ====================
@@ -782,11 +784,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) => ({
@@ -795,7 +803,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) => ({
@@ -804,7 +818,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,
+        };
+    }),
 }));
 
 /**
@@ -3290,11 +3310,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;
     }
     /**
      * 获取元素
@@ -3327,7 +3348,8 @@ class ChannelLayer extends BaseLayer {
     createExclusionClipPathDefinitions(svgGroup) {
         // 获取所有分区边界数据
         const subBoundaryBorder = usePartitionDataStore.getState().subBoundaryBorder;
-        if (!subBoundaryBorder || Object.keys(subBoundaryBorder).length === 0) {
+        const currentSubBoundaryBorder = subBoundaryBorder[this.sn];
+        if (!currentSubBoundaryBorder || Object.keys(currentSubBoundaryBorder).length === 0) {
             return {};
         }
         const clipPathIdsMap = {};
@@ -3340,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;
@@ -3349,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]);
@@ -3362,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);
@@ -3371,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) {
@@ -3497,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]]);
@@ -3587,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]]));
         }
@@ -3599,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) {
@@ -3620,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)
@@ -3639,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]}`;
@@ -3650,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()) {
                     // 处理转义字符
@@ -3745,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: [],
@@ -3897,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);
@@ -3943,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');
@@ -4225,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);
@@ -5008,7 +5028,10 @@ currentMowingPartition, }) => {
     // 关于location的分区，需要通过地图数据，结合射线法，判断当前的点在哪个分区里
     let mowingStatus = isMowing || false;
     let newCurrentMowingPartitionId = currentMowingPartition;
-    console.info('handleMultipleRealTimeData==newCurrentMowingPartitionId=================', newCurrentMowingPartitionId);
+    // console.info(
+    //   'handleMultipleRealTimeData==newCurrentMowingPartitionId=================',
+    //   newCurrentMowingPartitionId
+    // );
     realTimeData.forEach((item) => {
         // 这里需要区分，是割草进度还是割草轨迹
         if (item.type === REAL_TIME_DATA_TYPE.LOCATION) {
@@ -7922,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;
@@ -8242,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();
         // 边界边框图层
@@ -8672,8 +8696,9 @@ class MapDataProcessor {
     /**
      * 处理地图数据，返回绘制图层
      */
-    static processMapData(mapData, mapConfig) {
+    static processMapData(sn, mapData, mapConfig) {
         this.mapConfig = mapConfig;
+        this.sn = sn;
         // 收集所有地图元素
         const allElements = [];
         // 处理子地图中的元素
@@ -8753,6 +8778,9 @@ class MapDataProcessor {
      */
     static processMapElements(elements) {
         const result = [];
+        let subBoundaryBorderObj = {};
+        let obstaclesObj = {};
+        let svgElementsObj = {};
         for (const element of elements) {
             try {
                 // 检查必要的基础字段
@@ -8771,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,
+                                    // });
                                 }
                             }
                         }
@@ -8790,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) {
@@ -8843,7 +8884,6 @@ class MapDataProcessor {
                         break;
                     }
                     case 'TIME_LIMIT_OBSTACLE': {
-                        console.info('TIME_LIMIT_OBSTACLE', element);
                         try {
                             // 如果有SVG数据，直接创建SVG绘制元素
                             if ('svg' in element &&
@@ -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,
+                                    // });
                                 }
                             }
                         }
@@ -9036,7 +9086,7 @@ class PathDataProcessor {
  * 专门处理边界标签的创建、定位和管理
  */
 class BoundaryLabelsManager {
-    constructor(svgView, boundaryData, { unitType, language }) {
+    constructor(svgView, boundaryData, { unitType, language, onlyRead }) {
         this.container = null;
         this.overlayDiv = null;
         this.globalClickHandler = null;
@@ -9049,6 +9099,7 @@ class BoundaryLabelsManager {
         this.initializeContainer();
         this.unitType = unitType;
         this.language = language;
+        this.onlyRead = onlyRead;
     }
     /**
      * 初始化容器
@@ -9123,7 +9174,12 @@ class BoundaryLabelsManager {
         labelDiv.style.whiteSpace = 'nowrap';
         labelDiv.style.maxWidth = '220px';
         labelDiv.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
-        labelDiv.style.pointerEvents = 'auto';
+        if (this.onlyRead) {
+            labelDiv.style.pointerEvents = 'none';
+        }
+        else {
+            labelDiv.style.pointerEvents = 'auto';
+        }
         labelDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.4)';
         labelDiv.style.cursor = 'pointer';
         labelDiv.style.transition = 'background-color 0.2s ease';
@@ -9209,6 +9265,9 @@ class BoundaryLabelsManager {
      * 展开标签
      */
     expandLabel(boundaryId) {
+        if (this.onlyRead) {
+            return;
+        }
         const labelDiv = this.getLabelElement(boundaryId);
         if (!labelDiv)
             return;
@@ -9217,7 +9276,6 @@ class BoundaryLabelsManager {
             return;
         // 关闭其他展开的标签
         this.collapseOtherLabels(boundaryId);
-        // 展开当前标签
         extendedContent.style.display = 'block';
         this.currentExpandedBoundaryId = boundaryId;
     }
@@ -9417,6 +9475,16 @@ class BoundaryLabelsManager {
         const pixelY = relativeY * divHeight;
         return { x: pixelX, y: pixelY };
     }
+    updateReadOnlyMode(onlyRead) {
+        this.onlyRead = onlyRead;
+        if (!this.container)
+            return;
+        const allLabels = this.container.querySelectorAll('.boundary-label');
+        allLabels.forEach((label) => {
+            const labelElement = label;
+            labelElement.style.pointerEvents = onlyRead ? 'none' : 'auto';
+        });
+    }
     /**
      * 更新边界数据
      */
@@ -9725,7 +9793,7 @@ ChargingPileManager.Z_INDEX = {
  * 专门处理天线元素的创建、定位和管理
  */
 class AntennaManager {
-    constructor(svgView) {
+    constructor(svgView, onlyRead) {
         this.antennaElements = [];
         this.container = null;
         this.overlayDiv = null;
@@ -9738,6 +9806,7 @@ class AntennaManager {
         // 旋转角度
         this.rotation = 0;
         this.svgView = svgView;
+        this.onlyRead = onlyRead;
         this.initializeContainer();
         this.setupGlobalClickHandler();
     }
@@ -9810,7 +9879,12 @@ class AntennaManager {
         antennaContainer.className = 'antenna-container-item';
         antennaContainer.style.position = 'absolute';
         antennaContainer.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
-        antennaContainer.style.pointerEvents = 'auto';
+        if (this.onlyRead) {
+            antennaContainer.style.pointerEvents = 'none';
+        }
+        else {
+            antennaContainer.style.pointerEvents = 'auto';
+        }
         antennaContainer.style.zIndex = AntennaManager.Z_INDEX.DEFAULT.toString();
         antennaContainer.setAttribute('data-antenna-id', antennaData.type.toString());
         // 创建天线图标
@@ -9907,6 +9981,9 @@ class AntennaManager {
         const tooltip = antennaContainer.querySelector('.antenna-tooltip');
         if (!tooltip)
             return;
+        if (this.onlyRead) {
+            return;
+        }
         // 展开当前tooltip
         tooltip.style.display = 'block';
         const extendedContent = tooltip.querySelector('.antenna-tooltip-extended');
@@ -9952,6 +10029,16 @@ class AntennaManager {
             }
         });
     }
+    updateReadOnlyMode(onlyRead) {
+        this.onlyRead = onlyRead;
+        if (!this.container)
+            return;
+        const allAntennas = this.container.querySelectorAll('.antenna-container-item');
+        allAntennas.forEach((antenna) => {
+            const antennaElement = antenna;
+            antennaElement.style.pointerEvents = onlyRead ? 'none' : 'auto';
+        });
+    }
     /**
      * 添加主天线
      */
@@ -10593,24 +10680,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', onlyRead = false, 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 +10740,7 @@ class MowerMapOverlay {
             leading: true,
             trailing: false,
         });
+        this.sn = sn;
         this.bounds = bounds;
         this.mapData = mapData;
         this.partitionBoundary = partitionBoundary;
@@ -10655,6 +10748,7 @@ class MowerMapOverlay {
         this.isEditMode = isEditMode;
         this.unitType = unitType;
         this.language = language;
+        this.onlyRead = onlyRead;
         this.mapConfig = mapConfig;
         this.antennaConfig = antennaConfig;
         this.onMapLoad = onMapLoad;
@@ -10685,6 +10779,7 @@ class MowerMapOverlay {
             this.overlayView.hide = this.hide.bind(this);
             // 添加编辑模式相关方法
             this.overlayView.setEditMode = this.setEditMode.bind(this);
+            this.overlayView.setReadOnlyMode = this.setReadOnlyMode.bind(this);
             this.overlayView.getEditData = this.getEditData.bind(this);
             this.overlayView.handleSave = this.handleSave.bind(this);
             this.overlayView.setCustomIcons = this.setCustomIcons.bind(this);
@@ -10821,6 +10916,7 @@ class MowerMapOverlay {
         this.boundaryLabelsManager = new BoundaryLabelsManager(this.svgMapView, this.boundaryData, {
             unitType: this.unitType,
             language: this.language,
+            onlyRead: this.onlyRead,
         });
         // 设置叠加层div引用
         this.boundaryLabelsManager.setOverlayDiv(this.div);
@@ -10851,7 +10947,7 @@ class MowerMapOverlay {
         if (!this.div || !this.svgMapView)
             return;
         // 创建天线管理器
-        this.antennaManager = new AntennaManager(this.svgMapView);
+        this.antennaManager = new AntennaManager(this.svgMapView, this.onlyRead);
         // 设置叠加层div引用
         this.antennaManager.setOverlayDiv(this.div);
         // 获取容器并添加到主div
@@ -10905,6 +11001,15 @@ class MowerMapOverlay {
             this.chargingPileManager.updatePositions();
         }
     }
+    // 设置编辑模式
+    setReadOnlyMode(enabled) {
+        if (this.boundaryLabelsManager) {
+            this.boundaryLabelsManager.updateReadOnlyMode(enabled);
+        }
+        if (this.antennaManager) {
+            this.antennaManager.updateReadOnlyMode(enabled);
+        }
+    }
     // 创建编辑界面
     createEditInterface() {
         if (!this.div)
@@ -11459,7 +11564,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 +11593,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 +11667,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,9 +11688,10 @@ class MowerMapOverlay {
     updatePathDataByMowingPosition(position) {
         // 找到当前position所在的分区id，将该点更新到pathData中
         // 先查找当前的分区id是多少，然后确定当前的点是否在当前分区id中，如果不在，则重新获取分区id并重新设置
-        const currentPartitionId = useCurrentMowingDataStore.getState().currentMowingPartitionId;
-        console.info('updatePathDataByMowingPosition==currentPartitionId=================', currentPartitionId);
-        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] = {
@@ -11890,7 +11996,9 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
 // 默认配置
 const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
-const MowerMapRenderer = React.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 = React.forwardRef(({ 
+// 唯一的可以标识一个割草机的id
+sn, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, mapConfig, modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance, isEditMode = false, dragCallbacks, defaultTransform, debug = false, }, ref) => {
     const [elementCount, setElementCount] = React.useState(0);
     const [pathCount, setPathCount] = React.useState(0);
     const [currentError, setCurrentError] = React.useState(null);
@@ -11898,10 +12006,9 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
     // const mapRef = useMap();
     const [isGoogleMapsReady, setIsGoogleMapsReady] = React.useState(false);
     const [hasInitializedBounds, setHasInitializedBounds] = React.useState(false);
-    const { clearSubBoundaryBorder, clearObstacles, clearSvgElements } = usePartitionDataStore();
-    const { resetCurrentMowingPartitionId } = useCurrentMowingDataStore();
+    const { deleteSubBoundaryBorder, deleteObstacles, deleteSvgElements } = usePartitionDataStore();
     const currentProcessMowingStatusRef = React.useRef(false);
-    const { updateProcessStateIsMowing, processStateIsMowing, updateCurrentMowingPartitionId, currentMowingPartitionId, } = useCurrentMowingDataStore();
+    const { updateProcessStateIsMowing, processStateIsMowing, updateCurrentMowingPartitionId, currentMowingPartitionId, resetCurrentMowingPartitionId, } = useCurrentMowingDataStore();
     const [mowPartitionData, setMowPartitionData] = React.useState(null);
     // Debug相关状态
     const [debugInfo, setDebugInfo] = React.useState({});
@@ -11967,7 +12074,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         setCurrentError(error);
         onError?.(error);
     };
-    const fitBounds = React.useCallback(() => {
+    const fitBounds = React.useCallback((padding = 0) => {
         if (!mapJson || !mapRef)
             return null;
         // 计算边界
@@ -11986,7 +12093,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
         new window.google.maps.LatLng(neLat, neLng) // 东北角
         );
-        mapRef.fitBounds(googleBounds);
+        mapRef.fitBounds(googleBounds, padding);
     }, [mapJson, mapRef, defaultTransform]);
     // 初始化Google Maps叠加层
     const initializeGoogleMapsOverlay = async () => {
@@ -12027,7 +12134,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
                 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, onlyRead, mergedMapConfig, mergedAntennaConfig, null, defaultTransform, (count) => {
                 setElementCount(count);
                 onMapLoad?.(count);
             }, (count) => {
@@ -12040,7 +12147,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
             overlay.setEdger(edger);
             // 只在首次初始化时自适应视图
             if (!hasInitializedBounds) {
-                mapInstance.fitBounds(googleBounds);
+                // mapInstance.fitBounds(googleBounds);
                 setHasInitializedBounds(true);
             }
             setIsGoogleMapsReady(true);
@@ -12050,7 +12157,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         }
     };
     const resetInCharginPie = React.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;
@@ -12067,24 +12174,34 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         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]);
+    React.useEffect(() => {
+        return () => {
+            deleteSubBoundaryBorder(sn);
+            deleteObstacles(sn);
+            deleteSvgElements(sn);
+            resetCurrentMowingPartitionId(sn);
+            updateProcessStateIsMowing(sn, false);
+            currentProcessMowingStatusRef.current = false;
+        };
+    }, []);
     // 监听编辑模式变化
     React.useEffect(() => {
         if (overlayRef.current) {
             overlayRef.current.setEditMode(isEditMode);
         }
     }, [isEditMode]);
+    // 监听只读模式变化
+    React.useEffect(() => {
+        if (overlayRef.current) {
+            overlayRef.current.setReadOnlyMode(onlyRead);
+        }
+    }, [onlyRead]);
     // 监听路径信息的更新，需要同步更新boundaary的进度信息
     // useEffect(() => {
     //   if (!mapJson) return;
@@ -12094,7 +12211,7 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
     React.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;
@@ -12305,13 +12422,13 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         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);
@@ -12321,13 +12438,13 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         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);
             // 更新进度数据
@@ -12340,16 +12457,6 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
         if (!overlayRef.current || !defaultTransform)
             return;
         overlayRef.current?.setTransform(defaultTransform);
-        const validBounds = getValidGpsBounds(mapJson, defaultTransform?.rotation);
-        // 地图数据中的坐标格式是 [longitude, latitude]
-        const swLat = validBounds.sw[1] + defaultTransform.y;
-        const swLng = validBounds.sw[0] + defaultTransform.x;
-        const neLat = validBounds.ne[1] + defaultTransform.y;
-        const neLng = validBounds.ne[0] + defaultTransform.x;
-        const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
-        new window.google.maps.LatLng(neLat, neLng) // 东北角
-        );
-        mapRef.fitBounds(googleBounds);
     }, [defaultTransform]);
     React.useEffect(() => {
         if (!overlayRef || !overlayRef.current)
@@ -12358,8 +12465,8 @@ const MowerMapRenderer = React.forwardRef(({ edger = false, unitType = UnitsType
     }, [edger]);
     // 提供ref方法
     React.useImperativeHandle(ref, () => ({
-        fitToView: () => {
-            fitBounds();
+        fitToView: (padding = 0) => {
+            fitBounds(padding);
         },
         getOverlay: () => {
             return overlayRef.current;