页面调整

src/components/static_map_change/Layers.js

@@ -19,9 +19,15 @@ import StaticImgLayer from "../../utils/ol-map/StaticImgLayer";
 
 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];
+        if(legendData.level[i] instanceof Array){
+            let [min, max] = legendData.level[i];
+            if (val >= min && val <= max) {
+                return legendData.colors[i];
+            }
+        }else{
+            if(val === legendData.level[i]){
+                return legendData.colors[i];
+            }
         }
     }
     return undefined; // 如果 val 不在任何区间内，返回 undefined
@@ -31,37 +37,45 @@ function getColorByVal(val, legendData) {
  * @description 全景化地图层对象
  */
 class StaticMapLayers {
-    constructor(map){
-        this.initStaticMapLayers(map)
+    constructor(map, data){
         this.vectorStyle = new VectorStyle()
         this.layerData = {}
         this.cacheStyle = {}
         this.timeIndex = 0
         this.layerName = ""
+        this.initStaticMapLayers(map,data)
     }
-    initStaticMapLayers(map){
+    initStaticMapLayers(map,data){
         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"){
-                    that.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
-                }
-            }
-            // that.autoTest()
-            // 时间轴
-            eventBus.on("weatherTime:changeTime", ({index}) => {
-                this.timeIndex = index
-                this.show(this.layerName)
+        if(data){
+            that.initStaticMapLayer(map,data)
+        }else{
+            VE_API.warning.fetchWarningLayer({
+                k: "static_map",
+                resultType: "json",
+            }).then(({data}) => {
+                that.initStaticMapLayer(map,data)
+                // that.autoTest()
+                // 时间轴
+                eventBus.on("weatherTime:changeTime", ({index}) => {
+                    this.timeIndex = index
+                    this.show(this.layerName)
+                })
             })
-        })
+        }
+    }
+
+    initStaticMapLayer(map,data){
+        for(let key in data){
+            let item = data[key]
+            if(item.type === "xyz"){
+                this.layerData[key] = {legend:item.legend, layer:this.addXyzLayer(map, item)}
+            }else if(item.type === "geojson"){
+                this.layerData[key] = {legend:item.legend, legendData:item.legendData, layer:this.addGeoJsonLayer(map, item, key)}
+            }else if(item.type === "img"){
+                this.layerData[key] = {legend:item.legend, layer:this.addStaticImgLayer(map, item)}
+            }
+        }
     }
 
     show(key,isFit = false){
@@ -83,9 +97,13 @@ class StaticMapLayers {
         }
     }
 
-    showSingle(key,isFit = false){
+    showSingle(key,isFit = false,hideOther = true){
+        console.log('layerData', key, this.layerData,);
+        if(!this.layerData[key]){
+            return;
+        }
         this.layerName = key
-        this.hideAll()
+        hideOther && this.hideAll()
         let layer = this.layerData[key].layer
         eventBus.emit("alarmList:changeMapLayer", {legendUrl:layer.layer.get("legend"),
             colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
@@ -93,22 +111,33 @@ class StaticMapLayers {
         if(isFit && layer.layer.getExtent){
             let extent = layer.layer.getExtent();
             if(extent && extent[0] != Infinity){
-                layer.mapInstance.fit(extent,{padding:[-200,-200,-200,-200]})
+                layer.mapInstance.fit(extent,{padding:layer.layer.get("padding") || [200,400,200,200]})
             }
         }
     }
 
-
+    hideByKey(key){
+        let layer = this.layerData[key].layer
+        layer.hide()
+    }
     hideAll(){
         for(let key in this.layerData){
+            this.hideByKey(key)
+        }
+    }
+    removeLayers(map){
+        for(let key in this.layerData){
             let layer = this.layerData[key].layer
-            layer.hide()
+            map.removeLayer(layer)
         }
+        this.layerData = {}
     }
 
     addStaticImgLayer(map, item){
-        item["opacity"] = 0.5
-        let imgLayer = new StaticImgLayer(item.url, item, 3, map);
+        if(!item["opacity"]){
+            item["opacity"] = 0.5
+        }
+        let imgLayer = new StaticImgLayer(item.url, item, 5, map);
         imgLayer.hide()
         if(item.legendData){
             imgLayer.layer.set("colors", item.legendData.colors)
@@ -134,7 +163,7 @@ class StaticMapLayers {
                 let color = getColorByVal(val, item.legendData)
                 let fillColor = color
                 let strokeColor = color
-                style = that.vectorStyle.getPolygonStyle(fillColor, strokeColor, 1)
+                style = that.vectorStyle.getPolygonStyle(fillColor, "#000000", 1)
                 that.cacheStyle[cacheKey] = style
             }
             return style

src/components/static_map_change/legend.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="legend-container">
+  <div class="legend-container2" v-if="legendImg">
+    <img :src="legendImg" class="legend-img" alt="legend" />
+  </div>
+  <div v-else class="legend-container">
     <div class="legend-big">
       <div class="color-bar-big" v-if="background" :style="{ background: background }"></div>
     </div>
@@ -56,10 +59,19 @@ eventBus.on("alarmList:changeMapLayer", updateColors)
 </script>
 
 <style lang="scss" scoped>
+.legend-container2 {
+  width: 100%;
+  opacity: 0.6;
+  .legend-img{
+    width: 100%;
+    height: 50%;
+  }
+}
 .legend-container {
   display: flex;
   flex-direction: column;
-  align-items: center;background: #fff;
+  align-items: center;
+  background: #fff;
   padding: 10px 10px 30px 10px;
   opacity: 0.6;
 }

src/plugins/axios.js

@@ -198,7 +198,7 @@ const install = (app, { router, store, opt }) => {
         let obj = files(key);
         Object.keys(obj).forEach((item) => {
             api[fileName][item] = (p, config = {}) => {
-                if(VE_ENV.MOCK === "True" && obj[item].mockFun && obj[item].mockCondition(p)){
+                if(VE_ENV.MOCK === "True" && obj[item].mockCondition && obj[item].mockCondition(p)){
                     return obj[item].mockFun(p);
                 }
                 return method[obj[item].type](pathVariable(obj[item].url, p ), p, config);

src/utils/ol-map/GeoJsonLayer.js

@@ -30,12 +30,19 @@ class GeoJsonLayer extends LTBaseObject{
 	 initGeoJsonLayer(url,options,zIndex){
 		var minZoom = Common.BaseLayerZoom[0];
 		var maxZoom = Common.BaseLayerZoom[1];
+		let opacity = 1;
+		if(options && options.opacity != undefined){
+			opacity = options.opacity
+		}
 		if(options && options.minZoom != undefined){
 			minZoom = options.minZoom
 		}
 		if(options && options.maxZoom != undefined){
 			maxZoom = options.maxZoom
 		}
+		if(options && options.zIndex != undefined){
+			zIndex = options.zIndex
+		}
 		const vm = this
 		vm.source = new VectorSource({
 			url, // 替换为你的GeoJSON文件URL
@@ -46,6 +53,7 @@ class GeoJsonLayer extends LTBaseObject{
 			source:vm.source,
 			maxZoom:maxZoom,
 			minZoom:minZoom,
+			opacity:opacity,
 			zIndex:zIndex,
 			style:options.style,
 			extent:options.extent || [Infinity, -Infinity, -Infinity, Infinity]

src/utils/ol-map/StaticImgLayer.js

@@ -39,6 +39,9 @@ class StaticImgLayer extends LTBaseObject{
 		if(options && options.maxZoom != undefined){
 			maxZoom = options.maxZoom
 		}
+		if(options && options.zIndex != undefined){
+			zIndex = options.zIndex
+		}
 		const vm = this
 		vm.source = new Static({
 			url, // 替换为你的GeoJSON文件URL
@@ -55,6 +58,10 @@ class StaticImgLayer extends LTBaseObject{
 			extent:options.extent || [Infinity, -Infinity, -Infinity, Infinity]
 		})
 
+		if(options && options.padding != undefined){
+			vm.layer.set('padding',options.padding)
+		}
+
 		vm.map.addLayer(vm.layer)
 	}
 	setProperty(properties){

src/utils/ol-map/XYZLayer.js

@@ -33,6 +33,9 @@ class XYZLayer extends LTBaseObject{
 		if(options && options.maxZoom != undefined){
 			maxZoom = options.maxZoom
 		}
+		if(options && options.zIndex != undefined){
+			zIndex = options.zIndex
+		}
 		const vm = this
 		vm.source = new XYZ({
 			crossOrigin:'anonymous',
@@ -43,8 +46,12 @@ class XYZLayer extends LTBaseObject{
 			source:vm.source,
 			maxZoom:maxZoom,
 			minZoom:minZoom,
-			zIndex:zIndex
+			zIndex:zIndex,
+			extent:options.extent || [Infinity, -Infinity, -Infinity, Infinity]
 		})
+		if(options && options.padding != undefined){
+			vm.layer.set('padding',options.padding)
+		}
 
 		vm.map.addLayer(vm.layer)
 	}