Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map

src/views/warningHome/index.vue

@@ -53,7 +53,7 @@
             <div class="action-legend">
                 <el-tree
                     class="yes-events"
-                    style="max-width: 250px;"
+                    style="max-width: 250px"
                     :data="treeActionData"
                     show-checkbox
                     node-key="id"
@@ -62,15 +62,15 @@
                     :props="defaultProps"
                     @check="getTreeChecks"
                 >
-                <template #default="{ node, data }">
-                    <div class="custom-tree-node">
-                        <span>{{ node.label }}</span>
-                        <div v-if="node.level === 1" class="level-legend">
-                            <span class="legend-dot" :style="{ backgroundColor: data.color }"></span>
-                            <span class="legend-text" :style="{ color: data.color }">图例</span>
+                    <template #default="{ node, data }">
+                        <div class="custom-tree-node">
+                            <span>{{ node.label }}</span>
+                            <div v-if="node.level === 1" class="level-legend">
+                                <span class="legend-dot" :style="{ backgroundColor: data.color }"></span>
+                                <span class="legend-text" :style="{ color: data.color }">图例</span>
+                            </div>
                         </div>
-                    </div>
-                </template>
+                    </template>
                 </el-tree>
             </div>
             <div v-if="!showDetail" class="warning-r right chart-wrap yes-events">
@@ -180,83 +180,113 @@ 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([
-  {
-    id: 1,
-    label: '果类',
-    color: '#51B2FF',
-    fillColor: 'rgba(5, 49, 84, 0.5)',
-    geom: "MULTIPOLYGON (((113.58668302396221 23.244659822289524, 113.32095411231998 23.24298858095617, 112.99338890476295 23.002328435946534, 113.13878785387456 22.604570799124076, 113.59503930394511 22.86862839611681, 113.58668302396221 23.244659822289524)))",
-    children: [
-      {
-        id: 4,
-        label: '荔枝',
-        color: "#2199F8",
-        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)"],
-      },
-      {
-        id: 55,
-        label: '龙眼',
-        color: "#2199F8",
-        imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E7%B3%96.png",
-        imgName: ly,
-        wktArr: ["POINT(113.29900983080294 22.949956545068478)", "POINT(113.10412186488536 22.800924630297875)", "POINT(113.32384842738536 22.776086033715462)", "POINT(113.22640444442656 22.90983245840535)"],
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: '粮食',
-    color: '#FF8E1C',
-    fillColor: 'rgba(83, 46, 8, 0.5)',
-    geom: "MULTIPOLYGON (((112.42256410334443 23.14863707066071, 112.09584019992684 22.842930537988664, 112.25060416300033 22.62511471413565, 112.80278650958275 22.749307864685775, 112.75119857777094 23.13144100957107, 112.42256410334443 23.14863707066071)))",
-    children: [
-      {
-        id: 5,
-        label: '水稻',
-        color: "#FAA53D",
-        imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E6%8C%82%E7%BB%BF.png",
-        imgName: sd,
-        wktArr: ["POINT(112.70843577567298 22.969169477864167)", "POINT(112.23636397199755 22.85839626464389)", "POINT(112.35889247053002 23.008153324438585)", "POINT(112.47894566011911 22.9017143340381)"],
-        
-      },
-      {
-        id: 6,
-        label: '小麦',
-        color: "#FAA53D",
-        imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E6%97%A0%E6%A0%B8.png",
-        imgName: xm,
-        wktArr: ["POINT(112.36777193304151 22.73892833157863)", "POINT(112.26684873669083 22.71150357559281)", "POINT(112.65408646638161 22.84862740364581)"],
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: '蔬菜',
-    color: '#25BC07',
-    fillColor: 'rgba(0, 69, 4, 0.5)',
-    children: [
-      {
-        id: 7,
-        label: '白菜',
-        color: "#7ABB00",
-        imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E8%8F%9C.png",
-        imgName: bc,
-        wktArr: ["POINT(110.34100329503417 21.516399336978793)", "POINT(113.89499662443995 22.653799122199416)", "POINT(113.9329988323152 22.653600638732314)", "POINT(113.94400024786592 22.614900553599)"],
-      },
-      {
-        id: 8,
-        label: '萝卜',
-        color: "#7ABB00",
-        imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E8%90%9D%E8%8F%9C.png",
-        imgName: lb,
-        wktArr: ["POINT(110.34100329503417 21.516399336978793)", "POINT(113.89499662443995 22.653799122199416)", "POINT(113.9329988323152 22.653600638732314)", "POINT(113.94400024786592 22.614900553599)"],
-      },
-    ],
-  },
+    {
+        id: 1,
+        label: "果类",
+        color: "#51B2FF",
+        fillColor: "rgba(5, 49, 84, 0.5)",
+        geom: "MULTIPOLYGON (((113.58668302396221 23.244659822289524, 113.32095411231998 23.24298858095617, 112.99338890476295 23.002328435946534, 113.13878785387456 22.604570799124076, 113.59503930394511 22.86862839611681, 113.58668302396221 23.244659822289524)))",
+        children: [
+            {
+                id: 4,
+                label: "荔枝",
+                color: "#2199F8",
+                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)",
+                ],
+            },
+            {
+                id: 55,
+                label: "龙眼",
+                color: "#2199F8",
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E7%B3%96.png",
+                imgName: ly,
+                wktArr: [
+                    "POINT(113.29900983080294 22.949956545068478)",
+                    "POINT(113.10412186488536 22.800924630297875)",
+                    "POINT(113.32384842738536 22.776086033715462)",
+                    "POINT(113.22640444442656 22.90983245840535)",
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        label: "粮食",
+        color: "#FF8E1C",
+        fillColor: "rgba(83, 46, 8, 0.5)",
+        geom: "MULTIPOLYGON (((112.42256410334443 23.14863707066071, 112.09584019992684 22.842930537988664, 112.25060416300033 22.62511471413565, 112.80278650958275 22.749307864685775, 112.75119857777094 23.13144100957107, 112.42256410334443 23.14863707066071)))",
+        children: [
+            {
+                id: 5,
+                label: "水稻",
+                color: "#FAA53D",
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E6%8C%82%E7%BB%BF.png",
+                imgName: sd,
+                wktArr: [
+                    "POINT(112.70843577567298 22.969169477864167)",
+                    "POINT(112.23636397199755 22.85839626464389)",
+                    "POINT(112.35889247053002 23.008153324438585)",
+                    "POINT(112.47894566011911 22.9017143340381)",
+                ],
+            },
+            {
+                id: 6,
+                label: "小麦",
+                color: "#FAA53D",
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E6%97%A0%E6%A0%B8.png",
+                imgName: xm,
+                wktArr: [
+                    "POINT(112.36777193304151 22.73892833157863)",
+                    "POINT(112.26684873669083 22.71150357559281)",
+                    "POINT(112.65408646638161 22.84862740364581)",
+                ],
+            },
+        ],
+    },
+    {
+        id: 3,
+        label: "蔬菜",
+        color: "#25BC07",
+        fillColor: "rgba(0, 69, 4, 0.5)",
+        children: [
+            {
+                id: 7,
+                label: "白菜",
+                color: "#7ABB00",
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E7%99%BD%E8%8F%9C.png",
+                imgName: bc,
+                wktArr: [
+                    "POINT(110.34100329503417 21.516399336978793)",
+                    "POINT(113.89499662443995 22.653799122199416)",
+                    "POINT(113.9329988323152 22.653600638732314)",
+                    "POINT(113.94400024786592 22.614900553599)",
+                ],
+            },
+            {
+                id: 8,
+                label: "萝卜",
+                color: "#7ABB00",
+                imgUrl: "https://birdseye-img.sysuimars.com/temp/pz/%E8%90%9D%E8%8F%9C.png",
+                imgName: lb,
+                wktArr: [
+                    "POINT(110.34100329503417 21.516399336978793)",
+                    "POINT(113.89499662443995 22.653799122199416)",
+                    "POINT(113.9329988323152 22.653600638732314)",
+                    "POINT(113.94400024786592 22.614900553599)",
+                ],
+            },
+        ],
+    },
 ]);
 
 // 物候期分布下，“水稻”节点的阶段子节点配置
@@ -296,7 +326,7 @@ onMounted(() => {
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
     // 作物分布默认选中
-    handleDistributionLayer()
+    handleDistributionLayer();
 
     eventBus.emit("warningMap:init", warningMap.kmap);
 
@@ -355,7 +385,7 @@ const handleDistributionLayer = () => {
         const defaultNodes = [firstCategory, ...(firstCategory.children || [])];
         distributionLayer.initData(defaultNodes);
     }
-}
+};
 
 // ai与地图交互
 const hideChatMapLayer = ref(true);
@@ -399,7 +429,7 @@ const handleTabClick = (item) => {
         distributionLayer.clear();
     }
     // 所有操作前，先清空图层和选中项
-    treeActionData.value[1].children[0] = {...treeActionData.value[1].children[0], children: [] };
+    treeActionData.value[1].children[0] = { ...treeActionData.value[1].children[0], children: [] };
     legendImg.value = "";
     staticMapLayers && staticMapLayers.hideAll();
     // 通知预警列表组件清空默认选中项
@@ -407,37 +437,65 @@ const handleTabClick = (item) => {
 
     switch (item) {
         case "作物分布":
-            handleDistributionLayer()
+            handleDistributionLayer();
             break;
         case "物候期分布":
-            treeActionData.value[1].children[0] = {...treeActionData.value[1].children[0], children: phenologyChildren };
+            treeActionData.value[1].children[0] = {
+                ...treeActionData.value[1].children[0],
+                children: phenologyChildren,
+            };
             break;
         case "预警分布":
             // 通知预警列表组件默认选中第一个（因子）项
             eventBus.emit("warningHome:activeFirstAlarmFactor");
             break;
         case "农场分布":
-            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)"],
+                },
+                {
+                    id: 202,
+                    label: "加工厂",
+                    imgName: factoryIcon,
+                    wktArr: ["POINT(113.25 23.02)"],
                 },
-            ]
-            distributionLayer.initData(data, true);
+            ];
+
+            distributionLayer.initData(cropData);
+            distributionLayer.initFacilityData(facilityData);
             break;
         default:
             break;
@@ -508,8 +566,7 @@ const remoteMethod = async (keyword) => {
 
 const getTreeChecks = (node, data) => {
     distributionLayer.initData(data.checkedNodes);
-}
-
+};
 </script>
 
 <style lang="scss" scoped>
@@ -571,16 +628,16 @@ const getTreeChecks = (node, data) => {
                     padding: 10px 0;
                     --el-tree-node-content-height: 34px;
                     --el-tree-node-hover-bg-color: rgba(255, 212, 137, 0.05);
-                    --el-tree-text-color: #FFD489;
-                    --el-tree-expand-icon-color: #FFD489;
+                    --el-tree-text-color: #ffd489;
+                    --el-tree-expand-icon-color: #ffd489;
 
                     .el-checkbox {
                         --el-checkbox-bg-color: transparent;
-                        --el-checkbox-input-border: 1px solid #FFD489;
-                        --el-checkbox-checked-input-border-color: #FFD489;
-                        --el-checkbox-checked-bg-color: #FFD489;
+                        --el-checkbox-input-border: 1px solid #ffd489;
+                        --el-checkbox-checked-input-border-color: #ffd489;
+                        --el-checkbox-checked-bg-color: #ffd489;
                         --el-checkbox-checked-icon-color: #000;
-                        --el-checkbox-input-border-color-hover: #FFD489;
+                        --el-checkbox-input-border-color-hover: #ffd489;
                     }
                 }
                 .el-tree-node__content {

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,
+      });
+    }
+  }
 }