fix:修改地图不出来bug

src/views/home/index.vue

@@ -89,7 +89,7 @@ import PicturePreview from "@/components/PicturePreview.vue";
 import fnHeader from "@/components/fnHeader.vue";
 import navigation from "@/components/navigation.vue";
 import chartBox from "@/components/chartBox.vue";
-import StaticMapLayers from "@/components/static_map_change/Layers.js"
+// import StaticMapLayers from "@/components/static_map_change/Layers.js"
 import toolList from "@/components/toolList.vue";
 import fileBar from "@/components/fileBar.vue";
 import HomeMap from "./map/homeMap";
@@ -135,7 +135,7 @@ onMounted(() => {
   // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
   samplePointLayer = new SamplePointLayer(homeMap.kmap.map,homeMap.kmap)
   blueRegionLayer = new BlueRegionLayer(homeMap.kmap)
-  staticMapLayers = new StaticMapLayers(homeMap.kmap);
+  // staticMapLayers = new StaticMapLayers(homeMap.kmap);
 
   getYellow()
   // getFarmLog()
@@ -174,7 +174,6 @@ const getSteps = (type) =>{
       return 
     }
     if(type=='all'){
-        
         getBlueRegionList(()=>{},res.data.blue_step)
         samplePointLayer.initData(organId.value,regionId.value)
       return
@@ -190,7 +189,7 @@ const dialogVisible = ref(false)
 
 const curName = ref('异常总览')
 function handleTabFeiXun(name){
-  staticMapLayers.hideAll()
+  homeMap.hideAll()
   curName.value = name
   if(name==='查看飞巡结果'){
     editStep(1,2,'area')
@@ -209,7 +208,7 @@ const handleSetps = () =>{
   dialogVisible.value = true
   setTimeout(()=>{
     dialogVisible.value = false
-    staticMapLayers.hideAll()
+    homeMap.hideAll()
     editStep(1,1,'all')
   },1000)
 }
@@ -307,9 +306,9 @@ const handleTabItem = (name) =>{
       text = '井岗推测物候期'
   }
   if(text!==''){
-    staticMapLayers.showSingle(text,true)
+    homeMap.showSingle(text,true)
   }else{
-    staticMapLayers.hideAll()
+    homeMap.hideAll()
   }
   // if(reportData.value.blueZoneList){
   //   const index = reportData.value.blueZoneList.findIndex(item => item.key===e)

src/views/home/map/homeMap.js

@@ -8,21 +8,148 @@ import WKT from "ol/format/WKT.js";
 import ScaleLine from "ol/control/ScaleLine";
 import { useRouter } from "vue-router";
 import eventBus from "@/api/eventBus";
+import {VectorStyle} from "@/utils/ol-map/KMap";
+import XYZLayer from "@/utils/ol-map/XYZLayer";
+import GeoJsonLayer from "@/utils/ol-map/GeoJsonLayer";
+import StaticImgLayer from "@/utils/ol-map/StaticImgLayer";
 /**
  * @description 地图层对象
  */
+
+ function getColorByVal(val, legendData) {
+    for (let i = 0; i < legendData.level.length; i++) {
+        let [min, max] = legendData.level[i];
+        if (val >= min && val <= max) {
+            return legendData.colors[i];
+        }
+    }
+    return undefined; // 如果 val 不在任何区间内，返回 undefined
+}
 class HomeMap {
     constructor() {
         let that = this;
         let vectorStyle = new KMap.VectorStyle();
         this.vectorStyle = vectorStyle;
+        this.vectorStyle11 = new VectorStyle()
+        this.layerData = {}
     }
 
     initMap(location, target) {
         let level = 19.2;
         let coordinate = util.wktCastGeom(location).getFirstCoordinate();
         this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
-        eventBus.emit("homeMap:init", this.kmap);
+        this.initStaticMapLayers(this.kmap)
+    }
+
+    initStaticMapLayers(map){
+        let that = this
+        VE_API.warning.fetchWarningLayer({
+            k: "static_map",
+            resultType: "json",
+        }).then(({data}) => {
+            for(let key in data){
+                let item = data[key]
+                if(item.type === "xyz"){
+                    that.layerData[key] = {legend:item.legend, layer:that.addXyzLayer(map, item)}
+                }else if(item.type === "geojson"){
+                    that.layerData[key] = {legend:item.legend, legendData:item.legendData, layer:that.addGeoJsonLayer(map, item, key)}
+                }else if(item.type === "img"){
+                    console.log('that.addStaticImgLayer(map, item)',that.addStaticImgLayer(map, item));
+                    this.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
+                    console.log('that.layerData',this.layerData);
+                }
+            }
+            console.log('that.layerData',that.layerData);
+            // 时间轴
+            // eventBus.on("weatherTime:changeTime", ({index}) => {
+            //     this.timeIndex = index
+            //     this.show(this.layerName)
+            // })
+        })
+    }
+
+    show(key,isFit = false){
+        if (isFit) {
+            this.timeIndex = 0
+        }
+        this.layerName = key
+        this.hideAll()
+        let keyText = key+this.timeIndex
+        let layer = this.layerData[keyText].layer
+        // eventBus.emit("alarmList:changeMapLayer", {legendUrl:layer.layer.get("legend"),
+        //     colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
+        layer.show()
+        if(isFit && layer.layer.getExtent){
+            let extent = layer.layer.getExtent();
+            if(extent && extent[0] != Infinity){
+                layer.mapInstance.fit(extent,{padding:[-200,-200,-200,-200]})
+            }
+        }
+    }
+
+    showSingle(key,isFit = false){
+        this.layerName = key
+        this.hideAll()
+        console.log('this.layerData',this.layerData);
+        let layer = this.layerData[key].layer
+        console.log('layer',layer);
+        // eventBus.emit("alarmList:changeMapLayer", {legendUrl:layer.layer.get("legend"),
+        //     colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
+        layer.show()
+        if(isFit && layer.layer.getExtent){
+            let extent = layer.layer.getExtent();
+            if(extent && extent[0] != Infinity){
+                layer.mapInstance.fit(extent,{padding:[0,0,0,0]})
+            }
+        }
+    }
+
+
+    hideAll(){
+        for(let key in this.layerData){
+            let layer = this.layerData[key].layer
+            layer.hide()
+        }
+    }
+
+    addStaticImgLayer(map, item){
+        item["opacity"] = 0.5
+        let imgLayer = new StaticImgLayer(item.url, item, 3, map);
+        imgLayer.hide()
+        if(item.legendData){
+            imgLayer.layer.set("colors", item.legendData.colors)
+            imgLayer.layer.set("labels", item.legendData.label)
+        }
+        imgLayer.layer.set("legend", item.legend)
+        return imgLayer
+    }
+
+    addXyzLayer(map, item){
+        let xyz = new XYZLayer(item.url, item, 3, map);
+        xyz.hide()
+        return xyz
+    }
+
+    addGeoJsonLayer(map, item, key){
+        let that = this
+        item["style"] = function(feature){
+            let val = feature.get(item.legendData.paramKey)
+            let cacheKey = `${key}_${item.legendData.paramKey}_${val}`
+            let style = that.cacheStyle[cacheKey]
+            if(!style){
+                let color = getColorByVal(val, item.legendData)
+                let fillColor = color
+                let strokeColor = color
+                style = that.vectorStyle11.getPolygonStyle(fillColor, strokeColor, 1)
+                that.cacheStyle[cacheKey] = style
+            }
+            return style
+        }
+        let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
+        geoJsonLayer.layer.set("colors", item.legendData.colors)
+        geoJsonLayer.layer.set("labels", item.legendData.label)
+        geoJsonLayer.hide()
+        return geoJsonLayer
     }
 }