From c28329211bc107cd79890e6c513630ce211ddcd9 Mon Sep 17 00:00:00 2001 From: xiongjj Date: Fri, 16 Aug 2024 18:00:24 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90feature=E3=80=91=E5=9B=BE=E5=B1=82?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mapboxgl/web-map/WebMapViewModel.ts | 20 ++++++++++- .../web-map/__tests__/WebMapViewModel.spec.js | 27 +++++++++++++++ .../web-map/control/layer-list/LayerList.vue | 34 ++++++++++++++++--- .../control/layer-list/LayerListViewModel.ts | 4 +-- .../layer-list/__tests__/LayerList.spec.js | 7 ++-- 5 files changed, 82 insertions(+), 10 deletions(-) diff --git a/src/mapboxgl/web-map/WebMapViewModel.ts b/src/mapboxgl/web-map/WebMapViewModel.ts index 29f0948d..15ba2c87 100644 --- 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, 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>, id: string) { + let matchData: Record | 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) { 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 index 6af00629..ccc7933e 100644 --- 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 index 81c368f9..7c0d8073 100644 --- 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 index d94ca20c..12c8d602 100644 --- 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, 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 index aedef0c2..744de062 100644 --- 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(); });