切换底图组件

src/components/static_map_change/Layers.js

@@ -0,0 +1,73 @@
+import Style from "ol/style/Style";
+import {deepClone} from '@/common/commonFun'
+import {Cluster, Vector as VectorSource} from 'ol/source.js';
+import { Vector as VectorLayer} from 'ol/layer.js';
+import {boundingExtent} from 'ol/extent.js';
+import {
+    Circle as CircleStyle,
+    Fill,
+    Text,
+} from 'ol/style.js';
+import {unByKey} from 'ol/Observable';
+import ImageLayer from 'ol/layer/Image';
+import ImageStatic from 'ol/source/ImageStatic';
+import XYZLayer from "../../utils/ol-map/XYZLayer";
+import eventBus from "@/api/eventBus";
+
+/**
+ * @description 全景化地图层对象
+ */
+class StaticMapLayers {
+    constructor(map){
+        this.initStaticMapLayers(map)
+        this.layerData = {}
+    }
+    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)}
+                }
+            }
+            that.autoTest()
+        })
+    }
+    show(key){
+        this.hideAll()
+        let layer = this.layerData[key].layer
+        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[key].legend});
+        layer.show()
+    }
+    hideAll(){
+        for(let key in this.layerData){
+            let layer = this.layerData[key].layer
+            layer.hide()
+        }
+    }
+
+    addXyzLayer(map, item){
+        let xyz = new XYZLayer(item.url, item, 3, map);
+        xyz.hide()
+        return xyz
+    }
+
+    autoTest(){
+        let that = this
+        let keys = []
+        for(let key in that.layerData){
+            keys.push(key)
+        }
+        let index = 0
+        setInterval(() => {
+            that.show(keys[index])
+            index = (index + 1) % keys.length
+        }, 1000);
+    }
+}
+
+export default StaticMapLayers

src/views/warningHome/index.vue

@@ -97,6 +97,7 @@
 
 <script setup>
 import "./map/mockFarmLayer";
+import StaticMapLayers from "@/components/static_map_change/Layers.js"
 import { onMounted, ref } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
@@ -122,14 +123,19 @@ const warningLayers = ref({})
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
     alarmLayer = new AlarmLayer(warningMap.kmap);
+    new StaticMapLayers(warningMap.kmap);
 
     // 图例数据
     eventBus.on("alarmList:warningLayers", (data) => {
         warningLayers.value = data
     });
 
-    eventBus.on("alarmList:changeMapLayer", ({name}) => {
+    eventBus.on("alarmList:changeMapLayer", ({name, legendUrl}) => {
+      if(legendUrl){
+        legendImg.value = legendUrl;
+      }else{
         legendImg.value = warningLayers.value[`${name}图例`];
+      }
     });
 });