diff --git a/src/mapboxgl/_types/__tests__/map-event.spec.js b/src/mapboxgl/_types/__tests__/map-event.spec.js index 23942d1d..18bbcfbf 100644 --- a/src/mapboxgl/_types/__tests__/map-event.spec.js +++ b/src/mapboxgl/_types/__tests__/map-event.spec.js @@ -49,7 +49,10 @@ describe('map-event-mapboxgl', () => { }; const webmap3 = { setLayersVisible: spyFn, - getAppreciableLayers: () => [{ id: 'layer1', renderSource: { id: 'layer1' }, reused: true }, { id: 'layer3', renderSource: { id: 'layer3' } }], + getAppreciableLayers: () => [ + { id: 'layer1', renderSource: { id: 'layer1' }, reused: true }, + { id: 'layer3', renderSource: { id: 'layer3' } } + ], cacheLayerIds: ['layer1', 'layer3'] }; mapEvent.$options.setWebMap(mapTarget, mainWebMap); @@ -156,7 +159,7 @@ describe('map-event-mapboxgl', () => { visible: true, children: [{ id: 'sourceLayer4', renderSource: { id: 'source4', sourceLayer: 'sourceLayer4' }, visible: true }] } - ] + ]; const mainWebMap = { getLayerList: () => layerList1 }; @@ -214,6 +217,12 @@ describe('map-event-mapboxgl', () => { type: 'group', visible: true, children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' }, visible: false }] + }, + { + id: 'group3', + type: 'group', + visible: true, + children: [] } ]; const mainWebMap = { @@ -226,6 +235,108 @@ describe('map-event-mapboxgl', () => { expect(layerList[0].visible).toBe(true); expect(layerList[1].id).toBe('group2'); expect(layerList[1].visible).toBe(false); + expect(layerList[2].id).toBe('group3'); + expect(layerList[2].visible).toBe(true); + done(); + }); + + it('Rearrange LayerList by layerorder', done => { + const layerList1 = [ + { + id: '国内航班数据_100', + type: 'MIGRATION', + layerOrder: 'top', + title: '国内航班数据_100', + renderSource: {}, + renderLayers: ['国内航班数据_100'], + visible: true + }, + { + dataSource: {}, + id: '动态标记图层-1', + title: '动态标记图层-1', + renderSource: { id: '动态标记图层-1', type: 'geojson' }, + renderLayers: ['动态标记图层-1'], + type: 'circle', + themeSetting: {}, + visible: true, + layerOrder: 'Top' + }, + { + dataSource: {}, + id: 'dataflowcsv_1727660246868', + title: 'dataflowcsv', + renderSource: { id: 'dataflowcsv_1727660246868', type: 'geojson' }, + renderLayers: ['dataflowcsv_1727660246868'], + type: 'circle', + themeSetting: {}, + visible: true, + layerOrder: 'auto' + } + ]; + const layerList2 = [ + { + dataSource: {}, + id: '天地图影像', + title: '天地图影像', + renderSource: { id: '天地图影像', type: 'raster' }, + renderLayers: ['天地图影像', '天地图影像-tdt-label'], + type: 'raster', + themeSetting: {}, + visible: true, + layerOrder: 'bottom' + }, + { + dataSource: { accessType: 'DIRECT', type: 'PORTAL_DATA', serverId: '738100865' }, + id: '中国气象观测站 (1)', + title: '中国气象观测站 (1)', + renderSource: { id: '中国气象观测站 (1)', type: 'geojson' }, + renderLayers: ['中国气象观测站 (1)'], + type: 'circle', + themeSetting: { + maxRadius: 12, + themeField: '区站号', + customSettings: {}, + minRadius: 6, + segmentMethod: 'offset', + segmentCount: 6 + }, + visible: true + } + ]; + const mainWebMap = { + getLayerList: () => layerList1, + getAppreciableLayers: () => layerList1.slice().reverse(), + cacheLayerCatalogIds: layerList1.map(item => item.id) + }; + const webmap2 = { + getLayerList: () => layerList2, + getAppreciableLayers: () => layerList2.slice().reverse(), + cacheLayerCatalogIds: layerList2.map(item => item.id), + map: { + fire: jest.fn() + } + }; + mapEvent.$options.setWebMap(mapTarget, mainWebMap); + mapEvent.$options.setWebMap(mapTarget, webmap2, 'webmap2'); + const webmap = mapEvent.$options.getWebMap(mapTarget); + const layerList = webmap.getLayerList(); + expect(layerList.length).toBe(5); + expect(layerList[0]).toEqual(layerList1[0]); + expect(layerList[1]).toEqual(layerList1[1]); + expect(layerList[2]).toEqual(layerList2[1]); + expect(layerList[3]).toEqual(layerList1[2]); + expect(layerList[4]).toEqual(layerList2[0]); + const layers = webmap.getAppreciableLayers(); + expect(layers.length).toBe(5); + expect(layers[0]).toEqual(layerList2[0]); + expect(layers[1]).toEqual(layerList2[1]); + expect(layers[2]).toEqual(layerList1[2]); + expect(layers[3]).toEqual(layerList1[1]); + expect(layers[4]).toEqual(layerList1[0]); + expect(webmap2.map.fire).toHaveBeenCalledWith('data', { dataType: 'style' }); + const allWebMap = mapEvent.$options.getAllWebMap(); + expect(allWebMap[mapTarget]).not.toBeUndefined(); done(); }); }); diff --git a/src/mapboxgl/_types/map-event.js b/src/mapboxgl/_types/map-event.js index 68c3d872..f78dd487 100644 --- a/src/mapboxgl/_types/map-event.js +++ b/src/mapboxgl/_types/map-event.js @@ -158,12 +158,13 @@ export default new Vue({ let topLayers = layers.filter(item => item.layerOrder && item.layerOrder.toLowerCase() === 'top'); const migrationLayers = topLayers.filter(item => item.type === 'MIGRATION'); const leftTopLayers = topLayers.filter(item => item.type !== 'MIGRATION'); - topLayers = migrationLayers.concat(leftTopLayers); const bottomLayers = layers.filter(item => item.layerOrder && item.layerOrder.toLowerCase() === 'bottom'); const autoLayers = layers.filter(item => !item.layerOrder || item.layerOrder.toLowerCase() === 'auto'); if (revert) { + topLayers = leftTopLayers.concat(migrationLayers); return bottomLayers.concat(autoLayers, topLayers); } + topLayers = migrationLayers.concat(leftTopLayers); return topLayers.concat(autoLayers, bottomLayers); } });