@fleet-frontend/mower-maps 0.2.5-beta.2 → 0.2.5-beta.4

package/dist/index.js

@@ -10629,8 +10629,8 @@ var REAL_TIME_DATA_TYPE;
  */
 // 默认坐标
 const DEFAULT_COORDINATES = {
-    sw: [116.35497283935547, 40.0374755859375],
-    ne: [116.35584259033203, 40.038658142089844],
+    sw: [116.071044, 40.102099],
+    ne: [116.0734, 40.103901],
 };
 /**
  * 缩放因子 - 将米转换为像素
@@ -22543,15 +22543,25 @@ var index = {
 const CommonContext = React.createContext({
     sn: '',
     editMap: false,
-    mowerIconConfig: {},
+    mowerIconConfig: {
+        mapImgUrl: '',
+        mapDisabledUrl: '',
+        mapNoPositionUrl: '',
+    },
     platform: exports.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 = () => React.useContext(CommonContext);
@@ -22983,10 +22993,6 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
                 } }))] }));
 };
 
-var css_248z$5 = ".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$5 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
-styleInject(css_248z$5);
-
 exports.CreateStatus = void 0;
 (function (CreateStatus) {
     CreateStatus["CREATING"] = "creating";
@@ -23036,6 +23042,420 @@ const MapEditContext = React.createContext({
 const MapEditContextProvider = MapEditContext.Provider;
 const useMapEditContext = () => React.useContext(MapEditContext);
 
+var chargingPileImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABHHSURBVHgBtVtdjF3VdV7rnHPHtLbUkRrALwmDidSSgD1JqWQ3UMaNMaFq63FIKyoVZFRF6kMkbCmVcP9mrBARoJUnLRL9c+3WSVsqIkwrtRBKfaGmQFuFazBpK0wYnmLSF6MYx557zt5Zv3vvO/Z4bDPZ9pl97rlnztnfXmt969s/g/AjKrN7nxwf634wBTFMYIQNAWASAcYjxAmI+T5EnAeIdFQnYwxHqwr6Z5s1g9ld20/Cj6AgrGBhkKva0/d1MUxBiFMxEjw7gGv5RyUWL+cfiCD/0I4KoULs04ensKkP7d716/OwQmVFAD/4yMGpLsJM7MJUiIGMGiDQwUBDYHR8DgocFG/54gQ0HRVUFQPnuoK6qvp0ec/u3767Dx+wfCDAXyKg2MWZELopBth1BJQAB6ujgY5RANNpRIbLuPnFETAaxgSUawYpVhawtdQV1XWN81hXu37ni3cfgssslwX4wQf/bqLD4f6uY6AdAaWDagYqdRi18qhrn/vmc61bRbIwZqAKmms9rw/Usbdn9+5Ld/VLBvzlhw/e17XtLIEcbzsG2SpgOQQkYe0wu7SDZqgRvS7Bcisq/oFVRAZqVlaQXDeRgKIDFtBNPd9Aved3d99zAC6hXDTg2dknx6sr3psJbbezZZBtB14TWApfAqmgyYPpnF07ZMIKeqLviymMoxIWY0VEJ6/zWNgsG5uGgTdANXBNwOf+4P4duy4Wx0UBnp3dP45jcJgsO6kgWxi2BLIdYtcGBisWDqHFji3qMbzIlY2jLZgRyxaUbl1hJiwBzLWBdqBNo0fNR90MxhC279597/xyWJYFPPvgfsqj8XA7HE60BLQVsAqazzt3aY5ZqmPU2A1s0sgunPwZFbVzNQNW+hLTsvnRrCwujbFCAYoa0xVbNjbs2g0DHxNrO/Cm15sfQ9y8HGhcDiyZ6nDbLkwMhwRwOCSQw2RdsjbVHK8pfg0wowoC1lwak9ZIgN3E4tYjgCuJa2XsujISkxiuKJYbVEsz0B6BbrDX6yXQMKw+MTt775KipboQYELx5HBIYBcI5MJZoHNYWFjgc1wYcr2AQ+4A6YgF7ozIHaKuLl6gtcQ2dw51mhCdxXvo5LN5Cco9nXmOPifa85Hfze/xmtuxQO1IbZLvhhPQdIc5BJeC1Cz1xcwD+/bSyybTixYYVEsNWGAQ0RpI1zqxprKzKSohqeAGdctiIbBScmIHds5G9W9TYJyjydb0UHZnsjF7EIbgIdM4P0S+Xui4STL6DNXnJbL6fBdnv7xvR9cNv1KAjXSOZEXqUbZiixrPnaQgIayOXZgaFDtmZAMeFKgpDW+gsLVf52aGWES3pC6rY3FNnhdNxPjvmpgxipAOAw6JjZu3bHvv+X/7p5eXBTw7+9jEMIb97cJwvATL4NldGay6YGv5lkFTj0PAUCorbYyTVdz2y1twxz13wurVP47/+39vgRmabzGTRjusaxQ1jjC9EV/RMU4DCM5HzvZQbfyF2+98vP/cUyPxfI5LdxXOdAvDCY6dVkCqVYcal2JdlZGtuRe/OIAZw+0ovukWvPqqD8Hnf/Muef6NN/wUPPvckXj69GmMOSnxbwl1BX0IKla9qJVbuELP7zG6G0elQLRKY2OcImI/fbm5xDdCWrNf+rNpYt0d4q5sXSGM1iyrhMTMLMQkedcPAYxmWXfXRMybNn1ypFOvvuon0QVJthikfK2AUh63DpXczuHDnqXkJhzCxmjVOKnNnZAdfTf1e7OPTS0JeNiFvfILchAwe0CrbIvGsIuAhiK2zI3Vrd3ywO5cvmfdug+P3KugneQCmETB4hlCiFHynYSOpcJWGL/z9opXtuKVFn78nJnzAuaeoAeYuOCUsICtCwxNG8rMppOFld0KkEgEIZaje4Atn/6UuHRZrr32IwrOTCzPgXL46NaH3DGgXiSSNXbgbN0an3CIubEIdHTNQO0fsXKKYUouM22hoIZay4MkDYlWbgWoKSjUhmkDmSZiOZVhp7d9+mZYXNas/jFwFgYoSStlLIYoaiQYq2HqCJRRZcDEaNjx162KVVZnLQVvVRNttbUML0mpsJX7ycLMzARmitOMqicXCcrImnocrLpZSC4cbHCgn9X/NBjXXfvhuP7Gnz4H8Pobr1d4RkVQpDGbKECzrt5jgw/1gqCf1cMk/1tcS7i1KbbZ8sI5EMjKs7N7xxPg0103LaMelosSqwa04w7o0hhXjiLuIMZRaaqfJSvwHdO/cvt5pSu7uJOWGCop7cy6zsDae8bcMefrTGoE2sbhLQOXdrun6kiOQZ8Jzc4EmLppm/aMsp8N90DjNYGNBVuKWAj22WPOcy/3PTFx3LrlFliq0PdZiKhaKghMPcRd3t25AGpvs7awBlAyxS64VC0HODSo6eKtAphNTU4xpfEpluVewpx2gtT2Ik8nGjwIiWyiiwZLh5s2/swFByYfXXeN83mRj8HJCkeEB7has2vmXcbe0QlU5W1wY4GB97AUt27OtM1k152FPKYNMqYtwapxhSmdSFHjVpgFS3kcLSQ/u+32C+GFK6/6EFqMgjGfaSy7wbsg5nOPJO5Wl58a4vSDqIRaTpam04p1d6eE2zWeXeBsu2qqaUM7ZdMzrotdMo6QFLtNzptmTn1bzGMBbdrWLT8PV1995QUBX7fuI1lX6xPjmtWrcf3662HDjR+D6667BtZSrB99/X/g4Ne/ASfe/f8MPWUv9zGeFw3UC5URGePh8bMYzIkNh1U70RCYDT5oX6SeojOiuXKMmaTS7ONo/+spA16uXLfuGtiw/nr8KAFbd+01MLnh47g4X8uzqOP4+hfvfyC5vbO3Tv9ius4Y+HIel5dhKfG+oSFc4zY941/YICD4wABVSekUK/eDzVCATUkVwGOk2MQN6z92UYD/6KHfh4spa9asLj0LER2052a9rgaqPJZtyKpTTzacnGQLT4SYeiDRvQn0ZFlnUI3ZLDBCSN0tv/fZ6Ttgpcvxt+bB5aa+x94dnT2iyhAZsHCDKsxTTXkMTallnGFPxGDa10CzZUdjdvHYsyiY8iOsXXslbL3tVljp8s1/7ctr9VV5sgiUt93j8lAyhNJgKX3RtYkmpAt+s2nj4II+jsRxmpbwREQOIRPJ9OHnNv7sspOCl1qIrGBw9NtmymCT2jafaxkhJQn5vsKsvXVgk8EHaGJyYx/16Beue4IpHVND6DkYHLekiCAvvHP7L8JKl2eePexxmtjK+l2vmjiV9ohNCtAqSQt8EZpCylosRNfG7sLoAhcgpUXU20OahNp62xSsXSYVXU55+pv9CGV2sGSQQMpVc/PocjfmpJ0GOZoCK7L2vHWfCXiLW5s+idnCPDSz4YoNBQGS+P/M1ilY6TJ47Q1y6e9lfe2aLo4eRtTWNhlvxlKR239krKSl48k0IDPvyI8oZV7B0FkDg8f45PqPXxSI4995m6x2+KLufYbvK0ZOkEgopk7w0IMsOTO7FZ5v7Z5n0jpKnybtHWlSzEBjemiMpuPAHypJwllz8NoxAn0DnGulY3D8+DwMXn8DBoNjcOr99+OaNWvwM1s3w3JlcPQNcGM4Sxdas5jc1wTF07oelrlDcuaiT+811OZX6co9NtWXHmEuWypb792YJSWkz1955NH4ue2/hCwSvn/qFLz40n8R0Lf5XNOGORefn6Lvl+qgDPYYfPfdd8HfY2Nne98o8qKNYP0TE8842fLkAMQBLVDg/NBWtoo5Tx8QIGS+WuTio/V3T7yLf/LYvvz2bH0s+S55BFnvQoCffvawd3pSdUZU6bnFuzR7eN/4hL7nT0jrs31atWmftyV4zbG+YAvZJ/QdwcW+U6I1Ini8x/JXbCqovO6xKDe8evT1JcGeOvU+/PMzz6EtyAFkokJIU0PZw6KaNPtomvy13tC1WEpJ3aCam5tl0urr8mzF7kLcDUZQOnehaV4tHmMxCB/paRufRmPGklSiNzGIO/Lvvzp4XYCdr/z7f7wCnn5MNxcBlIgS7XngnRyLZ6BxjGKS5j/PWGXGg6a5+rqnIvVGzIYGZ+Qynq32ZgR3BLVktLiB0v1SWLhnwptvvQ3nK//yzHN6r69kFOTp70nMbCyuvm9ayGbjbUeQCEG6IPtCBPCZpvqqrMX67pmRbQgpwA2gu1eaWk0uLtztgEy8pOZleWq8EOKRF89Z+oETJ74n1ndl57nFnx8t4/pzvZeVEG1CLdW69MrLrdhUTyXAB8jUWFd9XnVXF6j4nzQ/OYgAQ4zp1eiZQlKVu7KJsmhGNqUGDgAiZKH6rfPEcYrtEXFRMIdxgs6MauP0BxYk5sbjhfSa8Tz/p3Oz8wmw3bVHtgjZijuKf0sHGO9V3tHeHm1MnvUpk1pa+UvElXVMavyblLYWx/E/fOMfE8g0wRFN75kCzPnX/lusS3urtPWJwDa8ZYJW1XGP/0oC/JePPsAW7uu+qHSwpcFmXSO4yaNPrrk/lcQU083pnugjsFCwj/544cWXElh25zePfydTU4w5k1pXh0XZR7ulcj/WbRJl+6tqnrGdA5hLjU1h5TrqBjE5hMz04SOp0eIWPD61U2Is8Gvjoik9sx66m75w5D+Twfb99d9Ccb88IRSurV6cck4SJCAb3NSN0cHqNidebBxZGC+VipQdn7//8NnhmVsXzvK2hrO8rYEXqbDtujTn5eb0qDTNY+MXG74tHtGAseeIL+qXt9y8iecd8YUjr4CZ3wb1xX1JW6HtBRHLyhanuq6waXrQ8O6e3hisGhuDsVVXwKreqgMH/uKhe0t85255qOHeJjSvdnX3EzXP/tWBhlQBqqibzNjqstqfmuZaFbDowWRevr/w45EO1t9GAvpS0RMj6ay4NT0/ywpLnznD1LGRTS8EvK7ny9jN8BaVwX8fOfnJm245QwjuCGlOi6d/krIDGJm9dMloXOwNM+Fibo7ZTooJk6ozjYEWHpD81nleJ6tcSIBauNK9mChxWqetS7KjZ6y3ijes7fqbP3+4vyxgAf2tF1+ZvOnmcXrRxpj3Wpm6yc4rig5HARYdAflcW+uunr92PwFLeTEWFkQYDYfoik9sahvX2I1r3cIEPXLnXsPHqrmD+x556HzYlty2VLftHnrYQGKj6SE9lPdIcV5jYrCUlZky5hSc3DHn0Jg1UiyZPX3GzMhYXs/SSsxNIA2skhOlHQZc98iVJYZj04wNDv7Vw0tuRVwS8IEDcyd7sdtMrjLfU9ACXLb76b5HIQzfAetSzjvA03NKXSEx92gHFHXM6c6x2pBHdb6wcd5DLVsQ+ZD29XiTWu8d+rkdLlDqC305GLx85obJjU8RuGl62bhJRxihk5H4zB6LpsoKNsYiRLH0eZGFkAY34KoYc25VyL5/WkipQXVjjtkxZud3yHybv3bgD+fhcgFzOTZ4+eQNnyDQWE/R69dGI5xCCY2knRKOc1JeqQBMX2aBlsavWbTr7AWakEAhJrEoMzBK+mnGUGK2NxYJ7NGFCjY9cWDuxHJ4EC6h/Nrd9+2l9dadbdpumDeX+ipjKDajmaKE0iVC1kkptUqnuFtoLbvvJNOyC4tUtG3ETWOxynssx3gf9R8Pm2r2EIXgxWC4JMBcfvXunTu6djhDi80TQ90aga2uv4Ivs0bfSZtHSQbLyMwSUekfruB0PF6ppMW8UVwAE9gebywlN66b3klilD2Pf31uDi6hLOvSi8u3X3t5sOGmT9FQqxqndk2iyZ50QKXjahPxqFrchL3WlQPS0Rkd9QgwG8DovujaUw4dlCnIqkiA+2NjzR2PH5x7Gi6xXLKFy3Lnb3xhOrRhL60tT3TFnwKIe/sejGDL6DpJgAXn+YSMx7iTk28O1z3SaUe8ZIc+hfCeJ772aB8us3wgwF4+d9cXplqIM6Hrprrgm9fSimSMaasE5JhGSG494iFMVKKgKvk7B94JT7D7NL2654m/v3ygXlYEsJfpu35rArCejm23jex7q/05D+qYOYHOORZcQSmFVYgpfunoY419ODP21UOH5lbsr9RWFHBZpqd3jsMVZybJyJTO4gbCPk6YJgjrRPZp+TFP7HaSMA9iFQfkyO/Awqr+SoIsyw8B5OTF820K0FQAAAAASUVORK5CYII=";
+
+const useChargingPile = ({ viewBox, rotation = 0 }) => {
+    const { svgElementDatas } = useSvgEditContext();
+    const { sn } = useCommonContext();
+    const items = React.useMemo(() => {
+        if (!svgElementDatas || !viewBox)
+            return [];
+        const chargingPiles = svgElementDatas?.[exports.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.memo(({ viewBox, rotation = 0 }) => {
+    const items = useChargingPile({ viewBox: viewBox || null, rotation });
+    const containerStyle = React.useMemo(() => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        zIndex: 750,
+    }), []);
+    return (jsxRuntime.jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsxRuntime.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: jsxRuntime.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] = React.useState({ x: 0, y: 0 });
+    const [magnifierBoxSize, setMagnifierBoxSize] = React.useState({ width: size, height: size });
+    // 本次拖拽中放大镜位置是否已完成初始化（未完成前隐藏，避免首帧闪动）
+    const [isPlacementReady, setIsPlacementReady] = React.useState(false);
+    // 放大镜所在侧边：true=右侧，false=左侧
+    const [placeOnRight, setPlaceOnRight] = React.useState(true);
+    // 仅在每次拖拽开始时初始化一次侧边
+    const hasInitializedSideRef = React.useRef(false);
+    const [mapImageFrame, setMapImageFrame] = React.useState(null);
+    const [staticMapRetryCount, setStaticMapRetryCount] = React.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，无图时走灰色背景兜底
+    React.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,
+    ]);
+    React.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 = (jsxRuntime.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: [jsxRuntime.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 && (jsxRuntime.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 === exports.DataType.OBSTACLE
+                                ? elements.filter((item) => item.id !== currentObstacleId)
+                                : elements;
+                            if (filteredElements.length === 0)
+                                return null;
+                            return (jsxRuntime.jsxs(GElement, { type: key, children: [key === 'channel' && jsxRuntime.jsx(ChannelClipPath, {}), filteredElements.map((item) => (
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    jsxRuntime.jsx(SvgElement, { type: key, data: item }, item?.id)))] }, key));
+                        }), polygonPoints.length >= 3 && polygonPointsString && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsx("circle", { cx: x, cy: y, r: pointRadius, fill: pointFill, stroke: pointStroke, strokeWidth: pointStrokeWidth }, idx));
+                            })] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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}` }) }))] }), jsxRuntime.jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate })] }));
+    // 使用 Portal 渲染到 body，避免层级问题
+    return ReactDOM.createPortal(magnifierContent, document.body);
+};
+
+var css_248z$5 = ".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$5 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
+styleInject(css_248z$5);
+
 /**
  * SVG 坐标转换工具函数
  */
@@ -23598,7 +24018,7 @@ const createPathData = (points) => {
 };
 const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', 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] = React.useState({
@@ -23616,7 +24036,6 @@ const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0,
     const [selectedVertexIndex, setSelectedVertexIndex] = React.useState(-1);
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { editMapInfo } = useMapEditContext();
-    const { platform } = useCommonContext();
     // delete icon可能被上一个点遮挡，因为delete在右上方，所以手动处理点让点按照顺时针渲染，这样delete icon层级就会高一些
     // 编辑的场景禁区的点最后一个和第一个相同，会导致一个位置渲染两个点，需要额外处理下
     const coordinates = React.useMemo(() => {
@@ -23849,9 +24268,14 @@ const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0,
         // 开始长按计时器（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 = React.useCallback(() => {
         if (vertexLongPressTimerRef.current !== null) {
             window.clearTimeout(vertexLongPressTimerRef.current);
@@ -24225,7 +24649,11 @@ const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0,
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), ghostLastPath && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsxRuntime.jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== exports.PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsxRuntime.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 && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsxRuntime.jsx(Magnifier, { visible: platform === exports.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 }), jsxRuntime.jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== exports.PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsxRuntime.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;
@@ -26987,67 +27415,6 @@ const MowerPosition = React.memo(({ editMap, mowerPositionData, viewBox, modelTy
             }, children: jsxRuntime.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 = React.useMemo(() => {
-        if (!svgElementDatas || !viewBox)
-            return [];
-        const chargingPiles = svgElementDatas?.[exports.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.memo(({ viewBox, rotation = 0 }) => {
-    const items = useChargingPile({ viewBox: viewBox || null, rotation });
-    const containerStyle = React.useMemo(() => ({
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        zIndex: 750,
-    }), []);
-    return (jsxRuntime.jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsxRuntime.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: jsxRuntime.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);
@@ -28854,7 +29221,7 @@ const defaultMapConfig$1 = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = React.forwardRef(({ sn, mowerIconConfig = {}, platform = exports.PlatformType.WEB, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, 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, 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] = React.useState(null);
     // const mapRef = useMap();
     const [processStateIsMowing, setProcessStateIsMowing] = React.useState(false);
@@ -29012,48 +29379,6 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         currentMowingPartitionId,
         processStateIsMowing,
     ]);
-    const commonValue = React.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 = React.useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         // 在初始的状态按照正常图标进行渲染，所以构造一个基本在rtk桩的一个数据
@@ -29099,15 +29424,12 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
     const bounds = React.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]);
@@ -29118,11 +29440,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 = React.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 = React.useCallback((padding = 0) => {
         if (!mapJson || !mapRef)
             return null;