feiniao-farm-h5/src/views/old_mini/interactionList/map/drawRegionMap.js

import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import config from "@/api/config.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Fill, Stroke, Text } from "ol/style.js";
import { Point } from 'ol/geom';
import Feature from "ol/Feature";
import * as proj from "ol/proj";
import { getArea } from 'ol/sphere.js';
import WKT from "ol/format/WKT.js";
import proj4 from "proj4"
import { register } from "ol/proj/proj4";
proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
register(proj4);

/**
 * @description 地图层对象
 */
class DrawRegionMap {
    constructor() {
        let that = this;
        let vectorStyle = new KMap.VectorStyle();
        this.vectorStyle = vectorStyle;
        // 是否允许编辑（勾画页 true，小弹窗回显页 false）
        this.editable = true;

        // 位置图标
        this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
            style: () => {
                return new Style({
                    image: new Icon({
                        // src: require("@/assets/img/home/garden-point.png"),
                        src: require("@/assets/img/map/map_point.png"),
                        scale: 0.5,
                        // anchor: [0.5, 0.5],
                    }),
                });
            },
        });

        // 只读状态区域图层（展示多 polygon，用于“已解决 / 未解决”等状态）
        // 层级需低于默认可编辑 polygonLayer(1000)，避免标签遮挡当前编辑地块
        this.staticRegionLayer = new KMap.VectorLayer("staticRegionLayer", 900, {
            style: (f) => {
                const displayMode = f.get("displayMode");
                // 品种勾画页：已勾画的其他品种仅做只读灰色展示，并显示品种名
                if (displayMode === "readonlyVariety") {
                    // 品种区只读展示：统一使用品种区视觉样式
                    return new Style({
                        fill: new Fill({ color: "rgba(0, 57, 44, 0.5)" }),
                        stroke: new Stroke({ color: "#18AA8B", width: 1.5 }),
                        text: new Text({
                            text: f.get("label") || "",
                            font: "12px sans-serif",
                            fill: new Fill({ color: "#ffffff" }),
                            backgroundFill: new Fill({ color: "rgba(0, 57, 44, 0.85)" }),
                            padding: [2, 6, 2, 6],
                        }),
                    });
                }
                if (displayMode === "lockedDisease") {
                    const status = String(f.get("handleStatus") || "");
                    const lockStyleType = String(f.get("lockStyleType") || "");
                    const isControlled = lockStyleType === "controlled" || status === "3";
                    const isGrowthTreating = lockStyleType === "growthTreating";
                    const label = f.get("label") || (isControlled ? "病害已控制" : "病害治疗中");
                    const updatedTime = f.get("updatedTime") || "";
                    const isNewAbnormal = String(label).startsWith("新增");
                    let areaText = "";
                    try {
                        let geom = f.getGeometry().clone();
                        geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
                        let area = getArea(geom);
                        area = (area + area / 2) / 1000;
                        areaText = `${Number(area).toFixed(2)}亩`;
                    } catch (_) {
                        areaText = "";
                    }
                    const fillColor = isControlled
                        ? "rgba(166, 166, 166, 0.25)"
                        : isGrowthTreating
                            ? "rgba(255, 159, 102, 0.3)"
                            : "rgba(191, 91, 91, 0.36)";
                    const strokeColor = isControlled
                        ? "#A6A6A6"
                        : isGrowthTreating
                            ? "rgba(255, 94, 0, 0.3)"
                            : "rgba(224, 49, 49, 0.3)";
                    const badgeTextColor = isControlled
                        ? "#ffffff"
                        : isNewAbnormal
                            ? "#ffffff"
                            : isGrowthTreating
                                ? "#F76F00"
                                : "#E32A28";
                    const badgeBgColor = isControlled
                        ? "#A6A6A6"
                        : isNewAbnormal
                            ? (isGrowthTreating ? "#F76F00" : "#E32A28")
                            : "#ffffff";
                    const badgeBorderColor = isControlled || isNewAbnormal ? "" : isGrowthTreating ? "#F76F00" : "#E32A28";
                    const styles = [
                        new Style({
                            fill: new Fill({ color: fillColor }),
                            stroke: new Stroke({ color: strokeColor, width: 1.5 }),
                            text: new Text({
                                text: label,
                                font: "bold 13px sans-serif",
                                fill: new Fill({ color: badgeTextColor }),
                                backgroundFill: new Fill({ color: badgeBgColor }),
                                backgroundStroke: badgeBorderColor
                                    ? new Stroke({ color: badgeBorderColor, width: 1 })
                                    : undefined,
                                padding: [4, 10, 4, 10],
                                offsetY: -40,
                            }),
                        }),
                    ];
                    if (updatedTime) {
                        styles.push(
                            new Style({
                                text: new Text({
                                    text: `发现时间:${updatedTime}`,
                                    font: "12px sans-serif",
                                    fill: new Fill({ color: isNewAbnormal ? "#333333" : "#ffffff" }),
                                    ...(isNewAbnormal
                                        ? {
                                              backgroundFill: new Fill({ color: "#ffffff" }),
                                              padding: [8, 12, 8, 12],
                                          }
                                        : {}),
                                    offsetY: -16,
                                }),
                            })
                        );
                    }
                    if (areaText) {
                        styles.push(
                            new Style({
                                text: new Text({
                                    text: areaText,
                                    font: "16px sans-serif",
                                    fill: new Fill({ color: "#ffffff" }),
                                    offsetY: 14,
                                }),
                            })
                        );
                    }
                    return styles;
                }

                const status = f.get("status"); // 'resolved' | 'unresolved'
                const reproductiveName = f.get("reproductiveName") || "";
                const isResolved = status === "resolved";
                const unresolvedBlueFill = f.get("unresolvedBlueFill") === true;
                const regionStyleKind = String(f.get("regionStyleKind") || "");
                const isAbnormalGrowth =
                    regionStyleKind === "ABNORMAL" &&
                    (reproductiveName.includes("长势") ||
                        reproductiveName.includes("过慢") ||
                        reproductiveName.includes("过快"));
                let unresolvedFillColor = unresolvedBlueFill
                    ? "rgba(33, 153, 248, 0.35)"
                    : "rgba(0, 0, 0, 0.5)";
                let unresolvedStrokeColor = "#2199F8";
                let unresolvedBadgeColor = "#2199F8";

                if (regionStyleKind === "variety") {
                    unresolvedFillColor = "rgba(0, 57, 44, 0.5)";
                    unresolvedStrokeColor = "#18AA8B";
                    unresolvedBadgeColor = "#18AA8B";
                } else if (regionStyleKind === "ABNORMAL") {
                    unresolvedFillColor = isAbnormalGrowth
                        ? "rgba(124, 46, 0, 0.5)"
                        : "rgba(100, 0, 0, 0.5)";
                    unresolvedStrokeColor = isAbnormalGrowth ? "#FF7300" : "#E03131";
                    unresolvedBadgeColor = isAbnormalGrowth ? "#F76F00" : "#E03131";
                } else if (regionStyleKind === "ENVIRONMENT") {
                    unresolvedFillColor = "rgba(151, 96, 0, 0.5)";
                    unresolvedStrokeColor = "#FDCF7F";
                    unresolvedBadgeColor = "#FDCF7F";
                }
                // 已解决：深灰填充，浅白描边；未解决：默认深灰半透明 + 蓝描边；unresolvedBlueFill 时浅蓝填充（互动列表等）
                const fillColor = isResolved
                    ? "rgba(0, 0, 0, 0.6)"
                    : unresolvedFillColor;
                const strokeColor = isResolved ? "#7C7C7C" : unresolvedStrokeColor;
                let abnormalBadgeText = "";
                if (regionStyleKind === "ABNORMAL") {
                    if (reproductiveName.includes("病害")) {
                        abnormalBadgeText = "新增病害";
                    } else if (reproductiveName.includes("虫害")) {
                        abnormalBadgeText = "新增虫害";
                    } else if (reproductiveName.includes("过慢")) {
                        abnormalBadgeText = "新增长势过慢";
                    } else if (reproductiveName.includes("过快")) {
                        abnormalBadgeText = "新增长势过快";
                    }
                }
                const statusText = status === "resolved" ? "已解决" : "未解决";
                const mainLabelText =
                    regionStyleKind === "ABNORMAL" && abnormalBadgeText
                        ? abnormalBadgeText
                        : reproductiveName
                            ? `${reproductiveName} ${statusText}`
                            : statusText;
                let areaText = "";
                try {
                    let geom = f.getGeometry().clone();
                    geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
                    let area = getArea(geom);
                    area = (area + area / 2) / 1000;
                    areaText = `${Number(area).toFixed(2)}亩`;
                } catch (_) {
                    areaText = "";
                }

                const text = new Text({
                    text: mainLabelText,
                    font: regionStyleKind === "ABNORMAL" ? "bold 13px sans-serif" : "12px sans-serif",
                    fill: new Fill({ color: "#ffffff" }),
                    backgroundFill: new Fill({ 
                        color: isResolved ? "#949494" : unresolvedBadgeColor 
                    }),
                    padding: [1, 5, 1, 5],
                    offsetY: -40,
                });
                const style =  new Style({
                        fill: new Fill({ color: fillColor }),
                        stroke: new Stroke({ color: strokeColor, width: 1 }),
                        text: text,
                    })

                const text2 = new Style({
                    text: new Text({
                        text: `发现时间:${f.get("updatedTime")}`,
                        font: "12px sans-serif",
                        offsetY: -16,
                        fill: new Fill({ color: "#ffffff" }),
                        ...(regionStyleKind === "ABNORMAL"
                            ? {}
                            : {
                                  backgroundFill: new Fill({
                                      color: isResolved ? "rgba(171, 171, 171, 0.4)" : `${unresolvedBadgeColor}99`,
                                  }),
                              }),
                        padding: [1, 5, 1, 5],
                    }),
                });

                const styles = [style, text2];
                if (areaText) {
                    styles.push(
                        new Style({
                            text: new Text({
                                text: areaText,
                                font: "16px sans-serif",
                                fill: new Fill({ color: "#ffffff" }),
                                offsetY: 14,
                            }),
                        })
                    );
                }

                return styles;
            },
        });
    }

    /**
     * 初始化地图
     * @param {string} location WKT 点位
     * @param {HTMLElement|string} target 地图容器
     * @param {boolean} editable 是否允许绘制/编辑地块
     * @param {boolean} movable 是否允许拖动/缩放地图
     * @param {boolean} showPoint 是否显示初始点位图标
     * @param {Function} onDrawEnd 绘制闭环回调（drawend），可选
     */
    initMap(location, target, editable = true, movable = true, showPoint = true, onDrawEnd) {
        let level = 16;
        let coordinate = util.wktCastGeom(location).getFirstCoordinate();
        this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
        // 记录当前地图是否可编辑，供样式控制使用
        this.editable = editable;
        let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
        this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
        this.kmap.addLayer(this.clickPointLayer.layer);
        this.kmap.addLayer(this.staticRegionLayer.layer);
        // 根据 showPoint 决定是否在初始化时落下点位图标
        if (showPoint) {
            this.setMapPoint(coordinate);
        } else {
            this.clickPointLayer.source.clear();
        }

        // 仅在 editable 为 true 时开启绘制/编辑能力（用于勾画页面）
        if (editable) {
            this.kmap.initDraw((e) => {
                if (typeof onDrawEnd === "function") {
                    try {
                        onDrawEnd(e);
                    } catch (_) {
                        // 回调失败不影响地图继续使用
                    }
                }
            });
            this.kmap.startDraw()
            this.kmap.modifyDraw()
        }

        // movable 为 false 时，禁用地图拖动、缩放等交互（用于小弹窗只看不动）
        if (!movable && this.kmap && this.kmap.setStates) {
            this.kmap.setStates({
                DoubleClickZoom: false,
                DragAndDrop: false,
                MouseWheelZoom: false,
            });
        }
    }

    /**
     * 回显地块
     * @param {string[]} geometryArr 多边形 WKT 数组
     * @param {boolean} needFitView 是否自动缩放视图
     * @param {string|number} areaText 显示的面积（单位：亩），可选
     * @param {{ fill?: string, stroke?: string }} [readonlyAreaStyle] 只读模式下覆盖填充/描边色；不传则仍用 Map.drawStyleColors 或默认
     * @param {{ badgeText: string, discoveryDate: string, badgeBackground?: string }|function} [growthOverlay] 只读模式下异常区标签（可传函数按地块动态返回）
     * @param {string} [polygonCenterLabel] 只读模式下覆盖多边形中心文案（原样展示，不加「亩」）；用于品种查看态显示品种名等
     */
    setAreaGeometry(geometryArr, needFitView = false, areaText, readonlyAreaStyle, growthOverlay, polygonCenterLabel) {
        // 兜底保护：geometryArr 可能为 undefined/null 或空数组
        if (!Array.isArray(geometryArr) || geometryArr.length === 0) return;
        // 地图实例或图层尚未初始化时也直接返回，避免报错
        if (!this.kmap || !this.kmap.polygonLayer || !this.kmap.polygonLayer.source) return;

        let that = this;
        geometryArr.map((item, index) => {
            // 不使用 setLayerWkt，而是手动添加要素，避免自动缩放视图
            const format = new WKT()
            const mapProjection = that.kmap.map.getView().getProjection()
            let geometry = format.readGeometry(item, {
                dataProjection: 'EPSG:4326',
                featureProjection: mapProjection
            })
            let f = new Feature({ geometry: geometry })
            // 只读模式下，为多边形单独设置样式：仅填充+边框 + 面积文本，不显示可拖动的顶点小圆点
            if (!this.editable) {
                const resolvedGrowthOverlay =
                    typeof growthOverlay === "function"
                        ? growthOverlay(f, item, index)
                        : growthOverlay;
                const overlayStatus = String(resolvedGrowthOverlay?.handleStatus || "");
                const overlayBadgeText = String(resolvedGrowthOverlay?.badgeText || "");
                const overlayLockStyleType = String(resolvedGrowthOverlay?.lockStyleType || "");
                // 只读查看态颜色与编辑态保持一致：
                // 1) 已控制(3) 灰色；2) 长势治疗中(2) 橙色；3) 病虫害治疗中(2) 红色
                const isControlledDisease = overlayStatus === "3";
                const isTreatingGrowth =
                    overlayStatus === "2" &&
                    (overlayLockStyleType === "growthTreating" || overlayBadgeText.includes("长势"));
                const isTreatingDisease = overlayStatus === "2" && !isTreatingGrowth;
                // 查看模式下单块区域展示：优先 readonlyAreaStyle，其次 Map.drawStyleColors，再默认
                const fillColor = isControlledDisease
                    ? "rgba(166, 166, 166, 0.25)"
                    : isTreatingGrowth
                        ? "rgba(255, 159, 102, 0.3)"
                    : isTreatingDisease
                        ? "rgba(191, 91, 91, 0.36)"
                    : (readonlyAreaStyle?.fill ??
                        KMap.Map?.drawStyleColors?.fill ??
                        "rgba(0, 57, 44, 0.5)");
                const strokeColor = isControlledDisease
                    ? "#A6A6A6"
                    : isTreatingGrowth
                        ? "rgba(255, 94, 0, 0.3)"
                    : isTreatingDisease
                        ? "rgba(224, 49, 49, 0.3)"
                    : (readonlyAreaStyle?.stroke ??
                        KMap.Map?.drawStyleColors?.stroke ??
                        "#18AA8B");
                const styles = [
                    new Style({
                        fill: new Fill({
                            color: fillColor,
                        }),
                        stroke: new Stroke({
                            color: strokeColor,
                            width: 2,
                        }),
                    }),
                ];
                // 中心文本：优先 polygonCenterLabel（品种查看态显示名称）；否则按面积规则
                const trimmedCenterLabel =
                    typeof polygonCenterLabel === "string" && polygonCenterLabel.trim() !== ""
                        ? polygonCenterLabel.trim()
                        : "";
                // 面积文本显示规则：
                // 1) 传空字符串：不显示
                // 2) 传了值：优先显示传入值
                // 3) 未传：按当前地块实时计算亩数
                const isExplicitEmptyText = typeof areaText === "string" && areaText.trim() === "";
                const hasProvidedAreaText = areaText !== undefined && areaText !== null;
                let textValue = "";
                if (trimmedCenterLabel) {
                    textValue = trimmedCenterLabel;
                } else if (!isExplicitEmptyText) {
                    if (hasProvidedAreaText) {
                        textValue = `${areaText}亩`;
                    } else {
                        try {
                            let geom = geometry.clone();
                            geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
                            let areaItem = getArea(geom);
                            areaItem = (areaItem + areaItem / 2) / 1000;
                            textValue = `${Number(areaItem).toFixed(2)}亩`;
                        } catch (_) {
                            textValue = "";
                        }
                    }
                }
                const hasGrowth =
                    resolvedGrowthOverlay &&
                    resolvedGrowthOverlay.badgeText &&
                    resolvedGrowthOverlay.discoveryDate;
                if (textValue) {
                    // 品种名与 staticRegionLayer.readonlyVariety 标签视觉一致（12px + 深绿底）
                    const isVarietyNameLabel = !!trimmedCenterLabel;
                    styles.push(
                        new Style({
                            text: new Text({
                                text: textValue,
                                font: isVarietyNameLabel ? "12px sans-serif" : "15px sans-serif",
                                fill: new Fill({ color: "#ffffff" }),
                                ...(isVarietyNameLabel
                                    ? {
                                          backgroundFill: new Fill({
                                              color:
                                                  KMap.Map?.drawStyleColors?.stroke
                                                      ? `${KMap.Map.drawStyleColors.stroke}D9`
                                                      : "rgba(0, 57, 44, 0.85)",
                                          }),
                                          padding: [2, 6, 2, 6],
                                      }
                                    : {}),
                                offsetY: hasGrowth ? 14 : 0,
                            }),
                        })
                    );
                }
                if (hasGrowth) {
                    styles.push(
                        new Style({
                            text: new Text({
                                text: resolvedGrowthOverlay.badgeText,
                                font: "bold 13px sans-serif",
                                fill: new Fill({ color: resolvedGrowthOverlay.badgeTextColor || "#ffffff" }),
                                backgroundFill: new Fill({
                                    color: resolvedGrowthOverlay.badgeBackground || "#FF7F00",
                                }),
                                backgroundStroke: resolvedGrowthOverlay.badgeBorderColor
                                    ? new Stroke({ color: resolvedGrowthOverlay.badgeBorderColor, width: 1 })
                                    : undefined,
                                padding: [4, 10, 4, 10],
                                offsetY: -40,
                            }),
                        }),
                        new Style({
                            text: new Text({
                                text: `发现时间:${resolvedGrowthOverlay.discoveryDate}`,
                                font: "12px sans-serif",
                                fill: new Fill({ color: "#ffffff" }),
                                offsetY: -16,
                            }),
                        })
                    );
                }
                f.setStyle(styles);
            }
            that.kmap.polygonLayer.source.addFeature(f)
        })
        // 根据参数决定是否需要自适应地块范围
        if (needFitView) {
            this.fitView()
        }
    }


    fitView() {
        if (!this.kmap?.polygonLayer?.source) return;
        const extent = this.kmap.polygonLayer.source.getExtent();
        if (
            !extent ||
            !isFinite(extent[0]) ||
            !isFinite(extent[1]) ||
            !isFinite(extent[2]) ||
            !isFinite(extent[3])
        ) {
            return;
        }
        this.kmap.getView().fit(extent, { duration: 500, padding: [10, 10, 10, 10] });
    }

    clearLayer() {
        // this.kmap.removeLayer(this.clickPointLayer.layer)
        if (this.kmap && this.kmap.polygonLayer) {
            this.kmap.polygonLayer.source.clear();
        }
        if (this.staticRegionLayer && this.staticRegionLayer.source) {
            this.staticRegionLayer.source.clear();
        }
    }

    /** 取消当前未完成的勾画（草图在 Draw 的 overlay 上，仅 clear 多边形图层去不掉） */
    abortOngoingDrawSketch() {
        if (!this.kmap || !this.kmap.draw || typeof this.kmap.draw.abortDrawing !== "function") return;
        this.kmap.draw.abortDrawing();
    }

    /**
     * 销毁地图实例（用于从编辑态切换到仅查看时重新初始化）
     */
    destroyMap() {
        this.clearLayer();
        if (this.kmap && typeof this.kmap.destroy === "function") {
            this.kmap.destroy();
        }
        this.kmap = null;
    }

    getAreaGeometry() {
        const features = this.kmap.getLayerFeatures()
        let geometryArr = []
        let area = 0
        const format = new WKT()
        // 获取图层上的Polygon，转成WKT用于回显
        features.forEach(item => {
            // 使用 writeGeometry 而不是 writeFeature，因为 setLayerWkt 期望的是几何体的 WKT
            const geometry = item.getGeometry()
            geometryArr.push(format.writeGeometry(geometry, {
                dataProjection: 'EPSG:4326',
                featureProjection: this.kmap.map.getView().getProjection()
            }))
            let geom = geometry.clone()
            geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
            let areaItem = getArea(geom)
            areaItem = (areaItem + areaItem / 2) / 1000;
            area += areaItem
        })
        return { geometryArr, mianji: area.toFixed(2) }  // 修改为 mianji 字段，与创建页面保持一致
    }

    setMapPosition(center) {
        this.kmap.getView().animate({
            center,
            zoom: 17,
            duration: 500,
        });
        this.setMapPoint(center)
    }

    setMapPoint(coordinate) {
        this.clickPointLayer.source.clear()
        let point = new Feature(new Point(coordinate))
        this.clickPointLayer.addFeature(point)
    }

    // 删除当前地块（删除最新绘制的一个地块）
    deleteCurrentPolygon() {
        if (!this.kmap || !this.kmap.polygonLayer) return;
        const features = this.kmap.polygonLayer.source.getFeatures();
        if (features && features.length > 0) {
            const lastFeature = features[features.length - 1];
            this.kmap.polygonLayer.source.removeFeature(lastFeature);
        }
    }

    /**
     * 设置只读状态区域图层（多个 polygon，不可编辑）
     * @param {Array<{ geometry: string, status?: 'resolved' | 'unresolved', label?: string, displayMode?: string, unresolvedBlueFill?: boolean }>} regions
     *
     * 使用示例：
     * drawRegionMap.setStatusRegions([
     *   { geometry: 'MULTIPOLYGON(((...)))', status: 'resolved' },
     *   { geometry: 'MULTIPOLYGON(((...)))', status: 'unresolved' },
     * ]);
     */
    setStatusRegions(regions) {
        if (!this.kmap || !this.staticRegionLayer || !this.staticRegionLayer.source) return;

        // 仅操作只读图层，不影响当前地图的绘制 / 编辑状态
        this.staticRegionLayer.source.clear();
        if (!Array.isArray(regions) || regions.length === 0) return;

        const format = new WKT();
        const mapProjection = this.kmap.map.getView().getProjection();

        regions.forEach((region) => {
            if (!region || !region.geometry) return;
            try {
                const geometry = format.readGeometry(region.geometry, {
                    dataProjection: "EPSG:4326",
                    featureProjection: mapProjection,
                });
                const feature = new Feature({ geometry });
                feature.set("reproductiveName", region.reproductiveName);
                feature.set("status", region.status || "unresolved");
                feature.set("updatedTime", region.updatedTime);
                feature.set("label", region.label || "");
                feature.set("displayMode", region.displayMode || "");
                feature.set("handleStatus", region.handleStatus);
                feature.set("lockStyleType", region.lockStyleType || "");
                feature.set("unresolvedBlueFill", region.unresolvedBlueFill === true);
                feature.set("regionStyleKind", region.regionStyleKind || "");
                this.staticRegionLayer.addFeature(feature);
            } catch (e) {
                // 单个区域解析失败时忽略
            }
        });
    }

    /**
     * 视图自适应到「只读区域图层 + 可编辑多边形图层」的联合范围
     * 适用于同时存在接口返回区域和本地勾画区域时，保证都能出现在视野内
     */
    fitAllRegions() {
        if (!this.kmap) return;

        const extents = [];

        // 只读状态区域图层范围
        if (this.staticRegionLayer && this.staticRegionLayer.source) {
            const features = this.staticRegionLayer.source.getFeatures();
            if (features && features.length > 0) {
                extents.push(this.staticRegionLayer.source.getExtent());
            }
        }

        // 可编辑 polygon 图层范围
        if (this.kmap.polygonLayer && this.kmap.polygonLayer.source) {
            const features = this.kmap.polygonLayer.source.getFeatures();
            if (features && features.length > 0) {
                extents.push(this.kmap.polygonLayer.source.getExtent());
            }
        }

        if (extents.length === 0) return;

        // 计算所有范围的并集 [minX, minY, maxX, maxY]
        const merged = extents.reduce(
            (acc, cur) => {
                if (!acc) return cur.slice();
                return [
                    Math.min(acc[0], cur[0]),
                    Math.min(acc[1], cur[1]),
                    Math.max(acc[2], cur[2]),
                    Math.max(acc[3], cur[3]),
                ];
            },
            null
        );

        if (merged) {
            this.kmap.getView().fit(merged, { duration: 500, padding: [100, 100, 100, 100] });
        }
    }
}

export default DrawRegionMap;