fix: 水利图层

src/api/modules/layer.js

@@ -0,0 +1,12 @@
+import config from "../config"
+
+export default {
+    waterList: {
+        url: config.base_url + "land_lake/list",
+        type: "get",
+    },
+    riverList: {
+        url: config.base_url + "land_river/list",
+        type: "get",
+    },
+}

src/views/warningHome/index.vue

@@ -37,6 +37,7 @@ import trackDialog from "./components/trackDialog.vue";
 import AlarmLayer from "./map/alarmLayer";
 import DistributionLayer from "./map/distributionLayer";
 import BoundaryLayer from "./map/boundaryLayer";
+import WaterLayer from "./map/waterLayer";
 import eventBus from "@/api/eventBus";
 import { useStore } from "vuex";
 import { useRouter, useRoute } from "vue-router";
@@ -50,6 +51,7 @@ let staticMapLayers = null;
 let distributionLayer = null;
 let staticMapPointLayers = null;
 let boundaryLayer = null;
+let waterLayer = null;
 const mapRef = ref(null);
 const treeRef = ref(null);
 
@@ -76,10 +78,14 @@ const handleBaseTabClick = (tab) => {
     activeBaseTab.value = tab;
     showPoint.value = false
     staticMapPointLayers.hidePoint()
+    // 水利图层隐藏
+    waterLayer.toggleLayer(false)
     if (tab === "资源") {
         staticMapPointLayers.showPoint()
     }else if (tab === "灌渠与泵站") {
         showPoint.value = true
+    } else if (tab === "水利") {
+        waterLayer.toggleLayer(true)
     }
 };
 
@@ -110,8 +116,11 @@ onMounted(async () => {
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
     boundaryLayer = new BoundaryLayer(warningMap.kmap);
+    waterLayer = new WaterLayer(warningMap.kmap);
     await getSpeciesListData();
 
+    getWaterData();
+
     getDistributionData();
 
     // 数据加载完成后，再次更新地图尺寸以确保正确渲染
@@ -213,6 +222,14 @@ const getVillageBoundary = async () => {
     }
 };
 
+const getWaterData = async () => {
+    const { data } = await VE_API.layer.waterList();
+    waterLayer.initData(data);
+
+    const { data: riverData } = await VE_API.layer.riverList();
+    waterLayer.initRiver(riverData);
+};
+
 // 时间轴
 eventBus.on("weatherTime:changeTime", ({ index, year, quarter }) => {
     handleTimeChange(index, year, quarter);

src/views/warningHome/map/waterLayer.js

@@ -0,0 +1,74 @@
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import { newAreaFeature } from "@/utils/util";
+
+/**
+ * @description 地图层对象
+ */
+class WaterLayer {
+    constructor(map) {
+        let that = this;
+        this.vectorStyle = new KMap.VectorStyle();
+
+        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)
+                return [style]
+            }
+        });
+
+        this.riverLayer = new KMap.VectorLayer("riverLayer", 99, {
+            style: (f) => {
+                return that.vectorStyle.getPolygonStyle("#00000010", "#42b884cc", 3)
+            }
+        });
+
+        map.addLayer(this.waterLayer.layer);
+        map.addLayer(this.riverLayer.layer);
+        this.toggleLayer(false)
+        this.kmap = map
+    }
+
+    initData(arr) {
+        if (this.waterLayer) {
+            this.waterLayer.source.clear();
+        }
+        if (arr.length > 0) {
+            for (let item of arr) {
+                let feature = newAreaFeature(item);
+                this.waterLayer.addFeature(feature);
+            }
+        }
+        // this.fitView();
+    }
+
+    initRiver(arr) {
+        if (this.riverLayer) {
+            this.riverLayer.source.clear();
+        }
+        if (arr.length > 0) {
+            for (let item of arr) {
+                let feature = newAreaFeature(item);
+                this.riverLayer.addFeature(feature);
+            }
+        }
+    }
+
+    fitView() {
+        const source = this.waterLayer.layer.getSource();
+        if (!source || source.getFeatures().length === 0) {
+            return;
+        }
+        let extent = source.getExtent();
+        // 地图自适应到区域可视范围
+        this.kmap.getView().fit(extent, { duration: 500, padding: [120, 100, 80, 100] });
+    }
+
+    toggleLayer(val) {
+        this.waterLayer.layer.setVisible(val)
+        this.riverLayer.layer.setVisible(val)
+    }
+}
+
+export default WaterLayer;