lxf 3 hete
szülő
commit
5832d19ed2

+ 5 - 0
src/api/modules/warning.js

@@ -99,5 +99,10 @@ export default {
         url: config.one_map_url + "agri_chart_stat/stat_phenology_area_ratio_for_grain",
         type: "get",
     },
+    //获取村界
+    fetchVillageBoundary: {
+        url: config.one_map_url + "village/list",
+        type: "get",
+    },
 }
 

+ 15 - 0
src/views/warningHome/index.vue

@@ -76,6 +76,7 @@ import landUseLegend from "./components/landUseLegend.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
 import DistributionLayer from "./map/distributionLayer";
+import BoundaryLayer from "./map/boundaryLayer";
 import trackDialog from "./components/trackDialog.vue";
 import eventBus from "@/api/eventBus";
 import { useStore } from "vuex";
@@ -89,6 +90,7 @@ let alarmLayer = null;
 let staticMapLayers = null;
 let staticMapPointLayers = null;
 let distributionLayer = null;
+let boundaryLayer = null;
 const areaVal = ref([]);
 const mapRef = ref(null);
 const treeRef = ref(null);
@@ -127,6 +129,7 @@ onMounted(async () => {
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
+    boundaryLayer = new BoundaryLayer(warningMap.kmap);
     await getSpeciesListData();
 
     getDistributionData();
@@ -138,6 +141,9 @@ onMounted(async () => {
         }, 100);
     }
 
+    // 胜华村的村界
+    getVillageBoundary()
+
     eventBus.emit("warningMap:init", warningMap.kmap);
 
     // 图例数据
@@ -196,6 +202,15 @@ onMounted(async () => {
     });
 });
 
+const getVillageBoundary = async () => {
+    const res = await VE_API.warning.fetchVillageBoundary();
+    if (res.code === 0 && res.data) {
+        const villageBoundary = res.data;
+        console.log(villageBoundary);
+        boundaryLayer.initData(villageBoundary);
+    }
+};
+
 const handleClick = () => {
     if (window.parent) {
         window.parent.postMessage(

+ 49 - 0
src/views/warningHome/map/boundaryLayer.js

@@ -0,0 +1,49 @@
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import { newAreaFeature } from "@/utils/util";
+
+/**
+ * @description 地图层对象
+ */
+class BoundaryLayer {
+    constructor(map) {
+        let that = this;
+        this.vectorStyle = new KMap.VectorStyle();
+
+        // this.boundaryLayer = new KMap.VectorLayer("boundaryLayer", 99, {
+        //     minZoom: 15,
+        // });
+
+        this.boundaryLayer = new KMap.VectorLayer("areaLayer", 999, {
+            style: (f) => {
+                const style = that.vectorStyle.getPolygonStyle("#00000010", "#ffffffcc", 3)
+                const style2 = that.vectorStyle.getPointTextStyle(f.get('name'), "#000000", "#ffffff", 0, 22)
+                return [style, style2]
+            }
+        });
+
+        map.addLayer(this.boundaryLayer.layer);
+        this.kmap = map
+    }
+
+    initData(arr,opacity='') {
+        if (this.boundaryLayer) {
+            this.boundaryLayer.source.clear();
+        }
+        if(arr.length>0){
+            for (let item of arr) {
+                let feature = newAreaFeature(item);
+                this.boundaryLayer.addFeature(feature);
+            }
+            // setTimeout(()=>{
+            //     this.kmap.fit(this.boundaryLayer.source.getExtent(), {padding:[100,100,100,100]});
+            // })
+        }
+    }
+
+    toggleLayer(val) {
+        this.boundaryLayer.layer.setVisible(val)
+    }
+}
+
+export default BoundaryLayer;