feat: 添加地图loading状态

Hxy1992 · Jun 8, 2022 · 2482ac0 · 2482ac0
1 parent c355e42
commit 2482ac0
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 8 deletions.
diff --git a/packages/renderer/src/components/Home.vue b/packages/renderer/src/components/Home.vue
@@ -1,5 +1,10 @@
 <template>
-  <div id="map" />
+  <n-spin
+    class="loadingSpin"
+    :show="mapLoading"
+  >
+    <div id="map" />
+  </n-spin>
   <div class="box-controls">
     <layer-control
       @choose="chooseLayers"
@@ -54,6 +59,7 @@
       :base-layer="saveLayers"
       :limit-max-zoom="limitMaxZoom"
       :limit-min-zoom="limitMinZoom"
+      :is-baidu="isBaidu"
       @ok="save"
       @cancel="cancelSave"
     />
@@ -73,6 +79,7 @@
 <script>
 import {defineComponent} from 'vue';
 import baseMap from '../utils/baseMap.js';
+import {setMapLoading,getMapLoading} from '../utils/baseMap.js';
 import LayerControl from './LayerControl.vue';
 import AreaChoose from './AreaChoose.vue';
 import SaveDiablog from './Save.vue';
@@ -105,6 +112,10 @@ export default defineComponent({
   setup() {
     window.$message = useMessage();
     window.$notification = useNotification();
+    const mapLoading = getMapLoading();
+    return {
+      mapLoading: mapLoading,
+    };
   },
   data() {
     return {
@@ -116,10 +127,10 @@ export default defineComponent({
       saveLayers: [],
       limitMinZoom: 1,
       limitMaxZoom: 18,
+      isBaidu: false,
     };
   },
   computed: {
-
   },
   mounted() {
     map = new baseMap('map');
@@ -169,12 +180,14 @@ export default defineComponent({
         if (showMsg) window.$message.warning('获取下载范围错误，请重新绘制下载范围');
         return false;
       }
-      const {titleLayer} = map.getBaseMapConfig();
+      const {titleLayer,maxZoom,minZoom,projection} = map.getBaseMapConfig();
       this.saveLayers = titleLayer;
-      this.limitMaxZoom = titleLayer.getMaxZoom();
-      this.limitMinZoom = titleLayer.getMinZoom();
+      this.limitMaxZoom = maxZoom;
+      this.limitMinZoom = minZoom;
+      this.isBaidu = projection.code === 'BAIDU';
       this.saveVisible = true;
       map.fitExtent();
+      setMapLoading(true);
       return true;
     },
     save(val) {
@@ -184,6 +197,7 @@ export default defineComponent({
       new FileSave(val);
     },
     cancelSave() {
+      setMapLoading(false);
       this.saveVisible = false;
     },
     showHelp(val) {
@@ -217,6 +231,13 @@ export default defineComponent({
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+.loadingSpin{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 #map{
   position: absolute;
   margin: 0;

diff --git a/packages/renderer/src/components/Save.vue b/packages/renderer/src/components/Save.vue
@@ -51,7 +51,7 @@
         v-if="showMerge"
         class="item"
       >
-        <span class="label">标注下载：</span>
+        <span class="label">合并标注：</span>
         <div class="value">
           <input
             v-model="mergeLayers"
@@ -65,7 +65,6 @@
           <input
             v-model="clipImage"
             type="checkbox"
-            disabled
           >
         </div>
       </div>
@@ -123,6 +122,10 @@ export default defineComponent({
       required: true,
       type: Number,
     },
+    isBaidu: {
+      required: true,
+      type: Boolean,
+    },
   },
   setup() {
 
@@ -186,12 +189,16 @@ export default defineComponent({
       if (minZoom >= maxZoom || minZoom < this.limitMinZoom || maxZoom > this.limitMaxZoom) {
         return window.$message.warning('层级格式错误');
       }
+      if (this.isBaidu && this.clipImage) {
+        return window.$message.warning('百度瓦片暂不支持裁切，请取消裁切后重试');
+      }
       const param = {
         savePath: this.savePath,
         minZoom: minZoom,
         maxZoom: maxZoom,
         mergeLayers: this.mergeLayers,
         extent: this.downloadExtent,
+        clipImage: this.clipImage,
       };
       // eslint-disable-next-line
       this.$emit('ok', param);

diff --git a/packages/renderer/src/naive-ui-load.js b/packages/renderer/src/naive-ui-load.js
@@ -13,6 +13,7 @@ import {
   NDescriptionsItem,
   NPopover,
   NTree,
+  NSpin,
 } from 'naive-ui';
 
 const naive = create({
@@ -28,6 +29,7 @@ const naive = create({
     NDescriptionsItem,
     NPopover,
     NTree,
+    NSpin,
   ],
 });
 

diff --git a/packages/renderer/src/utils/baseMap.js b/packages/renderer/src/utils/baseMap.js
@@ -2,6 +2,7 @@
 import * as maptalks from 'maptalks';
 import TileLayerCollection from './TileLayerCollection/TileLayerCollection';
 import {defaultMap} from './layerList';
+import {ref} from 'vue';
 
 const defaultTileOption = {
   maxCacheSize: 1000,
@@ -129,12 +130,16 @@ export default class baseMap{
         config: layers.map(temp => {return temp.config();}),
         projection: baseMap.getProjection(),
         titleLayer: layers,
+        maxZoom: baseMap.getMaxZoom(),
+        minZoom: baseMap.getMinZoom(),
       };
     } else {
       return {
         config: baseMap.config(),
         projection: baseMap.getProjection(),
         titleLayer: baseMap,
+        maxZoom: baseMap.getMaxZoom(),
+        minZoom: baseMap.getMinZoom(),
       };
     }
   }
@@ -183,6 +188,15 @@ export default class baseMap{
   }
 }
 
+// 地图加载状态
+const MapLoading = ref(false);
+export function setMapLoading(val) {
+  MapLoading.value = val;
+}
+export function getMapLoading() {
+  return MapLoading;
+}
+
 let _testDraw;
 /**
  * 根据行列号绘制瓦片外框

diff --git a/packages/renderer/src/utils/fileSaveTms.js b/packages/renderer/src/utils/fileSaveTms.js
@@ -1,6 +1,7 @@
 // 瓦片转换
 import { setState } from './progress';
 import { downloadLoop } from './download';
+import {setMapLoading} from './baseMap.js';
 
 /**
  * 下载TMS瓦片
@@ -39,6 +40,7 @@ export class TileTMS {
         list.push({zoom: tile.z, url:tile.url, savePath});
       }
     }
+    setMapLoading(false);
     return list;
   }
 }
@@ -61,6 +63,7 @@ export class TileTMSList {
     data.mapConfig.titleLayer.forEach(layer => {
       list = [...list, ...this.calcTiles(layer.config().style, layer)];
     });
+    setMapLoading(false);
     downloadLoop(list, this.apiDownload);
   }
   calcTiles(subpath, layer) {
@@ -148,7 +151,7 @@ export class TileTMSList {
         }
       });
     }
-
+    setMapLoading(false);
     return Object.values(storeMap);
   }
 }