Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-pc-vue

src/components/static_map_change/Layers.js

@@ -56,11 +56,13 @@ class StaticMapLayers {
             // that.autoTest()
         })
     }
-    show(key){
+    show(key,isFit = false){
         this.hideAll()
         let layer = this.layerData[key].layer
-        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[key].legend});
+        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[key].legend, colors:layer.layer.get("colors")});
         layer.show()
+        if(isFit && layer.source.getExtent && layer.source.getExtent())
+            layer.mapInstance.fit(layer.source.getExtent(),{padding:[100,100,100,100]})
     }
     hideAll(){
         for(let key in this.layerData){
@@ -97,6 +99,7 @@ class StaticMapLayers {
             return style
         }
         let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
+        geoJsonLayer.layer.set("colors", item.legendData.colors)
         geoJsonLayer.hide()
         return geoJsonLayer
     }
@@ -111,9 +114,9 @@ class StaticMapLayers {
         }
         let index = 0
         setInterval(() => {
-            that.show(keys[index])
+            that.show(keys[index],true)
             index = (index + 1) % keys.length
-        }, 1000);
+        }, 2000);
     }
 }
 

src/components/static_map_change/legend.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <img v-if="legendImg" :src="legendImg" />
+    <template v-else >
+      <div class="color-bar" v-if="background"  :style="{ background: background }"></div>
+      <div class="labels">
+        <div
+            class="level"
+            v-for="(level, index) in levels"
+            :key="index"
+            :style="{ left: `${(index / (levels.length - 1)) * 100}%` }"
+        >
+          {{ level }}
+        </div>
+      </div>
+    </template>
+  </div>
+
+</template>
+
+<script setup>
+import eventBus from "@/api/eventBus";
+import {ref} from "vue";
+let colorsRef = ref([]);
+let levels = ref([]);
+let background = ref("");
+let legendImg = ref(null);
+function gradientListener() {
+  const colorStops = colorsRef.value.map((color, index) => {
+    const percentage = (index / (colorsRef.value.length - 1)) * 100;
+    return `${color} ${percentage}%`;
+  });
+  background.value = `linear-gradient(to right, ${colorStops.join(", ")})`;
+  console.log(background.value)
+
+}
+
+function updateColors({colors,name, legendUrl}) {
+  if(legendUrl){
+    legendImg.value = legendUrl
+    return
+  }
+  legendImg.value = null
+  if(colors === undefined || colors.length === 0) return;
+  colorsRef.value = colors;
+  levels.value = colors.map((color, index) => {
+    return index + 1;
+  });
+  gradientListener()
+}
+
+eventBus.off("alarmList:changeMapLayer", updateColors)
+eventBus.on("alarmList:changeMapLayer", updateColors)
+</script>
+
+<style lang="scss" scoped>
+
+.map-legend {
+  position: absolute;
+  bottom: -33px;
+  left: -455px;
+  width: 340px;
+  img {
+    width: 340px;
+    opacity: 0.6;
+  }
+}
+
+
+.color-bar {
+  width: 100%;
+  height: 30px;
+  border: 1px solid #000;
+}
+
+.labels {
+  position: relative;
+  margin-top: 5px;
+}
+
+.level {
+  position: absolute;
+  transform: translateX(-50%);
+  text-align: center;
+}
+</style>

src/views/warningHome/index.vue

@@ -107,6 +107,8 @@ import { useRouter } from "vue-router";
 import eventBus from "@/api/eventBus";
 import { areaListOptions } from "./area";
 import { useStore } from "vuex";
+import Legend from "../../components/static_map_change/legend";
+
 let store = useStore();
 
 let warningMap = new WarningMap();
@@ -123,6 +125,9 @@ onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
+    // setTimeout(() => {
+    //   staticMapLayers.show("testpng")
+    // },2000)
 
     // 图例数据
     eventBus.on("alarmList:warningLayers", (data) => {
@@ -147,6 +152,7 @@ const handleMapLayer = (name) => {
     hideChatMapLayer.value = false
     console.log('name', name);
     // staticMapLayers.show("干旱缺水")
+    staticMapLayers.show("testpng")
 }
 
 const toggleChatMapLayer = () => {