[fix]天地图地图切换子组件中label图层的显隐和图层列表里的label图层进行状态互通 review by xiongjj

SuperMap · Sep 13, 2024 · e5c8b4f · e5c8b4f
1 parent 6521481
commit e5c8b4f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/src/mapboxgl/tdt/map-switcher/TdtMapSwitcher.vue b/src/mapboxgl/tdt/map-switcher/TdtMapSwitcher.vue
@@ -97,13 +97,24 @@ export default {
       this.viewModel.togglerLabelLayer(checked);
       this.labelChecked = checked;
       this.$emit('change-label-status', this.labelChecked);
+    },
+    layerUpdate() {
+      const labelLayer = this.map && this.map.getLayer(this.$t(`tdtMapSwitcher.Tianditu${this.viewModel.tdtLabelType}`));
+      if (labelLayer && labelLayer.visibility) {
+        this.labelChecked = labelLayer.visibility === 'visible';
+      }
     }
   },
   loaded() {
     if (this.data.select) {
       this.viewModel.changeBaseLayer(this.data.select);
       this.togglerLabelLayer(this.data.label);
     }
+    this.layerUpdateFn = this.layerUpdate.bind(this);
+    this.viewModel.on('layersUpdated', this.layerUpdateFn);
+  },
+  beforeDestory() {
+    this.viewModel && this.viewModel.off('layersUpdated', this.layerUpdateFn);
   }
 };
 </script>
diff --git a/src/mapboxgl/tdt/map-switcher/TdtMapSwitcherViewModel.js b/src/mapboxgl/tdt/map-switcher/TdtMapSwitcherViewModel.js
@@ -19,8 +19,17 @@ export default class TdtMapSwitcherViewModel extends mapboxgl.Evented {
   }
 
   setMap(mapInfo) {
-    const { map } = mapInfo;
+    const { map, webmap } = mapInfo;
     this.map = map;
+    this.webmap = webmap;
+    this.updateFn = this._updateLayers.bind(this);
+    this.webmap.on({
+      layersupdated: this.updateFn
+    });
+  }
+
+  _updateLayers() {
+    this.fire('layersUpdated');
   }
 
   setTk(tk) {
@@ -38,10 +47,8 @@ export default class TdtMapSwitcherViewModel extends mapboxgl.Evented {
   }
 
   togglerLabelLayer(isChecked) {
-    const visible = isChecked ? 'visible' : 'none';
     const labelLayer = this.map && this.map.getLayer(geti18n().tc(`tdtMapSwitcher.Tianditu${this.tdtLabelType}`));
-    labelLayer &&
-      this.map.setLayoutProperty(geti18n().tc(`tdtMapSwitcher.Tianditu${this.tdtLabelType}`), 'visibility', visible);
+    labelLayer && this.webmap.changeItemVisible(geti18n().tc(`tdtMapSwitcher.Tianditu${this.tdtLabelType}`), isChecked);
   }
 
   addLayer(sources, layers, fromTdt = true) {

diff --git a/src/mapboxgl/tdt/map-switcher/__tests__/TdtMapSwitcher.spec.js b/src/mapboxgl/tdt/map-switcher/__tests__/TdtMapSwitcher.spec.js
@@ -73,4 +73,58 @@ describe('TdtMapSwitcher.vue', () => {
     expect(wrapper.vm.mapTarget).toBe('map');
     done();
   });
+
+  it('toggle LabelLayer', async done => {
+    wrapper = mount(SmTdtMapSwitcher, {
+      propsData: {
+        mapTarget: 'map',
+        collapsed: false,
+        data: {
+          select: 'img',
+          label: false,
+          tk: '1d109683f4d84198e37a38c442d68311'
+        }
+      }
+    });
+    let mockOnOptions;
+    const webmap = {
+      getLayerList: () => layerCatalogs,
+      changeItemVisible: () => {
+        mockOnOptions.layersupdated();
+      },
+      un: jest.fn(),
+      on: jest.fn(options => {
+        mockOnOptions = options;
+      })
+    };
+    const map = {
+      getStyle: () => {
+        return {
+          sources: [],
+          layers: []
+        }
+      },
+      getLayer: () => {
+        return {
+          id: 'tdtMapSwitcher.TiandituCia',
+          type: 'raster',
+          source: 'tdtMapSwitcher.TiandituCia',
+          visibility: 'none',
+          minzoom: 0,
+          maxzoom: 18
+        }
+      }
+    };
+    await mapSubComponentLoaded(wrapper);
+    const callback = function () {
+      expect(wrapper.vm.labelChecked).toBe(false);
+      done();
+    };
+    wrapper.vm.viewModel.on('layersUpdated', callback);
+    wrapper.vm.viewModel.setMap({
+      webmap,
+      map
+    });
+    wrapper.vm.viewModel.togglerLabelLayer(false);
+  });
 });