@fleet-frontend/mower-maps 0.2.0-beta.16 → 0.2.0-beta.17

package/dist/index.esm.js

@@ -48,6 +48,11 @@ var REAL_TIME_DATA_TYPE;
 /**
  * 地图渲染相关常量配置
  */
+// 默认坐标
+const DEFAULT_COORDINATES = {
+    sw: [116.35497283935547, 40.0374755859375],
+    ne: [116.35584259033203, 40.038658142089844],
+};
 /**
  * 缩放因子 - 将米转换为像素
  */
@@ -157,7 +162,6 @@ class BaseData {
  */
 class BoundaryData extends BaseData {
     constructor(originalData, level, channels, style) {
-        console.log('originBoundary', originalData);
         const convertedPoints = convertPointsFormat(originalData?.points) || [];
         super(originalData?.id, DataType.BOUNDARY, level, RenderType.POLYGON, convertedPoints, originalData);
         const { isFlowGlobal, cuttingHeight } = convertHeightsetToParams(originalData?.height_set || 0);
@@ -720,6 +724,7 @@ class UnifiedMapDataProcessor {
         for (const element of elements) {
             try {
                 // 如果有SVG数据，创建涂鸦数据
+                // 如果有过期时间，且过期时间大于当前时间(秒级别)，才需要渲染
                 if ('svg' in element &&
                     element.svg &&
                     'center' in element &&
@@ -727,7 +732,9 @@ class UnifiedMapDataProcessor {
                     'scale' in element &&
                     element.scale !== undefined &&
                     'direction' in element &&
-                    element.direction !== undefined) {
+                    element.direction !== undefined &&
+                    (element.expiration_ts === undefined ||
+                        element.expiration_ts > Math.floor(Date.now() / 1000))) {
                     const convertedPoints = convertPoint(element.center);
                     if (!convertedPoints) {
                         continue;
@@ -740,7 +747,9 @@ class UnifiedMapDataProcessor {
                 else if ('points' in element &&
                     element.points &&
                     Array.isArray(element.points) &&
-                    element.points.length >= 3) {
+                    element.points.length >= 3 &&
+                    (element.expiration_ts === undefined ||
+                        element.expiration_ts > Math.floor(Date.now() / 1000))) {
                     const convertedPoints = convertPointsFormat(element.points);
                     if (!convertedPoints || convertedPoints.length < 3) {
                         continue;
@@ -1461,51 +1470,46 @@ function estimateGpsFromMapBounds(mapData) {
         if (!bounds || bounds.minX === Infinity) {
             return {
                 sw: [0, 0],
-                ne: [0, 0]
+                ne: [0, 0],
             };
         }
         // 将边界数据转换为物理单位（米）
-        const minXMeters = bounds.minX / SCALE_FACTOR * 6; // 西边界
-        const minYMeters = bounds.minY / SCALE_FACTOR * 6; // 南边界
-        const maxXMeters = bounds.maxX / SCALE_FACTOR * 6; // 东边界
-        const maxYMeters = bounds.maxY / SCALE_FACTOR * 6; // 北边界
+        const minXMeters = bounds.minX / SCALE_FACTOR; // 西边界
+        const minYMeters = bounds.minY / SCALE_FACTOR; // 南边界
+        const maxXMeters = bounds.maxX / SCALE_FACTOR; // 东边界
+        const maxYMeters = bounds.maxY / SCALE_FACTOR; // 北边界
         const mapWidthMeters = maxXMeters - minXMeters;
         const mapHeightMeters = maxYMeters - minYMeters;
-        // 根据地图大小选择合适的基准GPS坐标
-        let baseLat;
-        let baseLng;
-        if (mapWidthMeters < 1000 && mapHeightMeters < 1000) {
-            // 小型区域 - 使用更精确的基准点
-            baseLat = 39.9042; // 北京天安门
-            baseLng = 116.4074;
-        }
-        else if (mapWidthMeters < 10000 && mapHeightMeters < 10000) {
-            // 中型区域 - 使用城市级别的基准点
-            baseLat = 39.9000;
-            baseLng = 116.4000;
-        }
-        else {
-            // 大型区域 - 使用更大范围的基准点
-            baseLat = 40.0000;
-            baseLng = 116.0000;
-        }
+        // 凤凰岭的GPS坐标作为地图中心点
+        const centerLat = 40.103;
+        const centerLng = 116.072222;
+        // const centerLat = 40.03806686401367;
+        // const centerLng = 116.35540771484375;
         // 精确的坐标转换常数
         // 1度纬度 = 约111,320米（在地球上任何地方都基本相同）
         // 1度经度 = 约111,320 * cos(纬度) 米（随纬度变化）
         const METERS_PER_DEGREE_LAT = 111320;
-        const METERS_PER_DEGREE_LNG = 111320 * Math.cos(baseLat * Math.PI / 180);
+        const METERS_PER_DEGREE_LNG = 111320 * Math.cos((centerLat * Math.PI) / 180);
         // 计算SW（西南角）GPS坐标
-        const swLat = baseLat + minYMeters / METERS_PER_DEGREE_LAT; // 南边界纬度
-        const swLng = baseLng + minXMeters / METERS_PER_DEGREE_LNG; // 西边界经度
+        // 从中心点减去半个地图的宽度和高度
+        const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+        const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
         // 计算NE（东北角）GPS坐标
-        const neLat = baseLat + maxYMeters / METERS_PER_DEGREE_LAT; // 北边界纬度
-        const neLng = baseLng + maxXMeters / METERS_PER_DEGREE_LNG; // 东边界经度
+        // 从中心点加上半个地图的宽度和高度
+        const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
+        const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
         // 验证估算的坐标是否在合理范围内
-        if (swLat < -90 || swLat > 90 || swLng < -180 || swLng > 180 ||
-            neLat < -90 || neLat > 90 || neLng < -180 || neLng > 180) {
+        if (swLat < -90 ||
+            swLat > 90 ||
+            swLng < -180 ||
+            swLng > 180 ||
+            neLat < -90 ||
+            neLat > 90 ||
+            neLng < -180 ||
+            neLng > 180) {
             console.warn('估算的GPS坐标超出有效范围:', {
                 sw: [swLng, swLat],
-                ne: [neLng, neLat]
+                ne: [neLng, neLat],
             });
             return null;
         }
@@ -1513,13 +1517,13 @@ function estimateGpsFromMapBounds(mapData) {
         if (swLat >= neLat || swLng >= neLng) {
             console.warn('GPS边界坐标逻辑错误:', {
                 sw: [swLng, swLat],
-                ne: [neLng, neLat]
+                ne: [neLng, neLat],
             });
             return null;
         }
         return {
             sw: [swLng, swLat], // [经度, 纬度]
-            ne: [neLng, neLat] // [经度, 纬度]
+            ne: [neLng, neLat], // [经度, 纬度]
         };
     }
     catch (error) {
@@ -8561,23 +8565,6 @@ const useDrag = ({ dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, }
 
 // 编辑模式相关常量配置
 // 默认的旋转图标
-const DEFAULT_ROTATE_ICON = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_8198_30743)">
-<path d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z" fill="url(#paint0_linear_8198_30743)"/>
-<path d="M11.4894 14.7176C10.4257 14.9506 9.31616 14.8595 8.30481 14.4558C7.29342 14.0521 6.4264 13.3535 5.81555 12.4519C5.24299 11.6068 4.92013 10.6187 4.88196 9.60134L4.87805 9.39724C4.87805 8.94523 5.24441 8.57892 5.69641 8.57888C6.12014 8.57888 6.46888 8.90061 6.51087 9.31325L6.51477 9.39724L6.52551 9.68142C6.57513 10.3429 6.79716 10.9821 7.17102 11.534C7.54479 12.0855 8.05583 12.528 8.65149 12.8191L8.91223 12.9343C9.61943 13.2166 10.395 13.2809 11.1388 13.1179L11.4142 13.0467C11.6075 12.9889 11.795 12.9149 11.9757 12.8279L10.8282 12.3865C10.4074 12.2245 10.1977 11.7518 10.3595 11.3308C10.5215 10.9099 10.9941 10.7003 11.4152 10.8621L13.9562 11.8386C14.3773 12.0005 14.5878 12.4732 14.4259 12.8943C14.3891 12.9901 14.3364 13.0752 14.2716 13.1472L14.2726 13.1482C13.5227 13.9377 12.5531 14.4845 11.4894 14.7176Z" fill="white"/>
-<path d="M8.51062 4.54807C9.57433 4.31505 10.6838 4.40612 11.6952 4.80979C12.7066 5.21356 13.5736 5.91214 14.1844 6.8137C14.757 7.65884 15.0799 8.64688 15.118 9.66429L15.1219 9.86839C15.1219 10.3204 14.7556 10.6867 14.3036 10.6867C13.8799 10.6867 13.5311 10.365 13.4891 9.95237L13.4852 9.86839L13.4745 9.58421C13.4249 8.92272 13.2028 8.28348 12.829 7.73167C12.4552 7.18008 11.9442 6.73767 11.3485 6.44651L11.0878 6.33128C10.3806 6.04903 9.60501 5.98477 8.8612 6.14768L8.58581 6.21897C8.39252 6.27673 8.20502 6.35068 8.02429 6.43772L9.17175 6.87913C9.59256 7.04116 9.8023 7.51383 9.6405 7.93479C9.47855 8.35574 9.00587 8.56537 8.58484 8.40354L6.04382 7.42698C5.6227 7.26512 5.41224 6.79244 5.57409 6.37132C5.61094 6.27552 5.66365 6.19044 5.72839 6.11839L5.72742 6.11741C6.47734 5.32789 7.44693 4.78114 8.51062 4.54807Z" fill="white"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_8198_30743" x1="17.7273" y1="16.3636" x2="-1.21533" y2="2.08814e-07" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F16629"/>
-<stop offset="1" stop-color="#F1A129"/>
-</linearGradient>
-<clipPath id="clip0_8198_30743">
-<rect width="20" height="20" fill="white" transform="matrix(-1 0 0 1 20 0)"/>
-</clipPath>
-</defs>
-</svg>`;
 // 默认的拖拽图标
 const DEFAULT_DRAG_ICON = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -8591,41 +8578,6 @@ const DEFAULT_DRAG_ICON = `
 </defs>
 </svg>`;
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-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 (jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
-};
-
 /**
  * 高级节流函数
  * @param func 要节流的函数
@@ -8695,16 +8647,45 @@ function isMobileDevice() {
     return isMobileUserAgent || (hasTouchScreen && isSmallScreen);
 }
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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","move":"index-module_move__mZF8s"};
+styleInject(css_248z$9);
+
 const DragHandle = ({ onDragStart, isDragging }) => {
     // 在PC设备上隐藏拖拽手柄
     if (!isMobileDevice()) {
         return null;
     }
     return (jsx("div", { className: styles$9.move, onMouseDown: (e) => {
-            console.log('down');
             onDragStart(e);
         }, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
-            console.log('drag up');
             // onDragEnd(e);
         }, 
         // onTouchEnd={(e) => onDragEnd(e)}
@@ -8712,7 +8693,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
 };
 
 const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, isDragMap = false, }) => {
-    const { isDragging, isRotating, handleDragStart, addGlobalListeners, } = useDrag({
+    const { isDragging, handleDragStart, addGlobalListeners } = useDrag({
         dragCallbacks,
         onBoundaryLabelsCollapse,
         onTransformChange,
@@ -8723,10 +8704,6 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
         const cleanup = addGlobalListeners();
         return cleanup;
     }, [addGlobalListeners]);
-    // 处理旋转开始
-    const handleRotateStart = (e) => {
-        handleDragStart(e, 'rotate', containerRef?.current);
-    };
     // 处理拖拽开始
     const handleDragStartEvent = (e) => {
         handleDragStart(e, 'drag', containerRef?.current);
@@ -8734,7 +8711,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
     if (!isDragMap) {
         return null;
     }
-    return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
+    return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
 };
 
 /**
@@ -8785,6 +8762,7 @@ class SvgMapView {
         svg.style.width = '100%';
         svg.style.height = '100%';
         svg.style.background = 'transparent';
+        svg.style.overflow = 'visible';
         return svg;
     }
     /**
@@ -8876,7 +8854,7 @@ class SvgMapView {
      * 设置自适应视图变换 - 让SVG刚好包裹住图形
      */
     fitToView(bounds) {
-        const padding = 20; // 添加一些边距以避免内容贴边
+        const padding = 0;
         const boundWidth = bounds.maxX - bounds.minX + padding * 2;
         const boundHeight = bounds.maxY - bounds.minY + padding * 2;
         // 防止宽高为0的情况
@@ -8885,7 +8863,16 @@ class SvgMapView {
             return;
         }
         // 获取容器的实际尺寸进行验证
-        this.container.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+        const containerHeight = containerRect.height;
+        if (containerWidth <= 0 || containerHeight <= 0) {
+            console.warn('Invalid container size:', containerWidth, containerHeight);
+            return;
+        }
+        // // 计算内容和容器的宽高比
+        // const contentAspectRatio = boundWidth / boundHeight;
+        // const containerAspectRatio = containerWidth / containerHeight;
         // 设置viewBox以包含所有内容
         this.viewBox = {
             x: bounds.minX - padding,
@@ -14147,6 +14134,7 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
             // 调用回调
             const elementCount = elements.length;
             onMapLoad?.(elementCount);
+            x;
         }
         catch (error) {
             console.error('加载地图数据时出错:', error);
@@ -14200,9 +14188,7 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
     }, [mapConfig, onPathLoad]);
     // 初始化 SVG 地图视图
     const initializeSvgMapView = useCallback((container) => {
-        console.log('initializeSvgMapView called, container:', container, svgMapViewRef.current);
         if (!container || svgMapViewRef.current) {
-            console.log('Skipping initialization - container missing or already initialized');
             return;
         }
         containerRef.current = container;
@@ -14216,12 +14202,10 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
             offscreenContainerRef.current = offscreenContainer;
             // 创建 SvgMapView 实例
             svgMapViewRef.current = new SvgMapView(sn, offscreenContainer, 800, 600);
-            console.log('SvgMapView created:', svgMapViewRef.current);
             // 加载地图数据
             loadMapData();
             // 加载路径数据
             if (pathData && svgMapViewRef.current) {
-                console.log('Loading path data:', pathData);
                 loadPathData(pathData, mowPartitionData);
             }
             else {
@@ -14237,7 +14221,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
             if (svgElement) {
                 svgElementRef.current = svgElement;
                 container.appendChild(svgElement);
-                console.log('SVG element added to container');
             }
             else {
                 console.warn('Failed to get SVG element from SvgMapView');
@@ -14279,8 +14262,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
     const setTransform = useCallback((transform) => {
         if (!svgMapViewRef.current)
             return;
-        console.log('SvgMapView setTransform called with:', transform);
-        // 使用SvgMapView的transform API
         svgMapViewRef.current.setTransform(transform);
     }, []);
     // 重置到默认变换
@@ -14351,7 +14332,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
     // 监听pathData变化，确保路径数据能够被加载
     useEffect(() => {
         if (svgMapViewRef.current && pathData) {
-            console.log('PathData changed, reloading...', pathData);
             loadPathData(pathData, mowPartitionData);
             svgMapViewRef.current.refresh();
         }
@@ -14359,7 +14339,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
     useEffect(() => {
         if (svgMapViewRef.current && mapData) {
             loadMapData();
-            console.log('mapData changed, reloading...', mapData);
             svgMapViewRef.current.refresh();
         }
     }, [mapData, loadMapData]);
@@ -14443,7 +14422,6 @@ const SvgMapComponent = forwardRef(({ editMap, rotate, mapData, pathData, modelT
     // 初始化 SVG 地图
     useEffect(() => {
         if (containerRef.current && mapData && !svgMapView) {
-            console.log('Initializing SVG map view, containerRef->', containerRef.current);
             initializeSvgMapView(containerRef.current);
         }
     }, [mapData, svgMapView, initializeSvgMapView, pathData]);
@@ -15114,20 +15092,20 @@ const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) =>
 };
 
 const VertexElement = React__default.memo(({ r, stroke, fill, ...props }) => {
-    const { overlayScale, platform } = useCommonContext();
+    const { overlayScale } = useCommonContext();
     const radius = typeof r === 'number' ? r : 12;
-    return (jsx("circle", { r: platform === PlatformType.H5 ? (radius * overlayScale) / 2 : radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 2 * overlayScale, ...props }));
+    return (jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 2 * overlayScale, ...props }));
 });
 
-var _path$5;
-function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
+var _path$4;
+function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
 var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fill: "#FD494D",
     d: "M6.667 12a.667.667 0 0 0 .666-.667v-4a.667.667 0 1 0-1.333 0v4a.667.667 0 0 0 .667.667m6.666-8h-2.666v-.667a2 2 0 0 0-2-2H7.333a2 2 0 0 0-2 2V4H2.667a.667.667 0 0 0 0 1.333h.666v7.334a2 2 0 0 0 2 2h5.334a2 2 0 0 0 2-2V5.333h.666a.667.667 0 1 0 0-1.333m-6.666-.667a.667.667 0 0 1 .666-.666h1.334a.667.667 0 0 1 .666.666V4H6.667zm4.666 9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666V5.333h6.666zm-2-.667a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-1.333 0v4a.667.667 0 0 0 .666.667"
   })));
@@ -15604,7 +15582,6 @@ const useCheckElement = () => {
     const { editMapInfo, minDistance } = useMapEditContext();
     const { svgElementDatas } = useSvgEditContext();
     const checkDoodle = useCallback(() => {
-        console.log('checkdoodle', editMapInfo, svgElementDatas);
         if (!editMapInfo.selectElement || editMapInfo.selectElement.type !== DataType.DOODLE) {
             return {
                 isValid: false,
@@ -15628,18 +15605,12 @@ const useCheckElement = () => {
         // 1. 首先判断 doodle 是否在一个 boundary 内
         let isInBoundary = false;
         let containingBoundary = null;
-        console.log('doodlePoints--->', doodleElement, doodlePoints);
         for (const boundaryData of boundary) {
             const boundaryPoints = coordinatesToPoints$1(boundaryData.points);
             const allPointsInside = doodlePoints.every((point) => {
                 const isIn = isPointInPolygon(point, boundaryPoints);
-                // console.log('isIn--->', isIn, point, boundaryPoints);
-                if (!isIn) {
-                    console.log('isIn--->', isIn, point, boundaryPoints);
-                }
                 return isIn;
             });
-            console.log('allPointsInside--->', allPointsInside, boundaryPoints, boundaryData);
             if (allPointsInside) {
                 isInBoundary = true;
                 containingBoundary = boundaryData;
@@ -15697,7 +15668,6 @@ const useCheckElement = () => {
             }
             // 检查距离是否大于 2m
             const distance = polygonToPolygonDistance(doodlePoints, elementPoints);
-            console.log('distance--->', distance, minDistance, doodlePoints, elementPoints);
             if (distance < minDistance) {
                 const elementTypeName = {
                     [DataType.OBSTACLE]: '障碍物',
@@ -15712,8 +15682,6 @@ const useCheckElement = () => {
                 };
             }
         }
-        // 所有检查通过
-        console.log('Doodle 位置检查通过');
         return { isValid: true };
     }, [editMapInfo, svgElementDatas, minDistance]);
     const checkCanNotCreateAtPosition = useCallback((checkPoint, checkPoints) => {
@@ -15734,7 +15702,6 @@ const useCheckElement = () => {
                 break;
             }
         }
-        console.log('currentBoundary--->', currentBoundary, points);
         if (!currentBoundary)
             return {
                 result: true,
@@ -15769,7 +15736,6 @@ const useCheckElement = () => {
         for (const obstacle of obstaclesInBoundary) {
             const obstaclePoints = coordinatesToPoints$1(obstacle.points);
             if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
-                console.log('Obstacle intersection detected with:', obstacle);
                 return {
                     result: true,
                     code: CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
@@ -15788,7 +15754,6 @@ const useCheckElement = () => {
             const doodleTransformedPoints = transformSvgElements(doodle).flat();
             // 检查相交
             if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
-                console.log('Obstacle-Doodle intersection detected with:', doodle);
                 return {
                     result: true,
                     code: CheckObstaclePointErrorType.DOODLE_INTERSECT,
@@ -15796,9 +15761,7 @@ const useCheckElement = () => {
             }
             // 检查距离
             const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
-            console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
             if (distance < minDistance) {
-                console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
                 return {
                     result: true,
                     code: CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
@@ -16453,11 +16416,26 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
     return (jsxs(Fragment, { children: [(editMode || (createMode && completed)) &&
                 dragState.isDragging &&
                 dragState.dragType !== 'new' &&
-                dragState.originalPosition && (jsxs(Fragment, { children: [jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none" }, "ghost-vertex"), (() => {
+                dragState.originalPosition && (jsxs(Fragment, { children: [jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none", style: {
+                            userSelect: 'none',
+                            WebkitUserSelect: 'none',
+                            WebkitTouchCallout: 'none',
+                            touchAction: 'none',
+                        } }, "ghost-vertex"), (() => {
                         // 获取前一个点和后一个点的索引
                         const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
                         const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
-                        return (jsxs(Fragment, { children: [jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none" }), jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: coordinates[nextIndex][0], y2: coordinates[nextIndex][1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none" })] }));
+                        return (jsxs(Fragment, { children: [jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
+                                        userSelect: 'none',
+                                        WebkitUserSelect: 'none',
+                                        WebkitTouchCallout: 'none',
+                                        touchAction: 'none',
+                                    } }), jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: coordinates[nextIndex][0], y2: coordinates[nextIndex][1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
+                                        userSelect: 'none',
+                                        WebkitUserSelect: 'none',
+                                        WebkitTouchCallout: 'none',
+                                        touchAction: 'none',
+                                    } })] }));
                     })()] })), renderCoordinates.length >= 3 && (jsx("polygon", { className: editMapInfo?.createMode === CreateStatus.CREATING ? '' : styles$5.polygonPathG, points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
                 , onClick: onPolygonClick })), jsxs("g", { className: styles$5.polygonPathG, children: [renderCoordinates.length >= 2 &&
                         pathSegments.map((segment, index) => {
@@ -16465,7 +16443,12 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                                 return null;
                             const pathData = createPathData(segment.points);
                             const isDash = segment.type === 1;
-                            return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$5.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick }, index));
+                            return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$5.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
+                                    userSelect: 'none',
+                                    WebkitUserSelect: 'none',
+                                    WebkitTouchCallout: 'none',
+                                    touchAction: 'none',
+                                } }, index));
                         }), renderCoordinates.length >= 2 &&
                         dashPaths.map((segment, index) => {
                             if (segment.points.length < 2)
@@ -16508,7 +16491,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
+                }), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
                 renderCoordinates.map((coord, idx) => {
                     // 判断当前顶点的状态
                     const isLastPoint = idx === renderCoordinates.length - 1;
@@ -16517,7 +16500,8 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                     const isInEditMode = editMode;
                     // H5模式下选中的顶点显示蓝色，并且放大1.5倍
                     const isSelected = platform === PlatformType.H5 && selectedVertexIndex === idx;
-                    const vertexRadius = isSelected ? (canComplete ? 16 : 12) * 1.2 : canComplete ? 16 : 12;
+                    const commonRadius = canComplete ? 16 : 12;
+                    const vertexRadius = isSelected ? commonRadius * 1.2 : commonRadius;
                     const vertexFill = isSelected ? '#FFAB7E' : 'white';
                     return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, style: {
                                     userSelect: 'none',
@@ -16695,7 +16679,6 @@ const BoundaryElement = ({ data }) => {
     return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
             onPathClick();
         }, onCoordinatesChange: (coordinates) => {
-            console.log('onCoordinatesChange', coordinates);
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: {
@@ -16748,7 +16731,6 @@ const useHistoryHandle = (props) => {
     // undo
     const undo = () => {
         setEditMapInfo((prev) => {
-            console.log('undo->', prev);
             if (prev?.historyList?.length > 0 && prev?.currentHistoryIndex > 0) {
                 return {
                     ...prev,
@@ -16816,10 +16798,8 @@ const ObstacleElement = ({ data }) => {
     const { addHistory } = useHistoryHandle();
     // 处理删除顶点
     const handleCreateVertexDelete = useCallback((vertexIndex) => {
-        console.log('ObstacleElement删除顶点', vertexIndex);
         if (editMapInfo?.selectElement?.points && editMapInfo?.selectElement?.points?.length > 0) {
             const newPoints = editMapInfo?.selectElement?.points?.filter((_, index) => index !== vertexIndex);
-            console.log('newPoints', newPoints);
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: {
@@ -16991,11 +16971,11 @@ const useVisionOffTransform = (data, scaleConstraints
         return newPoints;
     }, []);
     // 计算选择框的四个角点（每条边与内部元素对应边平行）
-    const calculateSelectionBoxPoints = useCallback((points) => {
+    const calculateSelectionBoxPoints = useCallback((points, scale = 1) => {
         if (points.length < 4)
             return points;
         // 设置偏移距离（可以根据需要调整）
-        const offset = 12; // 12像素的偏移距离
+        const offset = 20 * scale; // 偏移距离
         // 使用更简单的方法：计算矩形的边界框，然后向外扩展
         // 计算矩形的两条相邻边向量（从左上角出发）
         const edge1 = { x: points[1].x - points[0].x, y: points[1].y - points[0].y }; // 左上到左下
@@ -17312,9 +17292,9 @@ const useVisionOffTransform = (data, scaleConstraints
 };
 
 var _g$5, _defs$5;
-function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
+function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
 var SvgTransformDelete = function SvgTransformDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
@@ -17363,9 +17343,9 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
 };
 
 var _g$4, _defs$4;
-function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgTransformRotate = function SvgTransformRotate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
@@ -17399,9 +17379,9 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
 };
 
 var _g$3, _defs$3;
-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$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 SvgTransformScale = function SvgTransformScale(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
@@ -17435,9 +17415,9 @@ var SvgTransformScale = function SvgTransformScale(props) {
 };
 
 var _g$2, _defs$2;
-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); }
+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 SvgTransformTranslate = function SvgTransformTranslate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
@@ -17604,7 +17584,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                     }) })), isSelected &&
                 currentPoints.length === 4 &&
                 (() => {
-                    const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints);
+                    const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints, overlayScale);
                     // 计算选择框的边界
                     const minX = Math.min(...selectionBoxPoints.map((p) => p.x));
                     const maxX = Math.max(...selectionBoxPoints.map((p) => p.x));
@@ -17612,13 +17592,23 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                     // 计算选择框的中心
                     const centerX = (minX + maxX) / 2;
                     // 计算尺寸显示框的位置（选择框下方）
-                    const infoBoxY = maxY + 20; // 选择框下方20像素
-                    const infoBoxWidth = 140 * overlayScale; // 信息框宽度
-                    const infoBoxHeight = 30 * overlayScale; // 信息框高度
+                    const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
+                    const infoBoxWidth = 300 * overlayScale; // 信息框宽度
+                    const infoBoxHeight = 50 * overlayScale; // 信息框高度
                     const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-                    const scale = (isWeb ? 2 : 1) * overlayScale;
+                    const scale = 2 * overlayScale;
                     const offsetLeft = 10 * scale;
-                    return (jsxs(Fragment, { children: [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 === PlatformType.H5
+                    return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxs("div", { style: {
+                                        padding: `5px ${10 * overlayScale}px`,
+                                        background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
+                                        borderRadius: `${30 * overlayScale}px`,
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        fontSize: `${26 * overlayScale}px`,
+                                        color: 'white',
+                                        fontWeight: '400',
+                                    }, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) })), 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 === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -17658,18 +17648,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxs("div", { style: {
-                                        padding: '5px 6px',
-                                        background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
-                                        borderRadius: '20px',
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        fontSize: '12px',
-                                        color: 'white',
-                                        fontWeight: '400',
-                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
-                                    }, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -17899,11 +17878,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
     }, [currentCenter, currentScale, currentDirection, getSvgDimensions]);
     // 初始化变换状态
     const initializeTransform = useCallback(() => {
-        console.log('useDoodleTransform: 初始化变换状态', {
-            center: data.center,
-            scale: data.scale,
-            direction: data.direction,
-        });
         const convertedCenter = convertPoint(data.center);
         setCurrentCenter({ x: convertedCenter[0], y: convertedCenter[1] });
         setCurrentScale(data.scale);
@@ -18130,21 +18104,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
     };
 };
 
-var _path$4;
-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 SvgTransformArrow = function SvgTransformArrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 7,
-    height: 11,
-    fill: "none"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M2.156 1.032a.777.777 0 0 0-1.061 0 .69.69 0 0 0-.062.943l.062.068 3.97 3.78-3.97 3.78a.69.69 0 0 0-.062.944l.062.067c.27.257.696.277.99.06l.07-.06 4.5-4.286a.69.69 0 0 0 .063-.943l-.062-.067z",
-    opacity: 0.5
-  })));
-};
-
 const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
     const { editMapInfo } = useMapEditContext();
     const { platform } = useCommonContext();
@@ -18322,10 +18281,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
         // 计算选择框的中心
         const centerX = (minX + maxX) / 2;
-        // 计算尺寸显示框的位置（选择框下方）
-        const infoBoxY = maxY + 20; // 选择框下方20像素
-        const infoBoxWidth = 140 * overlayScale; // 信息框宽度
-        const infoBoxHeight = 100 * overlayScale; // 信息框高度
+        const infoBoxY = maxY + 20 + 30 * overlayScale; // 选择框下方20像素
+        const infoBoxWidth = 300 * overlayScale; // 信息框宽度
+        const infoBoxHeight = 40 * overlayScale; // 信息框高度
         const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
         return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                         ? {
@@ -18338,14 +18296,14 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                         }) }), jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), platform === PlatformType.H5 && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
                         onClickInfo?.();
                     }, children: jsx("div", { style: {
-                            padding: '5px 6px',
+                            padding: `5px ${10 * overlayScale}px`,
                             background: 'rgba(201, 209, 218, 1)',
-                            borderRadius: '10px',
+                            borderRadius: `${10 * overlayScale}px`,
                             display: 'inline-flex',
                             flexDirection: 'column',
                             alignItems: 'flex-start',
                             justifyContent: 'center',
-                            fontSize: '12px',
+                            fontSize: `${26 * overlayScale}px`,
                             color: 'white',
                             fontWeight: '400',
                             // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
@@ -18403,14 +18361,32 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
                     // 计算选择框的中心
                     const centerX = (minX + maxX) / 2;
-                    // 计算尺寸显示框的位置（选择框下方）
-                    const infoBoxY = maxY + 20; // 选择框下方20像素
-                    const infoBoxWidth = 140 * overlayScale; // 信息框宽度
+                    const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
+                    const infoBoxWidth = 300 * overlayScale; // 信息框宽度
                     const infoBoxHeight = 100 * overlayScale; // 信息框高度
                     const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-                    const scale = (isWeb ? 2 : 1) * overlayScale;
+                    const scale = 2 * overlayScale;
                     const offsetLeft = 10 * scale;
-                    return (jsxs(Fragment, { children: [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 === PlatformType.H5
+                    return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                                    onClickInfo?.();
+                                }, children: jsxs("div", { style: {
+                                        padding: `${10 * overlayScale}px`,
+                                        background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
+                                        borderRadius: `${20 * overlayScale}px`,
+                                        display: 'inline-flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                        justifyContent: 'center',
+                                        fontSize: `${26 * overlayScale}px`,
+                                        color: 'white',
+                                        fontWeight: '400',
+                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
+                                    }, children: [jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsx("div", { style: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: `${10 * overlayScale}px`,
+                                            }, children: jsxs("div", { children: ["Active Time: ", activeTime, " >"] }) })] }) })), 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 === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -18450,26 +18426,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
-                                    onClickInfo?.();
-                                }, children: jsxs("div", { style: {
-                                        padding: '5px 6px',
-                                        background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
-                                        borderRadius: '10px',
-                                        display: 'inline-flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'flex-start',
-                                        justifyContent: 'center',
-                                        fontSize: '12px',
-                                        color: 'white',
-                                        fontWeight: '400',
-                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
-                                    }, children: [jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxs("div", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                gap: '10px',
-                                            }, children: [jsxs("div", { children: ["Active Time: ", activeTime] }), jsx(SvgTransformArrow, {})] })] }) }))] }));
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
                 })()] }));
 };
 
@@ -19695,7 +19652,6 @@ function usePolygonDrawing(options = {}) {
                 },
             };
         });
-        console.log('onSvgClick');
         addHistory({
             selectElement: {
                 ...editMapInfo.selectElement,
@@ -19737,7 +19693,6 @@ function usePolygonDrawing(options = {}) {
                 },
             };
         });
-        console.log('updatePoints');
         addHistory({
             selectElement: {
                 ...editMapInfo.selectElement,
@@ -19785,11 +19740,6 @@ const isPointInSvgBounds = (point, svgElement) => {
         const maxY = minY + height;
         // 检查点是否在viewBox范围内
         const isInBounds = point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY;
-        console.log('点边界检查:', {
-            point: { x: point.x, y: point.y },
-            viewBox: { minX, minY, maxX, maxY },
-            isInBounds,
-        });
         return isInBounds;
     }
     catch (error) {
@@ -19816,8 +19766,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
         // 计算Google Maps容器的中心点
         const centerX = mapRect.left + mapRect.width / 2;
         const centerY = mapRect.top + mapRect.height / 2;
-        console.log('Google Maps容器中心位置:', { centerX, centerY });
-        console.log('Google Maps容器尺寸:', { width: mapRect.width, height: mapRect.height });
         // 直接使用SVG的CTM进行坐标转换
         const pt = svgElement.createSVGPoint();
         pt.x = centerX;
@@ -19829,7 +19777,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
         }
         const inv = ctm.inverse();
         const svgPoint = pt.matrixTransform(inv);
-        console.log('转换后的SVG坐标:', { x: svgPoint.x, y: svgPoint.y });
         // 检查点是否在SVG可见区域内
         const point = { x: svgPoint.x, y: svgPoint.y };
         if (!isPointInSvgBounds(point, svgElement)) {
@@ -19934,31 +19881,27 @@ CreateObstacleElement.displayName = 'CreateObstacleElement';
 
 const MIN_ELEMENT_WIDTH = 50;
 const useCreateVisionOffElement = () => {
-    const { svgRef } = useSvgEditContext();
     const { editMapInfo } = useMapEditContext();
+    const { svgViewBox } = useCommonContext();
     const centerPoint = useMemo(() => {
-        if (!svgRef)
+        if (!svgViewBox)
             return null;
-        const baseVal = svgRef?.viewBox.baseVal;
-        const center = [
-            baseVal?.x + (baseVal?.width || 0) / 2,
-            baseVal?.y + (baseVal?.height || 0) / 2,
-        ];
+        const center = [svgViewBox.x + svgViewBox.width / 2, -svgViewBox.y - svgViewBox.height / 2];
         return center;
-    }, [svgRef?.viewBox?.baseVal?.x]);
+    }, [svgViewBox]);
     const elementWidth = useMemo(() => {
-        if (!svgRef)
+        if (!svgViewBox)
             return MIN_ELEMENT_WIDTH;
-        const baseVal = svgRef?.viewBox.baseVal?.width;
-        if (baseVal && baseVal / 8 > MIN_ELEMENT_WIDTH) {
-            return baseVal / 8;
+        const baseVal = Math.min(svgViewBox.width, svgViewBox.height);
+        if (baseVal && baseVal / 4 > MIN_ELEMENT_WIDTH) {
+            return baseVal / 4;
         }
         return MIN_ELEMENT_WIDTH;
-    }, [svgRef?.viewBox?.baseVal?.width]);
+    }, [svgViewBox]);
     const getVisionOffPoints = useCallback(() => {
-        if (!svgRef)
+        if (!svgViewBox)
             return null;
-        const offset = ((editMapInfo.allVisionOffPoints.length || 1) - 1) * 10;
+        const offset = (Math.random() - 0.5) * elementWidth;
         const [minX, minY, maxX, maxY] = [
             centerPoint[0] - elementWidth / 2 + offset,
             centerPoint[1] - elementWidth / 2 + offset,
@@ -20019,7 +19962,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
     }, [centerPoint]);
     // 调整SVG大小的函数
     const adjustSvgSize = (layoutData) => {
-        const padding = 20; // 添加一些边距以避免内容贴边
+        const padding = 0; // 添加一些边距以避免内容贴边
         const boundWidth = bounds.maxX - bounds.minX + padding * 2;
         const boundHeight = bounds.maxY - bounds.minY + padding * 2;
         // 防止宽高为0的情况
@@ -20235,6 +20178,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
                 left: '50%',
                 top: '50%',
                 transform: 'translate(-50%, -50%)',
+                overflow: 'visible',
                 // cursor: createMode ? 'crosshair' : editMode ? 'default' : 'move',
                 // pointerEvents: 'auto', // 关键：允许接收鼠标事件
             }, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxs("defs", { children: [jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
@@ -20868,10 +20812,7 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
         else {
             // 最后的fallback：使用默认坐标
             console.warn('无法获取有效的GPS边界，使用默认坐标');
-            bounds = {
-                sw: [-9.1562, -37.7503],
-                ne: [31.247, 5.797],
-            };
+            bounds = DEFAULT_COORDINATES;
         }
     }
     // 如果有旋转角度，计算旋转后的边界
@@ -21024,7 +20965,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         overlayScale,
         doodleList,
     ]);
-    // console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
     // 处理地图分区边界
     // const partitionBoundary = useMemo(() => {
     //   const allBoundaryElements = [];
@@ -21272,8 +21212,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             // 基于固定的参考zoom级别计算overlayScale
             const zoomDiff = currentZoom - REFERENCE_ZOOM;
             const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
-            console.log('scale', scale, currentZoom, zoomDiff);
-            setOverlayScale(scale < 1 ? 1 : scale);
+            setOverlayScale(scale < 1 ? 1 : platform === PlatformType.H5 ? 1.5 * scale : scale);
         };
         // 使用lodash throttle进行节流处理: 100ms内只执行一次
         const handleZoomChanged = throttle$2(updateScale, 50);
@@ -21355,7 +21294,9 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         // 添加视觉失效区
         addVisionOffPoint: () => svgEditMapRef.current?.addVisionOffPoint(),
         // h5进入视觉失效区编辑模式
-        enterVisionOffEditMode: (mode) => svgEditMapRef.current?.enterVisionOffEditMode(mode),
+        enterVisionOffEditMode: (mode) => {
+            svgEditMapRef.current?.enterVisionOffEditMode(mode);
+        },
         // 重做
         redo: () => svgEditMapRef.current?.redo(),
         // 撤销