【feature】图层列表优化

SuperMap · Aug 16, 2024 · c283292 · c283292
1 parent 486fcf8
commit c283292
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 10 deletions.
diff --git a/src/mapboxgl/web-map/WebMapViewModel.ts b/src/mapboxgl/web-map/WebMapViewModel.ts
@@ -297,7 +297,11 @@ export default class WebMapViewModel extends Events {
     }
   }
 
-  changeItemVisible(item: Record<string, any>, visible: boolean) {
+  changeItemVisible(id: string, visible: boolean) {
+    const item = this._findLayerCatalog(this.layerCatalogs, id);
+    if (!item) {
+      return;
+    }
     const visibility = visible ? 'visible' : 'none';
     if (item.type === 'group') {
       const visbleId = this._getLayerVisibleId(item);
@@ -467,6 +471,20 @@ export default class WebMapViewModel extends Events {
     }
   }
 
+  private _findLayerCatalog(catalogs: Array<Record<string, any>>, id: string) {
+    let matchData: Record<string, any> | undefined;
+    for (const data of catalogs) {
+      if (data.id === id) {
+        matchData = data;
+        break;
+      }
+      if (data.type === 'group') {
+        matchData = this._findLayerCatalog(data.children, id);
+      }
+    }
+    return matchData;
+  }
+
   private _getLayerVisible(layer: Record<string, any>) {
     const id = this._getLayerVisibleId(layer);
     return this._appreciableLayersVisibleMap.has(id) ? this._appreciableLayersVisibleMap.get(id) : layer.visible;

diff --git a/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js b/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js
@@ -748,4 +748,31 @@ describe('WebMapViewModel.spec', () => {
     };
     viewModel.on({ addlayerssucceeded: callback });
   });
+
+  it('changeItemVisible', async done => {
+    const viewModel = new WebMapViewModel(commonId, { ...commonOption, map: commonMap }, { ...commonMapOptions });
+    const callback = async function (data) {
+      const layerList = viewModel.getLayerList();
+      console.log(layerList);
+      expect(layerList.length).toBe(1);
+      const spy = jest.spyOn(data.map, 'setLayoutProperty');
+      viewModel.changeItemVisible('fakeid', true);
+      expect(spy).toHaveBeenCalledTimes(0);
+      viewModel.changeItemVisible(layerList[0].id, true);
+      expect(spy).toHaveBeenCalledTimes(1);
+      spy.mockClear();
+      viewModel.layerCatalogs = [{
+        id: 'group1',
+        title: 'group1',
+        type: 'group',
+        children: layerList
+      }];
+      viewModel.changeItemVisible('group1', true);
+      expect(spy).toHaveBeenCalledTimes(1);
+      done();
+    };
+    viewModel.on({ addlayerssucceeded: callback });
+    await flushPromises();
+    jest.advanceTimersByTime(0);
+  });
 });
diff --git a/src/mapboxgl/web-map/control/layer-list/LayerList.vue b/src/mapboxgl/web-map/control/layer-list/LayerList.vue
@@ -51,8 +51,8 @@ import SmAttributes, {
 } from 'vue-iclient/src/mapboxgl/attributes/Attributes.vue';
 import LayerListViewModel from './LayerListViewModel';
 import LayerGroup from 'vue-iclient/src/mapboxgl/web-map/LayerGroup.vue';
-import intersection from 'lodash.intersection';
 import isEqual from 'lodash.isequal';
+import omit from 'omit.js';
 
 interface AttributesParams {
   enabled: boolean;
@@ -71,6 +71,20 @@ interface AttributesParams {
   customRow: Function;
 }
 
+interface LayerListItem {
+  id: string;
+  title: string;
+  type: string;
+  visible: boolean;
+  renderSource: Object;
+  renderLayers: string[];
+  dataSource: Object;
+  themeSetting: Object;
+  children?: LayerListItem[];
+  CLASS_NAME?: string;
+  CLASS_INSTANCE?: Object;
+}
+
 const ATTRIBUTES_NEEDED_PROPS = [
   'title',
   'iconClass',
@@ -200,8 +214,8 @@ class SmLayerList extends Mixins(MapGetter, Control, Theme, BaseCard) {
     this.viewModel = new LayerListViewModel();
   }
 
-  toggleItemVisibility(item: Object, visible: boolean) {
-    this.viewModel && this.viewModel.changeItemVisible(item, visible);
+  toggleItemVisibility(item: { id: string, [prop: string]: any; }, visible: boolean) {
+    this.viewModel && this.viewModel.changeItemVisible(item.id, visible);
   }
 
   addNewLayer() {
@@ -240,7 +254,7 @@ class SmLayerList extends Mixins(MapGetter, Control, Theme, BaseCard) {
 
   layerUpdate() {
     this.$nextTick(() => {
-      this.sourceList = this.viewModel && this.viewModel.initLayerList();
+      this.sourceList = this.viewModel && this.transformLayerList(this.viewModel.initLayerList());
       // @ts-ignore
       if (this.attributesProps.layerName && this.sourceList[this.attributesProps.layerName].visibility === 'none') {
         this.closeAttributesIconClass();
@@ -249,6 +263,18 @@ class SmLayerList extends Mixins(MapGetter, Control, Theme, BaseCard) {
     });
   }
 
+  transformLayerList(layerCatalog: LayerListItem[]) {
+    const layerList: LayerListItem[] = [];
+    layerCatalog.forEach(layer => {
+      const nextLayer = omit(layer, ['CLASS_INSTANCE']);
+      if(nextLayer.type === 'group') {
+        nextLayer.children = this.transformLayerList(layer.children);
+      }
+      layerList.push(nextLayer);
+    });
+    return layerList;
+  }
+
   closeAttributesIconClass() {
     const attributesIcon = document.querySelectorAll('.sm-component-layer-list__attributes');
     attributesIcon.forEach(element => {

diff --git a/src/mapboxgl/web-map/control/layer-list/LayerListViewModel.ts b/src/mapboxgl/web-map/control/layer-list/LayerListViewModel.ts
@@ -53,8 +53,8 @@ class LayerListViewModel extends mapboxgl.Evented {
     return dataset;
   }
 
-  changeItemVisible(item: Record<string, any>, visible: boolean) {
-    this.webmap.changeItemVisible(item, visible);
+  changeItemVisible(id: string, visible: boolean) {
+    this.webmap.changeItemVisible(id, visible);
   }
 
   removed() {

diff --git a/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js b/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js
@@ -239,7 +239,8 @@ describe('LayerList.vue', () => {
               sourceLayer: 'Xingkaihu_C_txt@China'
             },
             renderLayers: ['xingkaihu_C@China'],
-            themeSetting: {}
+            themeSetting: {},
+            CLASS_INSTANCE: {}
           },
           {
             dataSource: {
@@ -296,10 +297,10 @@ describe('LayerList.vue', () => {
     });
     wrapper.vm.$options.loaded.call(wrapper.vm);
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.sourceList).toEqual(layerCatalogs);
+    expect(wrapper.vm.sourceList).toEqual(wrapper.vm.transformLayerList(layerCatalogs));
     expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-visible').exists()).toBeTruthy();
     expect(wrapper.find('.header-text > .sm-components-icon-partially-visible').exists()).toBeTruthy();
-    layerCatalogs[1].visible = false;
+    wrapper.vm.sourceList[1].visible = false;
     mockOnOptions.layersupdated();
     mockOn();
   });