【类 型】：test

【原  因】：测试 地图组件加载之前 先判断有没有拿到 异步加载的地图源地址 拿到了 再渲染地图
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/store/index.js

@@ -26,6 +26,7 @@ const store = new Vuex.Store({
     logList: [], // 操作日志列表
     messageList: [], // 管理员公告列表
     mapStyleList: [], // 地图样式列表
+    mapIsStyleReady: false, // 地图样式是否加载完成 在全局入口判断设置 子页面调用地图组件时直接判断该值
     crosFrequency: null, // 对频macadd
     ADSBList: [] // 存放当前活跃的 ADSB 飞机数据
   },
@@ -154,6 +155,13 @@ const store = new Vuex.Store({
     setMapStyleList (state, list) {
       state.mapStyleList = list
     },
+    /**
+     *  @description: 确认地图源地址 加载完成
+     *  @param {bool} status 是否完成
+    */
+    setMapIsStyleReady (state, status) {
+      state.mapIsStyleReady = status
+    },
     /**
      *  @description: 清除过期的 ADSB 数据
     */
@@ -1201,6 +1209,7 @@ const store = new Vuex.Store({
           }
         })
         commit('setMapStyleList', list)
+        commit('setMapIsStyleReady', true)
       } else {
         commit('setMapStyleList', [])
         Message.error(res.data.msg || '地图样式获取失败')

src/views/layout/components/main/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-100">
-    <map-box ref="mapbox">
+    <map-box ref="mapbox" v-if="$store.state.mapIsStyleReady">
       <!-- <template #content>
         <Statistics :plane="plane" />
       </template> -->
@@ -54,18 +54,15 @@ export default {
     }
   },
   mounted () {
-    if (this.airList.length > 0) {
-      this.makePlanes(this.airList)// 创建飞机图标
-    }
   },
   watch: {
-    /**
-     * @description: 飞机列表更新时候 更新地图
-     */
     airList: {
       handler (val) {
-        this.makePlanes(val)
-      }
+        if (val && val.length > 0) {
+          this.makePlanes(val)
+        }
+      },
+      immediate: true // 页面加载先触发一次
     },
     /**
      * @description: 侧边栏显隐