Merge branch 'farmer' of http://www.sysuimars.cn:3000/feiniao/feiniao-farm-h5 into farmer

src/views/old_mini/interactionList/drawRegion.vue

@@ -18,7 +18,8 @@
     </div>
 
     <!-- 地形/建模航线提示弹窗（复用 droneConsultPopup：terrainRoute 立即获取 → terrainRouteSuccess 航线已生成） -->
-    <drone-consult-popup v-model:show="showTerrainRoutePopup" :type="terrainPopupType" @confirm="onTerrainRouteConfirm" />
+    <drone-consult-popup v-model:show="showTerrainRoutePopup" :type="terrainPopupType"
+        @confirm="onTerrainRouteConfirm" />
 </template>
 
 <script setup>
@@ -47,6 +48,22 @@ onMounted(() => {
     if (route.query.showTerrainPopup === "1") {
         showTerrainRoutePopup.value = true;
     }
+
+    // 地图初始化之后（比如 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(() => {
@@ -98,7 +115,7 @@ const onTerrainRouteConfirm = () => {
             terrainPopupType.value = "terrainRouteSuccess";
             showTerrainRoutePopup.value = true;
         }, 1000);
-    }else{
+    } else {
         showTerrainRoutePopup.value = false;
         router.back();
     }
@@ -121,10 +138,12 @@ const confirm = () => {
     width: 100%;
     height: 100vh;
     overflow: hidden;
+
     .edit-map-content {
         width: 100%;
         height: 100%;
         position: relative;
+
         .edit-map-tip {
             position: absolute;
             top: 23px;
@@ -136,10 +155,12 @@ const confirm = () => {
             background: rgba(0, 0, 0, 0.5);
             border-radius: 20px;
         }
+
         .map-container {
             width: 100%;
             height: 100%;
         }
+
         .edit-map-footer {
             position: absolute;
             bottom: 80px;
@@ -148,22 +169,26 @@ const confirm = () => {
             display: flex;
             flex-direction: column;
             align-items: flex-end;
+
             .footer-back {
                 padding: 6px 7px 9px;
                 background: #fff;
                 border-radius: 8px;
                 margin-bottom: 12px;
+
                 .back-icon {
                     width: 20px;
                     height: 18px;
                 }
             }
+
             .edit-map-footer-btn {
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 width: 100%;
                 gap: 8px;
+
                 div {
                     flex: 1;
                     max-width: 100px;
@@ -174,10 +199,12 @@ const confirm = () => {
                     border-radius: 25px;
                     background: #fff;
                 }
+
                 .btn-delete {
                     background: #ff4d4f;
                     color: #fff;
                 }
+
                 .btn-confirm {
                     background: #000;
                     background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);

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;