@fleet-frontend/mower-maps 0.2.5-beta.6 → 0.2.5-beta.8

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 
 function globals (defs) {
   defs('EPSG:4326', '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees');
@@ -10625,12 +10625,12 @@ const SCALE_FACTOR = 50; // 50像素/米
  * 默认线宽设置
  */
 const DEFAULT_LINE_WIDTHS = {
-    BOUNDARY: 3,
-    OBSTACLE: 3,
+    BOUNDARY: 2,
+    OBSTACLE: 2,
     CHARGING_PILE: 3,
     CHANNEL: 3,
     PATH: 20,
-    VISION_OFF_AREA: 3,
+    VISION_OFF_AREA: 2,
     TIME_LIMIT_OBSTACLE: 1,
 };
 /**
@@ -13709,7 +13709,6 @@ class BaseData {
         else {
             this.computedArea = 0;
         }
-        this.canEdit = false;
     }
 }
 /**
@@ -13732,7 +13731,6 @@ class BoundaryData extends BaseData {
         this.recBaseAngle = originalData?.rec_base_angle;
         this.channels = channels;
         this.style = style;
-        this.canEdit = true;
     }
 }
 /**
@@ -13760,7 +13758,6 @@ class ObstacleData extends BaseData {
         this.end_timestamp = originalData?.end_timestamp;
         this.name = originalData?.name || 'Noname';
         this.style = style;
-        this.canEdit = true;
     }
 }
 /**
@@ -13788,7 +13785,6 @@ class DoodleData extends BaseData {
         this.style = style;
         this.create_ts = originalData?.create_ts || Date.now();
         this.expiration_ts = originalData?.expiration_ts || Date.now() + 3600000;
-        this.canEdit = true;
         this.computedArea = this.getDoodleComputedArea();
     }
     getDoodleComputedArea() {
@@ -13805,7 +13801,6 @@ class VisionOffData extends BaseData {
         const convertedPoints = convertPointsFormat(originalData?.points) || [];
         super(originalData?.id, DataType.VISION_OFF, level, RenderType.POLYGON, convertedPoints, originalData);
         this.style = style;
-        this.canEdit = true;
     }
 }
 /**
@@ -19826,7 +19821,9 @@ function OverlayViewFunctional({ map, position, bounds, rotate, mapPaneName, zIn
     }, [map, overlay]);
     // to move the container to the foreground and background
     useEffect(() => {
-        container.style.zIndex = `${zIndex}`;
+        if (zIndex) {
+            container.style.zIndex = `${zIndex}`;
+        }
     }, [zIndex, container]);
     return ReactDOM.createPortal(children, container);
 }
@@ -22653,15 +22650,25 @@ var index = {
 const CommonContext = createContext({
     sn: '',
     editMap: false,
-    mowerIconConfig: {},
+    mowerIconConfig: {
+        mapImgUrl: '',
+        mapDisabledUrl: '',
+        mapNoPositionUrl: '',
+    },
     platform: PlatformType.WEB,
     svgViewBox: null,
     unitType: UnitsType.Metric,
+    mapConfig: {},
+    mapJson: null,
+    drag: { x: 0, y: 0, rotate: 0, rotation: 0 },
     mapRef: null,
+    bounds: null,
     globalHeight: 0,
     heightOptions: [],
     overlayScale: 1,
     showStraddleBoundaryBorder: true,
+    googleMapStaticApiKey: '',
+    onH5FirstSelectObstaclePoint: undefined,
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => useContext(CommonContext);
@@ -22908,9 +22915,9 @@ const VertexElement = React__default.memo(({ r, stroke, fill, ...props }) => {
 });
 
 var _path$1;
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -23093,10 +23100,6 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
                 } }))] }));
 };
 
-var css_248z$6 = ".index-module_pointerCursor__Ee6pr {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
-var styles$6 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
-styleInject(css_248z$6);
-
 var CreateStatus;
 (function (CreateStatus) {
     CreateStatus["CREATING"] = "creating";
@@ -23146,6 +23149,421 @@ const MapEditContext = createContext({
 const MapEditContextProvider = MapEditContext.Provider;
 const useMapEditContext = () => useContext(MapEditContext);
 
+var chargingPileImage = "data:image/png;base64,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";
+
+const useChargingPile = ({ viewBox, rotation = 0 }) => {
+    const { svgElementDatas } = useSvgEditContext();
+    const { sn } = useCommonContext();
+    const items = useMemo(() => {
+        if (!svgElementDatas || !viewBox)
+            return [];
+        const chargingPiles = svgElementDatas?.[DataType.CHARGING_PILE];
+        if (!chargingPiles)
+            return [];
+        const results = [];
+        for (const element of chargingPiles) {
+            const center = element.points?.[0];
+            if (!center)
+                continue;
+            const size = element.style?.radius ? element.style.radius * 2 : 55;
+            const direction = element?.direction || 0;
+            const angle = (direction * 180) / Math.PI;
+            const rotationDegree = 270 - angle; // 正东是正方向，需要处理下
+            const actualRotation = rotationDegree - rotation;
+            const relX = (center[0] - viewBox.x) / viewBox.width;
+            const relY = (center[1] - viewBox.y) / viewBox.height;
+            if (isFinite(relX) && isFinite(relY)) {
+                results.push({
+                    leftPct: relX * 100,
+                    topPct: relY * 100,
+                    size,
+                    rotateDeg: actualRotation,
+                    imageSrc: chargingPileImage,
+                });
+            }
+        }
+        return results;
+    }, [svgElementDatas, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, rotation, sn]);
+    return items;
+};
+
+const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1, isHighlight = true }) => {
+    const items = useChargingPile({ viewBox: viewBox || null, rotation });
+    const containerStyle = useMemo(() => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 750,
+        opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
+    }), [isHighlight]);
+    return (jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsx("div", { className: "charging-pile", style: {
+                position: 'absolute',
+                width: item.size * sizeScale,
+                height: item.size * sizeScale,
+                left: `${item.leftPct}%`,
+                top: `${item.topPct}%`,
+                transform: `translate(-50%, -50%) rotate(${item.rotateDeg}deg)`,
+                pointerEvents: 'auto',
+                zIndex: 750,
+            }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }, `pile-${idx}`))) }));
+});
+
+const MAX_STATIC_SIZE = 640;
+const MAX_STATIC_MAP_RETRY = 3;
+const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 122, 51, 0.1)', strokeColor = 'rgba(255, 122, 51, 1)', strokeWidth = 2, zoom = 3, size = 200, }) => {
+    const { svgViewBox, mapRef, googleMapStaticApiKey, drag } = useCommonContext();
+    const { svgElementDatas, svgRef } = useSvgEditContext();
+    const { editMapInfo } = useMapEditContext();
+    const [magnifierPosition, setMagnifierPosition] = useState({ x: 0, y: 0 });
+    const [magnifierBoxSize, setMagnifierBoxSize] = useState({ width: size, height: size });
+    // 本次拖拽中放大镜位置是否已完成初始化（未完成前隐藏，避免首帧闪动）
+    const [isPlacementReady, setIsPlacementReady] = useState(false);
+    // 放大镜所在侧边：true=右侧，false=左侧
+    const [placeOnRight, setPlaceOnRight] = useState(true);
+    // 仅在每次拖拽开始时初始化一次侧边
+    const hasInitializedSideRef = useRef(false);
+    const [mapImageFrame, setMapImageFrame] = useState(null);
+    const [staticMapRetryCount, setStaticMapRetryCount] = useState(0);
+    // 获取当前正在拖拽的禁区 ID
+    const currentObstacleId = editMapInfo?.selectElement?.id;
+    // 计算当前 SVG 单位到屏幕像素的比例（用于实现真正 1:1 预览）
+    const getPixelScale = () => {
+        //先拿 svgRef.getScreenCTM()，这是 SVG 到屏幕的变换矩阵（包含缩放/旋转/平移）
+        const ctm = svgRef?.getScreenCTM?.();
+        if (!ctm)
+            return 1;
+        // 使用向量长度计算缩放，兼容旋转矩阵
+        // 用 Math.hypot(ctm.a, ctm.b) 算出 x 方向的实际缩放倍率（用向量长度是为了兼容旋转，不只看 a）
+        const scaleX = Math.hypot(ctm.a, ctm.b);
+        return Number.isFinite(scaleX) && scaleX > 0 ? scaleX : 1;
+    };
+    // 读取设备安全区（刘海/手势条）inset，兼容横屏 H5
+    const getSafeAreaInsets = () => {
+        const probe = document.createElement('div');
+        probe.style.position = 'fixed';
+        probe.style.left = '0';
+        probe.style.top = '0';
+        probe.style.width = '0';
+        probe.style.height = '0';
+        probe.style.visibility = 'hidden';
+        probe.style.pointerEvents = 'none';
+        probe.style.paddingTop = 'env(safe-area-inset-top)';
+        probe.style.paddingRight = 'env(safe-area-inset-right)';
+        probe.style.paddingBottom = 'env(safe-area-inset-bottom)';
+        probe.style.paddingLeft = 'env(safe-area-inset-left)';
+        document.body.appendChild(probe);
+        const style = window.getComputedStyle(probe);
+        const insets = {
+            top: Number.parseFloat(style.paddingTop) || 0,
+            right: Number.parseFloat(style.paddingRight) || 0,
+            bottom: Number.parseFloat(style.paddingBottom) || 0,
+            left: Number.parseFloat(style.paddingLeft) || 0,
+        };
+        document.body.removeChild(probe);
+        return insets;
+    };
+    // 计算并获取放大镜底图：优先使用 Google Maps Static API，无图时走灰色背景兜底
+    useEffect(() => {
+        if (!visible || !dragState.currentPosition || !mapRef || !svgViewBox || !svgRef) {
+            // console.log('[Magnifier] Skip static map effect: missing deps', {
+            //   visible,
+            //   hasCurrentPosition: Boolean(dragState.currentPosition),
+            //   hasMapRef: Boolean(mapRef),
+            //   hasSvgViewBox: Boolean(svgViewBox),
+            //   hasSvgRef: Boolean(svgRef),
+            // });
+            setMapImageFrame(null);
+            setStaticMapRetryCount(0);
+            return;
+        }
+        const mapDiv = mapRef.getDiv?.();
+        // 获取 SVG 到屏幕的变换矩阵的逆矩阵
+        const inverseCtm = svgRef.getScreenCTM?.()?.inverse?.();
+        if (!mapDiv || !inverseCtm) {
+            // console.log('[Magnifier] Skip static map effect: mapDiv/ctm missing', {
+            //   hasMapDiv: Boolean(mapDiv),
+            //   hasInverseCtm: Boolean(inverseCtm),
+            // });
+            setMapImageFrame(null);
+            setStaticMapRetryCount(0);
+            return;
+        }
+        const mapRect = mapDiv.getBoundingClientRect();
+        const svgPoint = svgRef.createSVGPoint();
+        // 只要有 key 就尝试 static api；请求失败时不截图，直接回退灰色背景
+        if (googleMapStaticApiKey) {
+            // console.log('[Magnifier] Background source: static api viewport snapshot');
+            const mapBounds = mapRef.getBounds?.();
+            if (!mapBounds) {
+                // console.log('[Magnifier] Skip static map effect: mapBounds missing');
+                setMapImageFrame(null);
+                return;
+            }
+            const screenToSvg = (screenX, screenY) => {
+                svgPoint.x = screenX;
+                svgPoint.y = screenY;
+                const p = svgPoint.matrixTransform(inverseCtm);
+                return { x: p.x, y: p.y };
+            };
+            // 使用当前地图视口矩形四角，将屏幕坐标映射到 SVG 坐标，确保底图与主视口对齐
+            const topLeftSvg = screenToSvg(mapRect.left, mapRect.top);
+            const topRightSvg = screenToSvg(mapRect.right, mapRect.top);
+            const bottomLeftSvg = screenToSvg(mapRect.left, mapRect.bottom);
+            if (!topLeftSvg || !topRightSvg || !bottomLeftSvg) {
+                setMapImageFrame(null);
+                return;
+            }
+            // 把当前主地图可视区域尺寸，按比例压到 Static API 允许的最大尺寸以内(受 Static API 640 上限约束）)，同时不改变宽高比。
+            const mapWidth = Math.max(1, Math.round(mapRect.width));
+            const mapHeight = Math.max(1, Math.round(mapRect.height));
+            const shrinkRatio = Math.min(1, MAX_STATIC_SIZE / Math.max(mapWidth, mapHeight));
+            const staticWidth = Math.max(1, Math.round(mapWidth * shrinkRatio));
+            const staticHeight = Math.max(1, Math.round(mapHeight * shrinkRatio));
+            const center = mapBounds.getCenter();
+            const currentZoom = mapRef.getZoom() || 20;
+            // 尺寸缩小后同步补偿 zoom，保持与当前主图一致的地理覆盖范围
+            const zoomCompensation = Math.log2(shrinkRatio);
+            const adjustedZoom = currentZoom + zoomCompensation;
+            const staticZoom = Math.max(0, Math.min(Math.floor(adjustedZoom), 22));
+            const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
+            // 通过三角点推导静态图在 SVG 中的宽高和旋转角
+            // Math.hypot(x, y) 等价于 sqrt(x*x + y*y)，计算两点之间的距离
+            const width = Math.hypot(topRightSvg.x - topLeftSvg.x, topRightSvg.y - topLeftSvg.y);
+            const height = Math.hypot(bottomLeftSvg.x - topLeftSvg.x, bottomLeftSvg.y - topLeftSvg.y);
+            // Math.atan2(y, x) 计算反正切值，返回 [-π, π] 弧度，*180/π 转换为角度
+            const rotationDeg = (Math.atan2(topRightSvg.y - topLeftSvg.y, topRightSvg.x - topLeftSvg.x) * 180) / Math.PI;
+            // Static API zoom 只能取整；额外补偿小数部分，避免底图视觉偏小
+            // 在有旋转的坐标系里，做“以中心为锚点”的等比放大补偿。
+            const fractionalZoomScale = Math.pow(2, adjustedZoom - staticZoom); //算出“还差多少缩放比例”。例子：adjustedZoom=19.6，staticZoom=19，差 0.6，比例是 2^0.6 ≈ 1.515。
+            //把原始 width/height 乘这个比例，得到补偿后的尺寸。
+            const compensatedWidth = width * fractionalZoomScale;
+            const compensatedHeight = height * fractionalZoomScale;
+            //尺寸变大后，多出来的宽/高的一半（要从两边均匀扩张）。
+            const offsetAlongX = (compensatedWidth - width) / 2;
+            const offsetAlongY = (compensatedHeight - height) / 2;
+            //“右方向”单位向量（从左上指向右上），因为图可能旋转了，不能只按水平 x 轴算。
+            const unitX = width > 0 ? (topRightSvg.x - topLeftSvg.x) / width : 1;
+            const unitY = width > 0 ? (topRightSvg.y - topLeftSvg.y) / width : 0;
+            //“下方向”单位向量（从左上指向左下），同理用于旋转场景。
+            const unitDownX = height > 0 ? (bottomLeftSvg.x - topLeftSvg.x) / height : 0;
+            const unitDownY = height > 0 ? (bottomLeftSvg.y - topLeftSvg.y) / height : 1;
+            /**
+             * 计算补偿后的新左上角：
+             * 从原左上角沿“右方向”回退半个扩展量，再沿“下方向”回退半个扩展量。
+             * 这样放大后仍以原区域中心为中心，不会放大后位置偏移。
+             */
+            const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
+            const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
+            setMapImageFrame({
+                url: staticMapUrl,
+                x: compensatedTopLeftX,
+                y: compensatedTopLeftY,
+                width: compensatedWidth,
+                height: compensatedHeight,
+                transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
+            });
+        }
+        else {
+            setMapImageFrame(null);
+            setStaticMapRetryCount(0);
+            // console.log('[Magnifier] Background source: gray fallback (no static api key)');
+        }
+    }, [
+        visible,
+        dragState.isDragging,
+        mapRef,
+        svgViewBox?.x,
+        svgViewBox?.y,
+        svgViewBox?.width,
+        svgViewBox?.height,
+        svgRef,
+        size,
+        zoom,
+        googleMapStaticApiKey,
+        staticMapRetryCount,
+    ]);
+    useLayoutEffect(() => {
+        if (!visible) {
+            hasInitializedSideRef.current = false;
+            setIsPlacementReady(false);
+            return;
+        }
+        const updatePosition = () => {
+            const mapDiv = mapRef?.getDiv?.();
+            const mapRect = mapDiv?.getBoundingClientRect?.();
+            const boxSize = Math.max(120, Math.round(size));
+            // 设置放大镜大小
+            setMagnifierBoxSize({ width: boxSize, height: boxSize });
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const baseMargin = 10; // 放大镜与边缘的基础间距
+            const insets = getSafeAreaInsets();
+            const marginTop = Math.max(baseMargin, insets.top);
+            const marginRight = Math.max(baseMargin, insets.right);
+            const marginBottom = Math.max(baseMargin, insets.bottom);
+            const marginLeft = Math.max(baseMargin, insets.left);
+            const topY = mapRect ? mapRect.top + marginTop : marginTop;
+            // 顶部位置限制在可视区与安全区内，避免横屏时被刘海/手势条遮挡
+            const safeTopY = Math.max(marginTop, Math.min(topY, viewportHeight - boxSize - marginBottom));
+            let nextPlaceOnRight = placeOnRight;
+            const ctm = svgRef?.getScreenCTM?.();
+            // 首次显示时先同步算出侧边，再基于该侧边定位，避免“先左后右/先右后左”闪动
+            if (!hasInitializedSideRef.current && dragState.currentPosition && ctm && mapRect) {
+                const p = svgRef.createSVGPoint();
+                p.x = dragState.currentPosition[0];
+                p.y = dragState.currentPosition[1];
+                const dragScreenPoint = p.matrixTransform(ctm);
+                const mapMidX = mapRect.left + mapRect.width / 2;
+                nextPlaceOnRight = dragScreenPoint.x < mapMidX;
+                setPlaceOnRight(nextPlaceOnRight);
+                hasInitializedSideRef.current = true;
+            }
+            const rightX = mapRect
+                ? mapRect.right - boxSize - marginRight
+                : viewportWidth - boxSize - marginRight;
+            const leftX = mapRect ? mapRect.left + marginLeft : marginLeft;
+            const safeX = nextPlaceOnRight ? rightX : leftX;
+            const boundedX = Math.max(marginLeft, Math.min(safeX, viewportWidth - boxSize - marginRight));
+            // 放大镜出现后，仅当拖拽点进入放大镜区域时才切换到对侧
+            if (dragState.currentPosition && ctm) {
+                const p = svgRef.createSVGPoint();
+                p.x = dragState.currentPosition[0];
+                p.y = dragState.currentPosition[1];
+                // 应用这个矩阵，变换成屏幕坐标
+                const dragScreenPoint = p.matrixTransform(ctm);
+                const pointInMagnifier = dragScreenPoint.x >= boundedX &&
+                    dragScreenPoint.x <= boundedX + boxSize &&
+                    dragScreenPoint.y >= safeTopY &&
+                    dragScreenPoint.y <= safeTopY + boxSize;
+                if (pointInMagnifier) {
+                    setPlaceOnRight((prev) => !prev);
+                    return;
+                }
+            }
+            setMagnifierPosition({
+                x: boundedX,
+                y: safeTopY,
+            });
+            setIsPlacementReady(true);
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        return () => window.removeEventListener('resize', updatePosition);
+    }, [
+        visible,
+        size,
+        mapRef,
+        svgRef,
+        placeOnRight,
+        dragState.currentPosition?.[0],
+        dragState.currentPosition?.[1],
+    ]);
+    // 早期返回必须在所有 hooks 之后
+    if (!visible || !dragState.currentPosition || !svgViewBox) {
+        return null;
+    }
+    const [centerX, centerY] = dragState.currentPosition;
+    // 计算放大区域范围（以拖拽点为中心）
+    //effectiveZoom = Math.max(0.001, zoom * getPixelScale())
+    // 得到实际放大倍率。
+    // zoom 是你设置的放大倍数（比如 3）
+    // getPixelScale() 是当前 SVG 到屏幕的缩放因子（地图本身被缩放时要补偿）
+    // Math.max(0.001, ...) 是防止出现 0 或极小值导致除零/异常
+    // magnifierWidthInSvg = magnifierBoxSize.width / effectiveZoom
+    // magnifierHeightInSvg = magnifierBoxSize.height / effectiveZoom
+    // 把“屏幕上放大镜框的像素尺寸”换算成“SVG 坐标里要截取的实际尺寸”
+    // 放大倍率越大，分母越大，截取范围越小 => 看起来越放大
+    const effectiveZoom = Math.max(0.001, zoom * getPixelScale());
+    const magnifierWidthInSvg = magnifierBoxSize.width / effectiveZoom;
+    const magnifierHeightInSvg = magnifierBoxSize.height / effectiveZoom;
+    // 计算放大区域的 viewBox
+    const magnifierViewBox = {
+        x: centerX - magnifierWidthInSvg / 2,
+        y: centerY - magnifierHeightInSvg / 2,
+        width: magnifierWidthInSvg,
+        height: magnifierHeightInSvg,
+    };
+    // 样式缩放采用“弱抵消”，避免随 zoom 变细，保证放大镜内点线清晰度
+    const styleZoomFactor = Math.max(1, zoom * 0.4);
+    // 生成多边形点字符串（仅用于当前编辑禁区）
+    const polygonPointsString = polygonPoints.length > 0 ? polygonPoints.map((p) => `${p[0]},${p[1]}`).join(' ') : '';
+    const actureRotate = drag?.rotate ?? drag?.rotation ?? 0;
+    // 渲染放大镜内容
+    const magnifierContent = (jsxs("div", { style: {
+            position: 'fixed',
+            left: `${magnifierPosition.x}px`,
+            top: `${magnifierPosition.y}px`,
+            width: `${magnifierBoxSize.width}px`,
+            height: `${magnifierBoxSize.height}px`,
+            borderRadius: '50%',
+            border: `2px solid #fff`,
+            // boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
+            overflow: 'hidden',
+            zIndex: 10000,
+            pointerEvents: 'none',
+            background: 'rgba(235, 236, 240, 1)',
+            visibility: isPlacementReady ? 'visible' : 'hidden',
+        }, children: [jsxs("svg", { 
+                // 逻辑尺寸：与放大镜容器一致
+                width: magnifierBoxSize.width, height: magnifierBoxSize.height, 
+                // 核心放大参数：从整张 SVG 中裁剪出当前需要展示的区域（x y width height）
+                viewBox: `${magnifierViewBox.x} ${magnifierViewBox.y} ${magnifierViewBox.width} ${magnifierViewBox.height}`, 
+                // 保持内容居中并铺满窗口；比例不一致时裁边，不留空白
+                preserveAspectRatio: "xMidYMid slice", style: {
+                    // CSS 尺寸：让 SVG 完全填满放大镜容器
+                    width: '100%',
+                    height: '100%',
+                }, children: [mapImageFrame && (jsx("image", { href: mapImageFrame.url, x: mapImageFrame.x, y: mapImageFrame.y, width: mapImageFrame.width, height: mapImageFrame.height, transform: mapImageFrame.transform, preserveAspectRatio: "none", style: { opacity: 1 }, onLoad: () => {
+                            // console.log('✅ Map background loaded in magnifier');
+                            setStaticMapRetryCount(0);
+                        }, onError: (_e) => {
+                            // console.error('❌ Failed to load map background in magnifier', {
+                            //   retryCount: staticMapRetryCount,
+                            //   maxRetry: MAX_STATIC_MAP_RETRY,
+                            //   url: mapImageFrame.url,
+                            //   error: _e,
+                            // });
+                            setStaticMapRetryCount((prev) => {
+                                if (prev < MAX_STATIC_MAP_RETRY)
+                                    return prev + 1;
+                                setMapImageFrame(null);
+                                return 0;
+                            });
+                        } }, `magnifier-static-map-${staticMapRetryCount}`)), svgElementDatas &&
+                        Object.keys(svgElementDatas).map((key) => {
+                            const elements = svgElementDatas[key] || [];
+                            // 过滤掉当前正在拖拽的禁区（稍后单独渲染拖拽后的状态）
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const filteredElements = key === DataType.OBSTACLE
+                                ? elements.filter((item) => item.id !== currentObstacleId)
+                                : elements;
+                            if (filteredElements.length === 0)
+                                return null;
+                            return (jsxs(GElement, { type: key, children: [key === 'channel' && jsx(ChannelClipPath, {}), filteredElements.map((item) => (
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    jsx(SvgElement, { type: key, data: item }, item?.id)))] }, key));
+                        }), polygonPoints.length >= 3 && polygonPointsString && (jsxs(Fragment, { children: [jsx("polygon", { points: polygonPointsString, fill: fillColor, stroke: strokeColor, strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeOpacity: 1 }), polygonPoints.map((point, idx) => {
+                                const [x, y] = point;
+                                const isDraggingPoint = dragState.dragIndex === idx;
+                                const pointRadius = isDraggingPoint ? 14 / styleZoomFactor : 10 / styleZoomFactor;
+                                const pointFill = isDraggingPoint ? '#FFAB7E' : strokeColor;
+                                const pointStroke = isDraggingPoint ? strokeColor : '#fff';
+                                const pointStrokeWidth = isDraggingPoint
+                                    ? 3.6 / styleZoomFactor
+                                    : 3 / styleZoomFactor;
+                                return (jsx("circle", { cx: x, cy: y, r: pointRadius, fill: pointFill, stroke: pointStroke, strokeWidth: pointStrokeWidth }, idx));
+                            })] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsx(Fragment, { children: jsx("line", { x1: dragState.edgeInfo.startPoint.x, y1: dragState.edgeInfo.startPoint.y, x2: dragState.edgeInfo.endPoint.x, y2: dragState.edgeInfo.endPoint.y, stroke: "#999", strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeDasharray: `${6 / styleZoomFactor},${6 / styleZoomFactor}` }) }))] }), jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate, sizeScale: Math.max(1, zoom) })] }));
+    // 使用 Portal 渲染到 body，避免层级问题
+    return ReactDOM.createPortal(magnifierContent, document.body);
+};
+
+var css_248z$6 = ".index-module_pointerCursor__Ee6pr {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
+var styles$6 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
+styleInject(css_248z$6);
+
 /**
  * 几何计算工具函数
  */
@@ -23567,6 +23985,34 @@ const useCheckElement = () => {
     };
 };
 
+const Tooltip = ({ open, x, y, text, style, onClick }) => {
+    if (!open)
+        return null;
+    const tooltipStyle = {
+        position: 'fixed',
+        left: x,
+        top: y,
+        backgroundColor: '#fff',
+        borderRadius: '4px',
+        height: '20px',
+        lineHeight: '16px',
+        fontSize: '12px',
+        color: '#211F1F',
+        padding: '2px 4px',
+        whiteSpace: 'nowrap',
+        zIndex: 9999,
+        cursor: 'pointer',
+        userSelect: 'none',
+        ...style,
+    };
+    // 使用 createPortal 挂载到 body
+    return createPortal(jsx("div", { style: tooltipStyle, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick?.();
+        }, children: text }), document.body);
+};
+
 /**
  * 将坐标点数组转换为polygon points字符串
  * @param coordinates 坐标点数组 [[x1, y1], [x2, y2], ...]
@@ -23658,7 +24104,7 @@ const createPathData = (points) => {
 };
 const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', hoverFillColor = '', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数，如果未指定则根据createMode和editMode自动判断
  }) => {
-    const { overlayScale, unitType, showStraddleBoundaryBorder } = useCommonContext();
+    const { overlayScale, unitType, showStraddleBoundaryBorder, platform, onH5FirstSelectObstaclePoint } = useCommonContext();
     const { onHandleEvent } = useMapEditContext();
     const { svgRef } = useSvgEditContext();
     const [dragState, setDragState] = useState({
@@ -23676,7 +24122,6 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     const [selectedVertexIndex, setSelectedVertexIndex] = useState(-1);
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { editMapInfo } = useMapEditContext();
-    const { platform } = useCommonContext();
     // delete icon可能被上一个点遮挡，因为delete在右上方，所以手动处理点让点按照顺时针渲染，这样delete icon层级就会高一些
     // 编辑的场景禁区的点最后一个和第一个相同，会导致一个位置渲染两个点，需要额外处理下
     const coordinates = useMemo(() => {
@@ -23705,6 +24150,15 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     }, [svgRef]);
     // 删除确认 Tooltip 状态
     const [tooltipIndex, setTooltipIndex] = useState(null);
+    const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+    const [completeTooltipOpen, setCompleteTooltipOpen] = useState(false);
+    const updateTooltipPos = (target) => {
+        const rect = target.getBoundingClientRect();
+        setTooltipPos({
+            x: rect.left + rect.width + 4,
+            y: rect.top - 10
+        });
+    };
     // 处理顶点点击（仅透出点击；不触发删除）
     const handleVertexClick = useCallback((e, index) => {
         // 阻止事件冒泡到Google Maps
@@ -23719,6 +24173,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
             window.clearTimeout(clickTimerRef.current);
         }
         clickTimerRef.current = window.setTimeout(() => {
+            setCompleteTooltipOpen(false);
             // 创建模式下点击顶点回调（仅透出点击）
             if (onPointClick) {
                 onPointClick(index, e);
@@ -23909,9 +24364,14 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
         // 开始长按计时器（1000ms）
         vertexLongPressTimerRef.current = window.setTimeout(() => {
             isVertexLongPressedRef.current = true;
-            setSelectedVertexIndex(index);
+            setSelectedVertexIndex((prev) => {
+                if (prev !== index) {
+                    onH5FirstSelectObstaclePoint?.();
+                }
+                return index;
+            });
         }, 1000);
-    }, [editMode, createMode, completed, dragState.isDragging]);
+    }, [editMode, createMode, completed, dragState.isDragging, onH5FirstSelectObstaclePoint]);
     const handleVertexLongPressEnd = useCallback(() => {
         if (vertexLongPressTimerRef.current !== null) {
             window.clearTimeout(vertexLongPressTimerRef.current);
@@ -24242,12 +24702,17 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                         if (isDash && showStraddleBoundaryBorder) {
                             return (jsx(DashPath, { className: canSelect ? styles$6.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
                         }
-                        return (jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$6.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
-                                userSelect: 'none',
-                                WebkitUserSelect: 'none',
-                                WebkitTouchCallout: 'none',
-                                touchAction: 'none',
-                            } }, index));
+                        return (jsxs(Fragment, { children: [(editMode || createMode) && (jsx("path", { d: pathData, fill: "none", stroke: '#fff', strokeWidth: strokeWidth * 2, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", style: {
+                                        userSelect: 'none',
+                                        WebkitUserSelect: 'none',
+                                        WebkitTouchCallout: 'none',
+                                        touchAction: 'none',
+                                    } }, 'warp' + index)), jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$6.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
+                                        userSelect: 'none',
+                                        WebkitUserSelect: 'none',
+                                        WebkitTouchCallout: 'none',
+                                        touchAction: 'none',
+                                    } }, index)] }));
                     }) }), (editMode || (createMode && completed)) &&
                 renderCoordinates.length >= 2 &&
                 renderCoordinates.map((coord, index) => {
@@ -24285,7 +24750,11 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
+                }), ghostLastPath && (jsxs(Fragment, { children: [jsx("path", { d: ghostLastPath, stroke: '#fff', strokeWidth: strokeWidth * 2, vectorEffect: "non-scaling-stroke", opacity: 0.7 }), jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })] })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxs(Fragment, { children: [jsx("path", { d: ghostFirstPath, stroke: '#fff', strokeWidth: strokeWidth * 2, vectorEffect: "non-scaling-stroke", opacity: 0.7 }), jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })] })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsx(Magnifier, { visible: platform === PlatformType.H5 &&
+                    dragState.isDragging &&
+                    dragState.dragIndex !== -1 &&
+                    dragState.currentPosition !== null &&
+                    (editMode || (createMode && completed)), dragState: dragState, polygonPoints: renderCoordinates, fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth, zoom: 3, size: 130 }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
                 renderCoordinates.map((coord, idx) => {
                     // 判断当前顶点的状态
                     const isLastPoint = idx === renderCoordinates.length - 1;
@@ -24325,6 +24794,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                     }, 300);
                                     // 打开删除确认 Tooltip（仅在可编辑时）
                                     if (editMode || (createMode && completed)) {
+                                        updateTooltipPos(e.target);
                                         setTooltipIndex(idx);
                                     }
                                 }, ...(platform === PlatformType.H5
@@ -24400,7 +24870,14 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                                 }
                                             }
                                         },
-                                    }) }), tooltipIndex === idx && coordinates.length > 3 && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
+                                        onMouseEnter: canComplete ? (e) => {
+                                            setCompleteTooltipOpen(true);
+                                            updateTooltipPos(e.target);
+                                        } : undefined,
+                                        onMouseLeave: canComplete ? () => {
+                                            setCompleteTooltipOpen(false);
+                                        } : undefined,
+                                    }) }), platform === PlatformType.H5 && tooltipIndex === idx && coordinates.length > 3 && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     if (onVertexDelete &&
@@ -24423,7 +24900,12 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                             // >
                             // </rect>
                             )] }, `vertex-${idx}`));
-                })] }));
+                }), platform === PlatformType.WEB && tooltipIndex !== null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Remove", onClick: () => {
+                    if (onVertexDelete && (editMode || (createMode && completed)) && coordinates.length > 3) {
+                        onVertexDelete(renderCoordinates?.length - 1 - tooltipIndex);
+                    }
+                    setTooltipIndex(null);
+                } })), platform === PlatformType.WEB && completeTooltipOpen && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Click to finish" }))] }));
 };
 
 const MowPartitionContext = createContext({
@@ -25102,15 +25584,15 @@ const useVisionOffTransform = (data, scaleConstraints
     };
 };
 
-var _g$3, _defs$3;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var _g$6, _defs$6;
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgTransformDelete = function SvgTransformDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-delete_svg__a)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 10,
@@ -25133,7 +25615,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
     fill: "#fff",
     rx: 0.8,
     transform: "rotate(45 6.323 5.191)"
-  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$6 || (_defs$6 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-delete_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -25153,15 +25635,15 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
   })))));
 };
 
-var _g$2, _defs$2;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var _g$5, _defs$5;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgTransformRotate = function SvgTransformRotate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$5 || (_g$5 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-rotate_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "url(#transform-rotate_svg__b)",
@@ -25169,7 +25651,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M11.602 14.719a5.447 5.447 0 0 1-6.608-5.116l-.004-.205a.818.818 0 0 1 1.633-.084l.004.084.01.285a3.81 3.81 0 0 0 2.127 3.137l.26.115a3.8 3.8 0 0 0 2.227.184l.276-.071q.29-.088.561-.219l-1.147-.441a.817.817 0 0 1 .587-1.525l2.54.977a.817.817 0 0 1 .316 1.308l.001.001a5.45 5.45 0 0 1-2.783 1.57M8.623 4.548a5.447 5.447 0 0 1 6.608 5.116l.004.204a.818.818 0 0 1-1.633.084l-.004-.084-.01-.284a3.81 3.81 0 0 0-2.127-3.138l-.26-.115a3.8 3.8 0 0 0-2.227-.184l-.276.072q-.29.087-.561.218l1.147.442a.817.817 0 0 1-.586 1.524l-2.542-.976a.817.817 0 0 1-.315-1.309 5.45 5.45 0 0 1 2.782-1.57"
-  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$5 || (_defs$5 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-rotate_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -25189,15 +25671,15 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
   })))));
 };
 
-var _g$1, _defs$1;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var _g$4, _defs$4;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgTransformScale = function SvgTransformScale(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$4 || (_g$4 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-scale_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "url(#transform-scale_svg__b)",
@@ -25205,7 +25687,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M5.078 8.265a.8.8 0 0 0 1.6.001v-.544l5.69 5.69h-.494a.8.8 0 0 0 0 1.6l2.474-.002a.8.8 0 0 0 .311-.062.8.8 0 0 0 .49-.738v-2.474a.8.8 0 1 0-1.6 0v.594L7.81 6.59h.544a.8.8 0 0 0 0-1.6H5.879a.8.8 0 0 0-.8.8z"
-  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$4 || (_defs$4 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-scale_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -25225,15 +25707,15 @@ var SvgTransformScale = function SvgTransformScale(props) {
   })))));
 };
 
-var _g, _defs;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var _g$3, _defs$3;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgTransformTranslate = function SvgTransformTranslate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-translate_svg__a)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 10,
@@ -25243,7 +25725,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M16.18 10.758a.8.8 0 0 0-.105-1.218l-1.66-1.66a.801.801 0 0 0-1.132 1.132l.383.381h-2.96V6.418l.385.386a.8.8 0 1 0 1.131-1.13l-1.75-1.75a.8.8 0 0 0-1.222.11L7.594 5.689a.8.8 0 0 0 1.131 1.13l.381-.38v2.954H6.137l.381-.38a.8.8 0 1 0-1.13-1.132l-1.752 1.75a.8.8 0 0 0 .106 1.22l1.66 1.66a.801.801 0 0 0 1.132-1.133l-.386-.385h2.958v2.972l-.38-.38a.8.8 0 0 0-1.132 1.131l1.751 1.75a.8.8 0 0 0 1.223-.11l1.654-1.655a.8.8 0 1 0-1.13-1.131l-.386.386v-2.963h2.978l-.385.384a.8.8 0 1 0 1.131 1.131z"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-translate_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -25916,6 +26398,97 @@ const useDoodleTransform = (data, onTransformChange, options) => {
     };
 };
 
+var _g$2, _defs$2;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var SvgDisabledRotate = function SvgDisabledRotate(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#disabled-rotate_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#211F1F",
+    fillOpacity: 0.4,
+    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    fillOpacity: 0.7,
+    d: "M9.192 11.775a4.36 4.36 0 0 1-5.277-3.93l-.013-.326v-.002a.655.655 0 0 1 1.31 0v.002a3.05 3.05 0 0 0 1.71 2.738l.208.091a3.05 3.05 0 0 0 1.781.147l.22-.057q.234-.07.451-.175l-.919-.354a.653.653 0 1 1 .47-1.22l2.033.782a.654.654 0 0 1 .251 1.047l.002.001a4.36 4.36 0 0 1-2.227 1.256M6.809 3.639a4.36 4.36 0 0 1 5.289 4.256v.002a.654.654 0 1 1-1.309 0v-.002a3.05 3.05 0 0 0-1.71-2.738l-.208-.091a3.05 3.05 0 0 0-1.781-.147l-.22.057a3 3 0 0 0-.451.175l.919.354a.654.654 0 0 1-.47 1.22l-2.033-.782a.654.654 0 0 1-.251-1.046l-.002-.002a4.36 4.36 0 0 1 2.227-1.256"
+  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "disabled-rotate_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M16 0H0v16h16z"
+  })))));
+};
+
+var _g$1, _defs$1;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgDisabledScale = function SvgDisabledScale(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#disabled-scale_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#211F1F",
+    fillOpacity: 0.4,
+    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    fillOpacity: 0.7,
+    d: "M3.972 6.612a.64.64 0 0 0 1.28 0v-.437l4.554 4.554H9.41a.64.64 0 0 0 0 1.28h1.979a.64.64 0 0 0 .636-.606l.003-.036.001-1.98a.64.64 0 1 0-1.28.001v.474L6.158 5.27h.435a.64.64 0 0 0 0-1.28h-1.98a.64.64 0 0 0-.64.64z"
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "disabled-scale_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 16h16V0H0z"
+  })))));
+};
+
+var _g, _defs;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgDisabledTranslate = function SvgDisabledTranslate(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#disabled-translate_svg__a)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 8,
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 8,
+    fill: "#211F1F",
+    fillOpacity: 0.4
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    fillOpacity: 0.7,
+    d: "M12.944 8.608a.64.64 0 0 0-.079-.97l-1.333-1.334a.64.64 0 0 0-.905.905l.305.305H8.564V5.136l.308.308a.642.642 0 0 0 .906-.906l-1.4-1.399a.64.64 0 0 0-.906 0q-.036.037-.064.08L6.075 4.55a.64.64 0 0 0 .905.905l.305-.304v2.362H4.91l.306-.306a.64.64 0 0 0-.904-.904l-1.4 1.4a.64.64 0 0 0 .077.97l1.334 1.333a.64.64 0 0 0 .906-.905l-.31-.309h2.367v2.38l-.304-.305a.64.64 0 1 0-.905.906l1.4 1.4a.64.64 0 0 0 .97-.08l1.332-1.333a.64.64 0 0 0-.905-.905l-.309.308v-2.37h2.385l-.31.309a.64.64 0 1 0 .905.904z"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "disabled-translate_svg__a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M16 0H0v16h16z"
+  })))));
+};
+
 var css_248z$5 = ".index-module_doodleHover__jIZHV path {\n  fill: #2EC1B2;\n}";
 var styles$5 = {"doodleHover":"index-module_doodleHover__jIZHV"};
 styleInject(css_248z$5);
@@ -26114,15 +26687,16 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         const infoBoxHeight = 40 * overlayScale; // 信息框高度
         const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
         const circleScale = platform === PlatformType.H5 ? 1.5 * overlayScale : 2 * overlayScale;
-        return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
+        const disacledScale = circleScale * 1.2;
+        return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
                         ? {
                             onTouchStart: createReactEventHandler((e) => {
                                 handleMouseDownWithDisabled(e);
                             }),
                         }
                         : {
-                            onMouseDown: handleMouseDownWithDisabled,
-                        }) }), jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), platform === PlatformType.H5 && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                        // onMouseDown: handleMouseDownWithDisabled,
+                        }) }), jsx("g", { transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsx(SvgDisabledRotate, {}) }) }), jsx("g", { transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsx(SvgDisabledTranslate, {}) }) }), jsx("g", { transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsx(SvgDisabledScale, {}) }) }), platform === PlatformType.H5 && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
                         onClickInfo?.();
                     }, children: jsx("div", { style: {
                             padding: `5px ${10 * overlayScale}px`,
@@ -27053,68 +27627,6 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
             }, children: jsx("img", { src: mowerImage, style: { width: '100%', height: '100%', objectFit: 'contain' } }) }) }));
 });
 
-var chargingPileImage = "data:image/png;base64,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";
-
-const useChargingPile = ({ viewBox, rotation = 0 }) => {
-    const { svgElementDatas } = useSvgEditContext();
-    const { sn } = useCommonContext();
-    const items = useMemo(() => {
-        if (!svgElementDatas || !viewBox)
-            return [];
-        const chargingPiles = svgElementDatas?.[DataType.CHARGING_PILE];
-        if (!chargingPiles)
-            return [];
-        const results = [];
-        for (const element of chargingPiles) {
-            const center = element.points?.[0];
-            if (!center)
-                continue;
-            const size = element.style?.radius ? element.style.radius * 2 : 55;
-            const direction = element?.direction || 0;
-            const angle = (direction * 180) / Math.PI;
-            const rotationDegree = 270 - angle; // 正东是正方向，需要处理下
-            const actualRotation = rotationDegree - rotation;
-            const relX = (center[0] - viewBox.x) / viewBox.width;
-            const relY = (center[1] - viewBox.y) / viewBox.height;
-            if (isFinite(relX) && isFinite(relY)) {
-                results.push({
-                    leftPct: relX * 100,
-                    topPct: relY * 100,
-                    size,
-                    rotateDeg: actualRotation,
-                    imageSrc: chargingPileImage,
-                });
-            }
-        }
-        return results;
-    }, [svgElementDatas, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, rotation, sn]);
-    return items;
-};
-
-const CharginPile = React__default.memo(({ viewBox, rotation = 0, isHighlight = true }) => {
-    const items = useChargingPile({ viewBox: viewBox || null, rotation });
-    const containerStyle = useMemo(() => ({
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        zIndex: 750,
-        opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
-    }), [isHighlight]);
-    return (jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsx("div", { className: "charging-pile", style: {
-                position: 'absolute',
-                width: item.size,
-                height: item.size,
-                left: `${item.leftPct}%`,
-                top: `${item.topPct}%`,
-                transform: `translate(-50%, -50%) rotate(${item.rotateDeg}deg)`,
-                pointerEvents: 'auto',
-                zIndex: 750,
-            }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }, `pile-${idx}`))) }));
-});
-
 var css_248z$3 = ".index-module_container__7IatW {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n  position: absolute;\n  background-color: rgba(30, 30, 31, 0.6);\n  color: rgb(255, 255, 255);\n  padding: 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: bold;\n  max-width: 220px;\n  pointer-events: auto;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n.index-module_boundaryLabel__GDHFn .index-module_isolatedIcon__1pRXN {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  top: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.index-module_base__qy2SG {\n  font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n  margin-top: 6px;\n  font-size: 11px;\n  opacity: 0.9;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 6px;\n}";
 var styles$3 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","isolatedIcon":"index-module_isolatedIcon__1pRXN","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
 styleInject(css_248z$3);
@@ -28954,7 +29466,7 @@ const defaultMapConfig$1 = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = forwardRef(({ sn, mowerIconConfig = {}, platform = PlatformType.WEB, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, isHighlight = true, mapConfig, 
 // pathConfig,
-modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, onHandleEvent, onSelectElement, }, ref) => {
+modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, zIndex, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, googleMapStaticApiKey, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, }, ref) => {
     const [currentError, setCurrentError] = useState(null);
     // const mapRef = useMap();
     const [processStateIsMowing, setProcessStateIsMowing] = useState(false);
@@ -29112,48 +29624,6 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         currentMowingPartitionId,
         processStateIsMowing,
     ]);
-    const commonValue = useMemo(() => {
-        return {
-            sn,
-            editMap,
-            platform,
-            language,
-            unitType,
-            svgViewBox,
-            heightOptions,
-            globalHeight,
-            mapConfig: mergedMapConfig,
-            mapJson,
-            drag: {
-                x: defaultTransform?.x ?? 0,
-                y: defaultTransform?.y ?? 0,
-                rotate: (defaultTransform?.rotation ?? 0) + originNorthRotate,
-            },
-            mapRef,
-            overlayScale,
-            doodleList,
-            mowerIconConfig,
-            showStraddleBoundaryBorder,
-        };
-    }, [
-        sn,
-        editMap,
-        platform,
-        svgViewBox,
-        unitType,
-        language,
-        heightOptions,
-        globalHeight,
-        mergedMapConfig,
-        mapJson,
-        defaultTransform,
-        originNorthRotate,
-        mapRef,
-        overlayScale,
-        doodleList,
-        mowerIconConfig,
-        showStraddleBoundaryBorder,
-    ]);
     const mowerPositionData = useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         // 在初始的状态按照正常图标进行渲染，所以构造一个基本在rtk桩的一个数据
@@ -29199,15 +29669,12 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
     const bounds = useMemo(() => {
         if (!mapJson)
             return null;
-        // 计算边界
-        const bounds = calculateMapBounds(mapJson);
-        if (!bounds) {
-            handleError('无法计算地图边界');
-            return;
+        const mapBoundsData = calculateMapBounds(mapJson);
+        if (!mapBoundsData) {
+            console.warn('Failed to calculate map bounds');
+            return null;
         }
-        // 将自定义边界转换为Google Maps LatLngBounds（使用有效的GPS坐标）
         const validBounds = getValidGpsBounds(mapJson, 0);
-        // 地图数据中的坐标格式是 [longitude, latitude]
         const [swLng0, swLat0] = validBounds.sw;
         const [neLng0, neLat0] = validBounds.ne;
         const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
@@ -29218,11 +29685,58 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const neY = neY0 + drag.y;
         const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
         const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
-        const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
-        new window.google.maps.LatLng(neLat, neLng) // 东北角
-        );
-        return googleBounds;
+        return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
     }, [mapJson, drag.x, drag.y]);
+    const commonValue = useMemo(() => {
+        return {
+            sn,
+            editMap,
+            platform,
+            language,
+            unitType,
+            svgViewBox,
+            heightOptions,
+            globalHeight,
+            mapConfig: mergedMapConfig,
+            mapJson,
+            drag: {
+                x: defaultTransform?.x ?? 0,
+                y: defaultTransform?.y ?? 0,
+                rotate: (defaultTransform?.rotation ?? 0) + originNorthRotate,
+            },
+            mapRef,
+            bounds,
+            overlayScale,
+            doodleList,
+            mowerIconConfig,
+            showStraddleBoundaryBorder,
+            overlayLayout,
+            googleMapStaticApiKey,
+            onH5FirstSelectObstaclePoint,
+        };
+    }, [
+        sn,
+        editMap,
+        platform,
+        svgViewBox,
+        unitType,
+        language,
+        heightOptions,
+        globalHeight,
+        mergedMapConfig,
+        mapJson,
+        defaultTransform,
+        originNorthRotate,
+        mapRef,
+        bounds,
+        overlayScale,
+        doodleList,
+        mowerIconConfig,
+        showStraddleBoundaryBorder,
+        overlayLayout,
+        googleMapStaticApiKey,
+        onH5FirstSelectObstaclePoint,
+    ]);
     const fitBounds = useCallback((padding = 0) => {
         if (!mapJson || !mapRef)
             return null;
@@ -29537,7 +30051,7 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
                                 // svgEditMapRef?.current?.adjustSvgSize?.(layout);
                                 setOverlayLayout(layout);
                             }
-                        }, map: mapRef, mapPaneName: 'overlayMouseTarget', bounds: bounds, rotate: actureRotate, children: [jsx(MapDrag, { map: mapRef, dragCallbacks: dragCallbacks, onBoundaryLabelsCollapse: () => { }, onTransformChange: handleDragMove, isDragMap: dragMap, canRotateMap: canRotateMap }), jsx(MowPartitionContextProvider, { value: mowPartitionValue, children: jsx(SvgMapComponent, { isHighlight: isHighlight, editMap: editMap, ref: svgMapRef, pathData: pathJson, mapConfig: mergedMapConfig, mowPartitionData: mowPartitionData }) }), jsx(MowerPosition, { editMap: editMap, mowerPositionData: mowerPositionData, viewBox: svgViewBox || null, modelType: modelType, hasEdger: edger, mapData: mapJson, mapConfig: mergedMapConfig, realTimeData: realTimeData, onMowingPositionChange: onMowingPositionChange, isHighlight: isHighlight }), jsx(CharginPile, { viewBox: svgViewBox || null, rotation: actureRotate, isHighlight: isHighlight }), jsx(BoundaryLabels, { editMap: editMap, mapData: mapJson, onlyRead: onlyRead, pathData: pathJson, unitType: unitType, viewBox: svgViewBox || null, rotation: actureRotate, mowPartitionData: mowPartitionData, realTimeData: realTimeData, isHighlight: isHighlight }), jsx(Antennas, { editMap: editMap, antennaConfig: antennaConfig || [], layout: overlayLayout || undefined, viewBox: svgViewBox || null, rotation: actureRotate, onlyRead: onlyRead, isHighlight: isHighlight }), jsx(SvgEditMap, { editMap: editMap, ref: svgEditMapRef, mapConfig: mergedMapConfig, onEditInfoMapChange: onEditInfoMapChange })] })] }) }) }));
+                        }, map: mapRef, mapPaneName: 'overlayMouseTarget', bounds: bounds, rotate: actureRotate, zIndex: zIndex, children: [jsx(MapDrag, { map: mapRef, dragCallbacks: dragCallbacks, onBoundaryLabelsCollapse: () => { }, onTransformChange: handleDragMove, isDragMap: dragMap, canRotateMap: canRotateMap }), jsx(MowPartitionContextProvider, { value: mowPartitionValue, children: jsx(SvgMapComponent, { isHighlight: isHighlight, editMap: editMap, ref: svgMapRef, pathData: pathJson, mapConfig: mergedMapConfig, mowPartitionData: mowPartitionData }) }), jsx(MowerPosition, { editMap: editMap, mowerPositionData: mowerPositionData, viewBox: svgViewBox || null, modelType: modelType, hasEdger: edger, mapData: mapJson, mapConfig: mergedMapConfig, realTimeData: realTimeData, onMowingPositionChange: onMowingPositionChange, isHighlight: isHighlight }), jsx(CharginPile, { viewBox: svgViewBox || null, rotation: actureRotate, isHighlight: isHighlight }), jsx(BoundaryLabels, { editMap: editMap, mapData: mapJson, onlyRead: onlyRead, pathData: pathJson, unitType: unitType, viewBox: svgViewBox || null, rotation: actureRotate, mowPartitionData: mowPartitionData, realTimeData: realTimeData, isHighlight: isHighlight }), jsx(Antennas, { editMap: editMap, antennaConfig: antennaConfig || [], layout: overlayLayout || undefined, viewBox: svgViewBox || null, rotation: actureRotate, onlyRead: onlyRead, isHighlight: isHighlight }), jsx(SvgEditMap, { editMap: editMap, ref: svgEditMapRef, mapConfig: mergedMapConfig, onEditInfoMapChange: onEditInfoMapChange })] })] }) }) }));
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';