【类 型】：feat

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

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

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 /dist
 /package-lock.json
+/src/components/statistics.vue

src/components/MapBox.vue

@@ -24,117 +24,7 @@ export default {
       isflow: false, // 飞机经纬度变化时是否跟随飞机
       currentStyleIndex: 0, // 当前选中的地图样式索引
       guidedMarker: null, // 指点飞行地图标记
-      // 地图样式
-      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' }]
-        }
-      ]
+      mapStyles: this.$store.state.mapStyleList// 地图样式
     }
   },
   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

@@ -0,0 +1,86 @@
+<template>
+  <div class="mainBox flex column no-select">
+    <!-- 心跳 -->
+    <!-- <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>
+
+</template>
+
+<script>
+
+export default {
+  name: 'Statistics',
+  data () {
+    return {
+    }
+  },
+  props: {
+    plane: {
+      type: Object,
+      deep: true
+    }
+  },
+  components: {
+  },
+  computed: {
+  },
+  watch: {
+
+  },
+  methods: {
+
+  },
+  created () {
+  },
+  destroyed () {
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.mainBox {
+  position: absolute;
+  width: 29px;
+  top: 40px;
+  left: 10px;
+  z-index: 90;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+  background-color: white;
+  border-radius: 4px;
+}
+
+.mainBox .flex:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.tag {
+  height: 29px;
+  min-width: 29px;
+  cursor: pointer;
+  border: 0;
+  font-size: 22px;
+}
+
+.plane-mode {
+  position: absolute;
+  left: 29px;
+  height: 29px;
+  display: flex;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.plane-mode-text {
+  display: inline-block;
+  white-space: nowrap; /* 防止内容换行 */
+}
+</style>

src/store/index.js

@@ -25,6 +25,7 @@ const store = new Vuex.Store({
     paidOrderList: [], // 已付款 和已退款但是发货状态为 已发货 订单列表
     logList: [], // 操作日志列表
     messageList: [], // 管理员公告列表
+    mapStyleList: [], // 地图样式列表
     crosFrequency: null, // 对频macadd
     ADSBList: [] // 存放当前活跃的 ADSB 飞机数据
   },
@@ -139,13 +140,20 @@ const store = new Vuex.Store({
     setADSBList (state, ADSB) {
       const index = state.ADSBList.findIndex(i => i.icao === ADSB.icao)
       if (index > -1) {
-      // 更新已有
+        // 更新已有
         state.ADSBList[index] = { ...ADSB, timestamp: Date.now() }
       } else {
-      // 新增
+        // 新增
         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,11 +1,16 @@
 <template>
   <div class="h-100">
-    <map-box ref="mapbox"/>
+    <map-box ref="mapbox">
+      <!-- <template #content>
+        <Statistics :plane="plane" />
+      </template> -->
+    </map-box>
   </div>
 </template>
 
 <script>
 import MapBox from '@/components/MapBox'
+// import Statistics from '@/components/Statistics'
 
 export default {
   name: 'Home',
@@ -15,6 +20,7 @@ export default {
   },
   components: {
     MapBox
+    // Statistics
   },
   computed: {
     airList () {

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

@@ -25,7 +25,6 @@
             <el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
             <font class="m-l-5">米</font>
           </el-form-item>
-
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button size="medium" @click="dialogVisible = false">关闭</el-button>

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)
     })