【类 型】：feat

【原  因】：地图组件 地图源地址选择 改为从数据库获取
【过  程】：
【影  响】：

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

src/components/MapBox.vue

@@ -24,117 +24,7 @@ export default {
       isflow: false, // 飞机经纬度变化时是否跟随飞机
       currentStyleIndex: 0, // 当前选中的地图样式索引
       guidedMarker: null, // 指点飞行地图标记
-      // 地图样式
+      mapStyles: this.$store.state.mapStyleList// 地图样式
-      mapStyles: [
-        // mapbox官方样式 卫星地图
-        {
-          name: '谷歌卫星',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            google: {
-              type: 'raster',
-              tileSize: 256,
-              tiles: ['https://sb.im/google-maps/vt?lyrs=s&x={x}&y={y}&z={z}']
-            }
-          },
-          layers: [{ id: 'GoogleRasterLayer', type: 'raster', source: 'google' }]
-        },
-        {
-          name: '必应卫星',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            bing: {
-              type: 'raster',
-              tileSize: 256,
-              tiles: [
-                'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1'
-              ],
-              attribution: '© Microsoft, Bing Maps'
-            }
-          },
-          layers: [{ id: 'BingRasterLayer', type: 'raster', source: 'bing' }]
-        },
-        {
-          name: 'Mapbox Streets',
-          sprite: 'mapbox://sprites/mapbox/streets-v11',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            mapbox: {
-              type: 'raster',
-              tileSize: 256,
-              tiles: ['https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=YOUR_MAPBOX_ACCESS_TOKEN']
-            }
-          },
-          layers: [{ id: 'MapboxStreetsLayer', type: 'raster', source: 'mapbox' }]
-        },
-        {
-          name: 'Google Maps',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            google: {
-              type: 'raster',
-              tileSize: 256,
-              tiles: ['https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}']
-            }
-          },
-          layers: [{ id: 'GoogleMapsLayer', type: 'raster', source: 'google' }]
-        },
-        {
-          name: 'OpenStreetMap',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            osm: {
-              type: 'raster',
-              tileSize: 256,
-              tiles: ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png']
-            }
-          },
-          layers: [{ id: 'OSMRasterLayer', type: 'raster', source: 'osm' }]
-        },
-        // 第三方 高德矢量
-        {
-          name: '高德矢量',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            gaode: {
-              type: 'raster',
-              tileSize: 256, // 瓦片大小 256 512像素
-              tiles: [
-                'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
-              ]
-            }
-          },
-          layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }]
-        },
-        // 第三方 高德卫星
-        {
-          name: '高德卫星',
-          sprite: this.$store.state.settings.host + '/Public/map/sprite',
-          glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-          version: 8,
-          sources: {
-            gaode: {
-              type: 'raster',
-              tileSize: 256, // 瓦片大小 256 512像素
-              tiles: [
-                'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
-              ]
-            }
-          },
-          layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }]
-        }
-      ]
     }
   },
   props: {
@@ -204,7 +94,7 @@ export default {
           color: 'white',
           'horizon-blend': 0.01
         })
-        // 添加等高线图层
+        // // 添加等高线图层
         // this.map.addSource('contours', {
         //   type: 'vector',
         //   url: 'mapbox://mapbox.mapbox-terrain-v2'
@@ -223,7 +113,7 @@ export default {
         //     'line-width': 1 // 设置等高线宽度
         //   }
         // })
-        // 3D地图
+        // // 3D地图
         // this.map.addSource('mapbox-dem', {
         //   type: 'raster-dem',
         //   url: 'mapbox://mapbox.mapbox-terrain-dem-v1',

src/components/Statistics.vue

@@ -1,72 +1,12 @@
 <template>
   <div class="mainBox flex column no-select">
     <!-- 心跳 -->
-    <div class="flex">
+    <!-- <div class="flex">
       <div class="tag flex mac mc iconfont"
         :class="online ? heartAnimation ? 'icon-heart online' : 'icon-heart1 online' : 'icon-xinsui offline'">
       </div>
-    </div>
+    </div> -->
-    <!-- 锁定状态 -->
+
-    <div class="flex">
-      <div class="tag flex mac mc iconfont" :class="isLockState ? 'icon-suoding' : 'icon-jiesuo'">
-      </div>
-    </div>
-    <!-- 飞机模式 -->
-    <div class="flex">
-      <div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ getPlaneMode }}</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-moshixuanze">
-      </div>
-    </div>
-    <!-- 卫星 -->
-    <div class="flex">
-      <div v-if="satCount" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ fixType  }} {{ satCount }}颗</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-weixing">
-      </div>
-    </div>
-    <!-- 电池电压 -->
-    <div class="flex">
-      <div v-if="voltagBattery" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ voltagBattery }}V</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-dianya1">
-      </div>
-    </div>
-    <!-- 电池电流 -->
-    <div class="flex">
-      <div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ currentBattery }}A</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-dianliu">
-      </div>
-    </div>
-    <!-- 飞机高度 -->
-    <div class="flex">
-      <div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ positionAlt }}米</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-gaodu">
-      </div>
-    </div>
-    <!-- 飞机对地速度 -->
-    <div class="flex">
-      <div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-sudu">
-      </div>
-    </div>
-    <!-- 飞机载重 钩子状态 -->
-    <div class="flex">
-      <div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
-        <font class="plane-mode-text">{{hookstatus}} {{ loadweight }}克</font>
-      </div>
-      <div class="tag flex mac mc iconfont icon-mianxingdiaogou">
-      </div>
-    </div>
   </div>
 
 </template>
@@ -74,13 +14,9 @@
 <script>
 
 export default {
-  name: 'PlaneStatus',
+  name: 'Statistics',
   data () {
     return {
-      /* 心跳 */
-      heartAnimation: false, // 控制心跳动画图标
-      online: false,
-      isOnlineSetTimeout: null
     }
   },
   props: {
@@ -92,110 +28,9 @@ export default {
   components: {
   },
   computed: {
-    // 心跳随机数
-    heartRandom () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.heartRandom
-      }
-      return null
-    },
-    // 锁定状态
-    isLockState () {
-      if (this.plane && this.plane.planeState) {
-        if (Number(this.plane.planeState.heartBeat) & 128) {
-          return false
-        }
-      }
-      return true
-    },
-    // 飞机模式
-    getPlaneMode () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.getPlaneMode
-      }
-      return null
-    },
-    // 卫星数
-    satCount () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.satCount
-      }
-      return null
-    },
-    // 定位状态
-    fixType () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.fixType
-      }
-      return null
-    },
-    // 电池电压
-    voltagBattery () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.voltagBattery
-      }
-      return null
-    },
-    // 电池电流
-    currentBattery () {
-      if (this.plane && this.plane.planeState) {
-        if (Number(this.plane.planeState.currentBattery) > 0) {
-          return this.plane.planeState.currentBattery
-        } else {
-          return 0
-        }
-      }
-      return null
-    },
-    // 飞机高度
-    positionAlt () {
-      if (this.plane && this.plane.planeState && this.plane.planeState.position.length > 0) {
-        const posLen = this.plane.planeState.position.length
-        return this.plane.planeState.position[posLen - 1][2]
-      }
-      return null
-    },
-    // 飞机对地速度
-    groundSpeed () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.groundSpeed
-      }
-      return null
-    },
-    // 钩子状态
-    hookstatus () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.hookstatus
-      }
-      return null
-    },
-    // 飞机载重
-    loadweight () {
-      if (this.plane && this.plane.planeState) {
-        return this.plane.planeState.loadweight
-      }
-      return null
-    }
   },
   watch: {
-    heartRandom: {
+
-      handler () {
-        console.log('心跳：', this.plane.heartBeat)
-        // 心跳动画
-        this.heartAnimation = true
-        setTimeout(() => {
-          this.heartAnimation = false
-        }, 500)
-        // 在线状态
-        if (this.isOnlineSetTimeout) { // 进入本次心跳 删除掉线计时 既以下会重新计时
-          clearInterval(this.isOnlineSetTimeout)
-        }
-        this.online = true
-        this.isOnlineSetTimeout = setTimeout(() => { // 计时10秒后 掉线
-          this.online = false
-        }, 10000)
-      }
-    }
   },
   methods: {
 
@@ -203,9 +38,6 @@ export default {
   created () {
   },
   destroyed () {
-    if (this.isOnlineSetTimeout) {
-      clearInterval(this.isOnlineSetTimeout)
-    }
   }
 
 }

src/store/index.js

@@ -25,6 +25,7 @@ const store = new Vuex.Store({
     paidOrderList: [], // 已付款 和已退款但是发货状态为 已发货 订单列表
     logList: [], // 操作日志列表
     messageList: [], // 管理员公告列表
+    mapStyleList: [], // 地图样式列表
     crosFrequency: null, // 对频macadd
     ADSBList: [] // 存放当前活跃的 ADSB 飞机数据
   },
@@ -146,6 +147,13 @@ const store = new Vuex.Store({
         state.ADSBList.push({ ...ADSB, timestamp: Date.now() })
       }
     },
+    /**
+     *  @description: 设置地图样式列表
+     *  @param {*} list 地图样式列表
+    */
+    setMapStyleList (state, list) {
+      state.mapStyleList = list
+    },
     /**
      *  @description: 清除过期的 ADSB 数据
     */
@@ -1159,6 +1167,44 @@ const store = new Vuex.Store({
       logData.timestamp = typeof logData.timestamp !== 'undefined' ? logData.color : new Date().getTime()
       commit('insertNewLog', logData)
       /* 积攒 向服务器提交 日志 待续写... */
+    },
+    /**
+   * @description: 获取地图样式列表
+   * @param {*} param0.rootState 传this.$store.state.settings.host 即云端存放sprite 的地址
+   */
+    async fetchMapStyleList ({ commit, rootState }) {
+      const res = await api.get('getMapStyleList', 'Plane')
+      if (res.data.status === 1) {
+        const host = rootState.settings.host
+        const list = res.data.mapStyleList.map(style => {
+          const tiles = Array.isArray(style.tiles) ? style.tiles : JSON.parse(style.tiles)
+          const sourceKey = style.source_key || 'default'
+
+          return {
+            name: style.name,
+            sprite: `${host}/Public/map/sprite`,
+            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+            version: 8,
+            sources: {
+              [sourceKey]: {
+                type: 'raster',
+                tileSize: Number(style.tileSize || 256),
+                tiles,
+                attribution: style.attribution || ''
+              }
+            },
+            layers: [{
+              id: `${sourceKey}Layer`,
+              type: 'raster',
+              source: sourceKey
+            }]
+          }
+        })
+        commit('setMapStyleList', list)
+      } else {
+        commit('setMapStyleList', [])
+        Message.error(res.data.msg || '地图样式获取失败')
+      }
     }
   },
   modules: {

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

@@ -1,15 +1,16 @@
 <template>
   <div class="h-100">
     <map-box ref="mapbox">
-      <template #content>
+      <!-- <template #content>
-        <PlaneStatus :plane="plane" />
+        <Statistics :plane="plane" />
-      </template>
+      </template> -->
     </map-box>
   </div>
 </template>
 
 <script>
 import MapBox from '@/components/MapBox'
+// import Statistics from '@/components/Statistics'
 
 export default {
   name: 'Home',
@@ -19,6 +20,7 @@ export default {
   },
   components: {
     MapBox
+    // Statistics
   },
   computed: {
     airList () {

src/views/layout/index.vue

@@ -122,7 +122,8 @@ export default {
       this.$store.dispatch('fetchSpuList'),
       this.$store.dispatch('fetchSkuList'),
       this.$store.dispatch('fetchPaidOrderList'),
-      this.$store.dispatch('fetchMessageList')
+      this.$store.dispatch('fetchMessageList'),
+      this.$store.dispatch('fetchMapStyleList', this.$store.state.settings.host)
     ]).then(() => {
       return this.$store.dispatch('fetchNoflyData', this.shop_id)
     })