.gitignore

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

src/components/MapBox.vue

@@ -24,7 +24,117 @@ 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: {
@@ -94,7 +204,7 @@ export default {
           color: 'white',
           'horizon-blend': 0.01
         })
-        // // 添加等高线图层
+        // 添加等高线图层
         // this.map.addSource('contours', {
         //   type: 'vector',
         //   url: 'mapbox://mapbox.mapbox-terrain-v2'
@@ -113,7 +223,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,86 +0,0 @@
-<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,7 +25,6 @@ const store = new Vuex.Store({
     paidOrderList: [], // 已付款 和已退款但是发货状态为 已发货 订单列表
     logList: [], // 操作日志列表
     messageList: [], // 管理员公告列表
-    mapStyleList: [], // 地图样式列表
     crosFrequency: null, // 对频macadd
     ADSBList: [] // 存放当前活跃的 ADSB 飞机数据
   },
@@ -147,13 +146,6 @@ const store = new Vuex.Store({
         state.ADSBList.push({ ...ADSB, timestamp: Date.now() })
       }
     },
-    /**
-     *  @description: 设置地图样式列表
-     *  @param {*} list 地图样式列表
-    */
-    setMapStyleList (state, list) {
-      state.mapStyleList = list
-    },
     /**
      *  @description: 清除过期的 ADSB 数据
     */
@@ -1167,44 +1159,6 @@ 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,16 +1,11 @@
 <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',
@@ -20,7 +15,6 @@ export default {
   },
   components: {
     MapBox
-    // Statistics
   },
   computed: {
     airList () {

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

@@ -25,6 +25,7 @@
             <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,8 +122,7 @@ 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)
     })