fix: 绘制不同类型范围

src/views/old_mini/interactionList/drawRegion.vue

@@ -36,6 +36,22 @@ onMounted(() => {
     type.value = route.query.type
     const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
     drawRegionMap.initMap(point, mapContainer.value);
+
+    // 地图初始化之后（比如 initPreviewMap 里）
+const regions = [
+  {
+    geometry:
+      "MULTIPOLYGON(((113.61674040430906 23.586573370597367,113.61586610436014 23.585922976493354,113.61710291900188 23.58486741952544,113.61770000158238 23.585651090473736,113.61674040430906 23.586573370597367)))",
+    status: "unresolved", // 未解决（蓝色）
+  },
+  {
+    geometry:
+      "MULTIPOLYGON(((113.61516640298626 23.588441931082958,113.61445736699218 23.58799411906573,113.61572616841707 23.586954554834552,113.61642987338976 23.588180707433526,113.61516640298626 23.588441931082958)))",
+    status: "resolved", // 已解决（灰色）
+  },
+];
+
+drawRegionMap.setStatusRegions(regions);
 });
 
 onActivated(() => {

src/views/old_mini/interactionList/map/drawRegionMap.js

@@ -27,7 +27,7 @@ class DrawRegionMap {
 
         // 位置图标
         this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
-            style: (f) => {
+            style: () => {
                 return new Style({
                     image: new Icon({
                         src: require("@/assets/img/home/garden-point.png"),
@@ -37,6 +37,39 @@ class DrawRegionMap {
                 });
             },
         });
+
+        // 只读状态区域图层（展示多 polygon，用于“已解决 / 未解决”等状态）
+        this.staticRegionLayer = new KMap.VectorLayer("staticRegionLayer", 9998, {
+            style: (f) => {
+                const status = f.get("status"); // 'resolved' | 'unresolved'
+                const isResolved = status === "resolved";
+                // 已解决：深灰填充，浅白描边；未解决：浅蓝填充，亮蓝描边
+                const fillColor = isResolved ? "rgba(0, 0, 0, 0.45)" : "rgba(33, 153, 248, 0.25)";
+                const strokeColor = isResolved ? "rgba(255, 255, 255, 0.85)" : "#2199F8";
+
+                const text = new Text({
+                    text: status === "resolved" ? "已解决" : "未解决",
+                    font: "15px sans-serif",
+                    fill: new Fill({ color: "#ffffff" }),
+                });
+                const style =  new Style({
+                        fill: new Fill({ color: fillColor }),
+                        stroke: new Stroke({ color: strokeColor, width: 2 }),
+                        text: text,
+                    })
+
+                const text2 = new Style({
+                    text: new Text({
+                        text: "发现时间:2025.05.06",
+                        font: "15px sans-serif",
+                        offsetY: -20,
+                        fill: new Fill({ color: "#ffffff" }),
+                    }),
+                });
+
+                return [style, text2];
+            },
+        });
     }
 
     /**
@@ -56,6 +89,7 @@ class DrawRegionMap {
         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);
@@ -154,6 +188,9 @@ class DrawRegionMap {
         if (this.kmap && this.kmap.polygonLayer) {
             this.kmap.polygonLayer.source.clear();
         }
+        if (this.staticRegionLayer && this.staticRegionLayer.source) {
+            this.staticRegionLayer.source.clear();
+        }
     }
 
     getAreaGeometry() {
@@ -202,6 +239,48 @@ class DrawRegionMap {
             this.kmap.polygonLayer.source.removeFeature(lastFeature);
         }
     }
+
+    /**
+     * 设置只读状态区域图层（多个 polygon，不可编辑）
+     * @param {Array<{ geometry: string, status?: 'resolved' | 'unresolved' }>} 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("status", region.status || "unresolved");
+                this.staticRegionLayer.addFeature(feature);
+            } catch (e) {
+                // 单个区域解析失败时忽略
+            }
+        });
+
+        // 自动缩放到这些区域
+        if (this.staticRegionLayer.source.getFeatures().length > 0) {
+            const extent = this.staticRegionLayer.source.getExtent();
+            this.kmap.getView().fit(extent, { duration: 500, padding: [100, 100, 100, 100] });
+        }
+    }
 }
 
 export default DrawRegionMap;