【feature】图层管理优化

SuperMap · Jul 4, 2024 · b4577ad · b4577ad
1 parent fee6215
commit b4577ad
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 38 deletions.
diff --git a/src/mapboxgl/_types/__tests__/map-event.spec.js b/src/mapboxgl/_types/__tests__/map-event.spec.js
@@ -54,19 +54,19 @@ describe('map-event-mapboxgl', () => {
   it('webmap getLayerList', done => {
     const mainWebMap = {
       getLayerList: () => [
-        { id: 'layer1', renderSource: { id: 'source1' } },
+        { id: 'layer1', renderSource: { id: 'source1' }, renderLayers: ['layer1'] },
+        { id: 'layer1-label', renderSource: { id: 'source1' }, renderLayers: ['layer1-label'] },
         { id: 'layer5', renderSource: { id: 'source5' } },
         {
           id: 'layer3',
           type: 'group',
-          renderSource: {},
           children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' } }]
         }
       ]
     };
     const webmap2 = {
       getLayerList: () => [
-        { id: 'layer1', renderSource: { id: 'source1' } },
+        { id: 'layer1', renderSource: { id: 'source1' }, renderLayers: ['layer1', 'layer1-label'] },
         {
           id: 'layer2',
           renderSource: {},

diff --git a/src/mapboxgl/_types/map-event.js b/src/mapboxgl/_types/map-event.js
@@ -100,7 +100,15 @@ export default new Vue({
         this.collectCatalogsKeys(data.children, list);
         continue;
       }
-      list.push(data.renderSource?.id || data.id);
+      let ids = [];
+      if (data.renderLayers?.length) {
+        ids.push(...data.renderLayers);
+      } else if (data.renderSource?.id) {
+        ids.push(data.renderSource.id);
+      } else {
+        ids.push(data.id);
+      }
+      list.push(...ids);
     }
     return list;
   }

diff --git a/src/mapboxgl/web-map/WebMapViewModel.ts b/src/mapboxgl/web-map/WebMapViewModel.ts
@@ -322,7 +322,7 @@ export default class WebMapViewModel extends Events {
           this.map.removeLayer(layerId);
         }
       });
-      if (this.map?.getSource(item.renderSource.id)) {
+      if (this.map?.getSource(item.renderSource.id) && !item.l7Layer) {
         sourceList.push(item.renderSource.id);
       }
     }
@@ -378,7 +378,7 @@ export default class WebMapViewModel extends Events {
         return;
       }
       layer.renderLayers.forEach((layerId: string) => {
-        if (!ignoreIds.some(id => id === layerId)) {
+        if (!ignoreIds.some(id => id === layerId) && (!layer.l7Layer || this.map.getLayer(layerId))) {
           this.map.setLayoutProperty(layerId, 'visibility', visibility);
         }
       });

diff --git a/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js b/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js
@@ -1408,6 +1408,20 @@ describe('WebMapViewModel.spec', () => {
       expect(viewModel._cacheCleanLayers.length).not.toBe(0);
       viewModel.cleanLayers();
       expect(viewModel._cacheCleanLayers.length).toBe(0);
+      const getSourceSpy = jest.spyOn(data.map, 'getSource').mockImplementation(() => true);
+      const removeSourceSpy = jest.spyOn(data.map, 'removeSource');
+      viewModel._cacheCleanLayers = [{
+        renderLayers: ['layer1'],
+        renderSource: { id: 'source1' },
+        l7Layer: true
+      }, {
+        renderLayers: ['layer2'],
+        renderSource: { id: 'source2' }
+      }];
+      viewModel.cleanLayers();
+      expect(getSourceSpy).toHaveBeenCalledTimes(2);
+      expect(removeSourceSpy).toHaveBeenCalledTimes(1);
+      expect(viewModel._cacheCleanLayers.length).toBe(0);
       done();
     };
     viewModel.on({ addlayerssucceeded: callback });
@@ -2361,14 +2375,18 @@ describe('WebMapViewModel.spec', () => {
         show: jest.fn(),
         hide: jest.fn() 
       };
-      const visibleLayers = [{renderLayers: [layers[0].id]}, { l7MarkerLayer }];
+      let visibleLayers = [{renderLayers: [layers[0].id]}, { l7MarkerLayer }];
       viewModel.updateLayersVisible(visibleLayers, 'visible');
       expect(spy1.mock.calls.length).toBe(1);
       expect(l7MarkerLayer.show).toHaveBeenCalledTimes(1);
       viewModel.updateLayersVisible(visibleLayers, 'none');
       expect(spy1.mock.calls.length).toBe(2);
       expect(l7MarkerLayer.show).toHaveBeenCalledTimes(1);
       expect(l7MarkerLayer.hide).toHaveBeenCalledTimes(1);
+      spy1.mockReset();
+      visibleLayers = [{ renderLayers: ['testlayer'], l7Layer: true }, { renderLayers: [layers[0].id] }];
+      viewModel.updateLayersVisible(visibleLayers, 'visible');
+      expect(spy1).toHaveBeenCalledTimes(1);
       done();
     };
     viewModel.on({ addlayerssucceeded: callback });
@@ -2484,3 +2502,4 @@ describe('WebMapViewModel.spec', () => {
 
 
 
+
diff --git a/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue b/src/mapboxgl/web-map/control/layer-manager/LayerManager.vue
@@ -47,7 +47,6 @@ import LayerManagerViewModel from './LayerManagerViewModel';
 import uniqueId from 'lodash.uniqueid';
 import clonedeep from 'lodash.clonedeep';
 import isequal from 'lodash.isequal';
-import difference from 'lodash.difference';
 
 export default {
   name: 'SmLayerManager',
@@ -103,6 +102,12 @@ export default {
   },
   created() {
     this.viewModel = new LayerManagerViewModel();
+    this.viewModel.on('layersadded', this.addMapCombination);
+    this.viewModel.on('layersremoved', this.removeMapCombination);
+  },
+  beforeDestroy() {
+    this.viewModel.off('layersadded', this.addMapCombination);
+    this.viewModel.off('layersremoved', this.removeMapCombination);
   },
   methods: {
     checkNode(key, e) {
@@ -134,7 +139,6 @@ export default {
         const data = e.node.dataRef;
         this.viewModel.removeLayerLoop(data);
       }
-      this.updateMapCombinations();
     },
     addLayer({ nodeKey, serverUrl, mapId, withCredentials, layerFilter, proxy }) {
       if (!this.mapIsLoad) {
@@ -212,25 +216,14 @@ export default {
           this.removeIServerLayer(key);
           this.removeMapStyle(key);
         });
-        this.updateMapCombinations();
       }
       this.checkedKeys = [];
     },
-    updateMapCombinations() {
-      if (!this.prevSelectedKeys) {
-        this.prevSelectedKeys = [];
-      }
-      const cacheMaps = this.viewModel.getCacheMaps();
-      const currentSelectedKeys = Object.keys(cacheMaps);
-      const addedKeys = difference(currentSelectedKeys, this.prevSelectedKeys);
-      addedKeys.forEach(key => {
-        mapEvent.$options.setWebMap(this.getTargetName(), cacheMaps[key], key);
-      });
-      const removedKeys = difference(this.prevSelectedKeys, currentSelectedKeys);
-      removedKeys.forEach(key => {
-        mapEvent.$options.deleteWebMap(this.getTargetName(), key);
-      });
-      this.prevSelectedKeys = currentSelectedKeys;
+    addMapCombination({ nodeKey, nodeValue }) {
+      mapEvent.$options.setWebMap(this.getTargetName(), nodeValue, nodeKey);
+    },
+    removeMapCombination({ nodeKey }) {
+      mapEvent.$options.deleteWebMap(this.getTargetName(), nodeKey);
     }
   },
   loaded() {

diff --git a/src/mapboxgl/web-map/control/layer-manager/LayerManagerViewModel.js b/src/mapboxgl/web-map/control/layer-manager/LayerManagerViewModel.js
@@ -29,17 +29,19 @@ class LayerManageViewModel extends mapboxgl.Evented {
     }
 
     if (!this.readyNext) {
-      this.mapQuene.push({
-        nodeKey,
-        mapId,
-        serverUrl,
-        withCredentials,
-        layerFilter,
-        proxy
-      });
+      if (!this.mapQuene.some(item => item.nodeKey === nodeKey)) {
+        this.mapQuene.push({
+          nodeKey,
+          mapId,
+          serverUrl,
+          withCredentials,
+          layerFilter,
+          proxy
+        });
+      }
       return;
     }
-    this.webMapViewModel = new WebMapViewModel(
+    const webMapViewModel = new WebMapViewModel(
       mapId,
       {
         serverUrl,
@@ -52,12 +54,15 @@ class LayerManageViewModel extends mapboxgl.Evented {
       layerFilter
     );
 
+    this.webMapViewModel = webMapViewModel;
+
     // 设置 readyNext 为 false
     this.readyNext = false;
     this.webMapViewModel.on({
       addlayerssucceeded: () => {
         // 设置 readyNext 为 true
         // 判断 是否缓存数组里有值，取出最新的，调用this.addLayer();
+        this.fire('layersadded', { nodeKey, nodeValue: webMapViewModel });
         this.handleNextMap();
       }
     });
@@ -102,7 +107,7 @@ class LayerManageViewModel extends mapboxgl.Evented {
       description: '',
       projection,
       title: 'dv-tile',
-      version: '2.3.0',
+      version: '2.3.0'
     };
     this.addLayer({ nodeKey, mapId: mapInfo });
   }
@@ -123,6 +128,7 @@ class LayerManageViewModel extends mapboxgl.Evented {
       this.cacheMaps[nodeKey].cleanLayers();
       delete this.cacheMaps[nodeKey];
     }
+    this.fire('layersremoved', { nodeKey });
   }
 
   removeIServerLayer(nodeKey) {
@@ -172,6 +178,3 @@ class LayerManageViewModel extends mapboxgl.Evented {
   }
 }
 export default LayerManageViewModel;
-
-
-
diff --git a/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManager.spec.js b/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManager.spec.js
@@ -7,6 +7,7 @@ import layerData from 'vue-iclient/test/unit/mocks/data/layerData';
 import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
 import flushPromises from 'flush-promises';
 import mapWrapperLoaded from 'vue-iclient/test/unit/mapWrapperLoaded.js';
+import mapEvent from 'vue-iclient/src/mapboxgl/_types/map-event';
 
 const layers = [
   {
@@ -152,4 +153,26 @@ describe('LayerManager.vue', () => {
     expect(wrapper.vm.layers.length).toBe(1);
     done();
   });
+
+  it('toggle mapCombination', async done => {
+    wrapper = mount(SmLayerManager, {
+      propsData: {
+        defaultExpandAll: true,
+        mapTarget: 'map',
+        layers: [
+          {
+            mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+            title: '民航数据-单值'
+          }
+        ]
+      }
+    });
+    const setWebMapSpy = jest.spyOn(mapEvent.$options, 'setWebMap').mockImplementation(() => {});
+    const removeWebMapSpy = jest.spyOn(mapEvent.$options, 'deleteWebMap').mockImplementation(() => {});
+    wrapper.vm.viewModel.fire('layersadded', { nodeKey: '1', nodeValue: {} });
+    expect(setWebMapSpy).toHaveBeenCalled();
+    wrapper.vm.viewModel.fire('layersremoved', { nodeKey: '2' });
+    expect(removeWebMapSpy).toHaveBeenCalled();
+    done();
+  });
 });
diff --git a/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManagerViewModel.spec.js b/src/mapboxgl/web-map/control/layer-manager/__tests__/LayerManagerViewModel.spec.js
@@ -121,6 +121,11 @@ describe('LayerManagerViewModel', () => {
     viewModel.addLayer(data);
     expect(viewModel.mapQuene.length).toBe(1);
     expect(viewModel.mapQuene[0].nodeKey).toBe(nodeKey);
+    data.nodeKey = nodeKey;
+    viewModel.readyNext = false;
+    viewModel.addLayer(data);
+    expect(viewModel.mapQuene.length).toBe(1);
+    expect(viewModel.mapQuene[0].nodeKey).toBe(nodeKey);
   });
 
   it('removeLayerLoop', () => {
@@ -164,5 +169,34 @@ describe('LayerManagerViewModel', () => {
       viewModel.removeLayerLoop(layers[2]);
     }).not.toThrow();
   });
+
+  it('layersadded', (done) => {
+    let nodeKey = 'key1';
+    const data = { nodeKey, mapId: 123, serviceUrl: 'http://fakeservice' };
+    expect(viewModel.cacheMaps[nodeKey]).toBeUndefined();
+    viewModel.addLayer(data);
+    expect(viewModel.cacheMaps[nodeKey]).not.toBeUndefined();
+    expect(viewModel.readyNext).toBeFalsy();
+    const layersAddedFn = jest.fn();
+    viewModel.on('layersadded', layersAddedFn);
+    viewModel.cacheMaps[nodeKey].triggerEvent('addlayerssucceeded', {});
+    expect(viewModel.readyNext).toBeTruthy();
+    expect(layersAddedFn).toHaveBeenCalledTimes(1);
+    done();
+  });
+
+  it('layersremoved', (done) => {
+    const layers = [
+      {
+        mapInfo: { serverUrl: 'https://fakeiportal.supermap.io/iportal', mapId: '801571284' },
+        title: '民航数据-单值'
+      }
+    ];
+    const layersRemovedFn = jest.fn();
+    viewModel.on('layersremoved', layersRemovedFn);
+    viewModel.removeLayerLoop(layers[0]);
+    expect(layersRemovedFn).toHaveBeenCalledTimes(1);
+    done();
+  });
 });