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

package/dist/index.js

@@ -3934,336 +3934,6 @@ class BoundaryLayer extends BaseLayer {
     }
 }
 
-/**
- * 障碍物图层
- * 专门处理障碍物元素的渲染
- */
-class ObstacleLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.level = 5;
-        this.type = LAYER_DEFAULT_TYPE.OBSTACLE;
-    }
-    /**
-     * SVG渲染方法
-     */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染障碍物类型的元素
-        for (const element of this.elements) {
-            if (element.type === 'obstacle') {
-                this.renderObstacle(svgGroup, element);
-            }
-        }
-    }
-    /**
-     * 渲染障碍物元素
-     */
-    renderObstacle(svgGroup, element) {
-        const { coordinates, style } = element;
-        if (coordinates.length < 3)
-            return;
-        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-        // 构建点集合，使用整数坐标
-        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
-        polygon.setAttribute('points', points);
-        polygon.setAttribute('fill', style.fillColor || 'rgba(220, 53, 69, 0.2)');
-        polygon.setAttribute('stroke', style.lineColor || '#dc3545');
-        // 确保最小线条宽度
-        const lineWidth = Math.max(style.lineWidth || 2, 0.5);
-        polygon.setAttribute('stroke-width', lineWidth.toString());
-        polygon.setAttribute('stroke-linecap', 'round');
-        polygon.setAttribute('stroke-linejoin', 'round');
-        polygon.setAttribute('opacity', (style.opacity || 1).toString());
-        polygon.setAttribute('vector-effect', 'non-scaling-stroke');
-        polygon.classList.add('vector-obstacle');
-        svgGroup.appendChild(polygon);
-    }
-}
-
-var chargingPileImage = "data:image/png;base64,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";
-
-/**
- * 充电桩图层
- * 专门处理充电桩元素的渲染
- */
-class ChargingPileLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.level = 8; // 中等层级
-        this.type = LAYER_DEFAULT_TYPE.CHARGING_PILE;
-    }
-    /**
-     * SVG渲染方法
-     */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染充电桩类型的元素
-        for (const element of this.elements) {
-            if (element.type === 'charging_pile') {
-                this.renderChargingPile(svgGroup, element);
-            }
-        }
-    }
-    /**
-     * 渲染充电桩元素
-     */
-    renderChargingPile(svgGroup, element) {
-        const { coordinates, style } = element;
-        if (coordinates.length === 0)
-            return;
-        const center = coordinates[0];
-        const size = style.radius ? style.radius * 2 : 55; // 默认55px大小
-        const direction = element.originalData?.direction || 0;
-        // 将弧度转换为角度
-        const angle = (direction * 180) / Math.PI;
-        const rotationDegree = 270 - angle; // 坐标系转换
-        const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        // 图片居中定位
-        const x = center[0];
-        const y = center[1];
-        image.setAttribute('x', x.toString());
-        image.setAttribute('y', y.toString());
-        image.setAttribute('width', `${size}px`);
-        image.setAttribute('height', `${size}px`);
-        image.setAttribute('href', chargingPileImage);
-        image.setAttribute('opacity', '0'); // 初始透明
-        // 添加SVG原生动画，传入默认角度
-        this.addChargingPileAnimation(image, center, rotationDegree);
-        image.classList.add('vector-charging-pile');
-        svgGroup.appendChild(image);
-    }
-    /**
-     * 添加充电桩SVG原生动画
-     */
-    addChargingPileAnimation(image, center, defaultAngle) {
-        // 透明度动画 - 先显示出来
-        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
-        animateOpacity.setAttribute('attributeName', 'opacity');
-        animateOpacity.setAttribute('values', '0;1');
-        animateOpacity.setAttribute('dur', '0.5s');
-        animateOpacity.setAttribute('fill', 'freeze');
-        image.appendChild(animateOpacity);
-        // 旋转动画 - 从180度旋转到默认角度
-        const animateTransform = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
-        animateTransform.setAttribute('attributeName', 'transform');
-        animateTransform.setAttribute('type', 'rotate');
-        animateTransform.setAttribute('values', `${180 + defaultAngle} ${center[0]} ${center[1]};${defaultAngle} ${center[0]} ${center[1]}`);
-        animateTransform.setAttribute('dur', '1s');
-        animateTransform.setAttribute('repeatCount', '1'); // 只播放一次
-        animateTransform.setAttribute('begin', '0.5s'); // 延迟0.5秒开始，等透明度动画完成
-        animateTransform.setAttribute('fill', 'freeze'); // 保持最终状态
-        image.appendChild(animateTransform);
-    }
-}
-
-/**
- * 点图层
- * 专门处理点元素的渲染
- */
-class PointLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.level = 11;
-        this.type = LAYER_DEFAULT_TYPE.POINT;
-    }
-    /**
-     * SVG渲染方法
-     */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染点类型的元素
-        for (const element of this.elements) {
-            if (element.type === 'point') {
-                this.renderPoint(svgGroup, element);
-            }
-        }
-    }
-    /**
-     * 渲染点元素
-     */
-    renderPoint(svgGroup, element) {
-        const { coordinates, style } = element;
-        if (coordinates.length === 0)
-            return;
-        const coordinate = coordinates[0];
-        const radius = style.radius || 4;
-        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        circle.setAttribute('cx', coordinate[0].toString());
-        circle.setAttribute('cy', coordinate[1].toString());
-        circle.setAttribute('r', radius.toString());
-        circle.setAttribute('fill', style.fillColor || style.strokeColor || '#000000');
-        circle.setAttribute('stroke', style.strokeColor || '#000000');
-        // 确保最小线条宽度
-        const lineWidth = Math.max(style.lineWidth || 1, 0.5);
-        circle.setAttribute('stroke-width', lineWidth.toString());
-        circle.setAttribute('opacity', (style.opacity || 1).toString());
-        circle.setAttribute('vector-effect', 'non-scaling-stroke');
-        circle.classList.add('vector-point');
-        svgGroup.appendChild(circle);
-    }
-}
-
-/**
- * SVG元素图层
- * 专门处理SVG元素的渲染
- */
-class SvgElementLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.level = 6;
-        this.scale = 1;
-        this.type = LAYER_DEFAULT_TYPE.SVG;
-    }
-    /**
-     * SVG渲染方法
-     */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染SVG类型的元素
-        for (const element of this.elements) {
-            const expirationTs = element.originalData?.expiration_ts;
-            const current = Date.now() / 1000;
-            if (expirationTs && current > expirationTs) {
-                continue;
-            }
-            if (element.type === 'svg') {
-                this.renderSvgElement(svgGroup, element);
-            }
-        }
-    }
-    /**
-     * 渲染SVG元素
-     */
-    renderSvgElement(svgGroup, element) {
-        const { coordinates, style, metadata } = element;
-        if (coordinates.length === 0)
-            return;
-        const center = coordinates[0];
-        if (!metadata || !metadata.svg) {
-            this.renderSvgPlaceholder(svgGroup, center, metadata, style);
-            return;
-        }
-        try {
-            // 解析SVG字符串
-            const svgString = metadata.svg.replace(/\\n/g, '\n').replace(/\\"/g, '"');
-            const parser = new DOMParser();
-            const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
-            const svgElement = svgDoc.documentElement;
-            if (svgElement.tagName === 'svg') {
-                // 获取原始SVG尺寸
-                const originalWidth = parseFloat(svgElement.getAttribute('width') || '139');
-                const originalHeight = parseFloat(svgElement.getAttribute('height') || '138');
-                // 计算变换参数
-                const userScale = metadata.scale || 1;
-                const direction = metadata.direction || 0;
-                // 设置原始SVG的实际尺寸（限制大小）
-                svgElement.setAttribute('width', originalWidth.toString());
-                svgElement.setAttribute('height', originalHeight.toString());
-                // 创建变换组
-                const transformGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                // 在transformGroup上应用变换：平移到中心，旋转，缩放，然后居中SVG
-                const transform = [
-                    `translate(${center[0]}, ${center[1]})`,
-                    `rotate(${-(direction * 180) / Math.PI})`,
-                    `scale(${userScale})`,
-                    `translate(${-originalWidth / 2}, ${-originalHeight / 2})`,
-                ].join(' ');
-                transformGroup.setAttribute('transform', transform);
-                // 设置样式
-                if (style.opacity !== undefined) {
-                    transformGroup.setAttribute('opacity', style.opacity.toString());
-                }
-                // 将限制好尺寸的原始SVG添加到transformGroup中
-                transformGroup.appendChild(svgElement);
-                // 将transformGroup添加到svgGroup中
-                svgGroup.appendChild(transformGroup);
-            }
-            else {
-                this.renderSvgPlaceholder(svgGroup, center, metadata, style);
-            }
-        }
-        catch (error) {
-            console.warn('Failed to parse SVG:', error);
-            this.renderSvgPlaceholder(svgGroup, center, metadata, style);
-        }
-    }
-    /**
-     * 渲染SVG占位符
-     */
-    renderSvgPlaceholder(svgGroup, center, metadata, style) {
-        const size = (metadata?.scale || 1) * 20;
-        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        rect.setAttribute('x', ((center[0] - size / 2) / 50).toString());
-        rect.setAttribute('y', ((center[1] - size / 2) / 50).toString());
-        rect.setAttribute('width', size.toString());
-        rect.setAttribute('height', size.toString());
-        rect.setAttribute('fill', style.fillColor);
-        rect.setAttribute('stroke', style.lineColor);
-        rect.setAttribute('stroke-width', style.lineWidth.toString());
-        rect.setAttribute('opacity', style.opacity.toString());
-        svgGroup.appendChild(rect);
-    }
-}
-
-/**
- * 边界图层
- * 专门处理边界元素的渲染
- */
-class VisionOffLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.type = LAYER_DEFAULT_TYPE.VISION_OFF_AREA;
-        this.level = 7; // 中等层级
-    }
-    /**
-     * SVG渲染方法
-     */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染边界类型的元素
-        for (const element of this.elements) {
-            if (element.type === 'vision_off_area') {
-                this.renderVisionOffArea(svgGroup, element);
-            }
-        }
-    }
-    /**
-     * 渲染边界元素
-     */
-    renderVisionOffArea(svgGroup, element) {
-        const { coordinates, style } = element;
-        if (coordinates.length < 3)
-            return;
-        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-        // 构建点集合，使用整数坐标
-        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
-        const fillColor = style.fillColor || 'rgba(0, 255, 0, 0.4)';
-        polygon.setAttribute('points', points);
-        polygon.setAttribute('fill', fillColor);
-        polygon.setAttribute('stroke', style.lineColor);
-        // 确保最小线条宽度
-        const lineWidth = Math.max(style.lineWidth || 2, 0.5);
-        polygon.setAttribute('stroke-width', lineWidth.toString());
-        polygon.setAttribute('stroke-linecap', 'round');
-        polygon.setAttribute('stroke-linejoin', 'round');
-        polygon.setAttribute('opacity', (style.opacity || 1).toString());
-        polygon.setAttribute('vector-effect', 'non-scaling-stroke');
-        polygon.classList.add('vector-boundary');
-        svgGroup.appendChild(polygon);
-    }
-}
-
 /**
  * 边界相关样式配置
  */
@@ -7677,254 +7347,753 @@ var UnitsAreaType;
 })(UnitsAreaType || (UnitsAreaType = {}));
 
 /**
- * 默认航向相对于canvas的偏移角度: 航向默认是东
+ * 默认航向相对于canvas的偏移角度: 航向默认是东
+ */
+const DIRECTION_DEGREE = 90; //正东相当于canvas的正北顺时针旋转90度
+/**
+ * 矫正deltaTheta的范围，防止iot通道下因为车端theta接近π值时跳变造成app显示小车图标旋转的问题
+ *
+ * @param postureTheta
+ * @return
+ */
+function radNormalize(radian) {
+    if (radian > Math.PI) {
+        radian -= 2 * Math.PI; // 顺时针大于π时，减去2π
+    }
+    else if (radian < -Math.PI) {
+        radian += 2 * Math.PI; // 逆时针小于-π时，加上2π
+    }
+    return radian;
+}
+// 将弧度转换为角度，并加上默认航向相对于canvas的偏移角度
+function radToDegree(radian) {
+    return DIRECTION_DEGREE - radian * (180 / Math.PI);
+}
+// 计算两个点之间的间隔，单位是m
+function distance(x1, y1, x2, y2) {
+    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
+}
+const mathRound = (value, decimals = 2) => {
+    return Number.isInteger(value) ? value : round(value, decimals);
+};
+const mathFloor = (value, decimals = 2) => {
+    return Number.isInteger(value) ? value : floor(value, decimals);
+};
+// 公制平方米-》英制平方英尺
+function areaToft2(area) {
+    return area * 10.7639104167;
+}
+//
+// 平方英尺-》英亩
+function ft2ToAcre(area) {
+    return area / 43559.98;
+}
+/**
+ * 将数字格式化为带有度量单位前缀的形式
+ * @param value 需要格式化的数值
+ * @param round 是否四舍五入，默认为true
+ * @param decimals 保留小数位数，默认为2
+ * @returns 格式化后的字符串，根据数值大小自动添加对应的度量单位前缀（k/M/B）
+ * @example
+ * formatNumberWithMetricPrefix(500)       // 返回 "500"
+ * formatNumberWithMetricPrefix(1500)      // 返回 "1.50k"
+ * formatNumberWithMetricPrefix(1500000)   // 返回 "1.50M"
+ * formatNumberWithMetricPrefix(2500000000) // 返回 "2.50B"
+ */
+function formatNumberWithMetricPrefix(value, round = true, decimals = 2) {
+    if (value === undefined)
+        return value;
+    if (value === 0)
+        return '0';
+    const mathFn = round ? mathRound : mathFloor;
+    if (value < 1000) {
+        return `${mathFn(value, decimals)}`;
+    }
+    else if (value < 1000000) {
+        return `${mathFn(value / 1000, decimals)}K`;
+    }
+    else if (value < 1000000000) {
+        return `${mathFn(value / 1000000, decimals)}M`;
+    }
+    else {
+        return `${mathFn(value / 1000000000, decimals)}B`;
+    }
+}
+/**
+ * 转换割草面积的方法
+ * @param area 面积数值（单位：m²）
+ * @param type 单位类型 'metric' | 'imperial'
+ * @returns {{ originNum: number; numStr?: string, value: string, unit: UnitsAreaType }} 返回格式化后的面积值和单位
+ * @example
+ * convertMowingArea(500, 'metric')     // 返回 { value: "500", unit: "m²" }
+ * convertMowingArea(1500, 'imperial')  // 返回 { value: "16.1K", unit: "ft²" }
+ * convertMowingArea(10000, 'imperial') // 返回 { value: "2.5", unit: "ac" }
+ */
+function convertAreaByUnits(area, type) {
+    if (area === undefined)
+        return {
+            originNum: 0,
+            numStr: '0',
+            value: `0 ${type === UnitsType.Metric
+                ? UnitsAreaType.SQUARE_METER
+                : UnitsAreaType.SQUARE_FOOT}`,
+            unit: type === UnitsType.Metric
+                ? UnitsAreaType.SQUARE_METER
+                : UnitsAreaType.SQUARE_FOOT,
+        };
+    if (type === UnitsType.Metric) {
+        return {
+            originNum: area,
+            numStr: formatNumberWithMetricPrefix(area, false),
+            value: `${formatNumberWithMetricPrefix(area, false)} ${UnitsAreaType.SQUARE_METER}`,
+            unit: UnitsAreaType.SQUARE_METER,
+        };
+    }
+    // 将 m² 转换为 ft²（1 m² = 10.7639 ft²）
+    const squareFeet = areaToft2(area);
+    if (squareFeet < 10000) {
+        return {
+            originNum: squareFeet,
+            numStr: formatNumberWithMetricPrefix(squareFeet, false),
+            value: `${formatNumberWithMetricPrefix(squareFeet, false)} ${UnitsAreaType.SQUARE_FOOT}`,
+            unit: UnitsAreaType.SQUARE_FOOT,
+        };
+    }
+    const acres = ft2ToAcre(squareFeet);
+    // 将 ft² 转换为 ac（1 ac = 43560 ft²）
+    const result = formatNumberWithMetricPrefix(acres, false);
+    return {
+        originNum: acres,
+        numStr: result,
+        value: `${acres} ${UnitsAreaType.ACRE}`,
+        unit: UnitsAreaType.ACRE,
+    };
+}
+
+/**
+ * 日期时间格式化工具函数
+ * 专门处理boundary中的日期时间显示格式
+ */
+/**
+ * 获取一周的开始日期（周日）
+ * @param date 目标日期
+ * @returns 该周的周日日期
+ */
+function getWeekStart(date) {
+    const startOfWeek = new Date(date);
+    const dayOfWeek = startOfWeek.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+    // 向前推移到周日
+    startOfWeek.setDate(startOfWeek.getDate() - dayOfWeek);
+    startOfWeek.setHours(0, 0, 0, 0);
+    return startOfWeek;
+}
+/**
+ * 获取一周的结束日期（周六）
+ * @param date 目标日期
+ * @returns 该周的周六日期
+ */
+function getWeekEnd(date) {
+    const endOfWeek = new Date(date);
+    const dayOfWeek = endOfWeek.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+    // 向后推移到周六
+    endOfWeek.setDate(endOfWeek.getDate() + (6 - dayOfWeek));
+    endOfWeek.setHours(23, 59, 59, 999);
+    return endOfWeek;
+}
+/**
+ * 判断两个日期是否为同一天
+ * @param date1 第一个日期
+ * @param date2 第二个日期
+ * @returns 是否为同一天
+ */
+function isSameDay(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+}
+/**
+ * 判断是否为今天
+ * @param date 目标日期
+ * @returns 是否为今天
+ */
+function isToday(date) {
+    const today = new Date();
+    return isSameDay(date, today);
+}
+/**
+ * 判断是否为昨天
+ * @param date 目标日期
+ * @returns 是否为昨天
+ */
+function isYesterday(date) {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    return isSameDay(date, yesterday);
+}
+/**
+ * 判断是否为本周内（以周日为一周的开始）
+ * @param date 目标日期
+ * @returns 是否为本周内
+ */
+function isThisWeek(date) {
+    const now = new Date();
+    const weekStart = getWeekStart(now);
+    const weekEnd = getWeekEnd(now);
+    return date >= weekStart && date <= weekEnd;
+}
+/**
+ * 格式化时间为 HH:mm 格式
+ * @param date 目标日期
+ * @returns 格式化后的时间字符串
  */
-const DIRECTION_DEGREE = 90; //正东相当于canvas的正北顺时针旋转90度
+function formatTime(date) {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+}
 /**
- * 矫正deltaTheta的范围，防止iot通道下因为车端theta接近π值时跳变造成app显示小车图标旋转的问题
+ * 获取星期几的英文缩写
+ * @param date 目标日期
+ * @returns 星期几的英文缩写
+ */
+function getWeekdayAbbr(date) {
+    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    return weekdays[date.getDay()];
+}
+/**
+ * 格式化boundary中的日期文本
+ * 根据时间距离当前时间的远近，显示不同的格式：
+ * - 今天：Today HH:mm
+ * - 昨天：Yesterday HH:mm
+ * - 本周内：Tue HH:mm
+ * - 其他：MM/dd/yyyy HH:mm
  *
- * @param postureTheta
- * @return
+ * @param timestamp 时间戳（秒）
+ * @returns 格式化后的日期文本
  */
-function radNormalize(radian) {
-    if (radian > Math.PI) {
-        radian -= 2 * Math.PI; // 顺时针大于π时，减去2π
+function formatBoundaryDateText(timestamp) {
+    if (!timestamp || timestamp <= 0) {
+        return '--/--/---- --:--';
     }
-    else if (radian < -Math.PI) {
-        radian += 2 * Math.PI; // 逆时针小于-π时，加上2π
+    const date = new Date(timestamp * 1000); // 转换为毫秒
+    const timeStr = formatTime(date);
+    // 判断是否为今天
+    if (isToday(date)) {
+        return `Today ${timeStr}`;
     }
-    return radian;
-}
-// 将弧度转换为角度，并加上默认航向相对于canvas的偏移角度
-function radToDegree(radian) {
-    return DIRECTION_DEGREE - radian * (180 / Math.PI);
-}
-// 计算两个点之间的间隔，单位是m
-function distance(x1, y1, x2, y2) {
-    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
-}
-const mathRound = (value, decimals = 2) => {
-    return Number.isInteger(value) ? value : round(value, decimals);
-};
-const mathFloor = (value, decimals = 2) => {
-    return Number.isInteger(value) ? value : floor(value, decimals);
-};
-// 公制平方米-》英制平方英尺
-function areaToft2(area) {
-    return area * 10.7639104167;
-}
-//
-// 平方英尺-》英亩
-function ft2ToAcre(area) {
-    return area / 43559.98;
+    // 判断是否为昨天
+    if (isYesterday(date)) {
+        return `Yesterday ${timeStr}`;
+    }
+    // 判断是否为本周内
+    if (isThisWeek(date)) {
+        const weekdayAbbr = getWeekdayAbbr(date);
+        return `${weekdayAbbr} ${timeStr}`;
+    }
+    // 其他情况显示完整日期
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${month}/${day}/${year} ${timeStr}`;
 }
+
 /**
- * 将数字格式化为带有度量单位前缀的形式
- * @param value 需要格式化的数值
- * @param round 是否四舍五入，默认为true
- * @param decimals 保留小数位数，默认为2
- * @returns 格式化后的字符串，根据数值大小自动添加对应的度量单位前缀（k/M/B）
- * @example
- * formatNumberWithMetricPrefix(500)       // 返回 "500"
- * formatNumberWithMetricPrefix(1500)      // 返回 "1.50k"
- * formatNumberWithMetricPrefix(1500000)   // 返回 "1.50M"
- * formatNumberWithMetricPrefix(2500000000) // 返回 "2.50B"
+ * 障碍物图层
+ * 专门处理障碍物元素的渲染
  */
-function formatNumberWithMetricPrefix(value, round = true, decimals = 2) {
-    if (value === undefined)
-        return value;
-    if (value === 0)
-        return '0';
-    const mathFn = round ? mathRound : mathFloor;
-    if (value < 1000) {
-        return `${mathFn(value, decimals)}`;
+class ObstacleLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.level = 5;
+        this.type = LAYER_DEFAULT_TYPE.OBSTACLE;
     }
-    else if (value < 1000000) {
-        return `${mathFn(value / 1000, decimals)}K`;
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染障碍物类型的元素
+        for (const element of this.elements) {
+            if (element.type === 'obstacle') {
+                this.renderObstacle(svgGroup, element);
+            }
+        }
     }
-    else if (value < 1000000000) {
-        return `${mathFn(value / 1000000, decimals)}M`;
+    /**
+     * 将坐标点按type分组
+     */
+    groupCoordinatesByType(coordinates) {
+        const segments = [];
+        let currentSegment = null;
+        for (let i = 0; i < coordinates.length; i++) {
+            const coord = coordinates[i];
+            const type = coord[2] || 2; // 默认type为2
+            if (!currentSegment || currentSegment.type !== type) {
+                // 开始新的段
+                if (currentSegment && currentSegment.points.length > 0) {
+                    // 为了连接线段，将当前点也加入上一段的结尾
+                    currentSegment.points.push(coord);
+                }
+                currentSegment = {
+                    type: type,
+                    points: [coord],
+                };
+                segments.push(currentSegment);
+            }
+            else {
+                // 继续当前段
+                currentSegment.points.push(coord);
+            }
+        }
+        // 处理封闭边界：如果第一段和最后一段type相同，需要连接起来
+        if (segments.length > 1 && segments[0].type === segments[segments.length - 1].type) {
+            const firstSegment = segments[0];
+            const lastSegment = segments[segments.length - 1];
+            // 将第一个点添加到最后一段，形成封闭
+            lastSegment.points.push(firstSegment.points[0]);
+        }
+        else if (segments.length === 1) {
+            // 只有一段的情况，添加第一个点到末尾形成封闭
+            segments[0].points.push(coordinates[0]);
+        }
+        return segments;
+    }
+    /**
+     * 渲染障碍物元素
+     */
+    renderObstacle(svgGroup, element) {
+        const { coordinates, style, originalData } = element;
+        const { status, start_timestamp, end_timestamp } = originalData || {};
+        if (coordinates.length < 2 ||
+            status === 0 ||
+            start_timestamp > Date.now() / 1000 ||
+            end_timestamp < Date.now() / 1000) {
+            return;
+        }
+        // 1. 先遍历所有的coordinates，把所有点分为若干段的path
+        const pathSegments = this.groupCoordinatesByType(coordinates);
+        // 2&3. 根据type处理每个path段
+        pathSegments.forEach((segment) => {
+            if (segment.points.length < 2)
+                return;
+            if (segment.type === 2) {
+                // type=2: 直接添加到svgGroup中
+                this.createDirectPath(svgGroup, segment.points, style);
+            }
+            else if (segment.type === 1) {
+                // type=1: 使用PathMeasure逻辑生成平行路径
+                // this.createDirectPath(svgGroup, segment.points, style);
+                this.createParallelPathsWithMeasure(svgGroup, segment.points, style);
+            }
+        });
+        if (coordinates.length < 3)
+            return;
+        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        // 构建点集合，使用整数坐标
+        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
+        polygon.setAttribute('points', points);
+        polygon.setAttribute('fill', style.fillColor || 'rgba(220, 53, 69, 0.2)');
+        polygon.setAttribute('stroke', 'transparent');
+        // 确保最小线条宽度
+        const lineWidth = Math.max(style.lineWidth || 2, 0.5);
+        polygon.setAttribute('stroke-width', lineWidth.toString());
+        polygon.setAttribute('stroke-linecap', 'round');
+        polygon.setAttribute('stroke-linejoin', 'round');
+        polygon.setAttribute('opacity', (style.opacity || 1).toString());
+        polygon.setAttribute('vector-effect', 'non-scaling-stroke');
+        polygon.classList.add('vector-obstacle');
+        svgGroup.appendChild(polygon);
+    }
+    /**
+     * 创建直接路径（type=2）
+     */
+    createDirectPath(svgGroup, points, style) {
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const strokeColor = style.lineColor;
+        // 构建路径数据
+        let pathData = '';
+        for (let i = 0; i < points.length; i++) {
+            const [x, y] = points[i];
+            if (i === 0) {
+                pathData += `M ${x} ${y}`;
+            }
+            else {
+                pathData += ` L ${x} ${y}`;
+            }
+        }
+        path.setAttribute('d', pathData);
+        path.setAttribute('stroke', strokeColor);
+        path.setAttribute('fill', 'none');
+        // 确保最小线条宽度
+        const lineWidth = dp2px(style.lineWidth || 3);
+        path.setAttribute('stroke-width', lineWidth.toString());
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        path.setAttribute('opacity', (style.opacity || 1).toString());
+        path.setAttribute('vector-effect', 'non-scaling-stroke');
+        path.classList.add('vector-obstacle');
+        svgGroup.appendChild(path);
+    }
+    /**
+     * 使用PathMeasure逻辑创建平行路径（type=1）
+     */
+    createParallelPathsWithMeasure(svgGroup, points, style) {
+        const strokeColor = style.lineColor;
+        const lineWidth = dp2px(style.lineWidth || 3);
+        // 获取当前SVG的缩放级别，计算固定屏幕像素间距
+        const fixedScreenDistance = lineWidth; // 固定的屏幕像素距离
+        const offsetDistance = fixedScreenDistance; // 转换为SVG坐标系距离
+        // 直接对每个线段生成平行直线段
+        const parallelPaths = this.generateStraightParallelPaths(points, offsetDistance);
+        // 渲染两条平行虚线
+        parallelPaths.forEach((pathData, index) => {
+            if (!pathData)
+                return;
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', pathData);
+            path.setAttribute('fill', 'none');
+            path.setAttribute('stroke', strokeColor);
+            path.setAttribute('stroke-width', lineWidth.toString());
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('opacity', (style.opacity || 1).toString());
+            // 使用CSS样式设置虚线，避免随SVG缩放变化
+            // 或者可以根据当前缩放级别动态计算dash array
+            path.style.strokeDasharray = `${lineWidth}px ${lineWidth * 2}px`;
+            path.classList.add(`vector-boundary-parallel-${index + 1}`);
+            svgGroup.appendChild(path);
+        });
     }
-    else {
-        return `${mathFn(value / 1000000000, decimals)}B`;
+    /**
+     * 生成直线平行路径（每个线段分别处理）
+     */
+    generateStraightParallelPaths(points, offsetDistance) {
+        if (points.length < 2)
+            return ['', ''];
+        let parallelPath1Data = '';
+        let parallelPath2Data = '';
+        // 对每个线段分别计算平行线
+        for (let i = 0; i < points.length - 1; i++) {
+            const startPoint = points[i];
+            const endPoint = points[i + 1];
+            // 计算线段的方向向量
+            const dx = endPoint[0] - startPoint[0];
+            const dy = endPoint[1] - startPoint[1];
+            const length = Math.sqrt(dx * dx + dy * dy);
+            if (length === 0)
+                continue; // 跳过零长度线段
+            // 标准化方向向量
+            const unitX = dx / length;
+            const unitY = dy / length;
+            // 计算垂直向量
+            const perpendicularX = -unitY;
+            const perpendicularY = unitX;
+            // 计算平行线的起点和终点
+            const start1X = startPoint[0] + perpendicularX * offsetDistance;
+            const start1Y = startPoint[1] + perpendicularY * offsetDistance;
+            const end1X = endPoint[0] + perpendicularX * offsetDistance;
+            const end1Y = endPoint[1] + perpendicularY * offsetDistance;
+            const start2X = startPoint[0] - perpendicularX * offsetDistance;
+            const start2Y = startPoint[1] - perpendicularY * offsetDistance;
+            const end2X = endPoint[0] - perpendicularX * offsetDistance;
+            const end2Y = endPoint[1] - perpendicularY * offsetDistance;
+            // 构建路径数据
+            if (i === 0) {
+                parallelPath1Data = `M ${start1X} ${start1Y}`;
+                parallelPath2Data = `M ${start2X} ${start2Y}`;
+            }
+            else {
+                parallelPath1Data += ` M ${start1X} ${start1Y}`;
+                parallelPath2Data += ` M ${start2X} ${start2Y}`;
+            }
+            parallelPath1Data += ` L ${end1X} ${end1Y}`;
+            parallelPath2Data += ` L ${end2X} ${end2Y}`;
+        }
+        return [parallelPath2Data, parallelPath1Data];
     }
 }
+
+var chargingPileImage = "data:image/png;base64,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";
+
 /**
- * 转换割草面积的方法
- * @param area 面积数值（单位：m²）
- * @param type 单位类型 'metric' | 'imperial'
- * @returns {{ originNum: number; numStr?: string, value: string, unit: UnitsAreaType }} 返回格式化后的面积值和单位
- * @example
- * convertMowingArea(500, 'metric')     // 返回 { value: "500", unit: "m²" }
- * convertMowingArea(1500, 'imperial')  // 返回 { value: "16.1K", unit: "ft²" }
- * convertMowingArea(10000, 'imperial') // 返回 { value: "2.5", unit: "ac" }
+ * 充电桩图层
+ * 专门处理充电桩元素的渲染
  */
-function convertAreaByUnits(area, type) {
-    if (area === undefined)
-        return {
-            originNum: 0,
-            numStr: '0',
-            value: `0 ${type === UnitsType.Metric
-                ? UnitsAreaType.SQUARE_METER
-                : UnitsAreaType.SQUARE_FOOT}`,
-            unit: type === UnitsType.Metric
-                ? UnitsAreaType.SQUARE_METER
-                : UnitsAreaType.SQUARE_FOOT,
-        };
-    if (type === UnitsType.Metric) {
-        return {
-            originNum: area,
-            numStr: formatNumberWithMetricPrefix(area, false),
-            value: `${formatNumberWithMetricPrefix(area, false)} ${UnitsAreaType.SQUARE_METER}`,
-            unit: UnitsAreaType.SQUARE_METER,
-        };
+class ChargingPileLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.level = 8; // 中等层级
+        this.type = LAYER_DEFAULT_TYPE.CHARGING_PILE;
     }
-    // 将 m² 转换为 ft²（1 m² = 10.7639 ft²）
-    const squareFeet = areaToft2(area);
-    if (squareFeet < 10000) {
-        return {
-            originNum: squareFeet,
-            numStr: formatNumberWithMetricPrefix(squareFeet, false),
-            value: `${formatNumberWithMetricPrefix(squareFeet, false)} ${UnitsAreaType.SQUARE_FOOT}`,
-            unit: UnitsAreaType.SQUARE_FOOT,
-        };
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染充电桩类型的元素
+        for (const element of this.elements) {
+            if (element.type === 'charging_pile') {
+                this.renderChargingPile(svgGroup, element);
+            }
+        }
+    }
+    /**
+     * 渲染充电桩元素
+     */
+    renderChargingPile(svgGroup, element) {
+        const { coordinates, style } = element;
+        if (coordinates.length === 0)
+            return;
+        const center = coordinates[0];
+        const size = style.radius ? style.radius * 2 : 55; // 默认55px大小
+        const direction = element.originalData?.direction || 0;
+        // 将弧度转换为角度
+        const angle = (direction * 180) / Math.PI;
+        const rotationDegree = 270 - angle; // 坐标系转换
+        const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        // 图片居中定位
+        const x = center[0];
+        const y = center[1];
+        image.setAttribute('x', x.toString());
+        image.setAttribute('y', y.toString());
+        image.setAttribute('width', `${size}px`);
+        image.setAttribute('height', `${size}px`);
+        image.setAttribute('href', chargingPileImage);
+        image.setAttribute('opacity', '0'); // 初始透明
+        // 添加SVG原生动画，传入默认角度
+        this.addChargingPileAnimation(image, center, rotationDegree);
+        image.classList.add('vector-charging-pile');
+        svgGroup.appendChild(image);
+    }
+    /**
+     * 添加充电桩SVG原生动画
+     */
+    addChargingPileAnimation(image, center, defaultAngle) {
+        // 透明度动画 - 先显示出来
+        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+        animateOpacity.setAttribute('attributeName', 'opacity');
+        animateOpacity.setAttribute('values', '0;1');
+        animateOpacity.setAttribute('dur', '0.5s');
+        animateOpacity.setAttribute('fill', 'freeze');
+        image.appendChild(animateOpacity);
+        // 旋转动画 - 从180度旋转到默认角度
+        const animateTransform = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
+        animateTransform.setAttribute('attributeName', 'transform');
+        animateTransform.setAttribute('type', 'rotate');
+        animateTransform.setAttribute('values', `${180 + defaultAngle} ${center[0]} ${center[1]};${defaultAngle} ${center[0]} ${center[1]}`);
+        animateTransform.setAttribute('dur', '1s');
+        animateTransform.setAttribute('repeatCount', '1'); // 只播放一次
+        animateTransform.setAttribute('begin', '0.5s'); // 延迟0.5秒开始，等透明度动画完成
+        animateTransform.setAttribute('fill', 'freeze'); // 保持最终状态
+        image.appendChild(animateTransform);
     }
-    const acres = ft2ToAcre(squareFeet);
-    // 将 ft² 转换为 ac（1 ac = 43560 ft²）
-    const result = formatNumberWithMetricPrefix(acres, false);
-    return {
-        originNum: acres,
-        numStr: result,
-        value: `${acres} ${UnitsAreaType.ACRE}`,
-        unit: UnitsAreaType.ACRE,
-    };
 }
 
 /**
- * 日期时间格式化工具函数
- * 专门处理boundary中的日期时间显示格式
- */
-/**
- * 获取一周的开始日期（周日）
- * @param date 目标日期
- * @returns 该周的周日日期
- */
-function getWeekStart(date) {
-    const startOfWeek = new Date(date);
-    const dayOfWeek = startOfWeek.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
-    // 向前推移到周日
-    startOfWeek.setDate(startOfWeek.getDate() - dayOfWeek);
-    startOfWeek.setHours(0, 0, 0, 0);
-    return startOfWeek;
-}
-/**
- * 获取一周的结束日期（周六）
- * @param date 目标日期
- * @returns 该周的周六日期
- */
-function getWeekEnd(date) {
-    const endOfWeek = new Date(date);
-    const dayOfWeek = endOfWeek.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
-    // 向后推移到周六
-    endOfWeek.setDate(endOfWeek.getDate() + (6 - dayOfWeek));
-    endOfWeek.setHours(23, 59, 59, 999);
-    return endOfWeek;
-}
-/**
- * 判断两个日期是否为同一天
- * @param date1 第一个日期
- * @param date2 第二个日期
- * @returns 是否为同一天
- */
-function isSameDay(date1, date2) {
-    return date1.getFullYear() === date2.getFullYear() &&
-        date1.getMonth() === date2.getMonth() &&
-        date1.getDate() === date2.getDate();
-}
-/**
- * 判断是否为今天
- * @param date 目标日期
- * @returns 是否为今天
- */
-function isToday(date) {
-    const today = new Date();
-    return isSameDay(date, today);
-}
-/**
- * 判断是否为昨天
- * @param date 目标日期
- * @returns 是否为昨天
- */
-function isYesterday(date) {
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    return isSameDay(date, yesterday);
-}
-/**
- * 判断是否为本周内（以周日为一周的开始）
- * @param date 目标日期
- * @returns 是否为本周内
- */
-function isThisWeek(date) {
-    const now = new Date();
-    const weekStart = getWeekStart(now);
-    const weekEnd = getWeekEnd(now);
-    return date >= weekStart && date <= weekEnd;
-}
-/**
- * 格式化时间为 HH:mm 格式
- * @param date 目标日期
- * @returns 格式化后的时间字符串
+ * 点图层
+ * 专门处理点元素的渲染
  */
-function formatTime(date) {
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    return `${hours}:${minutes}`;
+class PointLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.level = 11;
+        this.type = LAYER_DEFAULT_TYPE.POINT;
+    }
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染点类型的元素
+        for (const element of this.elements) {
+            if (element.type === 'point') {
+                this.renderPoint(svgGroup, element);
+            }
+        }
+    }
+    /**
+     * 渲染点元素
+     */
+    renderPoint(svgGroup, element) {
+        const { coordinates, style } = element;
+        if (coordinates.length === 0)
+            return;
+        const coordinate = coordinates[0];
+        const radius = style.radius || 4;
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', coordinate[0].toString());
+        circle.setAttribute('cy', coordinate[1].toString());
+        circle.setAttribute('r', radius.toString());
+        circle.setAttribute('fill', style.fillColor || style.strokeColor || '#000000');
+        circle.setAttribute('stroke', style.strokeColor || '#000000');
+        // 确保最小线条宽度
+        const lineWidth = Math.max(style.lineWidth || 1, 0.5);
+        circle.setAttribute('stroke-width', lineWidth.toString());
+        circle.setAttribute('opacity', (style.opacity || 1).toString());
+        circle.setAttribute('vector-effect', 'non-scaling-stroke');
+        circle.classList.add('vector-point');
+        svgGroup.appendChild(circle);
+    }
 }
+
 /**
- * 获取星期几的英文缩写
- * @param date 目标日期
- * @returns 星期几的英文缩写
+ * SVG元素图层
+ * 专门处理SVG元素的渲染
  */
-function getWeekdayAbbr(date) {
-    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return weekdays[date.getDay()];
+class SvgElementLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.level = 6;
+        this.scale = 1;
+        this.type = LAYER_DEFAULT_TYPE.SVG;
+    }
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染SVG类型的元素
+        for (const element of this.elements) {
+            const expirationTs = element.originalData?.expiration_ts;
+            const current = Date.now() / 1000;
+            if (expirationTs && current > expirationTs) {
+                continue;
+            }
+            if (element.type === 'svg') {
+                this.renderSvgElement(svgGroup, element);
+            }
+        }
+    }
+    /**
+     * 渲染SVG元素
+     */
+    renderSvgElement(svgGroup, element) {
+        const { coordinates, style, metadata } = element;
+        if (coordinates.length === 0)
+            return;
+        const center = coordinates[0];
+        if (!metadata || !metadata.svg) {
+            this.renderSvgPlaceholder(svgGroup, center, metadata, style);
+            return;
+        }
+        try {
+            // 解析SVG字符串
+            const svgString = metadata.svg.replace(/\\n/g, '\n').replace(/\\"/g, '"');
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+            const svgElement = svgDoc.documentElement;
+            if (svgElement.tagName === 'svg') {
+                // 获取原始SVG尺寸
+                const originalWidth = parseFloat(svgElement.getAttribute('width') || '139');
+                const originalHeight = parseFloat(svgElement.getAttribute('height') || '138');
+                // 计算变换参数
+                const userScale = metadata.scale || 1;
+                const direction = metadata.direction || 0;
+                // 设置原始SVG的实际尺寸（限制大小）
+                svgElement.setAttribute('width', originalWidth.toString());
+                svgElement.setAttribute('height', originalHeight.toString());
+                // 创建变换组
+                const transformGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                // 在transformGroup上应用变换：平移到中心，旋转，缩放，然后居中SVG
+                const transform = [
+                    `translate(${center[0]}, ${center[1]})`,
+                    `rotate(${-(direction * 180) / Math.PI})`,
+                    `scale(${userScale})`,
+                    `translate(${-originalWidth / 2}, ${-originalHeight / 2})`,
+                ].join(' ');
+                transformGroup.setAttribute('transform', transform);
+                // 设置样式
+                if (style.opacity !== undefined) {
+                    transformGroup.setAttribute('opacity', style.opacity.toString());
+                }
+                // 将限制好尺寸的原始SVG添加到transformGroup中
+                transformGroup.appendChild(svgElement);
+                // 将transformGroup添加到svgGroup中
+                svgGroup.appendChild(transformGroup);
+            }
+            else {
+                this.renderSvgPlaceholder(svgGroup, center, metadata, style);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to parse SVG:', error);
+            this.renderSvgPlaceholder(svgGroup, center, metadata, style);
+        }
+    }
+    /**
+     * 渲染SVG占位符
+     */
+    renderSvgPlaceholder(svgGroup, center, metadata, style) {
+        const size = (metadata?.scale || 1) * 20;
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('x', ((center[0] - size / 2) / 50).toString());
+        rect.setAttribute('y', ((center[1] - size / 2) / 50).toString());
+        rect.setAttribute('width', size.toString());
+        rect.setAttribute('height', size.toString());
+        rect.setAttribute('fill', style.fillColor);
+        rect.setAttribute('stroke', style.lineColor);
+        rect.setAttribute('stroke-width', style.lineWidth.toString());
+        rect.setAttribute('opacity', style.opacity.toString());
+        svgGroup.appendChild(rect);
+    }
 }
+
 /**
- * 格式化boundary中的日期文本
- * 根据时间距离当前时间的远近，显示不同的格式：
- * - 今天：Today HH:mm
- * - 昨天：Yesterday HH:mm
- * - 本周内：Tue HH:mm
- * - 其他：MM/dd/yyyy HH:mm
- *
- * @param timestamp 时间戳（秒）
- * @returns 格式化后的日期文本
+ * 边界图层
+ * 专门处理边界元素的渲染
  */
-function formatBoundaryDateText(timestamp) {
-    if (!timestamp || timestamp <= 0) {
-        return '--/--/---- --:--';
-    }
-    const date = new Date(timestamp * 1000); // 转换为毫秒
-    const timeStr = formatTime(date);
-    // 判断是否为今天
-    if (isToday(date)) {
-        return `Today ${timeStr}`;
+class VisionOffLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.type = LAYER_DEFAULT_TYPE.VISION_OFF_AREA;
+        this.level = 7; // 中等层级
     }
-    // 判断是否为昨天
-    if (isYesterday(date)) {
-        return `Yesterday ${timeStr}`;
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染边界类型的元素
+        for (const element of this.elements) {
+            if (element.type === 'vision_off_area') {
+                this.renderVisionOffArea(svgGroup, element);
+            }
+        }
     }
-    // 判断是否为本周内
-    if (isThisWeek(date)) {
-        const weekdayAbbr = getWeekdayAbbr(date);
-        return `${weekdayAbbr} ${timeStr}`;
+    /**
+     * 渲染边界元素
+     */
+    renderVisionOffArea(svgGroup, element) {
+        const { coordinates, style } = element;
+        if (coordinates.length < 3)
+            return;
+        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        // 构建点集合，使用整数坐标
+        const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
+        const fillColor = style.fillColor || 'rgba(0, 255, 0, 0.4)';
+        polygon.setAttribute('points', points);
+        polygon.setAttribute('fill', fillColor);
+        polygon.setAttribute('stroke', style.lineColor);
+        // 确保最小线条宽度
+        const lineWidth = Math.max(style.lineWidth || 2, 0.5);
+        polygon.setAttribute('stroke-width', lineWidth.toString());
+        polygon.setAttribute('stroke-linecap', 'round');
+        polygon.setAttribute('stroke-linejoin', 'round');
+        polygon.setAttribute('opacity', (style.opacity || 1).toString());
+        polygon.setAttribute('vector-effect', 'non-scaling-stroke');
+        polygon.classList.add('vector-boundary');
+        svgGroup.appendChild(polygon);
     }
-    // 其他情况显示完整日期
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const year = date.getFullYear();
-    return `${month}/${day}/${year} ${timeStr}`;
 }
 
 /**
@@ -9174,7 +9343,12 @@ class BoundaryLabelsManager {
         labelDiv.style.whiteSpace = 'nowrap';
         labelDiv.style.maxWidth = '220px';
         labelDiv.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
-        labelDiv.style.pointerEvents = 'auto';
+        if (this.onlyRead) {
+            labelDiv.style.pointerEvents = 'none';
+        }
+        else {
+            labelDiv.style.pointerEvents = 'auto';
+        }
         labelDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.4)';
         labelDiv.style.cursor = 'pointer';
         labelDiv.style.transition = 'background-color 0.2s ease';
@@ -9260,6 +9434,9 @@ class BoundaryLabelsManager {
      * 展开标签
      */
     expandLabel(boundaryId) {
+        if (this.onlyRead) {
+            return;
+        }
         const labelDiv = this.getLabelElement(boundaryId);
         if (!labelDiv)
             return;
@@ -9268,12 +9445,6 @@ class BoundaryLabelsManager {
             return;
         // 关闭其他展开的标签
         this.collapseOtherLabels(boundaryId);
-        if (this.onlyRead) {
-            extendedContent.style.pointerEvents = 'none';
-            return;
-        }
-        // 展开当前标签
-        extendedContent.style.pointerEvents = 'auto';
         extendedContent.style.display = 'block';
         this.currentExpandedBoundaryId = boundaryId;
     }
@@ -9473,6 +9644,16 @@ class BoundaryLabelsManager {
         const pixelY = relativeY * divHeight;
         return { x: pixelX, y: pixelY };
     }
+    updateReadOnlyMode(onlyRead) {
+        this.onlyRead = onlyRead;
+        if (!this.container)
+            return;
+        const allLabels = this.container.querySelectorAll('.boundary-label');
+        allLabels.forEach((label) => {
+            const labelElement = label;
+            labelElement.style.pointerEvents = onlyRead ? 'none' : 'auto';
+        });
+    }
     /**
      * 更新边界数据
      */
@@ -9867,7 +10048,12 @@ class AntennaManager {
         antennaContainer.className = 'antenna-container-item';
         antennaContainer.style.position = 'absolute';
         antennaContainer.style.transform = `translate(-50%, -50%) rotate(${-this.rotation}deg)`;
-        antennaContainer.style.pointerEvents = 'auto';
+        if (this.onlyRead) {
+            antennaContainer.style.pointerEvents = 'none';
+        }
+        else {
+            antennaContainer.style.pointerEvents = 'auto';
+        }
         antennaContainer.style.zIndex = AntennaManager.Z_INDEX.DEFAULT.toString();
         antennaContainer.setAttribute('data-antenna-id', antennaData.type.toString());
         // 创建天线图标
@@ -9895,9 +10081,6 @@ class AntennaManager {
         // 添加点击事件
         antennaDiv.addEventListener('click', (e) => {
             e.stopPropagation();
-            if (this.onlyRead) {
-                return;
-            }
             // 关闭其他展开的tooltip
             this.collapseOtherTooltips(antennaContainer);
             this.elevateAntennaZIndex();
@@ -9913,15 +10096,9 @@ class AntennaManager {
         });
         // 添加悬停效果
         antennaDiv.addEventListener('mouseenter', () => {
-            if (this.onlyRead) {
-                return;
-            }
             antennaDiv.style.transform = 'scale(1.1)';
         });
         antennaDiv.addEventListener('mouseleave', () => {
-            if (this.onlyRead) {
-                return;
-            }
             antennaDiv.style.transform = 'scale(1)';
         });
         antennaContainer.appendChild(antennaDiv);
@@ -9974,10 +10151,8 @@ class AntennaManager {
         if (!tooltip)
             return;
         if (this.onlyRead) {
-            tooltip.style.pointerEvents = 'none';
             return;
         }
-        tooltip.style.pointerEvents = 'auto';
         // 展开当前tooltip
         tooltip.style.display = 'block';
         const extendedContent = tooltip.querySelector('.antenna-tooltip-extended');
@@ -10023,6 +10198,16 @@ class AntennaManager {
             }
         });
     }
+    updateReadOnlyMode(onlyRead) {
+        this.onlyRead = onlyRead;
+        if (!this.container)
+            return;
+        const allAntennas = this.container.querySelectorAll('.antenna-container-item');
+        allAntennas.forEach((antenna) => {
+            const antennaElement = antenna;
+            antennaElement.style.pointerEvents = onlyRead ? 'none' : 'auto';
+        });
+    }
     /**
      * 添加主天线
      */
@@ -10763,6 +10948,7 @@ class MowerMapOverlay {
             this.overlayView.hide = this.hide.bind(this);
             // 添加编辑模式相关方法
             this.overlayView.setEditMode = this.setEditMode.bind(this);
+            this.overlayView.setReadOnlyMode = this.setReadOnlyMode.bind(this);
             this.overlayView.getEditData = this.getEditData.bind(this);
             this.overlayView.handleSave = this.handleSave.bind(this);
             this.overlayView.setCustomIcons = this.setCustomIcons.bind(this);
@@ -10984,6 +11170,15 @@ class MowerMapOverlay {
             this.chargingPileManager.updatePositions();
         }
     }
+    // 设置编辑模式
+    setReadOnlyMode(enabled) {
+        if (this.boundaryLabelsManager) {
+            this.boundaryLabelsManager.updateReadOnlyMode(enabled);
+        }
+        if (this.antennaManager) {
+            this.antennaManager.updateReadOnlyMode(enabled);
+        }
+    }
     // 创建编辑界面
     createEditInterface() {
         if (!this.div)
@@ -12170,6 +12365,12 @@ sn, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = fa
             overlayRef.current.setEditMode(isEditMode);
         }
     }, [isEditMode]);
+    // 监听只读模式变化
+    React.useEffect(() => {
+        if (overlayRef.current) {
+            overlayRef.current.setReadOnlyMode(onlyRead);
+        }
+    }, [onlyRead]);
     // 监听路径信息的更新，需要同步更新boundaary的进度信息
     // useEffect(() => {
     //   if (!mapJson) return;