@fleet-frontend/mower-maps 0.2.5-beta.9 → 0.2.6-beta.10

package/dist/index.js

@@ -2109,7 +2109,7 @@ var ellipsoids = {
   }
 };
 
-const WGS84$1 = ellipsoids.WGS84; // default ellipsoid
+const WGS84$2 = ellipsoids.WGS84; // default ellipsoid
 
 function eccentricity(a, b, rf, R_A) {
   var a2 = a * a; // used in geocentric
@@ -2134,7 +2134,7 @@ function sphere(a, b, rf, ellps, sphere) {
   if (!a) { // do we have an ellipsoid?
     var ellipse = match(ellipsoids, ellps);
     if (!ellipse) {
-      ellipse = WGS84$1;
+      ellipse = WGS84$2;
     }
     a = ellipse.a;
     b = ellipse.b;
@@ -10633,9 +10633,16 @@ var SvgMapOpacity;
  * 地图渲染相关常量配置
  */
 // 默认坐标
+// export const DEFAULT_COORDINATES = {
+//   sw: [116.071044, 40.102099],
+//   ne: [116.0734, 40.103901],
+// };
+/** 无效 GPS 时的兜底中心点 [lng, lat] */
+const DEFAULT_GPS_CENTER = [0, 0];
+/** 无 map_width/map_height 时的默认 GPS 边界 [lng, lat]（中心约 (0,0)） */
 const DEFAULT_COORDINATES = {
-    sw: [116.071044, 40.102099],
-    ne: [116.0734, 40.103901],
+    sw: [-225e-6, -225e-6],
+    ne: [0.000225, 0.000225],
 };
 /**
  * 缩放因子 - 将米转换为像素
@@ -13935,6 +13942,13 @@ exports.MapType = void 0;
      */
     MapType["GEO_FENCE"] = "geo-fence";
 })(exports.MapType || (exports.MapType = {}));
+var HoverType;
+(function (HoverType) {
+    HoverType["Translate"] = "translate";
+    HoverType["Scale"] = "scale";
+    HoverType["Rotate"] = "rotate";
+    HoverType["Delete"] = "delete";
+})(HoverType || (HoverType = {}));
 
 var RealTimeDataType;
 (function (RealTimeDataType) {
@@ -18086,6 +18100,8 @@ const OBSTACLE_STYLES = {
     hoverFillColor: 'rgba(255, 90, 0, 0.4)',
     lineWidth: DEFAULT_LINE_WIDTHS.OBSTACLE,
     opacity: DEFAULT_OPACITIES.FULL,
+    disabledLineColor: 'rgba(255, 90, 0, 0.4)',
+    disabledFillColor: 'rgba(255, 90, 0, 0.1)',
 };
 const CHARGING_PILE_STYLES = {
     lineColor: 'blue',
@@ -18567,6 +18583,38 @@ function calculateBoundaryBoundsCenter(mapData) {
         boundaryBounds.minY + (boundaryBounds.maxY - boundaryBounds.minY) / 2,
     ];
 }
+/**
+ * 由中心点与物理尺寸（米）计算 GPS 边界 [lng, lat]
+ */
+function computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapWidthMeters, mapHeightMeters) {
+    const METERS_PER_DEGREE_LAT = EQUATORIAL_CIRCUMFERENCE / 360;
+    const METERS_PER_DEGREE_LNG = METERS_PER_DEGREE_LAT * Math.cos((centerLat * Math.PI) / 180);
+    const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+    const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
+    const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+    const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
+    return {
+        sw: [swLng, swLat],
+        ne: [neLng, neLat],
+    };
+}
+/**
+ * GPS 无效时：中心 (0,0) + JSON 的 map_width/map_height；无尺寸则用 DEFAULT_COORDINATES
+ */
+function getFallbackGpsBounds(mapData) {
+    const [centerLng, centerLat] = DEFAULT_GPS_CENTER;
+    const hasMapSize = typeof mapData.map_width === 'number' &&
+        typeof mapData.map_height === 'number' &&
+        mapData.map_width > 0 &&
+        mapData.map_height > 0;
+    if (hasMapSize) {
+        return computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
+    }
+    return {
+        sw: [...DEFAULT_COORDINATES.sw],
+        ne: [...DEFAULT_COORDINATES.ne],
+    };
+}
 /**
  * 检查GPS坐标是否有效
  */
@@ -18602,10 +18650,10 @@ function estimateGpsFromMapBounds(mapData) {
         const mapWidthMeters = maxXMeters - minXMeters;
         const mapHeightMeters = maxYMeters - minYMeters;
         // 凤凰岭的GPS坐标作为地图中心点
-        const centerLat = 40.103;
-        const centerLng = 116.072222;
-        // const centerLat = 40.03806686401367;
-        // const centerLng = 116.35540771484375;
+        // const centerLat = 40.103;
+        // const centerLng = 116.072222;
+        const centerLat = 0;
+        const centerLng = 0;
         // 精确的坐标转换常数
         // 1度纬度 = 约111,320米（在地球上任何地方都基本相同）
         // 1度经度 = 约111,320 * cos(纬度) 米（随纬度变化）
@@ -18671,39 +18719,44 @@ function calculateMapGpsCenter(mapData) {
         }
     }
     // 如果有西南角和东北角坐标，检查其有效性并计算中心点
-    if (mapData.sw_gps &&
-        mapData.ne_gps &&
-        mapData.sw_gps.length >= 2 &&
-        mapData.ne_gps.length >= 2) {
-        const swLat = mapData.sw_gps[1];
-        const swLng = mapData.sw_gps[0];
-        const neLat = mapData.ne_gps[1];
-        const neLng = mapData.ne_gps[0];
-        // 检查边界坐标的有效性
-        if (isValidGpsCoordinate(swLat, swLng) && isValidGpsCoordinate(neLat, neLng)) {
-            return {
-                lat: (swLat + neLat) / 2,
-                lng: (swLng + neLng) / 2,
-            };
-        }
-        else {
-            console.warn('sw_gps或ne_gps坐标无效:', {
-                sw: { lat: swLat, lng: swLng },
-                ne: { lat: neLat, lng: neLng },
-            });
-        }
-    }
+    // if (
+    //   mapData.sw_gps &&
+    //   mapData.ne_gps &&
+    //   mapData.sw_gps.length >= 2 &&
+    //   mapData.ne_gps.length >= 2
+    // ) {
+    //   const swLat = mapData.sw_gps[1];
+    //   const swLng = mapData.sw_gps[0];
+    //   const neLat = mapData.ne_gps[1];
+    //   const neLng = mapData.ne_gps[0];
+    //   // 检查边界坐标的有效性
+    //   if (isValidGpsCoordinate(swLat, swLng) && isValidGpsCoordinate(neLat, neLng)) {
+    //     return {
+    //       lat: (swLat + neLat) / 2,
+    //       lng: (swLng + neLng) / 2,
+    //     };
+    //   } else {
+    //     console.warn('sw_gps或ne_gps坐标无效:', {
+    //       sw: { lat: swLat, lng: swLng },
+    //       ne: { lat: neLat, lng: neLng },
+    //     });
+    //   }
+    // }
     // 尝试从地图几何边界估算GPS坐标
-    const estimatedBounds = estimateGpsFromMapBounds(mapData);
-    if (estimatedBounds) {
-        // 从估算的边界计算中心点
-        const centerLat = (estimatedBounds.sw[1] + estimatedBounds.ne[1]) / 2;
-        const centerLng = (estimatedBounds.sw[0] + estimatedBounds.ne[0]) / 2;
-        return { lat: centerLat, lng: centerLng };
-    }
+    // const estimatedBounds = estimateGpsFromMapBounds(mapData);
+    // if (estimatedBounds) {
+    //   // 从估算的边界计算中心点
+    //   const centerLat = (estimatedBounds.sw[1] + estimatedBounds.ne[1]) / 2;
+    //   const centerLng = (estimatedBounds.sw[0] + estimatedBounds.ne[0]) / 2;
+    //   return { lat: centerLat, lng: centerLng };
+    // }
+    // return {
+    //   lat: 39.9042, // 北京纬度
+    //   lng: 116.4074, // 北京经度
+    // };
     return {
-        lat: 39.9042, // 北京纬度
-        lng: 116.4074, // 北京经度
+        lat: DEFAULT_GPS_CENTER[1],
+        lng: DEFAULT_GPS_CENTER[0],
     };
 }
 // 旋转坐标点
@@ -18733,50 +18786,22 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
         mapData.map_width > 0 &&
         mapData.map_height > 0) {
         const [centerLng, centerLat] = mapData.center_gps;
-        const mapWidthMeters = mapData.map_width;
-        const mapHeightMeters = mapData.map_height;
-        // 精确的坐标转换常数（基于 WGS84 标准 - GPS 国际标准）
-        // WGS84 赤道半径 = 6,378,137 米
-        // 地球赤道周长 = 2 × π × 6,378,137 ≈ 40,075,017 米
-        // 1度纬度 = 40075017 / 360 ≈ 111,319.49 米（在地球上任何地方都基本相同）
-        // 1度经度 = (40075017 / 360) * cos(纬度) 米（随纬度变化）
-        const METERS_PER_DEGREE_LAT = EQUATORIAL_CIRCUMFERENCE / 360;
-        const METERS_PER_DEGREE_LNG = METERS_PER_DEGREE_LAT * Math.cos((centerLat * Math.PI) / 180);
-        // 计算SW（西南角）GPS坐标：从中心点减去半个地图的宽度和高度
-        const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
-        const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
-        // 计算NE（东北角）GPS坐标：从中心点加上半个地图的宽度和高度
-        const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
-        const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
-        bounds = {
-            sw: [swLng, swLat],
-            ne: [neLng, neLat],
-        };
-    }
-    else if (isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
-        isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])) {
-        // 降级方案：使用地图数据中的GPS坐标
-        console.warn('center_gps 或 map_width/map_height 不可用，使用 sw_gps 和 ne_gps');
-        bounds = {
-            sw: mapData.sw_gps,
-            ne: mapData.ne_gps,
-        };
-    }
+        bounds = computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
+    }
+    // else if (
+    //   isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
+    //   isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])
+    // ) {
+    //   // 降级方案：使用地图数据中的GPS坐标
+    //   console.warn('center_gps 或 map_width/map_height 不可用，使用 sw_gps 和 ne_gps');
+    //   bounds = {
+    //     sw: mapData.sw_gps,
+    //     ne: mapData.ne_gps,
+    //   };
+    // }
     else {
-        // 如果GPS坐标无效，尝试从地图几何数据估算
-        const { sw, ne } = estimateGpsFromMapBounds(mapData);
-        if (sw && ne) {
-            console.warn('GPS坐标无效，使用地图几何数据估算边界:', sw, ne);
-            bounds = {
-                sw: [sw[0], sw[1]],
-                ne: [ne[0], ne[1]],
-            };
-        }
-        else {
-            // 最后的fallback：使用默认坐标
-            console.warn('无法获取有效的GPS边界，使用默认坐标');
-            bounds = DEFAULT_COORDINATES;
-        }
+        console.warn('无法获取有效的GPS边界，使用 (0,0) 中心 + map_width/map_height 或 DEFAULT_COORDINATES');
+        bounds = getFallbackGpsBounds(mapData);
     }
     // 如果有旋转角度，计算旋转后的边界
     if (rotation !== 0) {
@@ -19209,7 +19234,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
     const mowerImage = mowerIconConfig?.mapImgUrl || getMowerImageByModal(model, hasEdger);
     const disabledImage = mowerIconConfig?.mapDisabledUrl || getDisabledMowerImageByModal(model);
     const noPositionImage = mowerIconConfig?.mapNoPositionUrl || getNoPositionMowerImageByModal(model);
-    const positonOutOfRange = isOutOfRange(positonConfig);
+    // const positonOutOfRange = isOutOfRange(positonConfig);
     const positionValid = isInvalidPosition(positonConfig);
     const isOffLine = state === RobotStatus.DISCONNECTED;
     const isInPark = state === RobotStatus.CHARGING || state === RobotStatus.PARKED;
@@ -19219,7 +19244,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
     if (isInPark) {
         return mowerImage;
     }
-    if (positionValid || positonOutOfRange) {
+    if (positionValid) {
         return noPositionImage;
     }
     else {
@@ -19243,12 +19268,6 @@ function isInvalidPosition(positonConfig) {
         isNoPosture(positonConfig.postureY) &&
         isNoPosture(positonConfig.postureTheta));
 }
-function isOutOfRange(positonConfig) {
-    return (positonConfig.postureX != null &&
-        Math.abs(positonConfig.postureX) > 1000 &&
-        positonConfig.postureY != null &&
-        Math.abs(positonConfig.postureY) > 1000);
-}
 function getMindistanceByModel(modelType) {
     if (isIModel(modelType)) {
         return I_MIN_DISTANCE;
@@ -19545,8 +19564,16 @@ function formatTime(date) {
  * @param date 目标日期
  * @returns 星期几的英文缩写
  */
-function getWeekdayAbbr(date) {
-    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+function getWeekdayAbbr(date, locale) {
+    const weekdays = [
+        locale?.['map.renderer.weekday.sun'] || 'Sun',
+        locale?.['map.renderer.weekday.mon'] || 'Mon',
+        locale?.['map.renderer.weekday.tue'] || 'Tue',
+        locale?.['map.renderer.weekday.wed'] || 'Wed',
+        locale?.['map.renderer.weekday.thu'] || 'Thu',
+        locale?.['map.renderer.weekday.fri'] || 'Fri',
+        locale?.['map.renderer.weekday.sat'] || 'Sat'
+    ];
     return weekdays[date.getDay()];
 }
 /**
@@ -19560,7 +19587,7 @@ function getWeekdayAbbr(date) {
  * @param timestamp 时间戳（秒）
  * @returns 格式化后的日期文本
  */
-function formatBoundaryDateText(timestamp) {
+function formatBoundaryDateText(timestamp, locale) {
     if (!timestamp || timestamp <= 0) {
         return '-';
     }
@@ -19568,15 +19595,15 @@ function formatBoundaryDateText(timestamp) {
     const timeStr = formatTime(date);
     // 判断是否为今天
     if (isToday(date)) {
-        return `Today ${timeStr}`;
+        return `${locale?.['map.renderer.today'] || 'Today'} ${timeStr}`;
     }
     // 判断是否为昨天
     if (isYesterday(date)) {
-        return `Yesterday ${timeStr}`;
+        return `${locale?.['map.renderer.yesterday'] || 'Yesterday'} ${timeStr}`;
     }
     // 判断是否为本周内
     if (isThisWeek(date)) {
-        const weekdayAbbr = getWeekdayAbbr(date);
+        const weekdayAbbr = getWeekdayAbbr(date, locale);
         return `${weekdayAbbr} ${timeStr}`;
     }
     // 其他情况显示完整日期
@@ -20068,12 +20095,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$7 = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n}";
-var styles$7 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
-styleInject(css_248z$7);
+var css_248z$9 = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n}";
+var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
+styleInject(css_248z$9);
 
 const RotateHandle = ({ onRotateStart, isRotating }) => {
-    return (jsxRuntime.jsx("div", { className: styles$7.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
+    return (jsxRuntime.jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
 };
 
 /**
@@ -20150,7 +20177,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
     if (!isMobileDevice()) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { className: styles$7.move, onMouseDown: (e) => {
+    return (jsxRuntime.jsx("div", { className: styles$9.move, onMouseDown: (e) => {
             onDragStart(e);
         }, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
             // onDragEnd(e);
@@ -20182,7 +20209,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
     if (!isDragMap) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$7.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsxRuntime.jsx("div", { className: styles$7.border }), canRotateMap && jsxRuntime.jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsxRuntime.jsx("div", { className: styles$7.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsxRuntime.jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsxRuntime.jsx("div", { className: styles$9.border }), canRotateMap && jsxRuntime.jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsxRuntime.jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsxRuntime.jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
 };
 
 const SvgEditContext = React.createContext({
@@ -22698,13 +22725,17 @@ const CommonContext = React.createContext({
     overlayScale: 1,
     showStraddleBoundaryBorder: true,
     googleMapStaticApiKey: '',
+    googleMapStaticUrlSigningSecret: '',
+    locale: {},
+    signGoogleStaticMapUrl: undefined,
     onH5FirstSelectObstaclePoint: undefined,
+    channelClipPathId: '',
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => React.useContext(CommonContext);
 
 const ChannelClipPath = React.memo(() => {
-    const { svgViewBox, sn } = useCommonContext();
+    const { svgViewBox, channelClipPathId } = useCommonContext();
     const { svgElementDatas } = useSvgEditContext();
     const boundaryData = svgElementDatas?.[exports.DataType.BOUNDARY] || [];
     const [minX, minY, maxX, maxY] = React.useMemo(() => {
@@ -22883,7 +22914,7 @@ const ChannelClipPath = React.memo(() => {
         });
         return baseD;
     }, [boundaryData, minX, minY, maxX, maxY]);
-    return (jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: `channel-clip-path-${sn}`, fillRule: "evenodd", children: jsxRuntime.jsx("path", { d: d }) }) }));
+    return (jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: channelClipPathId, fillRule: "evenodd", children: jsxRuntime.jsx("path", { d: d }) }) }));
 });
 
 /**
@@ -22945,9 +22976,9 @@ const VertexElement = React.memo(({ r, stroke, fill, ...props }) => {
 });
 
 var _path$1;
-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); }
+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 SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -23179,11 +23210,487 @@ const MapEditContext = React.createContext({
 const MapEditContextProvider = MapEditContext.Provider;
 const useMapEditContext = () => React.useContext(MapEditContext);
 
+/**
+ * Google Maps Static API 数字签名
+ * @see https://developers.google.com/maps/documentation/maps-static/digital-signature
+ *
+ * 使用纯 JS HMAC-SHA1，兼容 H5 WebView / 非 HTTPS 等无 crypto.subtle 的环境。
+ */
+/// <reference lib="dom" />
+function removeWebSafe(encoded) {
+    return encoded.replace(/-/g, '+').replace(/_/g, '/');
+}
+function makeWebSafe(encoded) {
+    return encoded.replace(/\+/g, '-').replace(/\//g, '_');
+}
+function decodeUrlSigningSecret(secret) {
+    let base64 = removeWebSafe(secret);
+    const remainder = base64.length % 4;
+    if (remainder) {
+        base64 += '='.repeat(4 - remainder);
+    }
+    const binary = globalThis.atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+}
+function bytesToWebSafeBase64(bytes) {
+    let binary = '';
+    for (let i = 0; i < bytes.length; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return makeWebSafe(globalThis.btoa(binary));
+}
+function utf8Encode(text) {
+    if (typeof globalThis.TextEncoder !== 'undefined') {
+        return new globalThis.TextEncoder().encode(text);
+    }
+    // Static Map URL 仅含 ASCII；兼容无 TextEncoder 的旧 WebView / Jest jsdom
+    const bytes = new Uint8Array(text.length);
+    for (let i = 0; i < text.length; i++) {
+        const code = text.charCodeAt(i);
+        if (code > 127) {
+            throw new Error('signGoogleStaticMapUrl: non-ASCII URL is not supported in this environment');
+        }
+        bytes[i] = code;
+    }
+    return bytes;
+}
+function concatBytes(...parts) {
+    const total = parts.reduce((sum, part) => sum + part.length, 0);
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const part of parts) {
+        out.set(part, offset);
+        offset += part.length;
+    }
+    return out;
+}
+function leftRotate(value, amount) {
+    return ((value << amount) | (value >>> (32 - amount))) >>> 0;
+}
+function sha1(message) {
+    const originalLength = message.length;
+    const bitLength = originalLength * 8;
+    const paddedLength = Math.ceil((originalLength + 9) / 64) * 64;
+    const padded = new Uint8Array(paddedLength);
+    padded.set(message);
+    padded[originalLength] = 0x80;
+    const view = new DataView(padded.buffer);
+    view.setUint32(paddedLength - 4, bitLength >>> 0, false);
+    view.setUint32(paddedLength - 8, Math.floor(bitLength / 0x100000000), false);
+    let h0 = 0x67452301;
+    let h1 = 0xefcdab89;
+    let h2 = 0x98badcfe;
+    let h3 = 0x10325476;
+    let h4 = 0xc3d2e1f0;
+    const w = new Uint32Array(80);
+    for (let offset = 0; offset < paddedLength; offset += 64) {
+        for (let i = 0; i < 16; i++) {
+            w[i] = view.getUint32(offset + i * 4, false);
+        }
+        for (let i = 16; i < 80; i++) {
+            w[i] = leftRotate(w[i - 3] ^ w[i - 8] ^ w[i - 14] ^ w[i - 16], 1);
+        }
+        let a = h0;
+        let b = h1;
+        let c = h2;
+        let d = h3;
+        let e = h4;
+        for (let i = 0; i < 80; i++) {
+            let f;
+            let k;
+            if (i < 20) {
+                f = (b & c) | (~b & d);
+                k = 0x5a827999;
+            }
+            else if (i < 40) {
+                f = b ^ c ^ d;
+                k = 0x6ed9eba1;
+            }
+            else if (i < 60) {
+                f = (b & c) | (b & d) | (c & d);
+                k = 0x8f1bbcdc;
+            }
+            else {
+                f = b ^ c ^ d;
+                k = 0xca62c1d6;
+            }
+            const temp = (leftRotate(a, 5) + f + e + k + w[i]) >>> 0;
+            e = d;
+            d = c;
+            c = leftRotate(b, 30);
+            b = a;
+            a = temp;
+        }
+        h0 = (h0 + a) >>> 0;
+        h1 = (h1 + b) >>> 0;
+        h2 = (h2 + c) >>> 0;
+        h3 = (h3 + d) >>> 0;
+        h4 = (h4 + e) >>> 0;
+    }
+    const digest = new Uint8Array(20);
+    const digestView = new DataView(digest.buffer);
+    digestView.setUint32(0, h0, false);
+    digestView.setUint32(4, h1, false);
+    digestView.setUint32(8, h2, false);
+    digestView.setUint32(12, h3, false);
+    digestView.setUint32(16, h4, false);
+    return digest;
+}
+function hmacSha1(key, message) {
+    const blockSize = 64;
+    let normalizedKey = key;
+    if (normalizedKey.length > blockSize) {
+        normalizedKey = sha1(normalizedKey);
+    }
+    const paddedKey = new Uint8Array(blockSize);
+    paddedKey.set(normalizedKey);
+    const innerPad = new Uint8Array(blockSize);
+    const outerPad = new Uint8Array(blockSize);
+    for (let i = 0; i < blockSize; i++) {
+        innerPad[i] = paddedKey[i] ^ 0x36;
+        outerPad[i] = paddedKey[i] ^ 0x5c;
+    }
+    return sha1(concatBytes(outerPad, sha1(concatBytes(innerPad, message))));
+}
+function signUrlToSign(urlToSign, urlSigningSecret) {
+    const keyBytes = decodeUrlSigningSecret(urlSigningSecret);
+    const signatureBytes = hmacSha1(keyBytes, utf8Encode(urlToSign));
+    return bytesToWebSafeBase64(signatureBytes);
+}
+/**
+ * 对 Maps Static API 请求 URL 追加 `signature` 参数。
+ * 签名内容为 pathname + search（不含 scheme/host），算法 HMAC-SHA1 + URL-safe Base64。
+ *
+ * @param inputUrl 完整未签名 URL（须已包含 key 等 query 参数）
+ * @param urlSigningSecret Cloud Console「URL 签名密钥」（URL-safe Base64）
+ */
+function signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret) {
+    if (!inputUrl || !urlSigningSecret) {
+        throw new Error('signGoogleStaticMapUrl: inputUrl and urlSigningSecret are required');
+    }
+    const url = new globalThis.URL(inputUrl);
+    url.searchParams.delete('signature');
+    const urlToSign = `${url.pathname}${url.search}`;
+    const signature = signUrlToSign(urlToSign, urlSigningSecret);
+    return `${url.origin}${urlToSign}&signature=${signature}`;
+}
+/** 异步包装，便于与宿主 signGoogleStaticMapUrl 回调统一 Promise 接口 */
+async function signGoogleStaticMapUrl(inputUrl, urlSigningSecret) {
+    return signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret);
+}
+
 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 DEFAULT_SCREEN_PADDING = 50;
+function normalizeScreenPadding(padding, defaultValue = DEFAULT_SCREEN_PADDING) {
+    if (padding == null) {
+        return {
+            top: defaultValue,
+            right: defaultValue,
+            bottom: defaultValue,
+            left: defaultValue,
+        };
+    }
+    if (typeof padding === 'number') {
+        return { top: padding, right: padding, bottom: padding, left: padding };
+    }
+    if (padding.length === 2) {
+        const [vertical, horizontal] = padding;
+        return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
+    }
+    if (padding.length === 3) {
+        const [top, horizontal, bottom] = padding;
+        return { top, right: horizontal, bottom, left: horizontal };
+    }
+    const [top, right, bottom, left] = padding;
+    return { top, right, bottom, left };
+}
+function isZeroScreenPadding(padding) {
+    return padding.top === 0 && padding.right === 0 && padding.bottom === 0 && padding.left === 0;
+}
+
+/** 拖拽超过该像素阈值时视为平移，而非点击 */
+const PAN_CLICK_THRESHOLD_PX = 5;
+/**
+ * 根据地图包围盒 + padding 计算「内容 viewBox」
+ * 用于 ChannelClipPath 裁剪，padding 为 SVG 坐标系单位
+ */
+function boundsToContentViewBox(bounds, padding) {
+    if (!Number.isFinite(bounds.minX) || !Number.isFinite(bounds.maxX)) {
+        return { x: 0, y: 0, width: 100, height: 100 };
+    }
+    const width = Math.max(bounds.maxX - bounds.minX + padding * 2, 1);
+    const height = Math.max(bounds.maxY - bounds.minY + padding * 2, 1);
+    return {
+        x: bounds.minX - padding,
+        y: bounds.minY - padding,
+        width,
+        height,
+    };
+}
+/**
+ * 在固定容器宽高比下，计算 fit 的 viewBox（等价于 SVG preserveAspectRatio="meet"）
+ *
+ * 若内容与容器比例不一致，会在 SVG 坐标系中扩展 viewBox 的宽或高，形成 letterbox 区域
+ */
+function computeFitViewBoxToContainer(content, containerWidth, containerHeight) {
+    const containerAspect = containerWidth / containerHeight;
+    const contentAspect = content.width / content.height;
+    // 内容更「宽」：扩展 viewBox 高度，上下留白
+    if (contentAspect > containerAspect) {
+        const height = content.width / containerAspect;
+        return {
+            x: content.x,
+            y: content.y - (height - content.height) / 2,
+            width: content.width,
+            height,
+        };
+    }
+    // 内容更「高」：扩展 viewBox 宽度，左右留白
+    const width = content.height * containerAspect;
+    return {
+        x: content.x - (width - content.width) / 2,
+        y: content.y,
+        width,
+        height: content.height,
+    };
+}
+/** 地图内容在屏幕坐标系下的包围盒（meet 渲染，未考虑旋转） */
+function getContentScreenBounds(content, viewBox, containerWidth, containerHeight) {
+    const { x: offsetX, y: offsetY, scale } = getViewBoxMeetOffset(viewBox, containerWidth, containerHeight);
+    return {
+        left: offsetX + (content.x - viewBox.x) * scale,
+        top: offsetY + (content.y - viewBox.y) * scale,
+        right: offsetX + (content.x + content.width - viewBox.x) * scale,
+        bottom: offsetY + (content.y + content.height - viewBox.y) * scale,
+    };
+}
+function contentFitsInScreenPadding(content, viewBox, pad, containerWidth, containerHeight) {
+    const bounds = getContentScreenBounds(content, viewBox, containerWidth, containerHeight);
+    return (bounds.left >= pad.left &&
+        bounds.top >= pad.top &&
+        bounds.right <= containerWidth - pad.right &&
+        bounds.bottom <= containerHeight - pad.bottom);
+}
+function expandViewBoxFromCenter(viewBox, factor) {
+    const centerX = viewBox.x + viewBox.width / 2;
+    const centerY = viewBox.y + viewBox.height / 2;
+    const width = viewBox.width * factor;
+    const height = viewBox.height * factor;
+    return {
+        x: centerX - width / 2,
+        y: centerY - height / 2,
+        width,
+        height,
+    };
+}
+/** 将 viewBox 中心对齐到 padding 内矩形中心（增大 top/left → 内容向对应方向避让） */
+function applyViewBoxPaddingOffset(viewBox, pad, containerWidth, containerHeight) {
+    const offsetX = ((pad.right - pad.left) / 2) * (viewBox.width / containerWidth);
+    const offsetY = ((pad.bottom - pad.top) / 2) * (viewBox.height / containerHeight);
+    return {
+        ...viewBox,
+        x: viewBox.x + offsetX,
+        y: viewBox.y + offsetY,
+    };
+}
+function buildPaddedFitViewBox(baseFit, pad, containerWidth, containerHeight, zoomOutFactor) {
+    const expanded = expandViewBoxFromCenter(baseFit, zoomOutFactor);
+    return applyViewBoxPaddingOffset(expanded, pad, containerWidth, containerHeight);
+}
+function findMinimumZoomOutForPadding(content, baseFit, pad, containerWidth, containerHeight) {
+    const fits = (zoomOutFactor) => contentFitsInScreenPadding(content, buildPaddedFitViewBox(baseFit, pad, containerWidth, containerHeight, zoomOutFactor), pad, containerWidth, containerHeight);
+    if (fits(1)) {
+        return 1;
+    }
+    const innerWidth = Math.max(containerWidth - pad.left - pad.right, 1);
+    const innerHeight = Math.max(containerHeight - pad.top - pad.bottom, 1);
+    const legacyScale = Math.min(innerWidth / containerWidth, innerHeight / containerHeight);
+    let hi = legacyScale > 0 && legacyScale < 1 ? 1 / legacyScale : 2;
+    while (!fits(hi) && hi < 1024) {
+        hi *= 2;
+    }
+    let lo = 1;
+    for (let i = 0; i < 32; i++) {
+        const mid = (lo + hi) / 2;
+        if (fits(mid)) {
+            hi = mid;
+        }
+        else {
+            lo = mid;
+        }
+    }
+    return hi;
+}
+/**
+ * 计算默认 fit viewBox
+ *
+ * @param screenPadding 容器四边留出的屏幕边距（px），语法同 CSS padding
+ */
+function computeFitViewBox(content, containerWidth, containerHeight, screenPadding = 0) {
+    const baseFit = computeFitViewBoxToContainer(content, containerWidth, containerHeight);
+    const pad = normalizeScreenPadding(screenPadding, 0);
+    if (isZeroScreenPadding(pad)) {
+        return baseFit;
+    }
+    const zoomOutFactor = findMinimumZoomOutForPadding(content, baseFit, pad, containerWidth, containerHeight);
+    return buildPaddedFitViewBox(baseFit, pad, containerWidth, containerHeight, zoomOutFactor);
+}
+function viewBoxToString(viewBox) {
+    return `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`;
+}
+/** SVG preserveAspectRatio="xMidYMid meet" 下的实际缩放比（地图单位 → 屏幕 px） */
+function getViewBoxMeetScale(viewBox, containerWidth, containerHeight) {
+    return Math.min(containerWidth / viewBox.width, containerHeight / viewBox.height);
+}
+/** meet 模式下 SVG 内容相对容器左上角的 letterbox 偏移及缩放比 */
+function getViewBoxMeetOffset(viewBox, containerWidth, containerHeight) {
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    return {
+        x: (containerWidth - viewBox.width * scale) / 2,
+        y: (containerHeight - viewBox.height * scale) / 2,
+        scale,
+    };
+}
+/** 将屏幕坐标绕指定中心旋转（度，顺时针） */
+function rotatePointAround(x, y, centerX, centerY, rotationDeg) {
+    if (rotationDeg === 0)
+        return { x, y };
+    const rad = (rotationDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return {
+        x: centerX + dx * cos - dy * sin,
+        y: centerY + dx * sin + dy * cos,
+    };
+}
+/** 在地图坐标系内绕 viewBox 中心旋转（与 SVG transform="rotate(deg, cx, cy)" 一致） */
+function rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, rotationDeg) {
+    if (rotationDeg === 0)
+        return { x: mapX, y: mapY };
+    const cx = viewBox.x + viewBox.width / 2;
+    const cy = viewBox.y + viewBox.height / 2;
+    return rotatePointAround(mapX, mapY, cx, cy, rotationDeg);
+}
+function getViewBoxCenter(viewBox) {
+    return {
+        x: viewBox.x + viewBox.width / 2,
+        y: viewBox.y + viewBox.height / 2,
+    };
+}
+/**
+ * 将地图坐标转换为 HTML overlay 的定位百分比
+ * 需与 SVG viewBox + preserveAspectRatio="meet" 的渲染规则一致
+ *
+ * @returns leftPct / topPct — 相对容器宽高的百分比，配合 translate(-50%, -50%) 居中
+ */
+function mapPointToContainerPercent(mapX, mapY, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
+    const { x: offsetX, y: offsetY, scale } = getViewBoxMeetOffset(viewBox, containerWidth, containerHeight);
+    const { x: projectedX, y: projectedY } = rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, mapRotationDeg);
+    const screenX = offsetX + (projectedX - viewBox.x) * scale;
+    const screenY = offsetY + (projectedY - viewBox.y) * scale;
+    return {
+        leftPct: (screenX / containerWidth) * 100,
+        topPct: (screenY / containerHeight) * 100,
+    };
+}
+/** 计算多边形包围盒在当前视口下的屏幕宽度（px） */
+function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerHeight) {
+    const valid = points.filter((point) => point.length >= 2);
+    if (valid.length === 0)
+        return 0;
+    let minX = Infinity;
+    let maxX = -Infinity;
+    for (const [x] of valid) {
+        minX = Math.min(minX, x);
+        maxX = Math.max(maxX, x);
+    }
+    const mapWidth = maxX - minX;
+    if (!Number.isFinite(mapWidth) || mapWidth <= 0)
+        return 0;
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    return mapWidth * scale;
+}
+function scaleStrokeWidthForViewBox(viewBox, options) {
+    const { containerWidth, containerHeight, targetScreenStrokePx = 2 } = options;
+    const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    if (meetScale <= 0 || !Number.isFinite(targetScreenStrokePx)) {
+        return targetScreenStrokePx;
+    }
+    return targetScreenStrokePx / meetScale;
+}
+/** 屏幕拖拽像素 → viewBox 坐标增量（与 mapPointToContainerPercent 互逆，供 applyPan 使用） */
+function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
+    const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
+    if (mapRotationDeg === 0) {
+        return {
+            dx: deltaXPx / scale,
+            dy: deltaYPx / scale,
+        };
+    }
+    // 地图在屏幕上旋转了 mapRotationDeg，将屏幕位移矢量逆旋转后再换算为 viewBox 增量
+    const rad = (-mapRotationDeg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const mapDeltaXPx = deltaXPx * cos - deltaYPx * sin;
+    const mapDeltaYPx = deltaXPx * sin + deltaYPx * cos;
+    return {
+        dx: mapDeltaXPx / scale,
+        dy: mapDeltaYPx / scale,
+    };
+}
+/**
+ * 限制 viewBox 宽度在 zoom 范围内
+ *
+ * zoom = fitViewBox.width / viewBox.width
+ * - zoom 越大 → viewBox 越小 → 放得越大
+ * - minZoom=0.5 → 最多缩小到 fit 的 2 倍视野（viewBox.width 最大为 fit/0.5）
+ * - maxZoom=4   → 最多放大 4 倍（viewBox.width 最小为 fit/4）
+ */
+function clampViewBoxWidth(width, fitViewBox, minZoom, maxZoom) {
+    const minWidth = fitViewBox.width / maxZoom;
+    const maxWidth = fitViewBox.width / minZoom;
+    return Math.min(maxWidth, Math.max(minWidth, width));
+}
+/**
+ * 以屏幕 focal 点为中心缩放 viewBox
+ * 将容器像素坐标转换为 SVG 坐标，保持焦点下的地图点位置不变
+ *
+ * @param viewBox 缩放前的 viewBox
+ * @param newWidth 缩放后的 viewBox 宽度（高度按容器宽高比推导）
+ * @param containerWidth 容器宽度（px）
+ * @param containerHeight 容器高度（px）
+ * @param focalX 焦点相对容器左上角的 X（px）
+ * @param focalY 焦点相对容器左上角的 Y（px）
+ */
+function resizeViewBoxAroundPoint(viewBox, newWidth, containerWidth, containerHeight, focalX, focalY) {
+    const containerAspect = containerWidth / containerHeight;
+    const newHeight = newWidth / containerAspect;
+    const relX = focalX / containerWidth;
+    const relY = focalY / containerHeight;
+    const svgFocalX = viewBox.x + relX * viewBox.width;
+    const svgFocalY = viewBox.y + relY * viewBox.height;
+    return {
+        x: svgFocalX - relX * newWidth,
+        y: svgFocalY - relY * newHeight,
+        width: newWidth,
+        height: newHeight,
+    };
+}
+
+const useChargingPile = ({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, }) => {
     const { svgElementDatas } = useSvgEditContext();
     const { sn } = useCommonContext();
+    const useMeetPositioning = containerWidth != null &&
+        containerHeight != null &&
+        containerWidth > 0 &&
+        containerHeight > 0;
     const items = React.useMemo(() => {
         if (!svgElementDatas || !viewBox)
             return [];
@@ -23199,13 +23706,26 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
             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)) {
+            const actualRotation = viewRotationMode === 'svg-transform'
+                ? rotationDegree
+                : rotationDegree - rotation;
+            let leftPct;
+            let topPct;
+            if (useMeetPositioning) {
+                const position = mapPointToContainerPercent(center[0], center[1], viewBox, containerWidth, containerHeight, viewRotationMode === 'svg-transform' ? rotation : 0);
+                leftPct = position.leftPct;
+                topPct = position.topPct;
+            }
+            else {
+                const relX = (center[0] - viewBox.x) / viewBox.width;
+                const relY = (center[1] - viewBox.y) / viewBox.height;
+                leftPct = relX * 100;
+                topPct = relY * 100;
+            }
+            if (isFinite(leftPct) && isFinite(topPct)) {
                 results.push({
-                    leftPct: relX * 100,
-                    topPct: relY * 100,
+                    leftPct,
+                    topPct,
                     size,
                     rotateDeg: actualRotation,
                     imageSrc: chargingPileImage,
@@ -23213,12 +23733,30 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
             }
         }
         return results;
-    }, [svgElementDatas, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, rotation, sn]);
+    }, [
+        svgElementDatas,
+        viewBox?.x,
+        viewBox?.y,
+        viewBox?.width,
+        viewBox?.height,
+        rotation,
+        viewRotationMode,
+        sn,
+        useMeetPositioning,
+        containerWidth,
+        containerHeight,
+    ]);
     return items;
 };
 
-const CharginPile = React.memo(({ viewBox, rotation = 0, sizeScale = 1, sizeInSvgUnits = false, isHighlight = true, }) => {
-    const items = useChargingPile({ viewBox: viewBox || null, rotation });
+const CharginPile = React.memo(({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, sizeScale = 1, sizeInSvgUnits = false, minDisplaySizePx, isHighlight = true, }) => {
+    const items = useChargingPile({
+        viewBox: viewBox || null,
+        rotation,
+        viewRotationMode,
+        containerWidth,
+        containerHeight,
+    });
     const containerStyle = React.useMemo(() => ({
         position: 'absolute',
         top: 0,
@@ -23229,13 +23767,18 @@ const CharginPile = React.memo(({ viewBox, rotation = 0, sizeScale = 1, sizeInSv
         zIndex: 750,
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [isHighlight]);
+    const useMinPx = Boolean(sizeInSvgUnits && viewBox && minDisplaySizePx != null && minDisplaySizePx > 0);
     return (jsxRuntime.jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsxRuntime.jsx("div", { className: "charging-pile", style: {
                 position: 'absolute',
                 width: sizeInSvgUnits && viewBox
-                    ? `${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%`
+                    ? useMinPx
+                        ? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%)`
+                        : `${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%`
                     : item.size * sizeScale,
                 height: sizeInSvgUnits && viewBox
-                    ? `${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%`
+                    ? useMinPx
+                        ? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%)`
+                        : `${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%`
                     : item.size * sizeScale,
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
@@ -23248,8 +23791,10 @@ const CharginPile = React.memo(({ viewBox, rotation = 0, sizeScale = 1, sizeInSv
 const MAX_STATIC_SIZE = 640;
 const MAX_STATIC_MAP_RETRY = 3;
 const STATIC_MAP_RETRY_COOLDOWN_MS = 5000;
+/** 放大镜内充电桩屏幕像素下限，避免过小导致通道与桩视觉错位 */
+const MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX = 20;
 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 { svgViewBox, mapRef, googleMapStaticApiKey, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl: signGoogleStaticMapUrl$1, drag, } = useCommonContext();
     const { svgElementDatas, svgRef } = useSvgEditContext();
     const { editMapInfo } = useMapEditContext();
     const [magnifierPosition, setMagnifierPosition] = React.useState({ x: 0, y: 0 });
@@ -23337,76 +23882,107 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
         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 };
+            let cancelled = false;
+            (async () => {
+                // console.log('[Magnifier] Background source: static api viewport snapshot');
+                const mapBounds = mapRef.getBounds?.();
+                if (!mapBounds) {
+                    // console.log('[Magnifier] Skip static map effect: mapBounds missing');
+                    if (!cancelled) {
+                        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) {
+                    if (!cancelled) {
+                        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 unsignedStaticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
+                // 可选：对 Static Map URL 做 Google 数字签名（宿主回调优先，其次客户端 signing secret）
+                let staticMapUrl = unsignedStaticMapUrl;
+                try {
+                    if (signGoogleStaticMapUrl$1) {
+                        staticMapUrl = await Promise.resolve(signGoogleStaticMapUrl$1(unsignedStaticMapUrl));
+                    }
+                    else if (googleMapStaticUrlSigningSecret) {
+                        staticMapUrl = await signGoogleStaticMapUrl(unsignedStaticMapUrl, googleMapStaticUrlSigningSecret);
+                        console.log('[Magnifier] staticMapUrl', staticMapUrl);
+                    }
+                }
+                catch (error) {
+                    console.warn('[Magnifier] Static map URL signing failed', error);
+                    if (!cancelled) {
+                        setMapImageFrame(null);
+                    }
+                    return;
+                }
+                // 通过三角点推导静态图在 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 : 0;
+                /**
+                 * 计算补偿后的新左上角：
+                 * 从原左上角沿“右方向”回退半个扩展量，再沿“下方向”回退半个扩展量。
+                 * 这样放大后仍以原区域中心为中心，不会放大后位置偏移。
+                 */
+                const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
+                const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
+                if (cancelled) {
+                    return;
+                }
+                setMapImageFrame({
+                    url: staticMapUrl,
+                    x: compensatedTopLeftX,
+                    y: compensatedTopLeftY,
+                    width: compensatedWidth,
+                    height: compensatedHeight,
+                    transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
+                });
+            })();
+            return () => {
+                cancelled = true;
             };
-            // 使用当前地图视口矩形四角，将屏幕坐标映射到 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);
@@ -23426,6 +24002,8 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
         size,
         zoom,
         googleMapStaticApiKey,
+        googleMapStaticUrlSigningSecret,
+        signGoogleStaticMapUrl$1,
         staticMapRetryCount,
         staticMapBlockedUntil,
     ]);
@@ -23601,16 +24179,16 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
                                     ? 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, sizeInSvgUnits: true, 
+                            })] })), 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, sizeInSvgUnits: true, minDisplaySizePx: MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX, 
                 // 充电桩最多保持原始尺寸，不允许放大超过 1 倍
                 sizeScale: Math.min(1, 1 / styleZoomFactor) })] }));
     // 使用 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);
+var css_248z$8 = ".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$8 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
+styleInject(css_248z$8);
 
 /**
  * 几何计算工具函数
@@ -24033,34 +24611,126 @@ const useCheckElement = () => {
     };
 };
 
+var css_248z$7 = ".Tooltip-module_tooltip__Wexlk {\n  position: fixed;\n  background-color: #fff;\n  border-radius: 4px;\n  height: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  color: #211F1F;\n  padding: 0 4px;\n  white-space: nowrap;\n  z-index: 9999;\n  cursor: pointer;\n  user-select: none;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme {\n  height: 30px;\n  padding: 5px 12px;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme:hover {\n  background-color: #FFEFE6;\n  color: #FF5A00;\n}";
+var styles$7 = {"tooltip":"Tooltip-module_tooltip__Wexlk","tooltipHover":"Tooltip-module_tooltipHover__Tfqme"};
+styleInject(css_248z$7);
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames () {
+			var classes = '';
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
+				}
+			}
+
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}()); 
+} (classnames));
+
+var classnamesExports = classnames.exports;
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
 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 ReactDOM.createPortal(jsxRuntime.jsx("div", { style: tooltipStyle, onClick: (e) => {
+    return ReactDOM.createPortal(jsxRuntime.jsx("div", { className: classNames(styles$7.tooltip, {
+            [styles$7.tooltipHover]: !!onClick,
+        }), style: tooltipStyle, onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
             onClick?.();
         }, children: text }), document.body);
 };
 
+function getPathData(points) {
+    // 1. 安全守卫：如果没有点，返回空字符串
+    if (!points || points.length === 0)
+        return '';
+    // 2. 如果只有 1 个点，只生成起点 M 即可（或者在最外层判断中直接 return 过滤掉）
+    if (points.length === 1) {
+        return `M ${points[0][0]} ${points[0][1]}`;
+    }
+    // 3. 2个点及以上时，再进行 L 拼接
+    const pathData = points.map((p, index) => {
+        if (index === 0) {
+            return `M ${p[0]} ${p[1]}`;
+        }
+        return ` L ${p[0]} ${p[1]}`;
+    }).join('');
+    return pathData;
+}
+
 /**
  * 将坐标点数组转换为polygon points字符串
  * @param coordinates 坐标点数组 [[x1, y1], [x2, y2], ...]
@@ -24144,15 +24814,12 @@ const groupCoordinatesByType = (coordinates, autoClose = true) => {
 const createPathData = (points) => {
     if (points.length < 2)
         return '';
-    let pathData = `M ${points[0][0]} ${points[0][1]}`;
-    for (let i = 1; i < points.length; i++) {
-        pathData += ` L ${points[i][0]} ${points[i][1]}`;
-    }
+    const pathData = getPathData(points);
     return pathData;
 };
 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, platform, onH5FirstSelectObstaclePoint } = useCommonContext();
+    const { overlayScale, unitType, showStraddleBoundaryBorder, platform, locale, onH5FirstSelectObstaclePoint, } = useCommonContext();
     const { onHandleEvent } = useMapEditContext();
     const { svgRef } = useSvgEditContext();
     const [dragState, setDragState] = React.useState({
@@ -24200,11 +24867,12 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     const [tooltipIndex, setTooltipIndex] = React.useState(null);
     const [tooltipPos, setTooltipPos] = React.useState({ x: 0, y: 0 });
     const [completeTooltipOpen, setCompleteTooltipOpen] = React.useState(false);
+    const [moveTooltipOpen, setMoveTooltipOpen] = React.useState(false);
     const updateTooltipPos = (target) => {
         const rect = target.getBoundingClientRect();
         setTooltipPos({
             x: rect.left + rect.width + 4,
-            y: rect.top - 10
+            y: rect.top - 10,
         });
     };
     // 处理顶点点击（仅透出点击；不触发删除）
@@ -24339,6 +25007,13 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
             edgeInfo: edgeInfo,
             dragType: 'new',
         });
+        // 边上新点：insertIndex 可能与当前 selectedVertexIndex 相同（例如原选中 2，在 1-2 间插入后仍写 2），
+        // React 会跳过 setState，依赖 selectedVertexIndex 的 useLayoutEffect 不会跑，故用微任务直接震一次
+        if (platform === exports.PlatformType.H5 && editMapInfo?.elementType === exports.DataType.OBSTACLE) {
+            void Promise.resolve().then(() => {
+                onH5FirstSelectObstaclePoint?.();
+            });
+        }
         // 将新创建的点设为选中态，便于后续直接拖拽
         setSelectedVertexIndex(insertIndex);
     }, [
@@ -24349,6 +25024,9 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
         coordinates,
         getSVGCoordinates,
         calculatePerpendicularFoot$1,
+        platform,
+        editMapInfo?.elementType,
+        onH5FirstSelectObstaclePoint,
     ]);
     // H5平台长按边线创建新顶点
     const handleEdgeLongPressStart = React.useCallback((e, edgeStartIndex) => {
@@ -24393,6 +25071,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     const vertexLongPressTimerRef = React.useRef(null);
     const isVertexLongPressedRef = React.useRef(false);
     const longPressVertexIndexRef = React.useRef(-1);
+    /** 长按选中顶点且 index 发生变化时置 true，在 useLayoutEffect 里再触发震动，避免早于视觉选中态 */
+    const pendingH5ObstacleSelectHapticRef = React.useRef(false);
     // 长按拖拽判定相关
     const touchStartPosRef = React.useRef(null);
     const hasStartedDragViaLongPressRef = React.useRef(false);
@@ -24413,13 +25093,21 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
         vertexLongPressTimerRef.current = window.setTimeout(() => {
             isVertexLongPressedRef.current = true;
             setSelectedVertexIndex((prev) => {
-                if (prev !== index) {
-                    onH5FirstSelectObstaclePoint?.();
-                }
+                pendingH5ObstacleSelectHapticRef.current = prev !== index;
                 return index;
             });
         }, 1000);
-    }, [editMode, createMode, completed, dragState.isDragging, onH5FirstSelectObstaclePoint]);
+    }, [editMode, createMode, completed, dragState.isDragging]);
+    React.useLayoutEffect(() => {
+        if (!pendingH5ObstacleSelectHapticRef.current)
+            return;
+        pendingH5ObstacleSelectHapticRef.current = false;
+        if (platform !== exports.PlatformType.H5)
+            return;
+        if (editMapInfo?.elementType !== exports.DataType.OBSTACLE)
+            return;
+        onH5FirstSelectObstaclePoint?.();
+    }, [selectedVertexIndex, platform, editMapInfo?.elementType, onH5FirstSelectObstaclePoint]);
     const handleVertexLongPressEnd = React.useCallback(() => {
         if (vertexLongPressTimerRef.current !== null) {
             window.clearTimeout(vertexLongPressTimerRef.current);
@@ -24448,8 +25136,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
     }, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
     const generateVertexClassName = React.useMemo(() => {
         if (!dragState.isDragging)
-            return styles$6.pointerCursor;
-        return showNotCreateCursor ? styles$6.notCreate : styles$6.dragging;
+            return styles$8.pointerCursor;
+        return showNotCreateCursor ? styles$8.notCreate : styles$8.dragging;
     }, [dragState.isDragging, showNotCreateCursor]);
     // 使用 useRef 来存储 requestAnimationFrame ID
     const rafIdRef = React.useRef(null);
@@ -24740,7 +25428,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                         WebkitTouchCallout: 'none',
                                         touchAction: 'none',
                                     } })] }));
-                    })()] })), renderCoordinates.length >= 2 && (jsxRuntime.jsx("polygon", { className: canSelect ? styles$6.pointerCursor : '', points: polygonPoints, fill: isHover ? (hoverFillColor || fillColor) : fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
+                    })()] })), renderCoordinates.length >= 2 && (jsxRuntime.jsx("polygon", { className: canSelect ? styles$8.pointerCursor : '', points: polygonPoints, fill: isHover ? hoverFillColor || fillColor : fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
                 , onClick: onPolygonClick })), jsxRuntime.jsx("g", { children: renderCoordinates.length >= 2 &&
                     pathSegments.map((segment, index) => {
                         if (segment.points.length < 2)
@@ -24748,30 +25436,45 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                         const pathData = createPathData(segment.points);
                         const isDash = segment.type === 1;
                         if (isDash && showStraddleBoundaryBorder) {
-                            return (jsxRuntime.jsx(DashPath, { className: canSelect ? styles$6.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
+                            return (jsxRuntime.jsx(DashPath, { className: canSelect ? styles$8.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
                         }
-                        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(editMode || createMode) && (jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: '#fff', strokeWidth: strokeWidth * 2, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", style: {
+                        return (jsxRuntime.jsxs(React.Fragment, { children: [(editMode || createMode) && (jsxRuntime.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)), jsxRuntime.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: {
+                                    } })), jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$8.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
                                         userSelect: 'none',
                                         WebkitUserSelect: 'none',
                                         WebkitTouchCallout: 'none',
                                         touchAction: 'none',
-                                    } }, index)] }));
+                                    } }, index)] }, 'warp' + index));
                     }) }), (editMode || (createMode && completed)) &&
                 renderCoordinates.length >= 2 &&
                 renderCoordinates.map((coord, index) => {
                     const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
                     const isDashPath = coord[2] === 1;
-                    return (jsxRuntime.jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === exports.PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: editMode ? styles$6.pointerCursor : '', style: {
-                            userSelect: 'none',
-                            WebkitUserSelect: 'none',
-                            WebkitTouchCallout: 'none',
-                            touchAction: 'none',
-                        }, vectorEffect: "non-scaling-stroke", ...(platform === exports.PlatformType.H5
+                    const edgeLineCommon = {
+                        x1: coord[0],
+                        y1: coord[1],
+                        x2: nextCoord[0],
+                        y2: nextCoord[1],
+                    };
+                    const edgeLineStyle = {
+                        userSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        WebkitTouchCallout: 'none',
+                        touchAction: 'none',
+                    };
+                    // H5 实线：透明粗线仅作长按热区，描边只看上方 path；H5 虚线/Web：沿用透明或主题色边线 + 对应事件（合并为一个 line，避免两段重复）
+                    const isH5SolidHitOnly = platform === exports.PlatformType.H5 && ((editMode && !isDashPath) || createMode);
+                    const edgeStroke = isH5SolidHitOnly || isDashPath ? 'transparent' : strokeColor;
+                    const edgeStrokeWidth = isH5SolidHitOnly
+                        ? strokeWidth * 12
+                        : platform === exports.PlatformType.H5
+                            ? strokeWidth * 2
+                            : strokeWidth;
+                    return (jsxRuntime.jsx("line", { ...edgeLineCommon, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, ...(isH5SolidHitOnly ? { strokeLinecap: 'round' } : {}), className: editMode ? styles$8.pointerCursor : '', style: edgeLineStyle, vectorEffect: "non-scaling-stroke", ...(platform === exports.PlatformType.H5
                             ? {
                                 onTouchStart: createReactEventHandler((e) => handleEdgeLongPressStart(e, index)),
                                 onTouchEnd: createReactEventHandler(() => handleEdgeLongPressEnd()),
@@ -24841,7 +25544,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                         isDoubleClickingRef.current = false;
                                     }, 300);
                                     // 打开删除确认 Tooltip（仅在可编辑时）
-                                    if (editMode || (createMode && completed)) {
+                                    if ((editMode || (createMode && completed)) && renderCoordinates.length > 3) {
                                         updateTooltipPos(e.target);
                                         setTooltipIndex(idx);
                                     }
@@ -24918,13 +25621,25 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                                                 }
                                             }
                                         },
-                                        onMouseEnter: canComplete ? (e) => {
-                                            setCompleteTooltipOpen(true);
-                                            updateTooltipPos(e.target);
-                                        } : undefined,
-                                        onMouseLeave: canComplete ? () => {
-                                            setCompleteTooltipOpen(false);
-                                        } : undefined,
+                                        onMouseEnter: (e) => {
+                                            if (canComplete) {
+                                                setCompleteTooltipOpen(true);
+                                            }
+                                            if (editMode || (createMode && completed)) {
+                                                setMoveTooltipOpen(true);
+                                            }
+                                            if (tooltipIndex === null) {
+                                                updateTooltipPos(e.target);
+                                            }
+                                        },
+                                        onMouseLeave: () => {
+                                            if (canComplete) {
+                                                setCompleteTooltipOpen(false);
+                                            }
+                                            if (editMode || (createMode && completed)) {
+                                                setMoveTooltipOpen(false);
+                                            }
+                                        },
                                     }) }), platform === exports.PlatformType.H5 && tooltipIndex === idx && coordinates.length > 3 && (jsxRuntime.jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -24948,12 +25663,16 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
                             // >
                             // </rect>
                             )] }, `vertex-${idx}`));
-                }), platform === exports.PlatformType.WEB && tooltipIndex !== null && (jsxRuntime.jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Remove", onClick: () => {
-                    if (onVertexDelete && (editMode || (createMode && completed)) && coordinates.length > 3) {
+                }), platform === exports.PlatformType.WEB && tooltipIndex !== null && (jsxRuntime.jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.remove'] || 'Remove', onClick: () => {
+                    if (onVertexDelete &&
+                        (editMode || (createMode && completed)) &&
+                        coordinates.length > 3) {
                         onVertexDelete(renderCoordinates?.length - 1 - tooltipIndex);
                     }
                     setTooltipIndex(null);
-                } })), platform === exports.PlatformType.WEB && completeTooltipOpen && (jsxRuntime.jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: "Click to finish" }))] }));
+                } })), platform === exports.PlatformType.WEB && completeTooltipOpen && (jsxRuntime.jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.tips.clickFinish'] || 'Click to finish' })), platform === exports.PlatformType.WEB && moveTooltipOpen && tooltipIndex === null && (jsxRuntime.jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: renderCoordinates.length > 3 ?
+                    (locale?.['map.renderer.tips.dragAndRemove'] || 'Drag to change, double click to remove') :
+                    (locale?.['map.renderer.tips.drag'] || 'Drag to change') }))] }));
 };
 
 const MowPartitionContext = React.createContext({
@@ -25033,17 +25752,15 @@ const BoundaryElement = ({ data, isHover }) => {
 };
 
 const ChannelElement = ({ data }) => {
-    const { sn } = useCommonContext();
+    const { channelClipPathId } = useCommonContext();
+    const clipPathUrl = `url(#${channelClipPathId})`;
     const points = data.points;
     const style = data.style;
-    let pathData = `M ${points[0][0]} ${points[0][1]}`;
-    for (let i = 1; i < points.length; i++) {
-        pathData += ` L ${points[i][0]} ${points[i][1]}`;
-    }
+    const pathData = getPathData(points);
     const topLineWidth = dp2px(style.lineWidth).toString();
     const bottomLineWidth = dp2px(style.bottomLineWidth).toString();
     const dashLength = dp2px(style.lineWidth);
-    return (jsxRuntime.jsxs("g", { id: data.id.toString(), children: [jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath: `url(#channel-clip-path-${sn})` } }), jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: "#FFFFFF", strokeWidth: topLineWidth, strokeLinejoin: "round", strokeDasharray: `${dashLength * 2} ${dashLength}`, opacity: style.opacity || 1, style: { clipPath: `url(#channel-clip-path-${sn})` } })] }));
+    return (jsxRuntime.jsxs("g", { id: data.id.toString(), children: [jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath: clipPathUrl } }), jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: "#FFFFFF", strokeWidth: topLineWidth, strokeLinejoin: "round", strokeDasharray: `${dashLength * 2} ${dashLength}`, opacity: style.opacity || 1, style: { clipPath: clipPathUrl } })] }));
 };
 
 /**
@@ -25169,10 +25886,11 @@ const ObstacleElement = ({ data, isHover }) => {
     const strokeWidth = React.useMemo(() => {
         // 如果是h5选中的情况下，禁区只有在start模式下才需要加粗
         // 其他模式展示的是其他的样式
-        if (platform === exports.PlatformType.H5 &&
+        if ((platform === exports.PlatformType.H5 &&
             editMapInfo?.selectElement?.id === data.id &&
-            editMapInfo.mobileMode === exports.MobileEditMode.START) {
-            return dp2px((style.lineWidth || 1) * 2);
+            editMapInfo.mobileMode === exports.MobileEditMode.START) ||
+            editMapInfo.mobileMode === exports.MobileEditMode.EDIT) {
+            return dp2px((style.lineWidth || 1) * 2.2);
             // return dp2px(((style.lineWidth as number) || 3) * 3);
         }
         return dp2px(style.lineWidth || 3);
@@ -25207,7 +25925,10 @@ const ObstacleElement = ({ data, isHover }) => {
         }
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
-    return (jsxRuntime.jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType) && editMap, points: currentPoints, fillColor: style.fillColor, hoverFillColor: style.hoverFillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, isHover: isHover, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
+    const disabled = React.useMemo(() => {
+        return data?.status === 0 && !editMode;
+    }, [data?.status, editMode, editMapInfo?.createMode]);
+    return (jsxRuntime.jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType) && editMap, points: currentPoints, fillColor: disabled ? style.disabledFillColor : style.fillColor, hoverFillColor: style.hoverFillColor, fillOpacity: style.fillOpacity, strokeColor: disabled ? style.disabledLineColor : style.lineColor, strokeWidth: strokeWidth, editMode: editMode, isHover: isHover, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
             onPathClick();
         }, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
             if (platform === exports.PlatformType.H5 && editMapInfo.mobileMode === exports.MobileEditMode.CREATE) {
@@ -25632,15 +26353,15 @@ const useVisionOffTransform = (data, scaleConstraints
     };
 };
 
-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 _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 SvgTransformDelete = function SvgTransformDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#transform-delete_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 10,
@@ -25663,7 +26384,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
     fill: "#fff",
     rx: 0.8,
     transform: "rotate(45 6.323 5.191)"
-  }))), _defs$6 || (_defs$6 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "transform-delete_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -25683,15 +26404,15 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
   })))));
 };
 
-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 _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 SvgTransformRotate = function SvgTransformRotate(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#transform-rotate_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#transform-rotate_svg__b)",
@@ -25699,7 +26420,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
   }), /*#__PURE__*/React__namespace.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$5 || (_defs$5 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "transform-rotate_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -25719,15 +26440,15 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
   })))));
 };
 
-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 _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 SvgTransformScale = function SvgTransformScale(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#transform-scale_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#transform-scale_svg__b)",
@@ -25735,7 +26456,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
   }), /*#__PURE__*/React__namespace.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$4 || (_defs$4 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "transform-scale_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -25755,15 +26476,15 @@ var SvgTransformScale = function SvgTransformScale(props) {
   })))));
 };
 
-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, _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 SvgTransformTranslate = function SvgTransformTranslate(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#transform-translate_svg__a)"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     cx: 10,
@@ -25773,7 +26494,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
   }), /*#__PURE__*/React__namespace.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$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "transform-translate_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -25808,6 +26529,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
     // 使用自定义hook管理所有变换逻辑
     const { currentPoints, isDragging, isRotating, isScaling, dimensions, initializePoints, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, // 从hook获取containerRef
      } = useVisionOffTransform(dataPoints);
+    const [hoverType, setHoverType] = React.useState(null);
     const visionOffData = React.useMemo(() => {
         return {
             ...data,
@@ -25968,7 +26690,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleCancel,
-                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformDelete, {}) }) })), jsxRuntime.jsx("g", { className: "control-point rotate-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformDelete, {}) }) })), jsxRuntime.jsx("g", { className: "control-point rotate-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleRotateStartWithDisabled(e);
@@ -25976,7 +26698,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleRotateStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformRotate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point move-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformRotate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point move-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -25984,7 +26706,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleMouseDownWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformTranslate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point scale-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformTranslate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point scale-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleScaleStartWithDisabled(e);
@@ -25992,7 +26714,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -26446,100 +27168,9 @@ 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__namespace.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#disabled-rotate_svg__a)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#211F1F",
-    fillOpacity: 0.4,
-    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
-  }), /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "disabled-rotate_svg__a"
-  }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#disabled-scale_svg__a)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#211F1F",
-    fillOpacity: 0.4,
-    d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"
-  }), /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "disabled-scale_svg__a"
-  }, /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#disabled-translate_svg__a)"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 8,
-    fill: "#fff"
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 8,
-    fill: "#211F1F",
-    fillOpacity: 0.4
-  }), /*#__PURE__*/React__namespace.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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "disabled-translate_svg__a"
-  }, /*#__PURE__*/React__namespace.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);
+var css_248z$6 = ".index-module_doodleHover__jIZHV path {\n  fill: #00B3A1;\n}";
+var styles$6 = {"doodleHover":"index-module_doodleHover__jIZHV"};
+styleInject(css_248z$6);
 
 const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) => {
     const { editMapInfo } = useMapEditContext();
@@ -26598,7 +27229,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
             return (jsxRuntime.jsx("g", { children: jsxRuntime.jsx("g", { style: {
                         cursor: canSelect ? 'pointer' : 'inherit',
                         pointerEvents: canSelect ? 'auto' : 'none',
-                    }, className: isHover ? styles$5.doodleHover : '', transform: transform, opacity: data?.style?.opacity || 1, dangerouslySetInnerHTML: { __html: svgString }, onClick: onDoodleClick }) }));
+                    }, className: isHover ? styles$6.doodleHover : '', transform: transform, opacity: data?.style?.opacity || 1, dangerouslySetInnerHTML: { __html: svgString }, onClick: onDoodleClick }) }));
         }
     }
     catch (error) {
@@ -26608,12 +27239,13 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
 };
 
 const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, isHover = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
-    const { platform, overlayScale, unitType } = useCommonContext();
+    const { platform, overlayScale, unitType, locale } = useCommonContext();
     // 使用自定义hook管理所有变换逻辑
     const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
         minScale,
         onMinScaleReached,
     });
+    const [hoverType, setHoverType] = React.useState(null);
     // 创建变换后的数据对象 - 需要将转换后的坐标转换回原始格式
     const transformedData = React.useMemo(() => {
         // 将转换后的坐标转换回原始格式（除以 SCALE_FACTOR 并翻转 Y 轴）
@@ -26735,7 +27367,6 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         const infoBoxHeight = 40 * overlayScale; // 信息框高度
         const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
         const circleScale = platform === exports.PlatformType.H5 ? 1.5 * overlayScale : 2 * overlayScale;
-        const disacledScale = circleScale * 1.2;
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 === exports.PlatformType.H5
                         ? {
                             onTouchStart: createReactEventHandler((e) => {
@@ -26744,7 +27375,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                         }
                         : {
                         // onMouseDown: handleMouseDownWithDisabled,
-                        }) }), jsxRuntime.jsx("g", { transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsxRuntime.jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsxRuntime.jsx(SvgDisabledRotate, {}) }) }), jsxRuntime.jsx("g", { transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsxRuntime.jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsxRuntime.jsx(SvgDisabledTranslate, {}) }) }), jsxRuntime.jsx("g", { transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { transformOrigin: "center", transform: `translate(-${10 * circleScale}, -${10 * circleScale}) scale(${disacledScale})`, children: jsxRuntime.jsx(SvgDisabledScale, {}) }) }), platform === exports.PlatformType.H5 && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                        }) }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * circleScale, fill: "#B2B4B9", stroke: "none" }), platform === exports.PlatformType.H5 && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
                         onClickInfo?.();
                     }, children: jsxRuntime.jsx("div", { style: {
                             padding: `5px ${10 * overlayScale}px`,
@@ -26764,7 +27395,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                 justifyContent: 'center',
                                 gap: '10px',
                                 color: '#325069',
-                            }, children: jsxRuntime.jsxs("div", { children: ["Remaining time: ", remainingTime] }) }) }) }))] }));
+                            }, children: jsxRuntime.jsxs("div", { children: [locale?.['map.renderer.remainTime'] || 'Remaining time', ": ", remainingTime] }) }) }) }))] }));
     };
     React.useEffect(() => {
         const isMove = isDragging || isRotating || isScaling;
@@ -26816,7 +27447,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     const infoBoxWidth = 300 * overlayScale; // 信息框宽度
                     const infoBoxHeight = 100 * overlayScale; // 信息框高度
                     const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-                    const scale = platform === exports.PlatformType.H5 ? 1.8 * overlayScale : 2 * overlayScale;
+                    const scale = platform === exports.PlatformType.H5 ? 1.8 * overlayScale : 3 * overlayScale;
                     const offsetLeft = 10 * scale;
                     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showInfo && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
                                     onClickInfo?.();
@@ -26837,7 +27468,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 gap: `${10 * overlayScale}px`,
-                                            }, children: jsxRuntime.jsxs("div", { children: ["Active Time: ", activeTime, " >"] }) })] }) })), jsxRuntime.jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === exports.PlatformType.H5
+                                            }, children: jsxRuntime.jsxs("div", { children: [locale?.['map.renderer.activeTime'] || 'Active Time', ": ", activeTime, " >"] }) })] }) })), jsxRuntime.jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -26853,7 +27484,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleCancel,
-                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformDelete, {}) }) })), jsxRuntime.jsx("g", { className: "control-point rotate-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformDelete, {}) }) })), jsxRuntime.jsx("g", { className: "control-point rotate-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleRotateStartWithDisabled(e);
@@ -26861,7 +27492,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleRotateStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformRotate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point move-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformRotate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point move-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -26869,7 +27500,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleMouseDownWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformTranslate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point scale-point", ...(platform === exports.PlatformType.H5
+                                    }), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformTranslate, {}) }) }), jsxRuntime.jsx("g", { className: "control-point scale-point", ...(platform === exports.PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleScaleStartWithDisabled(e);
@@ -26877,7 +27508,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -27318,10 +27949,7 @@ const PathElement = React.forwardRef(({ mapConfig, pathData, mowPartitionData },
                     return;
                 }
                 // 构建路径数据
-                let pathData = `M ${points[0][0]} ${points[0][1]}`;
-                for (let i = 1; i < points.length; i++) {
-                    pathData += ` L ${points[i][0]} ${points[i][1]}`;
-                }
+                const pathData = getPathData(points);
                 // 根据路径类型设置不同的颜色
                 let lineColor;
                 if (pathType === PathSegmentType.TRANS) {
@@ -27354,7 +27982,7 @@ const PathElement = React.forwardRef(({ mapConfig, pathData, mowPartitionData },
         const result = [];
         partitionTypeGroups.forEach((groupData, groupKey) => {
             const { pathData, style } = groupData;
-            if (pathData.length === 0)
+            if (!pathData || pathData.length === 0)
                 return;
             // 从groupKey中提取分区ID
             const partitionId = groupKey.split('-')[0];
@@ -27362,8 +27990,8 @@ const PathElement = React.forwardRef(({ mapConfig, pathData, mowPartitionData },
             const clipPathId = clipPathData[partitionId]?.id;
             if (!clipPathId)
                 return;
-            return result.push({
-                path: (pathData || []).join(' '),
+            result.push({
+                path: pathData.join(' '),
                 style,
                 clipPathId: clipPathId,
             });
@@ -27378,7 +28006,7 @@ const PathElement = React.forwardRef(({ mapConfig, pathData, mowPartitionData },
     return (jsxRuntime.jsxs("g", { id: "path", children: [jsxRuntime.jsx("defs", { children: Object.values(clipPathData).map((item) => {
                     return (jsxRuntime.jsx("clipPath", { id: item.id, clipRule: "evenodd", children: jsxRuntime.jsx("path", { d: item.path }) }, item.id));
                 }) }), Object.values(pathDataObj).map((item) => {
-                return (jsxRuntime.jsx("g", { "clip-path": `url(#${item.clipPathId})`, opacity: "0.5", children: jsxRuntime.jsx("path", { className: "vector-path", d: item.path, fill: "none", "mix-blend-mode": "normal", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": item.style.lineWidth, stroke: item.style.lineColor }) }));
+                return (jsxRuntime.jsx("g", { "clip-path": `url(#${item.clipPathId})`, opacity: "0.5", children: jsxRuntime.jsx("path", { className: "vector-path", d: item.path, fill: "none", "mix-blend-mode": "normal", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: item.style.lineWidth, stroke: item.style.lineColor }) }));
             })] }));
 });
 
@@ -27435,9 +28063,9 @@ const SvgMapComponent = React.forwardRef(({ editMap, pathData, mapConfig = {}, m
 // 设置显示名称以便调试
 SvgMapComponent.displayName = 'SvgMapComponent';
 
-var css_248z$4 = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
-var styles$4 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
-styleInject(css_248z$4);
+var css_248z$5 = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
+var styles$5 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
+styleInject(css_248z$5);
 
 const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
     // DOM 元素引用，用于直接操作
@@ -27596,10 +28224,10 @@ const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData,
         }
         else {
             // 检查位置是否有效
-            const positionOutOfRange = isOutOfRange(mowerPositionData);
+            // const positionOutOfRange = isOutOfRange(mowerPositionData);
             const positionInvalid = isInvalidPosition(mowerPositionData);
             const isStandby = mowerPositionData.vehicleState === RobotStatus.STANDBY;
-            if (positionOutOfRange || positionInvalid || isOffLine) {
+            if (positionInvalid || isOffLine) {
                 // 位置无效时，尝试使用上次位置或充电桩位置
                 updatePositionByLastPosition(mowerPositionData);
             }
@@ -27663,7 +28291,7 @@ const MowerPosition = React.memo(({ editMap, mowerPositionData, viewBox, modelTy
         zIndex: 1000,
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [isHighlight]);
-    return (jsxRuntime.jsx("div", { className: styles$4.mowerPosition, style: containerStyle, children: jsxRuntime.jsx("div", { ref: elementRef, className: "mower-position", style: {
+    return (jsxRuntime.jsx("div", { className: styles$5.mowerPosition, style: containerStyle, children: jsxRuntime.jsx("div", { ref: elementRef, className: "mower-position", style: {
                 position: 'absolute',
                 width: 30,
                 height: 30,
@@ -27675,11 +28303,12 @@ const MowerPosition = React.memo(({ editMap, mowerPositionData, viewBox, modelTy
             }, children: jsxRuntime.jsx("img", { src: mowerImage, style: { width: '100%', height: '100%', objectFit: 'contain' } }) }) }));
 });
 
-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);
+var css_248z$4 = ".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$4 = {"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$4);
 
 const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], onlyRead = false, }) => {
+    const { locale } = useCommonContext();
     const [processStateIsMowing, updateProcessStateIsMowing] = React.useState(false);
     // 处理地图分区边界
     React.useMemo(() => {
@@ -27719,6 +28348,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
             return generateBoundaryData(mapData, newPathData);
         }
     }, [mapData, pathData, realTimeData]);
+    const coverageStr = React.useMemo(() => {
+        return locale?.['map.renderer.coverage'] || 'Coverage';
+    }, [locale]);
     const items = React.useMemo(() => {
         // console.log('boundartItme->', viewBox, mapData)
         if (!mapData || !viewBox)
@@ -27728,7 +28360,7 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
         const results = [];
         for (const boundary of boundaryData) {
             // 多边形重心
-            const centroid = computePolygonCentroid(boundary.points);
+            const centroid = computePolygonCentroid$1(boundary.points);
             if (!centroid)
                 continue;
             const relX = (centroid.x - viewBox.x) / viewBox.width;
@@ -27739,9 +28371,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
             const baseText = onlyRead ? `${boundary.name}` : `${boundary.name} (${progress})`;
             const totalArea = convertAreaByUnits(boundary.area || 0, unitType);
             const finishedArea = convertAreaByUnits(boundary.finishedArea || 0, unitType);
-            const coverageText = `Coverage: ${finishedArea.value}/${totalArea.value}`;
+            const coverageText = `${coverageStr}: ${finishedArea.value}/${totalArea.value}`;
             const isMowing = mowingIds.includes(boundary.id);
-            const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0);
+            const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0, locale);
             results.push({
                 id: boundary.id,
                 name: boundary.name,
@@ -27765,11 +28397,13 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
         mowPartitionData,
         boundaryData,
         onlyRead,
+        coverageStr,
+        locale,
     ]);
     const containerZIndex = 900;
     return { items, containerZIndex };
 };
-function computePolygonCentroid(points) {
+function computePolygonCentroid$1(points) {
     if (!points || points.length < 3)
         return null;
     const valid = points.filter((p) => p.length >= 2);
@@ -27842,7 +28476,7 @@ const BoundaryLabels = React.memo(({ editMap, mapData, pathData, unitType, langu
         display: editMap ? 'none' : 'block',
         opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
     }), [containerZIndex, expandedId, editMap, isHighlight]);
-    return (jsxRuntime.jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `${styles$3.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
+    return (jsxRuntime.jsx("div", { className: styles$4.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `${styles$4.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
                 transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
@@ -27853,12 +28487,12 @@ const BoundaryLabels = React.memo(({ editMap, mapData, pathData, unitType, langu
                 if (onlyRead)
                     return;
                 handleClick(item.id);
-            }, children: [jsxRuntime.jsx("div", { className: styles$3.base, children: item.baseText }), jsxRuntime.jsxs("div", { className: styles$3.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsxRuntime.jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsxRuntime.jsx("div", { children: item.dateText })] }), item.isIsolated && (jsxRuntime.jsx("div", { className: styles$3.isolatedIcon, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id))) }));
+            }, children: [jsxRuntime.jsx("div", { className: styles$4.base, children: item.baseText }), jsxRuntime.jsxs("div", { className: styles$4.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsxRuntime.jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsxRuntime.jsx("div", { children: item.dateText })] }), item.isIsolated && (jsxRuntime.jsx("div", { className: styles$4.isolatedIcon, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id))) }));
 });
 
-var css_248z$2 = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
-var styles$2 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
-styleInject(css_248z$2);
+var css_248z$3 = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
+var styles$3 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
+styleInject(css_248z$3);
 
 var antennaOneOnline = "data:image/png;base64,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";
 
@@ -27870,6 +28504,7 @@ var antennaTwoOffline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgC
 
 const useAntennaInfo = (data = [], options = {}) => {
     const { viewBox } = options;
+    const { locale } = useCommonContext();
     const items = React.useMemo(() => {
         if (!data || data.length === 0 || !viewBox)
             return [];
@@ -27900,8 +28535,8 @@ const useAntennaInfo = (data = [], options = {}) => {
                         isOnline: antenna1.status === 1,
                         imageSrc: getImage(1, antenna1.status === 1),
                         tooltip: {
-                            title: 'Primary Antenna',
-                            statusText: antenna1.status === 1 ? 'Online' : 'Offline',
+                            title: locale?.['map.renderer.primaryAntenna'] || 'Primary Antenna',
+                            statusText: antenna1.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.online'] || 'Offline'),
                             minWidth: 130,
                         },
                     });
@@ -27940,15 +28575,15 @@ const useAntennaInfo = (data = [], options = {}) => {
                 isOnline: antenna2.status === 1,
                 imageSrc: getImage(2, antenna2.status === 1),
                 tooltip: {
-                    title: 'Signal Enhancement Antenna',
-                    statusText: antenna2.status === 1 ? 'Online' : 'Offline',
-                    syncText: antenna2.status === 1 ? ', Synced' : ', To be synced',
+                    title: locale?.['map.renderer.signalAntenna'] || 'Signal Enhancement Antenna',
+                    statusText: antenna2.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.offline'] || 'Offline'),
+                    syncText: antenna2.status === 1 ? `, ${locale?.['map.renderer.synced'] || 'Synced'}` : `, ${locale?.['map.renderer.toBeSynced'] || 'To be synced'}`,
                     minWidth: 195,
                 },
             });
         }
         return results;
-    }, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height]);
+    }, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, locale]);
     // default stacking order (slightly higher than boundary labels' 900)
     const containerZIndex = 950;
     return { items, containerZIndex };
@@ -27976,13 +28611,13 @@ const Antennas = React.memo(({ editMap, antennaConfig = [], viewBox, rotation =
         document.addEventListener('pointerdown', handleOutside);
         return () => document.removeEventListener('pointerdown', handleOutside);
     }, []);
-    return (jsxRuntime.jsx("div", { className: styles$2.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `antenna-container-item ${styles$2.item}`, style: {
+    return (jsxRuntime.jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `antenna-container-item ${styles$3.item}`, style: {
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
                 transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
                 zIndex: openType === item.type ? 10000 : containerZIndex,
                 pointerEvents: onlyRead ? 'none' : 'auto',
-            }, children: [jsxRuntime.jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$2.icon}`, style: {}, onClick: (e) => {
+            }, children: [jsxRuntime.jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$3.icon}`, style: {}, onClick: (e) => {
                         e.stopPropagation();
                         if (onlyRead)
                             return;
@@ -27997,95 +28632,15 @@ const Antennas = React.memo(({ editMap, antennaConfig = [], viewBox, rotation =
                             return;
                         e.currentTarget.style.transform =
                             'scale(1)';
-                    }, children: jsxRuntime.jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxRuntime.jsxs("div", { className: styles$2.tooltip, style: {
+                    }, children: jsxRuntime.jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxRuntime.jsxs("div", { className: styles$3.tooltip, style: {
                         display: openType === item.type ? 'block' : 'none',
                         minWidth: item.tooltip.minWidth,
                     }, children: [jsxRuntime.jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxRuntime.jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
 });
 
-var css_248z$1 = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n  min-width: 1px;\n  min-height: 1px;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
-var styles$1 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
-styleInject(css_248z$1);
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (arg) {
-					classes = appendClass(classes, parseValue(arg));
-				}
-			}
-
-			return classes;
-		}
-
-		function parseValue (arg) {
-			if (typeof arg === 'string' || typeof arg === 'number') {
-				return arg;
-			}
-
-			if (typeof arg !== 'object') {
-				return '';
-			}
-
-			if (Array.isArray(arg)) {
-				return classNames.apply(null, arg);
-			}
-
-			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-				return arg.toString();
-			}
-
-			var classes = '';
-
-			for (var key in arg) {
-				if (hasOwn.call(arg, key) && arg[key]) {
-					classes = appendClass(classes, key);
-				}
-			}
-
-			return classes;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var css_248z$2 = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n  min-width: 1px;\n  min-height: 1px;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
+var styles$2 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
+styleInject(css_248z$2);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -29085,7 +29640,7 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
     if (!enabled || points.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
+    return (jsxRuntime.jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1.8, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
 });
 CreateObstacleElement.displayName = 'CreateObstacleElement';
 
@@ -29123,7 +29678,7 @@ const useCreateVisionOffElement = () => {
             [maxX, minY],
         ];
         return elementPoints;
-    }, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints]);
+    }, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints, svgViewBox]);
     return {
         centerPoint,
         getVisionOffPoints,
@@ -29358,9 +29913,9 @@ const SvgEditMap = React.forwardRef(({ mapConfig, onEditInfoMapChange, editMap }
     const onMouseLeave = () => {
         setHoverDataId('');
     };
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$1.mapEdit, {
-            [styles$1.createMode]: isCreating,
-            [styles$1.notCreateCursor]: showNotCreateCursor,
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$2.mapEdit, {
+            [styles$2.createMode]: isCreating,
+            [styles$2.notCreateCursor]: showNotCreateCursor,
         }), 
         // style={{
         //   position: 'absolute',
@@ -29466,6 +30021,22 @@ const SvgEditMap = React.forwardRef(({ mapConfig, onEditInfoMapChange, editMap }
 });
 SvgEditMap.displayName = 'SvgEditMap';
 
+/** 清理为合法的 SVG/HTML id 片段 */
+function sanitizeSvgIdPart(value) {
+    return value.replace(/[^a-zA-Z0-9_.-]/g, '_');
+}
+/**
+ * 通道 clipPath 的 SVG id
+ * 组合 sn、useId、时间戳、随机数，避免同页多地图实例 id 冲突
+ */
+function createChannelClipPathId(params) {
+    const snPart = sanitizeSvgIdPart(params.sn || 'map');
+    const reactPart = sanitizeSvgIdPart(params.reactId.replace(/:/g, ''));
+    const timestamp = Date.now();
+    const randomPart = Math.random().toString(36).slice(2, 10);
+    return `channel-clip-path-${snPart}-${reactPart}-${timestamp}-${randomPart}`;
+}
+
 var _path;
 function _extends() { return _extends = 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.apply(null, arguments); }
 var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
@@ -29483,9 +30054,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
   })));
 };
 
-var css_248z = ".index-module_crosshair__etey6 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 40px;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
-var styles = {"crosshair":"index-module_crosshair__etey6"};
-styleInject(css_248z);
+var css_248z$1 = ".index-module_crosshair__etey6 {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 40px;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+var styles$1 = {"crosshair":"index-module_crosshair__etey6"};
+styleInject(css_248z$1);
 
 /**
  * 十字准心组件
@@ -29502,19 +30073,19 @@ const Crosshair = () => {
         }
         return false;
     }, [platform, editMapInfo]);
-    return isVisible ? (jsxRuntime.jsx("div", { className: styles.crosshair, children: jsxRuntime.jsx(SvgMobileAddPoint, {}) })) : null;
+    return isVisible ? (jsxRuntime.jsx("div", { className: styles$1.crosshair, children: jsxRuntime.jsx(SvgMobileAddPoint, {}) })) : null;
 };
 
-const WGS84 = 'EPSG:4326';
-const WEB_MERCATOR = 'EPSG:3857';
-proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
-proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+const WGS84$1 = 'EPSG:4326';
+const WEB_MERCATOR$1 = 'EPSG:3857';
+proj4.defs(WGS84$1, '+proj=longlat +datum=WGS84 +no_defs');
+proj4.defs(WEB_MERCATOR$1, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
 // 默认配置
 const defaultMapConfig$1 = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = React.forwardRef(({ sn, mowerIconConfig = {}, platform = exports.PlatformType.WEB, mapType = exports.MapType.NORMAL, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, isHighlight = true, mapConfig, 
 // pathConfig,
-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) => {
+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, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, locale, }, ref) => {
     const [currentError, setCurrentError] = React.useState(null);
     // const mapRef = useMap();
     const [processStateIsMowing, setProcessStateIsMowing] = React.useState(false);
@@ -29542,6 +30113,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         ...INIT_EDIT_MAP_INFO,
     });
     const [mowingPartitions, setMowingPartitions] = React.useState([]);
+    const reactInstanceId = React.useId();
+    const channelClipPathId = React.useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
     const minDistance = React.useMemo(() => {
         return getMinSvgDistanceByModel(modelType);
     }, [modelType]);
@@ -29632,7 +30205,6 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const newSvgElementDatas = { ...svgElementDatas };
         Object.keys(newSvgElementDatas).forEach((key) => {
             if (key === exports.DataType.OBSTACLE) {
-                console.error('newSvgElementDatas[key] 000---->', newSvgElementDatas[key]);
                 newSvgElementDatas[key] =
                     newSvgElementDatas[key].filter((item) => {
                         return (item.status === 1 &&
@@ -29675,13 +30247,25 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
     const mowerPositionData = React.useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         // 在初始的状态按照正常图标进行渲染，所以构造一个基本在rtk桩的一个数据
-        if (!realTimeData || realTimeData.length === 0)
-            return {
-                postureX: 0.01,
-                postureY: 0.1,
-                postureTheta: 0.01,
-                vehicleState: RobotStatus.PARKED,
-            };
+        if (!realTimeData || realTimeData.length === 0) {
+            const chargingPiles = svgElementDatas?.[exports.DataType.CHARGING_PILE]?.[0];
+            if (chargingPiles?.position) {
+                return {
+                    postureX: chargingPiles.position?.[0],
+                    postureY: chargingPiles.position?.[1],
+                    postureTheta: chargingPiles.direction - Math.PI || 0,
+                    vehicleState: RobotStatus.PARKED,
+                };
+            }
+            else {
+                return {
+                    postureX: 0.01,
+                    postureY: 0.1,
+                    postureTheta: 0.01,
+                    vehicleState: RobotStatus.PARKED,
+                };
+            }
+        }
         let currentPositionData;
         if (realTimeData.length === 1 && realTimeData[0].type === RealTimeDataType.LOCATION) {
             currentPositionData = realTimeData[0];
@@ -29725,14 +30309,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const validBounds = getValidGpsBounds(mapJson, 0);
         const [swLng0, swLat0] = validBounds.sw;
         const [neLng0, neLat0] = validBounds.ne;
-        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
-        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
         const swX = swX0 + drag.x;
         const swY = swY0 + drag.y;
         const neX = neX0 + drag.x;
         const neY = neY0 + drag.y;
-        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
-        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
         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(() => {
@@ -29760,7 +30344,11 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
             showStraddleBoundaryBorder,
             overlayLayout,
             googleMapStaticApiKey,
+            googleMapStaticUrlSigningSecret,
+            locale,
+            signGoogleStaticMapUrl,
             onH5FirstSelectObstaclePoint,
+            channelClipPathId,
         };
     }, [
         sn,
@@ -29783,13 +30371,17 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         showStraddleBoundaryBorder,
         overlayLayout,
         googleMapStaticApiKey,
+        googleMapStaticUrlSigningSecret,
+        locale,
+        signGoogleStaticMapUrl,
         onH5FirstSelectObstaclePoint,
+        channelClipPathId,
     ]);
     /**
      * 这里做了一个配置，以防以后如果有多种不同的类型的情况，需要展示不同的元素
      */
     const mapHasElements = React.useMemo(() => {
-        // 地理围栏地图，没有充电桩，没有天线，没有割草机位置，没有边界标签
+        // 地理围栏地图，有充电桩，没有天线，没有割草机位置，没有分区名称气泡
         if (mapType === exports.MapType.GEO_FENCE) {
             return {
                 hasChargingPile: true,
@@ -29820,14 +30412,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         // 地图数据中的坐标格式是 [longitude, latitude]
         const [swLng0, swLat0] = validBounds.sw;
         const [neLng0, neLat0] = validBounds.ne;
-        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
-        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
         const swX = swX0 + defaultTransform.x;
         const swY = swY0 + defaultTransform.y;
         const neX = neX0 + defaultTransform.x;
         const neY = neY0 + defaultTransform.y;
-        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
-        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
         const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
         new window.google.maps.LatLng(neLat, neLng) // 东北角
         );
@@ -29854,8 +30446,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         const offsetLatLng = overlayProjection.fromDivPixelToLatLng(offsetPixel);
         if (!offsetLatLng)
             return;
-        const [cx, cy] = proj4(WGS84, WEB_MERCATOR, [centerLatLng.lng(), centerLatLng.lat()]);
-        const [ox, oy] = proj4(WGS84, WEB_MERCATOR, [offsetLatLng.lng(), offsetLatLng.lat()]);
+        const [cx, cy] = proj4(WGS84$1, WEB_MERCATOR$1, [centerLatLng.lng(), centerLatLng.lat()]);
+        const [ox, oy] = proj4(WGS84$1, WEB_MERCATOR$1, [offsetLatLng.lng(), offsetLatLng.lat()]);
         const dx = ox - cx;
         const dy = oy - cy;
         setDrag((prev) => ({
@@ -29898,7 +30490,10 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
         // 如果当前是taskDelay的状态，或者状态为mowing或者standby，则指定的地块需要高亮，或者全局高亮
         if ((isTaskDelayRef.current ||
             positionData?.vehicleState === RobotStatus.MOWING ||
-            positionData?.vehicleState === RobotStatus.STANDBY) &&
+            positionData?.vehicleState === RobotStatus.STANDBY ||
+            (!positionData &&
+                (currentVehicleStateRef.current === RobotStatus.MOWING ||
+                    currentVehicleStateRef.current === RobotStatus.STANDBY))) &&
             mowPartitionDataRef.current &&
             !mowPartitionDataRef.current?.partitionIds) {
             // 设置全局高亮
@@ -30125,7 +30720,9 @@ MowerMapRenderer.displayName = 'MowerMapRenderer';
 
 // 默认配置
 const defaultMapConfig = DEFAULT_STYLES;
-const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth = 300, mapConfig, sn }) => {
+const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth = 300, maxHeight, boundaryPadding = 50, mapConfig, sn, }) => {
+    const reactInstanceId = React.useId();
+    const channelClipPathId = React.useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
     // 合并配置
     const mergedMapConfig = React.useMemo(() => {
         return merge$1(defaultMapConfig, mapConfig);
@@ -30171,7 +30768,7 @@ const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth =
             maxY = Math.max(maxY, point[1]);
         });
         // 添加边距
-        const padding = 50;
+        const padding = boundaryPadding;
         const width = maxX - minX + padding * 2;
         const height = maxY - minY + padding * 2;
         return {
@@ -30180,25 +30777,40 @@ const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth =
             width,
             height,
         };
-    }, [boundaryInfo]);
+    }, [boundaryInfo, boundaryPadding]);
     const commonValue = React.useMemo(() => {
         return {
             sn,
             svgViewBox: boundaryViewBox,
+            channelClipPathId,
         };
-    }, [sn, boundaryViewBox]);
+    }, [sn, boundaryViewBox, channelClipPathId]);
     const style = React.useMemo(() => {
-        if (boundaryViewBox?.width > boundaryViewBox?.height) {
+        if (!maxHeight) {
+            if (boundaryViewBox?.width > boundaryViewBox?.height) {
+                return {
+                    width: maxWidth,
+                    height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+                };
+            }
+            return {
+                width: maxWidth * (boundaryViewBox.width / boundaryViewBox.height),
+                height: maxWidth,
+            };
+        }
+        const ratio = maxWidth / maxHeight;
+        const boundaryRatio = boundaryViewBox.width / boundaryViewBox.height;
+        if (ratio > boundaryRatio) {
             return {
-                width: maxWidth,
-                height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+                width: Math.floor(maxHeight * boundaryRatio),
+                height: maxHeight,
             };
         }
         return {
-            width: maxWidth * (boundaryViewBox.width / boundaryViewBox.height),
-            height: maxWidth,
+            width: maxWidth,
+            height: Math.floor(maxWidth / boundaryRatio),
         };
-    }, [boundaryViewBox, maxWidth]);
+    }, [boundaryViewBox, maxWidth, maxHeight]);
     return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsxs("div", { style: {
                     position: 'relative',
                     width: style.width,
@@ -30214,6 +30826,1512 @@ const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth =
                         }) }), jsxRuntime.jsx(CharginPile, { viewBox: boundaryViewBox || null, rotation: 0 })] }) }) }));
 });
 
+const ISOLATED_BOUNDARY_SVG_2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="10" fill="#8498A9" fill-opacity="0.7"/>
+<path d="M11.7178 12.4307C12.2201 11.9284 12.9629 11.8149 13.5752 12.0879L12.9756 12.6865C12.7427 12.6649 12.5034 12.7432 12.3223 12.917C12.3176 12.9214 12.3122 12.9251 12.3076 12.9297L11.7344 13.5029C11.4091 13.8284 11.409 14.3563 11.7344 14.6816L12.0879 15.0342C12.4133 15.3595 12.9412 15.3596 13.2666 15.0342L13.5527 14.7461L13.8408 14.46C14.011 14.2896 14.091 14.0629 14.083 13.8398L14.7002 13.2236C14.9614 13.8318 14.8443 14.5639 14.3477 15.0605L13.8613 15.5459C13.2105 16.1963 12.1556 16.1964 11.5049 15.5459L11.2314 15.2725C10.5816 14.6218 10.5815 13.5677 11.2314 12.917L11.7178 12.4307Z" fill="white"/>
+<path d="M12.1738 4.00488C11.6587 4.98031 10.6742 7.45647 10.8555 9.55762C11.3152 9.02665 12.5281 7.88542 13.7002 7.56934C13.2369 8.10318 12.5313 9.25837 12.1445 10.7949C11.6656 10.9223 11.2115 11.1723 10.835 11.5488L10.3496 12.0352C9.77429 12.6108 9.49095 13.367 9.49707 14.1211H4.72656C5.04472 13.1579 5.14564 10.847 3.00586 9.30957C4.04607 9.35761 5.61481 9.31003 6.83691 10.4141C6.66589 9.30985 6.83631 8.53141 4.90137 5.78711C5.69833 5.98284 7.68952 6.32958 8.74414 7.96875C9.20789 6.88364 10.4356 4.93597 12.1738 4.00488Z" fill="white"/>
+<path d="M14.8838 9.2666C15.5345 8.61618 16.5894 8.6153 17.2402 9.26562L17.5137 9.53906C18.164 10.19 18.1633 11.2458 17.5127 11.8965L17.0264 12.3828C16.5297 12.879 15.7985 12.9947 15.1904 12.7334L15.8115 12.1104C16.0351 12.1187 16.2619 12.0398 16.4326 11.8691L17.0068 11.2949C17.332 10.9697 17.3327 10.4417 17.0078 10.1162L16.6543 9.7627C16.3491 9.45791 15.8654 9.43902 15.5381 9.70605C15.5158 9.72417 15.4944 9.74388 15.4736 9.76465L14.9004 10.3379C14.7179 10.5204 14.6369 10.7665 14.6592 11.0049L14.0547 11.6084C13.7823 10.9964 13.8955 10.255 14.3975 9.75293L14.8838 9.2666Z" fill="white"/>
+</svg>`;
+/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距（与用户传入的屏幕 padding 无关） */
+const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
+/** 可选中地块 polygon / 标签 data 属性 */
+const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
+/** 孤立子地块命中标记（不可选中） */
+const PARTITION_ISOLATED_BOUNDARY_ID_ATTR = 'data-partition-isolated-boundary-id';
+/** H5：子区域屏幕宽度超过该值才展示名称标签（px）；与气泡宽度一致 */
+const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 72;
+/** H5：名称气泡总宽度（px） */
+const H5_PARTITION_LABEL_WIDTH_PX = 72;
+/** Web：序号徽章与名称标签间距（px） */
+const WEB_SELECTION_ORDER_GAP_PX = 8;
+/** H5：序号徽章与名称标签间距（px） */
+const H5_SELECTION_ORDER_GAP_PX = 4;
+/** Standalone：充电桩图标最小屏幕尺寸（px），缩小全图 fit 时避免过小；放大时随 viewBox 同比缩放 */
+const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
+/** Web 地块描边屏幕像素宽度：未选中 2px，选中 3px */
+const WEB_PARTITION_BOUNDARY_STROKE_PX = {
+    default: 2,
+    selected: 3,
+};
+/** H5 地块描边屏幕像素宽度：选中与否均为 1px */
+const H5_PARTITION_BOUNDARY_STROKE_PX = {
+    default: 1,
+    selected: 1,
+};
+/**
+ * Figma bg/mapping 地图网格背景（Standalone SVG 层）
+ * @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
+ */
+/** 网格区域底色，也用于容器 letterbox 留白 */
+const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
+/** 网格单元边长（SVG 地图坐标，与 viewBox 一致；zoom 时间距同比缩放） */
+const PARTITION_PICKER_GRID_TILE_SIZE = 10;
+/** 网格线宽（地图坐标；随 zoom 同比缩放，不做屏幕像素恒定） */
+const PARTITION_PICKER_GRID_LINE_WIDTH = 0.2;
+/** 网格交点圆点半径（地图坐标） */
+const PARTITION_PICKER_GRID_DOT_RADIUS = 0.6;
+/** 网格层整体不透明度（Figma 约 80%） */
+const PARTITION_PICKER_GRID_OPACITY = 0.4;
+/** 网格线与交点颜色 */
+const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
+/** 可见范围内交点超过该数量时跳过圆点，仅保留网格线（缩小视野时减轻 DOM 压力） */
+const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
+/**
+ * 分区选择地图专用样式
+ *
+ * Web：Figma 灰蓝未选中地块（Vector 360）
+ * H5：高对比度绿色，面向卫星/深色底图
+ */
+const PARTITION_PICKER_MAP_CONFIG_WEB = {
+    boundary: {
+        lineColor: '#91A1B4',
+        fillColor: '#D7DEE6',
+        lineWidth: 2,
+    },
+};
+const PARTITION_PICKER_MAP_CONFIG = {
+    boundary: {
+        lineColor: '#91A1B4',
+        fillColor: '#D7DEE6',
+        lineWidth: 2,
+    },
+};
+/** Web 端地块配色（Figma Vector 360 / 361 / 99788） */
+const PARTITION_PICKER_COLORS_WEB = {
+    defaultFill: 'rgba(222, 225, 231, 1)',
+    defaultStroke: 'rgba(132, 152, 169, 1)',
+    hoverFill: 'rgba(211, 216, 226, 1)',
+    hoverStroke: 'rgba(132, 152, 169, 1)',
+    selectedFill: 'rgba(202, 214, 238, 1)',
+    selectedStroke: 'rgba(132, 152, 169, 1)',
+    selectedHoverFill: 'rgba(202, 214, 238, 1)',
+    selectedHoverStroke: 'rgba(132, 152, 169, 1)',
+    isolatedFill: 'rgba(225, 227, 233, 1)',
+    isolatedStroke: 'rgba(189, 198, 208, 1)',
+};
+/** H5 端地块配色 */
+const PARTITION_PICKER_COLORS_H5 = {
+    defaultFill: 'rgba(222, 225, 231, 1)',
+    defaultStroke: 'rgba(132, 152, 169, 1)',
+    hoverFill: 'rgba(222, 225, 231, 1)',
+    hoverStroke: 'rgba(132, 152, 169, 1)',
+    selectedFill: 'rgba(202, 214, 238, 1)',
+    selectedStroke: 'rgba(132, 152, 169, 1)',
+    selectedHoverFill: 'rgba(202, 214, 238, 1)',
+    selectedHoverStroke: 'rgba(132, 152, 169, 1)',
+    isolatedFill: 'rgba(225, 227, 233, 1)',
+    isolatedStroke: 'rgba(189, 198, 208, 1)',
+};
+function getPartitionPickerMapConfig(platform = exports.PlatformType.WEB) {
+    return platform === exports.PlatformType.WEB
+        ? PARTITION_PICKER_MAP_CONFIG_WEB
+        : PARTITION_PICKER_MAP_CONFIG;
+}
+function getPartitionPickerColors(platform = exports.PlatformType.WEB) {
+    return platform === exports.PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
+}
+function getPartitionPickerBoundaryStrokePx(platform = exports.PlatformType.WEB) {
+    return platform === exports.PlatformType.WEB
+        ? { ...WEB_PARTITION_BOUNDARY_STROKE_PX }
+        : { ...H5_PARTITION_BOUNDARY_STROKE_PX };
+}
+/** Web 分区名气泡（Figma「地块名称」/ 选中区域） */
+const PARTITION_PICKER_LABEL_STYLES_WEB = {
+    default: {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        color: 'rgba(65, 93, 116, 0.7)',
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+        borderRadius: 14,
+        lineHeight: '20px',
+    },
+    selected: {
+        backgroundColor: 'rgba(255, 90, 0, 1)',
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+        borderRadius: 20,
+        lineHeight: '20px',
+    },
+    selectionOrderBadge: {
+        width: '24px',
+        height: '24px',
+        background: '#FF5A00',
+        border: '1px solid #FFFFFF',
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: 500,
+        lineHeight: '22px',
+    },
+};
+/** H5 分区名气泡（深色底图 / 橙色渐变选中） */
+const PARTITION_PICKER_LABEL_STYLES_H5 = {
+    default: {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        color: 'rgba(65, 93, 116, 0.7)',
+        fontSize: 12,
+        fontWeight: 400,
+        padding: '6px',
+        width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        borderRadius: 100,
+        boxSizing: 'border-box',
+    },
+    selected: {
+        background: 'linear-gradient(266.64deg, #F2942A 4.1%, #F26A2A 86.42%)',
+        color: 'rgba(255, 255, 255, 1)',
+        fontSize: 12,
+        fontWeight: 400,
+        padding: '6px',
+        width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
+        borderRadius: 100,
+        boxSizing: 'border-box',
+    },
+    selectionOrderBadge: {
+        width: '24px',
+        height: '24px',
+        background: 'linear-gradient(310.82deg, #F16629 14.52%, #F1A129 103.26%)',
+        border: '1px solid #FFFFFF',
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: '22px',
+    },
+};
+/** 将 PartitionPickerLabelAppearance 转为 React 内联样式 */
+function labelAppearanceToStyle(appearance) {
+    const { fontSize, borderRadius, ...rest } = appearance;
+    return {
+        ...rest,
+        fontSize: `${fontSize}px`,
+        borderRadius: `${borderRadius}px`,
+    };
+}
+function getPartitionPickerLabelStyles(platform = exports.PlatformType.WEB) {
+    return platform === exports.PlatformType.WEB
+        ? PARTITION_PICKER_LABEL_STYLES_WEB
+        : PARTITION_PICKER_LABEL_STYLES_H5;
+}
+const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
+    baseColor: PARTITION_PICKER_GRID_BASE_COLOR,
+    strokeColor: PARTITION_PICKER_GRID_STROKE,
+    tileSize: PARTITION_PICKER_GRID_TILE_SIZE,
+    lineWidth: PARTITION_PICKER_GRID_LINE_WIDTH,
+    dotRadius: PARTITION_PICKER_GRID_DOT_RADIUS,
+    opacity: PARTITION_PICKER_GRID_OPACITY,
+    maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
+};
+/**
+ * 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
+ * 调用方只需覆盖变化的字段，无需改组件源码。
+ */
+function resolvePartitionPickerStyles(platform = exports.PlatformType.WEB, config) {
+    const baseLabels = getPartitionPickerLabelStyles(platform);
+    return {
+        boundary: merge$1({}, getPartitionPickerColors(platform), config?.boundary),
+        labels: config?.labels
+            ? {
+                default: merge$1({}, baseLabels.default, config.labels.default),
+                selected: merge$1({}, baseLabels.selected, config.labels.selected),
+                selectionOrderBadge: merge$1({}, baseLabels.selectionOrderBadge, config.labels.selectionOrderBadge),
+            }
+            : baseLabels,
+        grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
+        boundaryStrokePx: merge$1({}, getPartitionPickerBoundaryStrokePx(platform), config?.boundaryStrokePx),
+    };
+}
+
+/**
+ * Standalone 模式下的视口控制：平移、滚轮缩放、H5 双指 pinch
+ *
+ * 核心思路：通过修改 SVG viewBox 实现平移/缩放，而非 CSS transform
+ * - fitViewBox：初始 fit 状态，resetView 回到此状态
+ * - viewBox：地块/通道/overlay 的可见区域
+ * - gridViewBox：网格底图专用；有地图旋转时平移按屏幕方向（不逆旋转），与地块跟手平移解耦
+ *
+ * 平移可在地块/分区名等任意区域发起；仅当位移小于阈值时才视为点击
+ */
+function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
+    /** 地图容器 DOM，用于绑定 wheel/pointer/touch 事件 */
+    const internalContainerRef = React.useRef(null);
+    const containerRef = externalContainerRef ?? internalContainerRef;
+    /** 始终指向最新 padding，供 fitToView 异步调用时使用 */
+    const paddingRef = React.useRef(padding);
+    paddingRef.current = padding;
+    /** padding 序列化 key，用于 useMemo 依赖（数组/对象形式 padding 变化时触发重算） */
+    const paddingKey = typeof padding === 'number' ? padding : JSON.stringify(padding);
+    /** 始终指向最新 onViewportTap，避免 effect 闭包过期 */
+    const onViewportTapRef = React.useRef(onViewportTap);
+    onViewportTapRef.current = onViewportTap;
+    /** 始终指向最新 mapRotationDeg，供平移回调读取 */
+    const mapRotationDegRef = React.useRef(mapRotationDeg);
+    mapRotationDegRef.current = mapRotationDeg;
+    /**
+     * 内容 viewBox：地图包围盒 + 固定 SVG padding
+     * 用于 ChannelClipPath 等裁剪，不随平移/缩放变化
+     */
+    const contentViewBox = React.useMemo(() => {
+        const bounds = calculateMapBounds(mapJson);
+        return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+    }, [mapJson]);
+    /**
+     * 初始 fit viewBox：在 contentViewBox 基础上适配容器宽高比与 screen padding
+     * resetView 会回到此状态
+     */
+    const fitViewBox = React.useMemo(() => computeFitViewBox(contentViewBox, width, height, padding), [contentViewBox, width, height, paddingKey]);
+    /** fitViewBox 的 ref 副本，供事件回调中读取最新值（zoom 限制基准） */
+    const fitViewBoxRef = React.useRef(fitViewBox);
+    fitViewBoxRef.current = fitViewBox;
+    /** 地块/通道/overlay 使用的 viewBox */
+    const [viewBox, setViewBox] = React.useState(fitViewBox);
+    /** 网格底图 viewBox：平移时按屏幕方向，避免与旋转后的地块反向滑动 */
+    const [gridViewBox, setGridViewBox] = React.useState(fitViewBox);
+    const viewBoxRef = React.useRef(viewBox);
+    viewBoxRef.current = viewBox;
+    const gridViewBoxRef = React.useRef(gridViewBox);
+    gridViewBoxRef.current = gridViewBox;
+    const pendingViewBoxRef = React.useRef(null);
+    const pendingGridViewBoxRef = React.useRef(null);
+    const viewBoxRafRef = React.useRef(null);
+    const flushScheduledViewBox = React.useCallback(() => {
+        viewBoxRafRef.current = null;
+        const mapPending = pendingViewBoxRef.current;
+        const gridPending = pendingGridViewBoxRef.current;
+        if (mapPending) {
+            pendingViewBoxRef.current = null;
+            viewBoxRef.current = mapPending;
+            setViewBox(mapPending);
+        }
+        if (gridPending) {
+            pendingGridViewBoxRef.current = null;
+            gridViewBoxRef.current = gridPending;
+            setGridViewBox(gridPending);
+        }
+    }, []);
+    const cancelScheduledViewBox = React.useCallback(() => {
+        pendingViewBoxRef.current = null;
+        pendingGridViewBoxRef.current = null;
+        if (viewBoxRafRef.current != null) {
+            cancelAnimationFrame(viewBoxRafRef.current);
+            viewBoxRafRef.current = null;
+        }
+    }, []);
+    const scheduleViewBox = React.useCallback((updater) => {
+        const base = pendingViewBoxRef.current ?? viewBoxRef.current;
+        const next = updater(base);
+        pendingViewBoxRef.current = next;
+        pendingGridViewBoxRef.current = next;
+        viewBoxRef.current = next;
+        gridViewBoxRef.current = next;
+        if (viewBoxRafRef.current == null) {
+            viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
+        }
+    }, [flushScheduledViewBox]);
+    const commitViewBox = React.useCallback((next) => {
+        cancelScheduledViewBox();
+        viewBoxRef.current = next;
+        gridViewBoxRef.current = next;
+        setViewBox(next);
+        setGridViewBox(next);
+    }, [cancelScheduledViewBox]);
+    React.useEffect(() => () => {
+        cancelScheduledViewBox();
+    }, [cancelScheduledViewBox]);
+    // 地图数据 / padding 变化时始终重新 fit（width/height 取触发时刻的实测值，不作为 resize 依赖）
+    React.useEffect(() => {
+        if (width <= 0 || height <= 0)
+            return;
+        commitViewBox(computeFitViewBox(contentViewBox, width, height, padding));
+    }, [commitViewBox, contentViewBox, paddingKey]);
+    const prevSizeRef = React.useRef({ width: 0, height: 0 });
+    // 容器首次获得有效尺寸，或 refitOnResize 下的尺寸变化
+    React.useEffect(() => {
+        if (width <= 0 || height <= 0)
+            return;
+        const prev = prevSizeRef.current;
+        const sizeChanged = prev.width !== width || prev.height !== height;
+        const isInitialSize = prev.width <= 0 || prev.height <= 0;
+        prevSizeRef.current = { width, height };
+        if (isInitialSize || (refitOnResize && sizeChanged)) {
+            commitViewBox(fitViewBox);
+        }
+    }, [
+        commitViewBox,
+        refitOnResize,
+        width,
+        height,
+        fitViewBox.x,
+        fitViewBox.y,
+        fitViewBox.width,
+        fitViewBox.height,
+    ]);
+    /**
+     * 以屏幕焦点为中心缩放
+     * @param factor 缩放因子，>1 放大，<1 缩小
+     * @param focalX 焦点相对容器左上角的 X（px）
+     * @param focalY 焦点相对容器左上角的 Y（px）
+     */
+    const applyZoom = React.useCallback((factor, focalX, focalY) => {
+        scheduleViewBox((current) => {
+            const targetWidth = clampViewBoxWidth(current.width / factor, fitViewBoxRef.current, minZoom, maxZoom);
+            return resizeViewBoxAroundPoint(current, targetWidth, width, height, focalX, focalY);
+        });
+    }, [height, maxZoom, minZoom, scheduleViewBox, width]);
+    /**
+     * 平移视口：地块使用逆旋转后的 viewBox 增量（跟手）；网格使用屏幕方向增量（同向滑动）
+     */
+    const applyPan = React.useCallback((deltaXPx, deltaYPx) => {
+        const mapBase = pendingViewBoxRef.current ?? viewBoxRef.current;
+        const gridBase = pendingGridViewBoxRef.current ?? gridViewBoxRef.current;
+        const mapDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, mapBase, width, height, mapRotationDegRef.current);
+        const gridDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, gridBase, width, height, 0);
+        const nextMap = {
+            ...mapBase,
+            x: mapBase.x - mapDelta.dx,
+            y: mapBase.y - mapDelta.dy,
+        };
+        const nextGrid = {
+            ...gridBase,
+            x: gridBase.x - gridDelta.dx,
+            y: gridBase.y - gridDelta.dy,
+            width: nextMap.width,
+            height: nextMap.height,
+        };
+        pendingViewBoxRef.current = nextMap;
+        pendingGridViewBoxRef.current = nextGrid;
+        viewBoxRef.current = nextMap;
+        gridViewBoxRef.current = nextGrid;
+        if (viewBoxRafRef.current == null) {
+            viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
+        }
+    }, [flushScheduledViewBox, height, width]);
+    /** 恢复到初始 fitViewBox（ref API resetView） */
+    const resetView = React.useCallback(() => {
+        commitViewBox(fitViewBoxRef.current);
+    }, [commitViewBox]);
+    /**
+     * 重新计算并应用 fit viewBox（ref API fitToView）
+     * @param nextPadding 可选的新 padding，不传则使用当前 paddingRef
+     */
+    const fitToView = React.useCallback((nextPadding) => {
+        const bounds = calculateMapBounds(mapJson);
+        const content = boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+        const fit = computeFitViewBox(content, width, height, nextPadding ?? paddingRef.current);
+        fitViewBoxRef.current = fit;
+        commitViewBox(fit);
+    }, [commitViewBox, height, mapJson, width]);
+    /** 桌面端：按 pointerId 追踪多个指针（预留多指，当前仅单指平移） */
+    const pointerMapRef = React.useRef(new Map());
+    /** H5：双指 pinch 缩放状态 */
+    const pinchRef = React.useRef(null);
+    /** 单指/单指针平移状态（桌面 pointer 与 H5 touch 共用） */
+    const singlePanRef = React.useRef(null);
+    /** 当前正在驱动平移的 pointer id（桌面端） */
+    const activePanPointerIdRef = React.useRef(null);
+    /** 清空所有平移/pinch 相关 ref，防止 pointer 丢失导致状态残留 */
+    const clearPanState = React.useCallback(() => {
+        pointerMapRef.current.clear();
+        singlePanRef.current = null;
+        activePanPointerIdRef.current = null;
+    }, []);
+    /** 计算 touch 列表中前两指间距 */
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return 0;
+        const dx = touches[0].clientX - touches[1].clientX;
+        const dy = touches[0].clientY - touches[1].clientY;
+        return Math.hypot(dx, dy);
+    };
+    /** 计算 touch 列表中前两指中心点，坐标相对容器左上角 */
+    const getTouchCenter = (touches, rect) => {
+        const x = (touches[0].clientX + touches[1].clientX) / 2 - rect.left;
+        const y = (touches[0].clientY + touches[1].clientY) / 2 - rect.top;
+        return { x, y };
+    };
+    /** 判断事件目标是否在地图容器内 */
+    const isInsideContainer = (target, container) => {
+        if (!(target instanceof Element))
+            return false;
+        return container.contains(target);
+    };
+    /** 位移是否超过 PAN_CLICK_THRESHOLD_PX，超过则视为拖拽 */
+    const markPanMoved = (startX, startY, currentX, currentY) => Math.hypot(currentX - startX, currentY - startY) > PAN_CLICK_THRESHOLD_PX;
+    /** 触发点击回调（仅当未发生拖拽时） */
+    const emitViewportTap = (tapTarget, clientX, clientY) => {
+        if (tapTarget) {
+            onViewportTapRef.current?.({ target: tapTarget, clientX, clientY });
+        }
+    };
+    // ── 绑定容器交互事件：滚轮缩放 / 桌面拖拽 / H5 pinch+单指平移 ──
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !enablePanZoom)
+            return;
+        /** 滚轮缩放，以鼠标位置为焦点 */
+        const handleWheel = (event) => {
+            event.preventDefault();
+            const rect = container.getBoundingClientRect();
+            const focalX = event.clientX - rect.left;
+            const focalY = event.clientY - rect.top;
+            const factor = event.deltaY < 0 ? 1.1 : 1 / 1.1;
+            applyZoom(factor, focalX, focalY);
+        };
+        /** 结束平移：未拖拽则触发 tap；释放 pointer capture 并清理状态 */
+        const endPan = (event) => {
+            // touch 由 touchend 统一处理，避免 pointerup 抢先清空 singlePanRef
+            if (event?.pointerType === 'touch') {
+                return;
+            }
+            if (event) {
+                const state = pointerMapRef.current.get(event.pointerId);
+                if (state && !state.moved && state.tapTarget) {
+                    emitViewportTap(state.tapTarget, event.clientX, event.clientY);
+                }
+                pointerMapRef.current.delete(event.pointerId);
+                try {
+                    if (container.hasPointerCapture(event.pointerId)) {
+                        container.releasePointerCapture(event.pointerId);
+                    }
+                }
+                catch {
+                    // ignore
+                }
+            }
+            if (!event || pointerMapRef.current.size === 0) {
+                clearPanState();
+            }
+        };
+        // 桌面端：pointer 事件处理平移（touch 交给下方 touch 事件，避免重复）
+        const handlePointerDown = (event) => {
+            if (!isInsideContainer(event.target, container))
+                return;
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            // 仅响应主键（左键）
+            if (event.pointerType === 'mouse' && event.button !== 0) {
+                return;
+            }
+            pointerMapRef.current.set(event.pointerId, {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                moved: false,
+                tapTarget: event.target instanceof Element ? event.target : null,
+            });
+            activePanPointerIdRef.current = event.pointerId;
+            singlePanRef.current = {
+                startX: event.clientX,
+                startY: event.clientY,
+                viewBox: viewBoxRef.current,
+                moved: false,
+                tapTarget: event.target instanceof Element ? event.target : null,
+            };
+            container.setPointerCapture(event.pointerId);
+        };
+        const handlePointerMove = (event) => {
+            // 主键已松开但 pointerup 未触发时（如释放在容器外），避免继续平移
+            if (event.pointerType === 'mouse' && event.buttons === 0) {
+                endPan(event);
+                return;
+            }
+            if (activePanPointerIdRef.current !== event.pointerId)
+                return;
+            const state = pointerMapRef.current.get(event.pointerId);
+            if (!state || !singlePanRef.current)
+                return;
+            const dx = event.clientX - state.startX;
+            const dy = event.clientY - state.startY;
+            if (markPanMoved(state.startX, state.startY, event.clientX, event.clientY)) {
+                state.moved = true;
+                singlePanRef.current.moved = true;
+            }
+            applyPan(dx, dy);
+            pointerMapRef.current.set(event.pointerId, {
+                ...state,
+                startX: event.clientX,
+                startY: event.clientY,
+            });
+        };
+        const handlePointerUp = (event) => {
+            endPan(event);
+        };
+        const handleLostPointerCapture = (event) => {
+            if (activePanPointerIdRef.current === event.pointerId) {
+                endPan(event);
+            }
+        };
+        const handleWindowPointerUp = (event) => {
+            if (event instanceof PointerEvent && event.pointerType === 'touch') {
+                return;
+            }
+            clearPanState();
+        };
+        // H5：双指 pinch 缩放、单指平移
+        const handleTouchStart = (event) => {
+            if (event.touches.length === 2) {
+                event.preventDefault();
+                const rect = container.getBoundingClientRect();
+                const center = getTouchCenter(event.touches, rect);
+                pinchRef.current = {
+                    initialDistance: getTouchDistance(event.touches),
+                    initialViewBox: viewBoxRef.current,
+                    centerX: center.x,
+                    centerY: center.y,
+                };
+                singlePanRef.current = null;
+                return;
+            }
+            if (event.touches.length === 1 && isInsideContainer(event.target, container)) {
+                singlePanRef.current = {
+                    startX: event.touches[0].clientX,
+                    startY: event.touches[0].clientY,
+                    viewBox: viewBoxRef.current,
+                    moved: false,
+                    tapTarget: event.target instanceof Element ? event.target : null,
+                };
+            }
+        };
+        const handleTouchMove = (event) => {
+            if (event.touches.length === 2 && pinchRef.current) {
+                event.preventDefault();
+                const rect = container.getBoundingClientRect();
+                const distance = getTouchDistance(event.touches);
+                if (distance <= 0 || pinchRef.current.initialDistance <= 0)
+                    return;
+                const scale = distance / pinchRef.current.initialDistance;
+                const center = getTouchCenter(event.touches, rect);
+                const targetWidth = clampViewBoxWidth(pinchRef.current.initialViewBox.width / scale, fitViewBoxRef.current, minZoom, maxZoom);
+                scheduleViewBox(() => resizeViewBoxAroundPoint(pinchRef.current.initialViewBox, targetWidth, width, height, center.x, center.y));
+                return;
+            }
+            if (event.touches.length === 1 && singlePanRef.current) {
+                const panState = singlePanRef.current;
+                const touch = event.touches[0];
+                if (markPanMoved(panState.startX, panState.startY, touch.clientX, touch.clientY)) {
+                    panState.moved = true;
+                }
+                if (panState.moved) {
+                    event.preventDefault();
+                }
+                const dx = touch.clientX - panState.startX;
+                const dy = touch.clientY - panState.startY;
+                applyPan(dx, dy);
+                singlePanRef.current = {
+                    ...panState,
+                    startX: touch.clientX,
+                    startY: touch.clientY,
+                };
+            }
+        };
+        const handleTouchEnd = (event) => {
+            const touchState = singlePanRef.current;
+            if (touchState && !touchState.moved) {
+                let tapTarget = touchState.tapTarget;
+                const touch = event.changedTouches[0];
+                let clientX = touchState.startX;
+                let clientY = touchState.startY;
+                if (touch) {
+                    clientX = touch.clientX;
+                    clientY = touch.clientY;
+                    const hitTarget = document.elementFromPoint(touch.clientX, touch.clientY);
+                    if (hitTarget instanceof Element) {
+                        tapTarget = hitTarget;
+                    }
+                }
+                emitViewportTap(tapTarget, clientX, clientY);
+            }
+            if (pinchRef.current) {
+                pinchRef.current = null;
+            }
+            clearPanState();
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        container.addEventListener('pointerdown', handlePointerDown);
+        container.addEventListener('pointermove', handlePointerMove);
+        container.addEventListener('pointerup', handlePointerUp);
+        container.addEventListener('pointercancel', handlePointerUp);
+        container.addEventListener('lostpointercapture', handleLostPointerCapture);
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', handleTouchEnd);
+        window.addEventListener('pointerup', handleWindowPointerUp);
+        window.addEventListener('mouseup', handleWindowPointerUp);
+        window.addEventListener('blur', handleWindowPointerUp);
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+            container.removeEventListener('pointerdown', handlePointerDown);
+            container.removeEventListener('pointermove', handlePointerMove);
+            container.removeEventListener('pointerup', handlePointerUp);
+            container.removeEventListener('pointercancel', handlePointerUp);
+            container.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchEnd);
+            window.removeEventListener('pointerup', handleWindowPointerUp);
+            window.removeEventListener('mouseup', handleWindowPointerUp);
+            window.removeEventListener('blur', handleWindowPointerUp);
+        };
+    }, [
+        applyPan,
+        applyZoom,
+        clearPanState,
+        enablePanZoom,
+        height,
+        maxZoom,
+        minZoom,
+        scheduleViewBox,
+        width,
+    ]);
+    return {
+        /** 绑定到地图外层容器的 ref */
+        containerRef,
+        /** 地块/通道/overlay 使用的 viewBox */
+        viewBox,
+        /** 网格底图 viewBox（平移按屏幕方向，与旋转地块解耦） */
+        gridViewBox,
+        /** 初始 fit viewBox，供 clip path 等需要稳定坐标系的场景 */
+        fitViewBox,
+        /** 恢复到初始 fit 状态 */
+        resetView,
+        /** 重新 fit 地图到容器（可传新 padding） */
+        fitToView,
+    };
+}
+
+/** WGS84 经纬度坐标系 */
+const WGS84 = 'EPSG:4326';
+/** Web Mercator 平面坐标（米），与 MowerMapRenderer / defaultTransform.x|y 一致 */
+const WEB_MERCATOR = 'EPSG:3857';
+proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
+proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+/**
+ * Map 模式专用：管理 OverlayViewF 所需的 bounds、viewBox、缩放与 fitBounds。
+ * 逻辑对齐 MowerMapRenderer 的 Google Maps 叠加层。
+ */
+function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRotate, platform = exports.PlatformType.WEB, padding = 50, }) {
+    /** 仅当外部传入 mapRef 时执行 fitBounds / zoom 监听等副作用 */
+    const enabled = Boolean(mapRef);
+    const transformX = defaultTransform?.x ?? 0;
+    const transformY = defaultTransform?.y ?? 0;
+    const transformRotation = defaultTransform?.rotation ?? 0;
+    /** 叠加层实际旋转 = 地图北向偏移 + 用户 rotation */
+    const actureRotate = originNorthRotate + transformRotation;
+    /** OverlayViewF onDraw 回调写入的 overlay 像素宽高 */
+    const [overlayLayout, setOverlayLayout] = React.useState(null);
+    const mapBounds = React.useMemo(() => calculateMapBounds(mapJson), [mapJson]);
+    /**
+     * SVG viewBox：地图 JSON 平面坐标全量范围。
+     * 需等待 overlayLayout 就绪后才可计算（与 MowerMapRenderer svgViewBox 一致）。
+     */
+    const svgViewBox = React.useMemo(() => {
+        if (!overlayLayout?.width || !overlayLayout?.height)
+            return null;
+        const boundWidth = mapBounds.maxX - mapBounds.minX;
+        const boundHeight = mapBounds.maxY - mapBounds.minY;
+        if (boundWidth <= 0 || boundHeight <= 0)
+            return null;
+        return {
+            x: mapBounds.minX,
+            y: mapBounds.minY,
+            width: boundWidth,
+            height: boundHeight,
+        };
+    }, [mapBounds, overlayLayout?.height, overlayLayout?.width]);
+    /**
+     * OverlayViewF 的 LatLngBounds：
+     * GPS 包围盒 + defaultTransform 在 Web Mercator 下的平移偏移。
+     * 仅 Map 模式（enabled）且 Google Maps 已加载时才计算。
+     */
+    const bounds = React.useMemo(() => {
+        if (!enabled || !mapJson || typeof window === 'undefined' || !window.google?.maps) {
+            return null;
+        }
+        const validBounds = getValidGpsBounds(mapJson, 0);
+        const [swLng0, swLat0] = validBounds.sw;
+        const [neLng0, neLat0] = validBounds.ne;
+        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const swX = swX0 + transformX;
+        const swY = swY0 + transformY;
+        const neX = neX0 + transformX;
+        const neY = neY0 + transformY;
+        const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
+        const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
+        return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
+    }, [enabled, mapJson, transformX, transformY]);
+    /** OverlayViewF onDraw：解析 overlay 容器 style，得到像素 layout */
+    const handleOverlayDraw = React.useCallback((style) => {
+        const layout = Object.keys(style).reduce((acc, key) => {
+            if (!key)
+                return acc;
+            acc[key] = parseFloat(style[key]);
+            return acc;
+        }, {});
+        if (layout.width > 0 && layout.height > 0) {
+            setOverlayLayout({ width: layout.width, height: layout.height });
+        }
+    }, []);
+    /** Map 模式 fitToView：调用 google.maps.Map.fitBounds，考虑旋转后的 GPS 包围盒 */
+    const fitToView = React.useCallback((nextPadding) => {
+        if (!enabled || !mapRef || !mapJson || typeof window === 'undefined' || !window.google?.maps) {
+            return;
+        }
+        const rotate = transformRotation + originNorthRotate;
+        const validBounds = getValidGpsBounds(mapJson, rotate);
+        const [swLng0, swLat0] = validBounds.sw;
+        const [neLng0, neLat0] = validBounds.ne;
+        const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
+        const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
+        const swX = swX0 + transformX;
+        const swY = swY0 + transformY;
+        const neX = neX0 + transformX;
+        const neY = neY0 + transformY;
+        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));
+        const pad = normalizeScreenPadding(nextPadding ?? padding, 0);
+        const paddingArg = pad.top === pad.right && pad.right === pad.bottom && pad.bottom === pad.left
+            ? pad.top
+            : { top: pad.top, right: pad.right, bottom: pad.bottom, left: pad.left };
+        mapRef.fitBounds(googleBounds, paddingArg);
+    }, [enabled, mapJson, mapRef, originNorthRotate, padding, transformRotation, transformX, transformY]);
+    const resetView = React.useCallback(() => {
+        fitToView();
+    }, [fitToView]);
+    /** 参考缩放级别，用于计算 overlayScale（通道线宽视觉恒定，与 MowerMapRenderer 一致） */
+    const REFERENCE_ZOOM = platform === exports.PlatformType.WEB ? 21 : 21;
+    const [overlayScale, setOverlayScale] = React.useState(1);
+    React.useEffect(() => {
+        if (!enabled || !mapRef)
+            return;
+        const updateScale = () => {
+            const currentZoom = mapRef.getZoom();
+            if (currentZoom === undefined)
+                return;
+            const zoomDiff = currentZoom - REFERENCE_ZOOM;
+            const scale = Math.pow(2, -zoomDiff);
+            if (scale < 1) {
+                setOverlayScale(1);
+            }
+            else if (scale > 200) {
+                setOverlayScale(platform === exports.PlatformType.H5 ? 300 : 200);
+            }
+            else {
+                setOverlayScale(platform === exports.PlatformType.H5 ? 1.5 * scale : scale);
+            }
+        };
+        const handleZoomChanged = throttle$2(updateScale, 50);
+        const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
+        updateScale();
+        return () => {
+            if (listener && window.google?.maps?.event) {
+                window.google.maps.event.removeListener(listener);
+            }
+            handleZoomChanged.cancel();
+        };
+    }, [enabled, mapRef, platform, REFERENCE_ZOOM]);
+    const overlayWidth = overlayLayout?.width ?? 0;
+    const overlayHeight = overlayLayout?.height ?? 0;
+    const isOverlayReady = overlayWidth > 0 && overlayHeight > 0 && svgViewBox != null;
+    return {
+        actureRotate,
+        bounds,
+        svgViewBox,
+        fitViewBox: svgViewBox,
+        overlayWidth,
+        overlayHeight,
+        overlayScale,
+        isOverlayReady,
+        handleOverlayDraw,
+        fitToView,
+        resetView,
+    };
+}
+
+function getInitialSize(width, height) {
+    return {
+        width: typeof width === 'number' && width > 0 ? width : 0,
+        height: typeof height === 'number' && height > 0 ? height : 0,
+    };
+}
+function cssLengthToStyle(value) {
+    return value;
+}
+/**
+ * 将 width/height（px 或 CSS length）应用到容器，并用 ResizeObserver 测量实际像素尺寸
+ * 供 fit、标签定位、线宽换算等逻辑使用
+ */
+function useContainerSize(width, height) {
+    const containerRef = React.useRef(null);
+    const [size, setSize] = React.useState(() => getInitialSize(width, height));
+    const layoutStyle = React.useMemo(() => ({
+        width: cssLengthToStyle(width),
+        height: cssLengthToStyle(height),
+    }), [width, height]);
+    React.useLayoutEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const updateSize = () => {
+            const { width: nextWidth, height: nextHeight } = element.getBoundingClientRect();
+            if (nextWidth <= 0 || nextHeight <= 0)
+                return;
+            setSize((prev) => prev.width === nextWidth && prev.height === nextHeight
+                ? prev
+                : { width: nextWidth, height: nextHeight });
+        };
+        updateSize();
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const isReady = size.width > 0 && size.height > 0;
+    return {
+        containerRef,
+        layoutStyle,
+        width: size.width,
+        height: size.height,
+        isReady,
+    };
+}
+
+/**
+ * 地块 hover 状态管理（受控 / 非受控）
+ *
+ * 用于地图与外部表格等 UI 双向联动：
+ * - 地图 hover → onBoundaryHoverChange → 宿主更新表格行高亮
+ * - 表格 hover → 宿主传入 hoveredBoundaryId → 地图同步高亮
+ */
+function useBoundaryHover({ hoveredBoundaryId, defaultHoveredBoundaryId = null, onBoundaryHoverChange, }) {
+    const isControlled = hoveredBoundaryId !== undefined;
+    const [internalHoveredId, setInternalHoveredId] = React.useState(defaultHoveredBoundaryId);
+    const hoveredId = isControlled ? hoveredBoundaryId : internalHoveredId;
+    const setHoveredId = React.useCallback((id) => {
+        if (!isControlled) {
+            setInternalHoveredId(id);
+        }
+        onBoundaryHoverChange?.(id);
+    }, [isControlled, onBoundaryHoverChange]);
+    return {
+        hoveredId,
+        setHoveredId,
+    };
+}
+
+function filterSelectableIds(ids, disabledBoundaryIds) {
+    if (!disabledBoundaryIds?.size)
+        return ids;
+    return ids.filter((id) => !disabledBoundaryIds.has(id));
+}
+/**
+ * 地块多选状态管理（受控 / 非受控）
+ *
+ * - 传入 selectedBoundaryIds → 受控，由宿主维护选中列表（如表格勾选）
+ * - 未传入 → 非受控，内部维护，仍可通过 onSelectionChange 感知变化
+ */
+function useBoundarySelection({ selectedBoundaryIds, defaultSelectedBoundaryIds = [], onSelectionChange, disabledBoundaryIds, }) {
+    const isControlled = selectedBoundaryIds !== undefined;
+    const [internalIds, setInternalIds] = React.useState(filterSelectableIds(defaultSelectedBoundaryIds, disabledBoundaryIds));
+    const selectedIds = isControlled
+        ? filterSelectableIds(selectedBoundaryIds, disabledBoundaryIds)
+        : internalIds;
+    const setSelectedIds = React.useCallback((ids) => {
+        const next = filterSelectableIds(ids, disabledBoundaryIds);
+        if (!isControlled) {
+            setInternalIds(next);
+        }
+        onSelectionChange?.(next);
+    }, [disabledBoundaryIds, isControlled, onSelectionChange]);
+    /** 点击同一地块时 toggle，支持多选；孤立子地块不可选 */
+    const toggleBoundary = React.useCallback((id) => {
+        if (disabledBoundaryIds?.has(id))
+            return;
+        const next = selectedIds.includes(id)
+            ? selectedIds.filter((item) => item !== id)
+            : [...selectedIds, id];
+        setSelectedIds(next);
+    }, [disabledBoundaryIds, selectedIds, setSelectedIds]);
+    return {
+        selectedIds,
+        toggleBoundary,
+        setSelectedIds,
+    };
+}
+
+/** 计算地图中不可选中的孤立子地块 id 集合 */
+function useIsolatedBoundaryIds(mapJson) {
+    return React.useMemo(() => {
+        const boundaries = generateBoundaryData(mapJson);
+        const ids = new Set();
+        for (const boundary of boundaries) {
+            if (boundary.isIsolated) {
+                ids.add(boundary.id);
+            }
+        }
+        return ids;
+    }, [mapJson]);
+}
+/** 供宿主（如表格）判断某地块是否不可选 */
+function getIsolatedBoundaryIds(mapJson) {
+    return generateBoundaryData(mapJson)
+        .filter((boundary) => boundary.isIsolated)
+        .map((boundary) => boundary.id);
+}
+
+/** 计算多边形重心，作为分区名气泡的锚点 */
+function computePolygonCentroid(points) {
+    if (!points || points.length < 3)
+        return null;
+    const valid = points.filter((p) => p.length >= 2);
+    if (valid.length < 3)
+        return null;
+    const polygon = [...valid];
+    const first = polygon[0];
+    const last = polygon[polygon.length - 1];
+    if (first[0] !== last[0] || first[1] !== last[1]) {
+        polygon.push([first[0], first[1]]);
+    }
+    let area = 0;
+    let cx = 0;
+    let cy = 0;
+    for (let i = 0; i < polygon.length - 1; i++) {
+        const x0 = polygon[i][0];
+        const y0 = polygon[i][1];
+        const x1 = polygon[i + 1][0];
+        const y1 = polygon[i + 1][1];
+        const cross = x0 * y1 - x1 * y0;
+        area += cross;
+        cx += (x0 + x1) * cross;
+        cy += (y0 + y1) * cross;
+    }
+    area = area / 2;
+    if (Math.abs(area) < 1e-10) {
+        let sx = 0;
+        let sy = 0;
+        for (const [x, y] of valid) {
+            sx += x;
+            sy += y;
+        }
+        return { x: sx / valid.length, y: sy / valid.length };
+    }
+    cx = cx / (6 * area);
+    cy = cy / (6 * area);
+    return { x: cx, y: cy };
+}
+function buildBoundaryLabelGeometry(mapData) {
+    const boundaryData = generateBoundaryData(mapData);
+    const results = [];
+    for (const boundary of boundaryData) {
+        const centroid = computePolygonCentroid(boundary.points);
+        if (!centroid)
+            continue;
+        results.push({
+            id: boundary.id,
+            name: boundary.name,
+            points: boundary.points,
+            centroid,
+            isIsolated: boundary.isIsolated,
+        });
+    }
+    return results;
+}
+/**
+ * 根据当前「显示 viewBox」计算分区名气泡位置（不预旋转；由 mapOverlayLayer CSS rotate 处理）
+ */
+function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeight, options) {
+    const positionMode = options?.positionMode ?? 'meet';
+    const boundaryGeometry = React.useMemo(() => (mapData ? buildBoundaryLabelGeometry(mapData) : []), [mapData]);
+    return React.useMemo(() => {
+        if (!viewBox || containerWidth <= 0 || containerHeight <= 0)
+            return [];
+        const results = [];
+        for (const boundary of boundaryGeometry) {
+            let leftPct;
+            let topPct;
+            if (positionMode === 'overlay') {
+                const relX = (boundary.centroid.x - viewBox.x) / viewBox.width;
+                const relY = (boundary.centroid.y - viewBox.y) / viewBox.height;
+                leftPct = relX * 100;
+                topPct = relY * 100;
+            }
+            else {
+                const position = mapPointToContainerPercent(boundary.centroid.x, boundary.centroid.y, viewBox, containerWidth, containerHeight);
+                leftPct = position.leftPct;
+                topPct = position.topPct;
+            }
+            if (!Number.isFinite(leftPct) || !Number.isFinite(topPct))
+                continue;
+            const screenWidthPx = computePolygonScreenWidthPx(boundary.points, viewBox, containerWidth, containerHeight);
+            results.push({
+                id: boundary.id,
+                name: boundary.name,
+                leftPct,
+                topPct,
+                screenWidthPx,
+                isIsolated: boundary.isIsolated,
+            });
+        }
+        return results;
+    }, [
+        boundaryGeometry,
+        containerWidth,
+        containerHeight,
+        viewBox?.x,
+        viewBox?.y,
+        viewBox?.width,
+        viewBox?.height,
+        positionMode,
+    ]);
+}
+
+var css_248z = "@charset \"UTF-8\";\n/* 地图容器：裁剪溢出，禁用浏览器默认 touch 手势以便自定义 pinch */\n.index-module_container__nNYv7 {\n  position: relative;\n  overflow: hidden;\n  touch-action: none;\n  user-select: none;\n  cursor: grab;\n  /* H5 点击时不出现矩形 tap 高亮 */\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n}\n\n/* 网格 + 地块双层 SVG 叠放，共用 viewBox 保证平移/缩放同步 */\n.index-module_mapSvgStack__nz2s2 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.index-module_gridSvg__MoJD6 {\n  position: absolute;\n  inset: 0;\n  display: block;\n  pointer-events: none;\n}\n\n/* 地图 SVG：地块/通道，可绕 viewBox 中心旋转 */\n.index-module_mapSvg__vN0LV {\n  position: absolute;\n  inset: 0;\n  display: block;\n  pointer-events: none;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n}\n\n/* 可点击地块：悬停显示 pointer，与地图容器 grab 区分 */\n.index-module_boundaryPolygon__uHe-E {\n  cursor: pointer;\n  pointer-events: auto;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n  outline: none;\n  -webkit-touch-callout: none;\n}\n\n.index-module_container__nNYv7:active {\n  cursor: grabbing;\n}\n\n/* Map 模式：OverlayViewF 内根节点，铺满 overlay 像素区域 */\n.index-module_googleOverlayRoot__TQ3II {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: visible;\n}\n\n/* HTML overlay 层：CSS rotate 与 MowerMapRenderer OverlayViewF 一致，子元素自行反向补偿 */\n.index-module_mapOverlayLayer__7jTDy {\n  position: absolute;\n  inset: 0;\n  transform-origin: 50% 50%;\n  pointer-events: none;\n  z-index: 2;\n}\n\n/* 分区名气泡层，绝对定位覆盖在 SVG 之上 */\n.index-module_labelsLayer__Rcikw {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.index-module_label__xo3Kc {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: auto;\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  tap-highlight-color: transparent;\n  outline: none;\n  -webkit-touch-callout: none;\n}\n\n.index-module_labelOrderOnly__TDLBU {\n  gap: 0;\n}\n\n/* H5 名称标签：气泡宽度 / 文案最大宽度由 constants.ts 内联样式控制 */\n.index-module_labelH5Wrap__Es5cA {\n  white-space: normal;\n}\n\n.index-module_labelPill__7jnOo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n}\n\n.index-module_labelPillH5__iPeHi {\n  box-sizing: border-box;\n}\n\n.index-module_labelText__ialST {\n  word-break: break-word;\n  text-align: center;\n}\n\n.index-module_labelTextH5__jz8SO {\n  max-width: 100%;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  line-height: 1.33;\n}\n\n/* 选中序号徽章：尺寸与颜色由 constants 按 platform 注入 */\n.index-module_selectionOrderBadge__uj7LX {\n  flex-shrink: 0;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V {\n  cursor: not-allowed;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V:active {\n  cursor: grabbing;\n}\n\n.index-module_labelIsolated__K3WAB {\n  cursor: not-allowed;\n  pointer-events: auto;\n}\n\n.index-module_labelIsolated__K3WAB:active {\n  cursor: grabbing;\n}\n\n.index-module_labelIsolatedLayout__k-rwI {\n  gap: 4px;\n}\n\n.index-module_isolatedIconBelow__PuVIF {\n  position: static;\n  transform: none;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  pointer-events: none;\n}";
+var styles = {"container":"index-module_container__nNYv7","mapSvgStack":"index-module_mapSvgStack__nz2s2","gridSvg":"index-module_gridSvg__MoJD6","mapSvg":"index-module_mapSvg__vN0LV","boundaryPolygon":"index-module_boundaryPolygon__uHe-E","googleOverlayRoot":"index-module_googleOverlayRoot__TQ3II","mapOverlayLayer":"index-module_mapOverlayLayer__7jTDy","labelsLayer":"index-module_labelsLayer__Rcikw","label":"index-module_label__xo3Kc","labelOrderOnly":"index-module_labelOrderOnly__TDLBU","labelH5Wrap":"index-module_labelH5Wrap__Es5cA","labelPill":"index-module_labelPill__7jnOo","labelPillH5":"index-module_labelPillH5__iPeHi","labelText":"index-module_labelText__ialST","labelTextH5":"index-module_labelTextH5__jz8SO","selectionOrderBadge":"index-module_selectionOrderBadge__uj7LX","boundaryPolygonIsolated":"index-module_boundaryPolygonIsolated__syN4V","labelIsolated":"index-module_labelIsolated__K3WAB","labelIsolatedLayout":"index-module_labelIsolatedLayout__k-rwI","isolatedIconBelow":"index-module_isolatedIconBelow__PuVIF"};
+styleInject(css_248z);
+
+const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, containerWidth, containerHeight, onHoverChange, onBoundaryClick, onIsolatedTap, }) => {
+    const style = data.style || {};
+    const boundaryId = Number(data.id);
+    const colors = boundaryColors;
+    const strokePx = boundaryStrokePx ?? { ...WEB_PARTITION_BOUNDARY_STROKE_PX };
+    const pointsString = React.useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
+    const fillColor = React.useMemo(() => {
+        if (isIsolated)
+            return colors.isolatedFill;
+        if (selected) {
+            return hovered ? colors.selectedHoverFill : colors.selectedFill;
+        }
+        if (hovered)
+            return colors.hoverFill;
+        return style.fillColor || colors.defaultFill;
+    }, [colors, hovered, isIsolated, selected, style.fillColor]);
+    const strokeColor = React.useMemo(() => {
+        if (isIsolated)
+            return colors.isolatedStroke;
+        if (selected) {
+            return hovered ? colors.selectedHoverStroke : colors.selectedStroke;
+        }
+        if (hovered)
+            return colors.hoverStroke;
+        return style.lineColor || colors.defaultStroke;
+    }, [colors, hovered, isIsolated, selected, style.lineColor]);
+    const strokeWidth = React.useMemo(() => {
+        const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
+        const targetScreenStrokePx = !isIsolated && (selected || hovered) ? strokePx.selected : strokePx.default;
+        return scaleStrokeWidthForViewBox(viewBox, {
+            containerWidth,
+            containerHeight,
+            targetScreenStrokePx,
+        });
+    }, [
+        containerHeight,
+        containerWidth,
+        hovered,
+        isIsolated,
+        selected,
+        strokePx,
+        viewBoxHeight,
+        viewBoxWidth,
+    ]);
+    if (isIsolated) {
+        return (jsxRuntime.jsx("polygon", { className: `${styles.boundaryPolygon} ${styles.boundaryPolygonIsolated}`, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round", [PARTITION_ISOLATED_BOUNDARY_ID_ATTR]: boundaryId, onClick: onIsolatedTap
+                ? (event) => {
+                    event.stopPropagation();
+                    onIsolatedTap(boundaryId, event.clientX, event.clientY);
+                }
+                : undefined }));
+    }
+    return (jsxRuntime.jsx("polygon", { className: styles.boundaryPolygon, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round", [PARTITION_BOUNDARY_ID_ATTR]: boundaryId, onMouseEnter: () => onHoverChange(boundaryId), onMouseLeave: () => onHoverChange(null), onClick: onBoundaryClick
+            ? (event) => {
+                event.stopPropagation();
+                onBoundaryClick(boundaryId);
+            }
+            : undefined }));
+};
+var SelectableBoundaryElement$1 = React.memo(SelectableBoundaryElement);
+
+const PartitionPickerSvg = ({ svgElementDatas, viewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, onIsolatedTap, }) => {
+    const boundaries = (svgElementDatas[exports.DataType.BOUNDARY] || []);
+    const channels = (svgElementDatas[exports.DataType.CHANNEL] || []);
+    const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+    const mapContentTransform = React.useMemo(() => {
+        if (mapRotation === 0)
+            return undefined;
+        const { x: cx, y: cy } = getViewBoxCenter(viewBox);
+        return `rotate(${mapRotation}, ${cx}, ${cy})`;
+    }, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
+    const mapContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
+                    const boundaryId = Number(item.id);
+                    return (jsxRuntime.jsx(SelectableBoundaryElement$1, { data: item, boundaryColors: boundaryColors, boundaryStrokePx: boundaryStrokePx, isIsolated: isolatedBoundaryIds.has(boundaryId), selected: selectedIdSet.has(boundaryId), hovered: hoveredId === boundaryId, viewBoxWidth: viewBox.width, viewBoxHeight: viewBox.height, containerWidth: containerWidth, containerHeight: containerHeight, onHoverChange: onHoverChange, onBoundaryClick: onBoundaryClick, onIsolatedTap: onIsolatedTap }, item.id));
+                }) }), jsxRuntime.jsxs(GElement, { type: "channel", children: [jsxRuntime.jsx(ChannelClipPath, {}), channels.map((item) => (jsxRuntime.jsx(ChannelElement, { data: item }, item.id)))] })] }));
+    return (jsxRuntime.jsx("svg", { className: styles.mapSvg, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", children: mapContentTransform ? (jsxRuntime.jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
+};
+
+function estimateGridIntersectionCount(viewBox, tileSize) {
+    if (tileSize <= 0)
+        return 0;
+    const cols = Math.floor((viewBox.width + 1e-6) / tileSize) + 1;
+    const rows = Math.floor((viewBox.height + 1e-6) / tileSize) + 1;
+    return cols * rows;
+}
+/** 计算当前 viewBox 可见范围内的网格交点（每个交点只渲染一次圆点） */
+function getVisibleGridIntersections(viewBox, tileSize, maxDots) {
+    if (tileSize <= 0 || estimateGridIntersectionCount(viewBox, tileSize) > maxDots)
+        return [];
+    const points = [];
+    const minX = viewBox.x;
+    const minY = viewBox.y;
+    const maxX = viewBox.x + viewBox.width;
+    const maxY = viewBox.y + viewBox.height;
+    const startX = Math.floor(minX / tileSize) * tileSize;
+    const startY = Math.floor(minY / tileSize) * tileSize;
+    for (let x = startX; x <= maxX + 1e-6; x += tileSize) {
+        for (let y = startY; y <= maxY + 1e-6; y += tileSize) {
+            points.push({ x, y });
+        }
+    }
+    return points;
+}
+const MapGridBackground = ({ viewBox, gridStyle }) => {
+    const reactId = React.useId();
+    const patternId = React.useMemo(() => `partition-picker-grid-lines-${reactId.replace(/:/g, '-')}`, [reactId]);
+    const { baseColor, strokeColor, tileSize: tile, lineWidth, dotRadius, opacity, maxIntersectionDots, } = gridStyle;
+    const intersections = React.useMemo(() => getVisibleGridIntersections(viewBox, tile, maxIntersectionDots), [maxIntersectionDots, tile, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
+    /**
+     * SVG stroke 以路径为中心；线在 tile 的 0 边绘制时，四格交点的视觉中心会偏向路径右下。
+     * 线条内缩 lineWidth/2，圆点同步偏移，使圆心与网格线交叉中心对齐。
+     */
+    const lineHalf = lineWidth / 2;
+    return (jsxRuntime.jsxs("g", { className: "partition-picker-grid-bg", "aria-hidden": true, pointerEvents: "none", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, children: [jsxRuntime.jsx("line", { x1: 0, y1: lineHalf, x2: tile, y2: lineHalf, stroke: strokeColor, strokeWidth: lineWidth }), jsxRuntime.jsx("line", { x1: lineHalf, y1: 0, x2: lineHalf, y2: tile, stroke: strokeColor, strokeWidth: lineWidth })] }) }), jsxRuntime.jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: baseColor }), jsxRuntime.jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: `url(#${patternId})`, opacity: opacity }), jsxRuntime.jsx("g", { opacity: opacity, children: intersections.map((point, index) => (jsxRuntime.jsx("circle", { cx: point.x + lineHalf, cy: point.y + lineHalf, r: dotRadius, fill: strokeColor }, `${point.x}-${point.y}-${index}`))) })] }));
+};
+var MapGridBackground$1 = React.memo(MapGridBackground);
+
+const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
+    return (jsxRuntime.jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", 
+        // 设置缩放的规则
+        //等比缩放 viewBox 内容，使其完整落在容器内；
+        //水平、垂直都居中；
+        //比例不一致时，上下或左右留空（letterboxing），不裁切、不拉伸变形。
+        preserveAspectRatio: "xMidYMid meet", 
+        /**
+         * 控制浏览器如何绘制路径/线条：
+         * geometricPrecision：优先几何精度，线条更平滑、对齐更稳，缩放时不易发虚或抖动。
+         * 网格是大量细线，用这个属性能让缩放/平移时网格更清晰稳定。
+         */
+        shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsxRuntime.jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
+};
+
+const PartitionNameLabels = ({ items, selectedIds, labelStyles, platform = exports.PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, onIsolatedTap, }) => {
+    const isWeb = platform === exports.PlatformType.WEB;
+    const orderBadgeStyle = React.useMemo(() => ({
+        width: labelStyles.selectionOrderBadge.width,
+        height: labelStyles.selectionOrderBadge.height,
+        background: labelStyles.selectionOrderBadge.background,
+        border: labelStyles.selectionOrderBadge.border,
+        color: labelStyles.selectionOrderBadge.color,
+        fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
+        fontWeight: labelStyles.selectionOrderBadge.fontWeight,
+        fontFamily: labelStyles.selectionOrderBadge.fontFamily,
+        lineHeight: labelStyles.selectionOrderBadge.lineHeight,
+    }), [labelStyles]);
+    return (jsxRuntime.jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
+            const isIsolated = item.isIsolated === true;
+            const selected = !isIsolated && selectedIds.includes(item.id);
+            const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
+            const isLargeEnough = item.screenWidthPx > H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX;
+            // Web 始终展示名称；H5 按屏幕宽度决定
+            const showNameLabel = isWeb || isLargeEnough;
+            const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
+            const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
+            if (!showNameLabel && !showOrderBadge && !isIsolated) {
+                return null;
+            }
+            const pillStyle = labelAppearanceToStyle(selected ? labelStyles.selected : labelStyles.default);
+            const labelClassName = [
+                styles.label,
+                !isWeb && showNameLabel ? styles.labelH5Wrap : '',
+                isIsolated ? styles.labelIsolated : '',
+                h5OrderOnly ? styles.labelOrderOnly : '',
+                isIsolated ? styles.labelIsolatedLayout : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const showOrderWithName = showOrderBadge && showNameLabel;
+            const selectionOrderGapPx = isWeb ? WEB_SELECTION_ORDER_GAP_PX : H5_SELECTION_ORDER_GAP_PX;
+            const boundaryIdProps = isIsolated
+                ? { [PARTITION_ISOLATED_BOUNDARY_ID_ATTR]: item.id }
+                : { [PARTITION_BOUNDARY_ID_ATTR]: item.id };
+            return (jsxRuntime.jsxs("div", { className: labelClassName, style: {
+                    left: `${item.leftPct}%`,
+                    top: `${item.topPct}%`,
+                    transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
+                    ...(showOrderWithName ? { gap: selectionOrderGapPx } : undefined),
+                }, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: isIsolated
+                    ? onIsolatedTap
+                        ? (event) => {
+                            event.stopPropagation();
+                            onIsolatedTap(item.id, event.clientX, event.clientY);
+                        }
+                        : undefined
+                    : onBoundaryClick
+                        ? (event) => {
+                            event.stopPropagation();
+                            onBoundaryClick(item.id);
+                        }
+                        : undefined, children: [showOrderBadge && (jsxRuntime.jsx("div", { className: styles.selectionOrderBadge, style: orderBadgeStyle, children: selectionOrder })), showNameLabel && (jsxRuntime.jsx("div", { className: `${styles.labelPill} ${!isWeb ? styles.labelPillH5 : ''}`, style: pillStyle, children: jsxRuntime.jsx("span", { className: `${styles.labelText} ${!isWeb ? styles.labelTextH5 : ''}`, children: item.name }) })), isIsolated && (jsxRuntime.jsx("div", { className: `${styles.isolatedIconBelow}`, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG_2 } }))] }, item.id));
+        }) }));
+};
+
+const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
+/** Map 模式下 OverlayViewF 默认 z-index */
+const DEFAULT_OVERLAY_Z_INDEX = 100;
+const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = exports.PlatformType.WEB, width, height, padding = 0, backgroundColor = DEFAULT_BACKGROUND, defaultTransform, mapRef, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onSizeChange, selectedBoundaryIds, defaultSelectedBoundaryIds, onSelectionChange, hoveredBoundaryId, defaultHoveredBoundaryId, onBoundaryHoverChange, showSelectionOrder = false, onIsolatedBoundaryTap, zIndex = DEFAULT_OVERLAY_Z_INDEX, className, style, }, ref) => {
+    /**
+     * 是否为 Map 模式（传入 mapRef 时为 true）：
+     * - true：Google Maps 底图 + OverlayViewF，平移/缩放/fit 由底图负责
+     * - false：Standalone 固定容器 + 网格 SVG + useMapViewport
+     */
+    const isMapMode = Boolean(mapRef);
+    const reactInstanceId = React.useId();
+    const channelClipPathId = React.useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
+    /** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观（地块/标签/网格等） */
+    const mergedPickerStyles = React.useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
+    /** Standalone 容器背景与 grid.baseColor 对齐（合并后的最终值） */
+    const resolvedBackgroundColor = React.useMemo(() => {
+        if (isMapMode)
+            return undefined;
+        if (pickerStyleConfig?.grid?.baseColor != null) {
+            return mergedPickerStyles.grid.baseColor;
+        }
+        return backgroundColor ?? mergedPickerStyles.grid.baseColor;
+    }, [
+        backgroundColor,
+        isMapMode,
+        mergedPickerStyles.grid.baseColor,
+        pickerStyleConfig?.grid?.baseColor,
+    ]);
+    /** Standalone 网格层：backgroundColor 未显式指定 grid.baseColor 时与容器背景同步 */
+    const standaloneGridStyle = React.useMemo(() => {
+        if (pickerStyleConfig?.grid?.baseColor != null) {
+            return mergedPickerStyles.grid;
+        }
+        if (backgroundColor != null) {
+            return { ...mergedPickerStyles.grid, baseColor: backgroundColor };
+        }
+        return mergedPickerStyles.grid;
+    }, [
+        backgroundColor,
+        mergedPickerStyles.grid,
+        pickerStyleConfig?.grid?.baseColor,
+    ]);
+    const mergedMapConfig = React.useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
+    const svgElementDatas = React.useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
+    /** 地图 Y 轴相对正北的偏移（度），与 MowerMapRenderer.originNorthRotate 一致 */
+    const originNorthRotate = React.useMemo(() => {
+        if (mapJson.map_north_offset)
+            return (mapJson.map_north_offset * 180) / Math.PI;
+        return 0;
+    }, [mapJson.map_north_offset]);
+    /** Standalone 模式：叠加层实际旋转角（度）= 地图北向偏移 + 外部传入 rotation */
+    const standaloneActureRotate = React.useMemo(() => originNorthRotate + (defaultTransform?.rotation ?? 0), [originNorthRotate, defaultTransform?.rotation]);
+    /**
+     * 稳定的内容 viewBox（地图全量范围 + SVG 裁剪边距）
+     * 供 ChannelClipPath 使用，不随用户平移/缩放变化
+     */
+    const contentViewBox = React.useMemo(() => {
+        const bounds = calculateMapBounds(mapJson);
+        return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
+    }, [mapJson]);
+    /** 孤立地块 id 列表（未连接到主地块的子地块） */
+    const isolatedBoundaryIds = useIsolatedBoundaryIds(mapJson);
+    const boundaryNameById = React.useMemo(() => {
+        const names = new Map();
+        for (const boundary of generateBoundaryData(mapJson)) {
+            names.set(boundary.id, boundary.name);
+        }
+        return names;
+    }, [mapJson]);
+    const handleIsolatedTap = React.useCallback((boundaryId, clientX, clientY) => {
+        if (!onIsolatedBoundaryTap || !isolatedBoundaryIds.has(boundaryId))
+            return;
+        onIsolatedBoundaryTap({
+            boundaryId,
+            boundaryName: boundaryNameById.get(boundaryId),
+            clientX,
+            clientY,
+        });
+    }, [boundaryNameById, isolatedBoundaryIds, onIsolatedBoundaryTap]);
+    const isolatedTapHandler = onIsolatedBoundaryTap ? handleIsolatedTap : undefined;
+    /** 选中地块 id 列表（受控/非受控）与切换选中回调 */
+    const { selectedIds, toggleBoundary, setSelectedIds } = useBoundarySelection({
+        selectedBoundaryIds,
+        defaultSelectedBoundaryIds,
+        onSelectionChange,
+        disabledBoundaryIds: isolatedBoundaryIds,
+    });
+    /** 当前 hover 的地块 id（受控/非受控）与切换 hover 回调 */
+    const { hoveredId, setHoveredId } = useBoundaryHover({
+        hoveredBoundaryId,
+        defaultHoveredBoundaryId,
+        onBoundaryHoverChange,
+    });
+    const handleHoverChange = React.useCallback((id) => {
+        if (id != null && isolatedBoundaryIds.has(id))
+            return;
+        setHoveredId(id);
+    }, [isolatedBoundaryIds, setHoveredId]);
+    /** Map 模式：地块 polygon / 标签直接 onClick（无底图拖拽抢占） */
+    const handleBoundaryClick = React.useCallback((id) => {
+        if (isolatedBoundaryIds.has(id))
+            return;
+        toggleBoundary(id);
+    }, [isolatedBoundaryIds, toggleBoundary]);
+    /** Standalone 模式：由 viewport 统一处理点击（支持在地块上拖拽平移） */
+    const handleViewportTap = React.useCallback(({ target, clientX, clientY }) => {
+        const isolatedEl = target.closest(`[${PARTITION_ISOLATED_BOUNDARY_ID_ATTR}]`);
+        if (isolatedEl) {
+            const isolatedId = Number(isolatedEl.getAttribute(PARTITION_ISOLATED_BOUNDARY_ID_ATTR));
+            if (Number.isFinite(isolatedId) && isolatedBoundaryIds.has(isolatedId)) {
+                handleIsolatedTap(isolatedId, clientX, clientY);
+            }
+            return;
+        }
+        const boundaryEl = target.closest(`[${PARTITION_BOUNDARY_ID_ATTR}]`);
+        if (!boundaryEl)
+            return;
+        const id = Number(boundaryEl.getAttribute(PARTITION_BOUNDARY_ID_ATTR));
+        if (!Number.isFinite(id) || isolatedBoundaryIds.has(id))
+            return;
+        toggleBoundary(id);
+    }, [handleIsolatedTap, isolatedBoundaryIds, toggleBoundary]);
+    /**
+     * Map 模式 overlay 状态（bounds / viewBox / fitBounds / overlayScale）。
+     * 无 mapRef 时 hook 内部 enabled=false，返回值不参与渲染。
+     */
+    const googleOverlay = useGoogleMapsOverlay({
+        mapJson,
+        mapRef,
+        defaultTransform,
+        originNorthRotate,
+        platform,
+        padding,
+    });
+    /** Standalone 才测量容器；Map 模式尺寸由 OverlayViewF onDraw 提供 */
+    const { containerRef, layoutStyle, width: pxWidth, height: pxHeight, isReady, } = useContainerSize(isMapMode ? 0 : width, isMapMode ? 0 : height);
+    React.useEffect(() => {
+        if (!isMapMode && isReady) {
+            onSizeChange?.(pxWidth, pxHeight);
+        }
+    }, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
+    /** Standalone：平移/缩放 viewBox；Map 模式 enablePanZoom 关闭，仅保留 hook 结构 */
+    const { viewBox: standaloneViewBox, gridViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
+        mapJson,
+        containerRef,
+        width: pxWidth,
+        height: pxHeight,
+        padding,
+        minZoom,
+        maxZoom,
+        refitOnResize,
+        enablePanZoom: enablePanZoom && !isMapMode,
+        onViewportTap: handleViewportTap,
+        mapRotationDeg: standaloneActureRotate,
+    });
+    /** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态（Map 与 Standalone 数据源不同） */
+    const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
+    const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
+    const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
+    const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
+    const isLayersReady = isMapMode ? googleOverlay.isOverlayReady : isReady;
+    /**
+     * Standalone：标签/充电桩置于 mapOverlayLayer，CSS rotate 与 MowerMapRenderer 一致。
+     * Map 模式：旋转由 OverlayViewF 承担，此处不需要额外包裹层。
+     */
+    const mapOverlayLayerStyle = React.useMemo(() => !isMapMode && actureRotate !== 0 ? { transform: `rotate(${actureRotate}deg)` } : undefined, [actureRotate, isMapMode]);
+    /**
+     * 分区名定位：
+     * - Map 模式 overlay：相对 overlay 宽高百分比（与 BoundaryLabels 一致）
+     * - Standalone meet：按 preserveAspectRatio 换算容器百分比
+     */
+    const labelItems = usePartitionLabelItems(mapJson, viewBox, overlayWidth, overlayHeight, {
+        positionMode: isMapMode ? 'overlay' : 'meet',
+    });
+    /**
+     * 复用 ChannelClipPath / ChannelElement / CharginPile 所需的最小 Context
+     * - svgViewBox：稳定 contentViewBox（见上）
+     * - channelClipPathId：同页多实例时避免 SVG id 冲突
+     * - platform：供子组件读取 Web / H5 差异
+     * - Map 模式额外注入 mapRef / bounds / overlayScale（通道线宽等）
+     */
+    const commonValue = React.useMemo(() => ({
+        sn,
+        platform,
+        svgViewBox: contentViewBox,
+        channelClipPathId,
+        ...(isMapMode && mapRef
+            ? {
+                mapRef,
+                bounds: googleOverlay.bounds,
+                overlayScale: googleOverlay.overlayScale,
+            }
+            : {}),
+    }), [
+        sn,
+        platform,
+        contentViewBox,
+        channelClipPathId,
+        isMapMode,
+        mapRef,
+        googleOverlay.bounds,
+        googleOverlay.overlayScale,
+    ]);
+    const svgEditValue = React.useMemo(() => ({
+        svgElementDatas,
+    }), [svgElementDatas]);
+    React.useImperativeHandle(ref, () => ({
+        fitToView: isMapMode ? googleOverlay.fitToView : standaloneFitToView,
+        resetView: isMapMode ? googleOverlay.resetView : standaloneResetView,
+        getSelectedBoundaryIds: () => selectedIds,
+        setSelectedBoundaryIds: setSelectedIds,
+        getHoveredBoundaryId: () => hoveredId,
+        setHoveredBoundaryId: setHoveredId,
+    }), [
+        googleOverlay.fitToView,
+        googleOverlay.resetView,
+        hoveredId,
+        isMapMode,
+        selectedIds,
+        setHoveredId,
+        setSelectedIds,
+        standaloneFitToView,
+        standaloneResetView,
+    ]);
+    const containerStyle = React.useMemo(() => ({
+        backgroundColor: isMapMode ? 'transparent' : resolvedBackgroundColor,
+        ...style,
+        ...(isMapMode ? {} : layoutStyle),
+    }), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
+    /** 地块 + 通道 SVG；Map 模式不在 SVG 内旋转（由 OverlayViewF rotate 处理） */
+    const mapSvgLayer = viewBox && isLayersReady ? (jsxRuntime.jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox, containerWidth: overlayWidth, containerHeight: overlayHeight, mapRotation: isMapMode ? 0 : actureRotate, boundaryColors: mergedPickerStyles.boundary, boundaryStrokePx: mergedPickerStyles.boundaryStrokePx, isolatedBoundaryIds: isolatedBoundaryIds, selectedIds: selectedIds, hoveredId: hoveredId, onHoverChange: handleHoverChange, onBoundaryClick: isMapMode ? handleBoundaryClick : undefined, onIsolatedTap: isMapMode ? isolatedTapHandler : undefined })) : null;
+    /**
+     * 分区标签 + 充电桩 HTML 层。
+     * Map 模式：平铺于 overlay 根节点；Standalone：包在 mapOverlayLayer 内做 CSS 旋转。
+     */
+    const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick, onIsolatedTap: isolatedTapHandler }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxRuntime.jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onIsolatedTap: isolatedTapHandler }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight, sizeInSvgUnits: true, minDisplaySizePx: PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX })] }))) : null;
+    /** Map 模式：渲染 OverlayViewF，底图为 Google Maps */
+    if (isMapMode && mapRef) {
+        return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxRuntime.jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
+    }
+    /** Standalone 模式：固定容器 + 网格底图 + 双层 SVG / HTML overlay */
+    return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.mapSvgStack, children: [jsxRuntime.jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: standaloneGridStyle }), mapSvgLayer] }), overlayLayers] })) }) }) }));
+});
+MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
+
 exports.ALL_DIRECTION_SELECTED = ALL_DIRECTION_SELECTED;
 exports.AntennaData = AntennaData;
 exports.BaseData = BaseData;
@@ -30221,12 +32339,18 @@ exports.BoundaryData = BoundaryData;
 exports.BoundarySvgRender = BoundarySvgRender;
 exports.ChannelData = ChannelData;
 exports.ChargingPileData = ChargingPileData;
+exports.DEFAULT_SCREEN_PADDING = DEFAULT_SCREEN_PADDING;
 exports.DoodleData = DoodleData;
 exports.MAX_DIRECTION_ANGLE = MAX_DIRECTION_ANGLE;
 exports.MIN_DIRECTION_ANGLE = MIN_DIRECTION_ANGLE;
 exports.MowGateData = MowGateData;
 exports.MowerMapRenderer = MowerMapRenderer;
+exports.MowerPartitionPickerMap = MowerPartitionPickerMap;
 exports.ObstacleData = ObstacleData;
+exports.PARTITION_PICKER_COLORS_H5 = PARTITION_PICKER_COLORS_H5;
+exports.PARTITION_PICKER_COLORS_WEB = PARTITION_PICKER_COLORS_WEB;
+exports.PARTITION_PICKER_LABEL_STYLES_H5 = PARTITION_PICKER_LABEL_STYLES_H5;
+exports.PARTITION_PICKER_LABEL_STYLES_WEB = PARTITION_PICKER_LABEL_STYLES_WEB;
 exports.PathData = PathData;
 exports.SCALE_FACTOR = SCALE_FACTOR;
 exports.SvgParserNative = SvgParserNative;
@@ -30234,10 +32358,17 @@ exports.UnifiedMapDataProcessor = UnifiedMapDataProcessor;
 exports.VisionOffData = VisionOffData;
 exports.calculateMapGpsCenter = calculateMapGpsCenter;
 exports.estimateGpsFromMapBounds = estimateGpsFromMapBounds;
+exports.getIsolatedBoundaryIds = getIsolatedBoundaryIds;
+exports.getPartitionPickerColors = getPartitionPickerColors;
+exports.getPartitionPickerLabelStyles = getPartitionPickerLabelStyles;
 exports.getValidGpsBounds = getValidGpsBounds;
 exports.initBoundary = initBoundary;
 exports.initChannel = initChannel;
 exports.initDoodle = initDoodle;
 exports.initObstacle = initObstacle;
 exports.initVisionOff = initVisionOff;
+exports.normalizeScreenPadding = normalizeScreenPadding;
+exports.resolvePartitionPickerStyles = resolvePartitionPickerStyles;
 exports.restorePointsFormat = restorePointsFormat;
+exports.signGoogleStaticMapUrl = signGoogleStaticMapUrl;
+exports.signGoogleStaticMapUrlSync = signGoogleStaticMapUrlSync;