feat：添加农场分布图标图层

src/views/warningHome/index.vue

@@ -180,6 +180,9 @@ import sd from "@/assets/images/map/type/水稻.png";
 import xm from "@/assets/images/map/type/小麦.png";
 import bc from "@/assets/images/map/type/小麦.png";
 import lb from "@/assets/images/map/type/小麦.png";
+// 冷链冷库、加工厂图标（与图例保持一致）
+import coldChainIcon from "@/assets/images/common/legend-icon-1.png";
+import factoryIcon from "@/assets/images/common/legend-icon-2.png";
 
 const treeActionData = ref([
   {
@@ -405,33 +408,59 @@ const destroyPopup = () => {
 const handleTabClick = (item) => {
     activeBaseTab.value = item;
 
-    // 切换 Tab 时，先清空农场分布图层上的旧数据
-    if (distributionLayer) {
+    if (item === "农场分布") {
+        if (!distributionLayer) return;
+
+        // 切换到农场分布时，先清空原有图层
         distributionLayer.clear();
-    }
 
-    if (item === "农场分布") {
-        const data = [
+        // 作物相关的测试数据（如果需要可以保留，否则也可以注释掉）
+        const cropData = [
             {
                 id: 4,
-                label: '荔枝-物候期',
+                label: "荔枝-物候期",
                 color: "#2199F8",
-                farmName: '荔博园',
+                farmName: "荔博园",
                 imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E8%8D%94%E6%9E%9D.png",
                 imgName: lz,
-                wktArr: ["POINT(113.33722309500006 23.204074978290652)", "POINT(113.53593237057355 23.188789823486065)", "POINT(113.36970447853234 23.064596505297875)"],
+                wktArr: [
+                    "POINT(113.33722309500006 23.204074978290652)",
+                    "POINT(113.53593237057355 23.188789823486065)",
+                    "POINT(113.36970447853234 23.064596505297875)",
+                ],
             },
             {
                 id: 55,
-                label: '荔枝-秋梢期',
+                label: "荔枝-秋梢期",
                 color: "#FF8E1C",
-                farmName: '荔博园',
+                farmName: "荔博园",
                 imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E7%B3%96.png",
                 imgName: lz,
-                wktArr: ["POINT(113.29900983080294 22.949956545068478)","POINT(113.22640444442656 22.90983245840535)"],
+                wktArr: [
+                    "POINT(113.29900983080294 22.949956545068478)",
+                    "POINT(113.22640444442656 22.90983245840535)",
+                ],
+            },
+        ];
+
+        // 设施图层测试数据
+        const facilityData = [
+            {
+                id: 201,
+                label: "冷链冷库",
+                imgName: coldChainIcon,
+                wktArr: ["POINT(113.35 23.10)"],
             },
-        ]
-        distributionLayer.initData(data, true);
+            {
+                id: 202,
+                label: "加工厂",
+                imgName: factoryIcon,
+                wktArr: ["POINT(113.25 23.02)"],
+            },
+        ];
+
+        distributionLayer.initData(cropData);
+        distributionLayer.initFacilityData(facilityData);
     }
 };
 

src/views/warningHome/map/distributionLayer.js

@@ -111,7 +111,22 @@ class DistributionLayer {
             },
         });
         this.kmap.addLayer(this.distributionPointLayer.layer)
-    }
+
+        // 设施图层：只显示图标（冷链冷库 / 加工厂等），不带边框和文字
+        this.facilityPointLayer = new KMap.VectorLayer("facilityPointLayer", 100, {
+            source: new VectorSource({}),
+            style: function (f) {
+                const imgName = f.get("imgName") || "";
+                return new Style({
+                    image: new Icon({
+                        src: imgName,
+                        scale: 0.9,
+                    }),
+                });
+            },
+        });
+        this.kmap.addLayer(this.facilityPointLayer.layer)
+  }
 
   /**
    * 清空当前图层上的所有数据
@@ -123,11 +138,14 @@ class DistributionLayer {
     if (this.distributionPointLayer && this.distributionPointLayer.source) {
       this.distributionPointLayer.source.clear();
     }
+    if (this.facilityPointLayer && this.facilityPointLayer.source) {
+      this.facilityPointLayer.source.clear();
+    }
   }
 
-    initData(data) {
+  initData(data) {
     let that = this;
-    // 每次加载前先清空旧数据
+    // 每次加载前先清空旧数据（多用于“作物分布”）
     this.clear();
         for (let item of data) {
             if (item.geom) {
@@ -165,7 +183,38 @@ class DistributionLayer {
                 duration: 500,
             });
         }
+  }
+
+  /**
+   * 设施数据加载（冷链冷库 / 加工厂）
+   * 只操作 facilityPointLayer，不影响作物分布图层
+   */
+  initFacilityData(list = []) {
+    if (!this.facilityPointLayer || !this.facilityPointLayer.source) return;
+    this.facilityPointLayer.source.clear();
+
+    const extentSource = new VectorSource({});
+
+    for (let item of list) {
+      if (!item.wktArr) continue;
+      for (let wkt of item.wktArr) {
+        const f = new Feature({
+          geometry: new WKT().readGeometry(wkt),
+        });
+        f.set("imgName", item.imgName);
+        this.facilityPointLayer.source.addFeature(f);
+        extentSource.addFeature(f);
+      }
     }
+
+    const extent = extentSource.getExtent();
+    if (extent && !isNaN(extent[0])) {
+      this.kmap.map.getView().fit(extent, {
+        padding: [280, 400, 200, 150],
+        duration: 500,
+      });
+    }
+  }
 }