增加loading过渡

src/views/cesiumComponents/windMap2D.vue

@@ -1,4 +1,7 @@
 <template>
+    <div id="loading" class="dataLoading" v-if="loading">
+        <span class="loadText">数据加载中...</span>
+    </div>
   <div class="mapBox">
     <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
     <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'" v-if="0">
@@ -124,6 +127,7 @@ export default {
   },
   data() {
     return {
+        loading: true,
       viewer: null,
       windLayer: null, // 风场图
       windLayerTimmer: null, // 风场图计时器
@@ -156,6 +160,9 @@ export default {
   },
   mounted() {
     this.initCesium();
+    setTimeout(() =>{
+        this.loading = false
+    }, 1000)
   },
   methods: {
     async initCesium() {
@@ -1280,6 +1287,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.dataLoading {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    position: fixed;
+    .loadText{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(255, 255, 255, 0.7);
+        padding: 15px 20px;
+        border-radius: 6px;
+        color: black;
+        font-size: 14px;
+        font-weight: bold;
+    }
+  }
 .mapBox {
   width: 100%;
   height: 100%;

src/views/cesiumComponents/windMap3D.vue

@@ -1,4 +1,7 @@
 <template>
+    <div id="loading" class="dataLoading" v-if="loading">
+        <span class="loadText">数据加载中...</span>
+    </div>
   <div class="mapBox">
     <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
     <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'" v-if="0">
@@ -124,6 +127,7 @@ export default {
   },
   data() {
     return {
+        loading: true,
       viewer: null,
       windLayer: null, // 风场图
       windLayerTimmer: null, // 风场图计时器
@@ -156,6 +160,9 @@ export default {
   },
   mounted() {
     this.initCesium();
+    setTimeout(() =>{
+        this.loading = false
+    }, 1000)
   },
   methods: {
     async initCesium() {
@@ -1154,6 +1161,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.dataLoading {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    position: fixed;
+    .loadText{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(255, 255, 255, 0.7);
+        padding: 15px 20px;
+        border-radius: 6px;
+        color: black;
+        font-size: 14px;
+        font-weight: bold;
+    }
+  }
 .mapBox {
   width: 100%;
   height: 100%;