feat: 增加在线/离线图切换

.env.production

@@ -2,3 +2,4 @@ NODE_ENV=production
 VUE_APP_API_BASE_URL=/armd
 VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
+VUE_APP_MAP_BASE_URL=https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm

public/static/config.js

@@ -7,5 +7,7 @@ window._CONFIG = {
   //单点登录地址
   VUE_APP_CAS_BASE_URL: '',
   //文件预览路径
-  VUE_APP_ONLINE_BASE_URL: ''
+  VUE_APP_ONLINE_BASE_URL: '',
+  // 离线地图
+  VUE_APP_MAP_BASE_URL_OFFLINE: 'http://localhost:8001/map/{z}/{x}{y}.jpg'
 }

src/views/stationOperation/components/Map.vue

@@ -12,38 +12,35 @@ import XYZ from 'ol/source/XYZ'
 import View from 'ol/View'
 import { fromLonLat } from 'ol/proj'
 
+const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL
 export default {
   props: {
-    token: {
-      type: String,
-      required: true
-    },
     zoom: {
       type: Number,
-      default: 1
+      default: 1,
     },
     maxZoom: {
       type: Number,
-      default: 16
+      default: 16,
     },
     minZoom: {
       type: Number,
-      default: 1
+      default: 1,
     },
     center: {
       type: Object,
       default() {
         return {
           longitude: 116,
-          latitude: 40
+          latitude: 40,
         }
-      }
+      },
-    }
+    },
   },
   data() {
     return {
       map: null,
-      stationList: []
+      stationList: [],
     }
   },
   mounted() {
@@ -53,27 +50,28 @@ export default {
     // 初始化地图
     initMap() {
       const { longitude, latitude } = this.center
-      const layers = [
+
-        new TileLayer({
+      this.tileLayer = new TileLayer({
-          source: new XYZ({
+        source: new XYZ({
-            url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.token}`
+          url: mapSourceUrl,
-          })
+        }),
-        })
+      })
-      ]
+
+      const layers = [this.tileLayer]
 
       const view = new View({
         projection: 'EPSG:3857', // 使用这个坐标系
-        center:  fromLonLat([longitude, latitude]),
+        center: fromLonLat([longitude, latitude]),
         zoom: this.zoom,
         maxZoom: this.maxZoom,
-        minZoom: this.minZoom
+        minZoom: this.minZoom,
       })
 
       this.map = new Map({
         target: this.$refs.mapContainerRef,
         layers,
         view,
-        controls: []
+        controls: [],
       })
     },
 
@@ -109,10 +107,19 @@ export default {
     panTo(center, duration = 1000) {
       return this.map.getView().animate({
         center: fromLonLat(center),
-        duration
+        duration,
       })
-    }
+    },
-  }
+
+    // 修改地图来源
+    changeSource(url) {
+      this.tileLayer.setSource(
+        new XYZ({
+          url,
+        })
+      )
+    },
+  },
 }
 </script>
 <style lang="less" scoped>

src/views/stationOperation/components/MapPane.vue

@@ -2,7 +2,7 @@
   <div class="map-pane" :class="{ 'pane-hide': !showPane }">
     <!-- 操作栏开始 -->
     <div class="map-pane-operators">
-      <div>
+      <div title="Full Screen">
         <img
           v-if="isFullScreen"
           src="@/assets/images/station-operation/full-screen-active.png"
@@ -12,11 +12,11 @@
       </div>
 
       <div class="map-pane-operators-main-operator">
-        <div>
+        <div title="Data Receive">
           <img v-if="dataStatusModalVisible" src="@/assets/images/station-operation/analyze-active.png" />
           <img v-else src="@/assets/images/station-operation/analyze.png" @click="handleOpenAnalyzeModal()" />
         </div>
-        <div>
+        <div title="Nuclear Facilities Inquiry">
           <img
             v-if="active == 1 && showPane"
             src="@/assets/images/station-operation/station-operate-active.png"
@@ -24,7 +24,7 @@
           />
           <img v-else src="@/assets/images/station-operation/station-operate.png" @click="onPaneChange(1)" />
         </div>
-        <div>
+        <div title="Filter">
           <img
             v-if="active == 2 && showPane"
             src="@/assets/images/station-operation/filter-station-active.png"
@@ -35,8 +35,23 @@
       </div>
 
       <div class="map-pane-operators-zoom">
-        <div class="map-pane-operators-zoom-map-plus" @click="handlePlus"></div>
+        <div class="map-pane-operators-zoom-map-plus" title="Zoom In" @click="handlePlus"></div>
-        <div class="map-pane-operators-zoom-map-minus" @click="handleMinus"></div>
+        <div class="map-pane-operators-zoom-map-minus" title="Zoom Out" @click="handleMinus"></div>
+      </div>
+
+      <div class="map-pane-operators-map-toggle">
+        <div
+          class="map-pane-operators-map-toggle-icon map-pane-operators-map-toggle-online"
+          title="Online"
+          :class="{ active: mapSource == 'online' }"
+          @click="handleToggleMap('online')"
+        ></div>
+        <div
+          class="map-pane-operators-map-toggle-icon map-pane-operators-map-toggle-offline"
+          title="Offline"
+          :class="{ active: mapSource == 'offline' }"
+          @click="handleToggleMap('offline')"
+        ></div>
       </div>
     </div>
     <!-- 操作栏结束 -->
@@ -142,7 +157,7 @@
       v-model="dataStatusModalVisible"
       enableFullScreen
       :bodyStyle="{ padding: '15px 0 10px' }"
-      title="Data Recevice status Monitoring"
+      title="Data Receive status Monitoring"
       :width="1230"
       :footer="null"
       @fullscreen="onModalFullScreen"
@@ -394,6 +409,7 @@ export default {
   },
   data() {
     this.columns = columns
+
     return {
       active: 2,
       isFullScreen: false, // 是否处于全屏状态
@@ -431,6 +447,8 @@ export default {
       maskVisi: false,
 
       stationInfo: undefined,
+
+      mapSource: 'online',
     }
   },
   created() {
@@ -645,6 +663,19 @@ export default {
       }
     },
 
+    /**
+     * 切换地图
+     * @param {'online'|'offline'} mapSource
+     */
+    handleToggleMap(mapSource) {
+      if (mapSource == this.mapSource) {
+        return
+      }
+
+      this.mapSource = mapSource
+      this.$emit('mapSourceChange', mapSource)
+    },
+
     // 弹窗最大化
     onModalFullScreen() {
       this.showChart = false
@@ -872,6 +903,42 @@ export default {
         }
       }
     }
+
+    &-map-toggle {
+      margin-top: 10px;
+
+      &-icon {
+        width: 30px;
+        height: 30px;
+        background-color: #0a201f;
+        border: 1px solid #0a544e;
+        background-position: center;
+        background-size: 70%;
+        background-repeat: no-repeat;
+        cursor: pointer;
+
+        &.active {
+          background-color: #13a2b6;
+        }
+      }
+
+      &-online {
+        background-image: url(~@/assets/images/station-operation/map-online.png);
+
+        &.active {
+          background-image: url(~@/assets/images/station-operation/map-online-active.png);
+        }
+      }
+
+      &-offline {
+        border-top: 0;
+        background-image: url(~@/assets/images/station-operation/map-offline.png);
+
+        &.active {
+          background-image: url(~@/assets/images/station-operation/map-offline-active.png);
+        }
+      }
+    }
   }
 
   // 主体部分

src/views/stationOperation/index.vue

@@ -140,10 +140,7 @@
     </div>
     <!-- 右侧地图 -->
     <div class="station-operation-map">
-      <Map
+      <Map ref="mapRef">
-        ref="mapRef"
-        token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
-      >
         <MapMarker
           :list="markerList"
           :currList="upDateStationList"
@@ -158,6 +155,7 @@
           @changeMarker="onChangeMarker"
           @filterMarker="onFilterMarker"
           @drawCircle="onDrawCircle"
+          @mapSourceChange="handleMapSourceChange"
         />
       </Map>
     </div>
@@ -549,6 +547,19 @@ export default {
       this.$refs.mapPane.handleOpenAnalyzeModal(stationInfo)
     },
 
+    /**
+     * 地图源改变
+     * @param {'online'|'offline'} mapSource
+     */
+    handleMapSourceChange(mapSource) {
+      if (mapSource == 'online') {
+        const mapSourceUrl = process.env.VUE_APP_MAP_BASE_URL
+        this.$refs.mapRef.changeSource(mapSourceUrl)
+      } else {
+        this.$refs.mapRef.changeSource(window._CONFIG.VUE_APP_MAP_BASE_URL_OFFLINE)
+      }
+    },
+
     getScrollContainer() {
       return this.$refs.customScrollContainerRef.$el
     },