切换底图组件

src/components/static_map_change/Layers.js

@@ -59,7 +59,7 @@ class StaticMapLayers {
     show(key){
         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()
     }
     hideAll(){
@@ -97,6 +97,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
     }

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

@@ -105,6 +105,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();
@@ -119,7 +121,10 @@ const warningLayers = ref({})
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
     alarmLayer = new AlarmLayer(warningMap.kmap);
-    new StaticMapLayers(warningMap.kmap);
+    // let staticMapLayers = new StaticMapLayers(warningMap.kmap);
+    // setTimeout(() => {
+    //   staticMapLayers.show("testpng")
+    // },2000)
 
     // 图例数据
     eventBus.on("alarmList:warningLayers", (data) => {