fix: 根据图例显示颜色

src/views/warningHome/index.vue

@@ -78,7 +78,7 @@ const legendKeys = {
     "物候期分布": "phenology",
     "长势等级": "growth_status",
     "水利": "water_conservancy",
-    "资源": "facility",
+    "灌渠与泵站": "facility",
 }
 
 const warningLayers = ref({});
@@ -125,11 +125,18 @@ const getLegendData = async (code) => {
     // 接口返回的是带有 content 字段的对象，content 为 JSON 字符串，这里需要先解析
     try {
         const list = data && data.content ? JSON.parse(data.content) : [];
-        console.log('list', list);
-        legendRef.value && legendRef.value.updateData(Array.isArray(list) ? list : []);
+        const finalList = Array.isArray(list) ? list : [];
+        legendRef.value && legendRef.value.updateData(finalList);
+        // 如果是水利图例，则同步到水利图层，控制水域 / 河流 / 水渠的颜色
+        if (code === "water_conservancy" && waterLayer) {
+            waterLayer.setLegend(finalList);
+        }
     } catch (e) {
         console.error("解析图例 content 失败：", e, data);
         legendRef.value && legendRef.value.updateData([]);
+        if (code === "water_conservancy" && waterLayer) {
+            waterLayer.setLegend([]);
+        }
     }
 };
 

src/views/warningHome/map/waterLayer.js

@@ -11,29 +11,32 @@ class WaterLayer {
         this.vectorStyle = new KMap.VectorStyle();
         // 河流动画相位
         this.riverAnimationPhase = 0;
+        // 图例配置（用于控制不同水利图层颜色）
+        this.legend = [];
 
         this.waterLayer = new KMap.VectorLayer("waterLayer", 99, {
             style: (f) => {
-                const style = that.vectorStyle.getPolygonStyle("#00000010", "#ffffffcc", 3)
-                // const style2 = that.vectorStyle.getPointTextStyle(f.get('name'), "#000000", "#ffffff", 0, 22)
+                const strokeColor = that.getLayerColor("water");
+                const style = that.vectorStyle.getPolygonStyle("#00000010", strokeColor, 3);
                 return [style]
             }
         });
 
         this.riverLayer = new KMap.VectorLayer("riverLayer", 99, {
             style: (f) => {
-                // 简单“呼吸”动画效果：通过 stroke 透明度和宽度轻微变化
+                // 简单“呼吸”动画效果：通过线宽轻微变化
                 const phase = that.riverAnimationPhase || 0;
-                const alpha = 0.4 + 0.3 * Math.sin(phase);
                 const strokeWidth = 2 + 1.5 * (0.5 + 0.5 * Math.sin(phase));
-                const strokeColor = `rgba(66, 184, 132, ${alpha.toFixed(2)})`;
+                const strokeColor = that.getLayerColor("river");
                 return that.vectorStyle.getPolygonStyle("rgba(0,0,0,0)", strokeColor, strokeWidth);
             }
         });
 
         this.canalLayer = new KMap.VectorLayer("canalLayer", 99, {
             style: (f) => {
-                return that.vectorStyle.getPolygonStyle("#00000010", "#42b884cc", 3)
+                const strokeColor = that.getLayerColor("canal");
+                console.log('strokeColor', strokeColor);
+                return that.vectorStyle.getPolygonStyle("#00000010", strokeColor, 3)
             }
         });
 
@@ -52,6 +55,26 @@ class WaterLayer {
         }, 80);
     }
 
+    // 根据当前图例配置获取不同图层的颜色
+    getLayerColor(type) {
+        const list = this.legend || [];
+        // 约定：水域 / 河流 / 水渠 分别对应图例数组的第 1、2、3 项
+        if (type === "water") {
+            return (list[0] && list[0].color) || "#ffffffcc";
+        }
+        if (type === "river") {
+            return (list[1] && list[1].color) || "#42b884cc";
+        }
+        if (type === "canal") {
+            // 如果有灌渠与泵站专用颜色，则优先生效
+            if (this.canalColorOverride) {
+                return this.canalColorOverride;
+            }
+            return (list[2] && list[2].color) || "#42b884cc";
+        }
+        return "#42b884cc";
+    }
+
     initData(arr) {
         if (this.waterLayer) {
             this.waterLayer.source.clear();
@@ -88,6 +111,30 @@ class WaterLayer {
         }
     }
 
+    // 设置图例数据，从外部注入颜色配置
+    setLegend(list) {
+        this.legend = Array.isArray(list) ? list : [];
+        // 图例变化后触发三层重绘
+        if (this.waterLayer && this.waterLayer.layer) {
+            this.waterLayer.layer.changed && this.waterLayer.layer.changed();
+        }
+        if (this.riverLayer && this.riverLayer.layer) {
+            this.riverLayer.layer.changed && this.riverLayer.layer.changed();
+        }
+        if (this.canalLayer && this.canalLayer.layer) {
+            this.canalLayer.layer.changed && this.canalLayer.layer.changed();
+        }
+    }
+
+    // 设置“灌渠与泵站”图例颜色（facility 图例），只影响灌渠图层颜色
+    setCanalLegend(list) {
+        const arr = Array.isArray(list) ? list : [];
+        this.canalColorOverride = (arr[0] && arr[0].color) || null;
+        if (this.canalLayer && this.canalLayer.layer) {
+            this.canalLayer.layer.changed && this.canalLayer.layer.changed();
+        }
+    }
+
     fitView() {
         const source = this.waterLayer.layer.getSource();
         if (!source || source.getFeatures().length === 0) {