Skip to content

Commit

Permalink
【feature】更新可感知图层显隐优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiongjiaojiao
xiongjiaojiao committed May 23, 2024
1 parent 607a1dc commit 7e0df52
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 23 deletions.
16 changes: 9 additions & 7 deletions src/mapboxgl/web-map/WebMapViewModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,10 +368,8 @@ export default class WebMapViewModel extends Events {
ignoreIds: string[] = []
) {
layers.forEach(layer => {
if (!ignoreIds) {
const visbleId = this.getLayerVisibleId(layer);
this._appreciableLayersVisibleMap.set(visbleId, visibility === 'visible');
}
const visbleId = this.getLayerVisibleId(layer);
this._appreciableLayersVisibleMap.set(visbleId, visibility === 'visible');
if ('l7MarkerLayer' in layer && !ignoreIds.some(id => id === layer.id)) {
visibility === 'visible' ? layer.l7MarkerLayer.show() : layer.l7MarkerLayer.hide();
return;
Expand Down Expand Up @@ -631,11 +629,15 @@ export default class WebMapViewModel extends Events {
return (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (point * Math.PI) / 360));
}

public setLayersVisible(isShow: boolean, ignoreIds?: string[]) {
public setLayersVisible(isShow: boolean, ignoreIds?: string[], onlyClear?: boolean) {
const visibility = isShow ? 'visible' : 'none';
this._appreciableLayersVisibleMap.clear();
const layers = this._handler?.getAppreciableLayers() ?? [];
this.updateLayersVisible(layers, visibility, ignoreIds);
if (!onlyClear) {
const layers = this._handler?.getAppreciableLayers() ?? [];
this.updateLayersVisible(layers, visibility, ignoreIds);
return;
}
this._styleDataUpdatedHandler();
}

clean() {
Expand Down
3 changes: 1 addition & 2 deletions src/mapboxgl/web-map/control/layer-list/LayerListViewModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ class LayerListViewModel extends mapboxgl.Evented {
}

setMap(mapInfo) {
const { map, webmap } = mapInfo;
this.map = map;
const { webmap } = mapInfo;
this.webmap = webmap;
this.updateFn = this._updateLayers.bind(this);
this.webmap.on({
Expand Down
113 changes: 101 additions & 12 deletions src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ describe('LayerList.vue', () => {
const fetchResource = {
'https://fakeiportal.supermap.io/iportal/web/config/portal.json': iportal_serviceProxy,
'https://fakeiportal.supermap.io/iportal/web/maps/123/map.json': uniqueLayer_point,
'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123': layerData
'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123':
layerData
};
mockFetch(fetchResource);
mapWrapper = mount(SmWebMap, {
Expand Down Expand Up @@ -141,20 +142,21 @@ describe('LayerList.vue', () => {
id: 'test',
visible: true,
type: 'group',
children: [{
id: 'test1',
visible: true,
type: 'vector',
renderLayers: ['test1']
}]
}
wrapper.vm.toggleItemVisibility(item, false)
children: [
{
id: 'test1',
visible: true,
type: 'vector',
renderLayers: ['test1']
}
]
};
wrapper.vm.toggleItemVisibility(item, false);
expect(spyProperty).toHaveBeenCalledTimes(1);
done();
});
};
mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback });

});

it('attributes style', () => {
Expand Down Expand Up @@ -187,7 +189,8 @@ describe('LayerList.vue', () => {
'https://fakeiportal.supermap.io/iportal/web/config/portal.json': iportal_serviceProxy,
'https://fakeiportal.supermap.io/iportal/web/maps/123/map.json': webmap3Datas[0],
'https://fakeiportal.supermap.io/iportal/web/maps/123': webmap3Datas[1],
'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123': layerData
'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123':
layerData
};
mockFetch(fetchResource);
mapWrapper = mount(SmWebMap, {
Expand All @@ -196,7 +199,7 @@ describe('LayerList.vue', () => {
mapId: '123'
}
});
const addCallback = async (data) => {
const addCallback = async data => {
wrapper = mount(SmLayerList, {
propsData: {
mapTarget: 'map'
Expand All @@ -214,4 +217,90 @@ describe('LayerList.vue', () => {
mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback });
await flushPromises();
});

it('render setmap', async done => {
wrapper = mount(SmLayerList);
const layerCatalogs = [
{
children: [
{
dataSource: {
serverId: '',
type: ''
},
id: 'xingkaihu_C@China',
title: 'Xingkaihu_C_txt@China_L10-L10',
type: 'symbol',
visible: true,
renderSource: {
id: 'ms_China_4610_1715416497380_2',
type: 'vector',
sourceLayer: 'Xingkaihu_C_txt@China'
},
renderLayers: ['xingkaihu_C@China'],
themeSetting: {}
},
{
dataSource: {
serverId: '',
type: ''
},
id: 'xingkaihu_B@China',
title: 'Xingkaihu_B_txt@China_L10-L10',
type: 'symbol',
visible: true,
renderSource: {
id: 'ms_China_4610_1715416497380_3',
type: 'vector',
sourceLayer: 'Xingkaihu_B_txt@China'
},
renderLayers: ['xingkaihu_B@China'],
themeSetting: {}
}
],
id: 'ms_group_1715581133212_2',
title: '未命名分组',
type: 'group',
visible: true
},
{
dataSource: {
serverId: '',
type: ''
},
id: 'ms-background',
title: 'ms-background',
type: 'background',
visible: true,
renderSource: {},
renderLayers: ['ms-background'],
themeSetting: {}
}
];
let mockOnOptions;
const webmap = {
getLayerList: () => layerCatalogs,
un: jest.fn(),
on: jest.fn((options) => {
mockOnOptions = options;
})
};
const callback = function() {
expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-hidden').exists()).toBeTruthy();
done();
}
wrapper.vm.viewModel.on('layersUpdated', callback);
wrapper.vm.viewModel.setMap({
webmap
});
wrapper.vm.$options.loaded.call(wrapper.vm);
await wrapper.vm.$nextTick();
expect(wrapper.vm.sourceList).toEqual(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;
mockOnOptions.layersupdated();
mockOn();
});
});

43 changes: 42 additions & 1 deletion src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,14 @@ import StyleRenderer from '../subs/StyleRenderer.vue';
import ImageRenderer from '../subs/ImageRenderer.vue';
import mapLegends from 'vue-iclient/test/unit/mocks/data/WebMap/map_legends.json';
import flushPromises from 'flush-promises';
import SmWebMap from '../../../WebMap';
import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
import iportal_serviceProxy from 'vue-iclient/test/unit/mocks/data/iportal_serviceProxy';
import uniqueLayer_point from 'vue-iclient/test/unit/mocks/data/WebMap/uniqueLayer_point';
import layerData from 'vue-iclient/test/unit/mocks/data/layerData';

describe('Legend.vue', () => {
let wrapper, imageOnload;
let wrapper, mapWrapper, imageOnload;
const documentBak = document;
const ImageBak = Image;

Expand Down Expand Up @@ -50,6 +55,11 @@ describe('Legend.vue', () => {
afterEach(() => {
if (wrapper) {
wrapper.destroy();
wrapper = null;
}
if (mapWrapper) {
mapWrapper.destroy();
mapWrapper = null;
}
jest.resetAllMocks();
});
Expand Down Expand Up @@ -85,5 +95,36 @@ describe('Legend.vue', () => {
expect(wrapper.find(ImageRenderer).exists()).toBeTruthy();
done();
});


it('mapload', async done => {
const fetchResource = {
'https://fakeiportal.supermap.io/iportal/web/config/portal.json': iportal_serviceProxy,
'https://fakeiportal.supermap.io/iportal/web/maps/123/map.json': uniqueLayer_point,
'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999&currentPage=1&parentResType=MAP&parentResId=123':
layerData
};
mockFetch(fetchResource);
mapWrapper = mount(SmWebMap, {
propsData: {
serverUrl: 'https://fakeiportal.supermap.io/iportal',
mapId: '123'
}
});
const addCallback = async function (data) {
wrapper = mount(SmLegend, {
propsData: {
layerNames: ['民航数据'],
}
});
const callback = jest.fn();
wrapper.vm.$on('loaded', callback);
await wrapper.vm.$nextTick();
expect(callback).toHaveBeenCalled();
expect(wrapper.vm.legendList['民航数据']).not.toBeUndefined();
done();
};
mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback });
});
});

2 changes: 1 addition & 1 deletion static/libs/iclient-mapboxgl/iclient-mapboxgl.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 7e0df52

Please sign in to comment.