Skip to content

Commit 207cc48

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】可感知图层优化
1 parent 0e8e988 commit 207cc48

File tree

7 files changed

+252
-14
lines changed

7 files changed

+252
-14
lines changed

‎src/common/mapping/WebMapV2.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,6 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
342342
});
343343
this._setCacheLayer({
344344
parentLayerId: layerInfo.layerID || layerInfo.name,
345-
layerInfo,
346345
subRenderLayers: layerIds.map((layerId) => ({ layerId }))
347346
});
348347
addedCallback && addedCallback();
@@ -515,9 +514,13 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
515514
_initGraticuleLayer(graticuleInfo) {
516515
const options = this._createGraticuleOptions(graticuleInfo);
517516
const graticuleLayer = new mapRepo.supermap.GraticuleLayer(options);
518-
this._addLayer(graticuleLayer);
519517
this._setGraticuleDash(graticuleInfo.lineDash, graticuleLayer);
520518
this._graticuleLayer = graticuleLayer;
519+
this.map.addLayer(graticuleLayer);
520+
this._setCacheLayer({
521+
parentLayerId: graticuleLayer.id,
522+
subRenderLayers: [{ layerId: graticuleLayer.id }, { layerId: graticuleLayer.sourceId }]
523+
});
521524
}
522525

523526
_createGraticuleOptions(graticuleInfo) {
@@ -2791,7 +2794,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
27912794
const layerList = [this._mapInfo.baseLayer].concat(this._mapInfo.layers);
27922795
if (this._graticuleLayer) {
27932796
const { id: layerID, visible } = this._graticuleLayer;
2794-
layerList.push({ layerID, visible });
2797+
layerList.push({ layerID, visible, name: 'GraticuleLayer' });
27952798
}
27962799
// this._mapInfo.layers 是有序的
27972800
layerList.forEach((layerInfo) => {

‎src/common/mapping/utils/AppreciableLayerBase.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class AppreciableLayerBase {
4242
return item.id === layerId;
4343
});
4444
if (!matchLayer) {
45-
matchLayer = this._createCommonFields(layer);
45+
matchLayer = this._createCommonFields(layer, layerId);
4646
layers.push(matchLayer);
4747
}
4848
const nextRenderLayers = matchLayer.renderLayers.concat(
@@ -137,10 +137,9 @@ export class AppreciableLayerBase {
137137
return layersOnMap;
138138
}
139139

140-
_createCommonFields(layer) {
140+
_createCommonFields(layer, layerId) {
141141
const layerInfo = layer.layerInfo || {};
142142
// type: background overlaymanager layers 只有 id
143-
const layerId = this.createAppreciableLayerId(layer);
144143
const {
145144
dataSource = {},
146145
themeSetting = {},

‎src/common/mapping/utils/SourceListModelV2.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,16 @@ export class SourceListModel extends AppreciableLayerBase {
2323
}
2424

2525
createAppreciableLayerId(layer) {
26+
// 针对传入 layers
27+
if (layer.layerInfo && layer.layerInfo.id) {
28+
return layer.layerInfo.id;
29+
}
2630
// 往空地图上追加图层 且 只有一个webmap this.layers是空
27-
// layer.sourceLayer 针对 MapboxStyle
28-
const metadata = layer.metadata || {};
29-
return metadata.parentLayerId || layer.sourceLayer || layer.source || layer.id;
31+
if (layer.metadata && layer.metadata.parentLayerId) {
32+
return layer.metadata.parentLayerId;
33+
}
34+
// 针对 MapboxStyle 或者其它额外的 layer
35+
return layer.sourceLayer || layer.source || layer.id;
3036
}
3137

3238
_initLayers() {
@@ -39,8 +45,9 @@ export class SourceListModel extends AppreciableLayerBase {
3945
const selfLayerIds = [];
4046
// 排序
4147
this.layers.forEach((item) => {
42-
const matchLayer = nextLayers.find((layer) => this._isBelongToMapJSON(item, layer));
43-
if (matchLayer && matchLayer.id === item.id) {
48+
const matchLayers = nextLayers.filter((layer) => this._isBelongToMapJSON(item, layer));
49+
const matchLayer = matchLayers.find(renderLayer => renderLayer.id === item.id);
50+
if (matchLayer) {
4451
selfLayers.push({
4552
...matchLayer,
4653
layerInfo: { ...item, dataSource: item.dataSource || (item.serverId && { serverId: item.serverId }) }

‎test/mapboxgl/mapping/utils/ColorUtilSpec.js renamed to ‎test/common/mapping/utils/ColorUtilSpec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Color from '../../../../src/mapboxgl/mapping/utils/Color';
1+
import Color from '../../../../src/common/mapping/utils/Color';
22

33
describe('ColorUtil', () => {
44
it('toColor', (done) => {

‎test/common/mapping/utils/SourceListModelV2Spec.js

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import { SourceListModel } from '../../../../src/common/mapping/utils/SourceListModelV2';
2+
3+
describe('SourceListV2', () => {
4+
const layers = [
5+
{
6+
id: 'CHINA_DARK',
7+
type: 'raster',
8+
source: 'CHINA_DARK',
9+
minzoom: 0,
10+
maxzoom: 12
11+
},
12+
{
13+
id: 'test-id',
14+
type: 'raster',
15+
source: 'test-source',
16+
minzoom: 0,
17+
maxzoom: 12
18+
},
19+
{
20+
id: 'test-id-label',
21+
type: 'raster',
22+
source: 'test-source',
23+
minzoom: 0,
24+
maxzoom: 12,
25+
metadata: { parentLayerId: 'test-source' }
26+
},
27+
{
28+
id: 'tracklayer-1-line',
29+
type: 'line',
30+
source: 'tracklayer-1-line',
31+
layout: {
32+
'line-cap': 'round',
33+
'line-join': 'round'
34+
},
35+
paint: {
36+
'line-color': '#065726',
37+
'line-width': 5,
38+
'line-opacity': 0.8
39+
}
40+
},
41+
{
42+
id: 'tdt-search-line',
43+
type: 'line',
44+
source: 'tdt-search-line',
45+
layout: {
46+
'line-cap': 'round',
47+
'line-join': 'round'
48+
},
49+
paint: {
50+
'line-color': '#065726',
51+
'line-width': 5,
52+
'line-opacity': 0.8
53+
}
54+
},
55+
{
56+
id: 'tdt-route-line',
57+
type: 'line',
58+
source: 'tdt-route-line',
59+
layout: {
60+
'line-cap': 'round',
61+
'line-join': 'round'
62+
},
63+
paint: {
64+
'line-color': '#065726',
65+
'line-width': 5,
66+
'line-opacity': 0.8
67+
}
68+
},
69+
{
70+
id: 'smmeasure',
71+
type: 'line',
72+
source: 'smmeasure',
73+
layout: {
74+
'line-cap': 'round',
75+
'line-join': 'round'
76+
},
77+
paint: {
78+
'line-color': '#065726',
79+
'line-width': 5,
80+
'line-opacity': 0.8
81+
}
82+
},
83+
84+
{
85+
id: 'mapbox-gl-draw',
86+
type: 'line',
87+
source: 'mapbox-gl-draw',
88+
layout: {
89+
'line-cap': 'round',
90+
'line-join': 'round'
91+
},
92+
paint: {
93+
'line-color': '#065726',
94+
'line-width': 5,
95+
'line-opacity': 0.8
96+
}
97+
},
98+
{
99+
id: 'mapbox-gl-draw-line',
100+
type: 'line',
101+
source: 'mapbox-gl-draw',
102+
layout: {
103+
'line-cap': 'round',
104+
'line-join': 'round'
105+
},
106+
paint: {
107+
'line-color': '#065726',
108+
'line-width': 5,
109+
'line-opacity': 0.8
110+
}
111+
},
112+
{
113+
id: 'background',
114+
type: 'background',
115+
layout: {
116+
visibility: 'visible'
117+
},
118+
paint: {
119+
'background-color': '#065726',
120+
'background-opacity': 0.5
121+
}
122+
},
123+
{
124+
id: 'test-SM-highlight',
125+
type: 'line',
126+
source: 'mapbox-gl-draw',
127+
layout: {
128+
'line-cap': 'round',
129+
'line-join': 'round'
130+
},
131+
paint: {
132+
'line-color': '#065726',
133+
'line-width': 5,
134+
'line-opacity': 0.8
135+
}
136+
},
137+
{
138+
id: 'graticuleLayer_1723443238046_line',
139+
type: 'line',
140+
source: 'graticuleLayer_1723443238046_line',
141+
layout: {
142+
'line-join': 'round',
143+
'line-cap': 'round',
144+
visibility: 'visible'
145+
},
146+
paint: {
147+
'line-color': '#15eec2',
148+
'line-width': 2,
149+
'line-offset': 0,
150+
'line-translate-anchor': 'viewport',
151+
'line-dasharray': [0.5, 4]
152+
}
153+
}
154+
];
155+
const map = {
156+
getStyle() {
157+
return {
158+
layers
159+
};
160+
},
161+
getSource() {
162+
return {
163+
type: 'geojson',
164+
data: {
165+
type: 'FeatureCollection',
166+
features: []
167+
}
168+
};
169+
},
170+
getLayer(id) {
171+
return layers.find((layer) => layer.id === id);
172+
},
173+
overlayLayersManager: {
174+
graticuleLayer_1723443238046: {
175+
id: 'graticuleLayer_1723443238046',
176+
overlay: true,
177+
renderingMode: '3d',
178+
type: 'custom',
179+
visible: true,
180+
sourceId: 'graticuleLayer_1723443238046_line'
181+
}
182+
}
183+
};
184+
185+
it('getLayers', (done) => {
186+
const sourceListModel = new SourceListModel({ map });
187+
const appreciableLayers = sourceListModel.getLayers();
188+
const selfAppreciableLayers = sourceListModel.getSelfLayers();
189+
expect(appreciableLayers.length).toBe(3);
190+
expect(appreciableLayers[1].title).toBe('test-source');
191+
expect(appreciableLayers[1].renderLayers).toEqual(['test-id', 'test-id-label']);
192+
expect(appreciableLayers[2].title).toBe('graticuleLayer_1723443238046_line');
193+
expect(appreciableLayers[2].renderLayers).toEqual(['graticuleLayer_1723443238046_line', 'graticuleLayer_1723443238046']);
194+
expect(selfAppreciableLayers.length).toBe(0);
195+
done();
196+
});
197+
198+
it('getSelfLayers', (done) => {
199+
const sourceListModel = new SourceListModel({
200+
map,
201+
layers: [
202+
{
203+
name: 'GraticuleLayer',
204+
id: 'graticuleLayer_1723443238046',
205+
visible: true,
206+
renderLayers: ['graticuleLayer_1723443238046', 'graticuleLayer_1723443238046_line']
207+
}
208+
]
209+
});
210+
const appreciableLayers = sourceListModel.getLayers();
211+
const selfAppreciableLayers = sourceListModel.getSelfLayers(appreciableLayers);
212+
expect(appreciableLayers.length).toBe(3);
213+
expect(selfAppreciableLayers.length).toBe(1);
214+
expect(selfAppreciableLayers[0].title).toBe('GraticuleLayer');
215+
expect(selfAppreciableLayers[0].renderLayers).toEqual([
216+
'graticuleLayer_1723443238046',
217+
'graticuleLayer_1723443238046_line'
218+
]);
219+
done();
220+
});
221+
222+
it('getSourceList', (done) => {
223+
const sourceListModel = new SourceListModel({ map });
224+
const appreciableLayers = sourceListModel.getSourceList();
225+
expect(appreciableLayers.length).toBe(3);
226+
done();
227+
})
228+
});

‎test/test-main-common.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,5 +226,7 @@ import './common/util/MapCalculateUtilSpec';
226226
import './common/util/GeometryAnalysisSpec.js';
227227

228228
import './common/mapping/utils/L7LayerUtilSpec';
229+
import './common/mapping/utils/ColorUtilSpec.js';
230+
import './common/mapping/utils/SourceListModelV2Spec.js';
229231
import './common/mapping/WebMapServiceSpec';
230232
import './common/mapping/WebMapBaseSpec';

‎test/test-main-mapboxgl.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './mapboxgl/core/MapExtendSpec.js';
22
import './mapboxgl/core/UtilSpec.js';
3+
import './mapboxgl/core/decryptSourceSpec.js';
34

45
/*mapboxgl -- control*/
56
import './mapboxgl/control/LogoSpec.js';
@@ -84,5 +85,3 @@ import './mapboxgl/mapping/WebMapSpec.js';
8485
import './mapboxgl/mapping/WebMapV3Spec.js';
8586
import './mapboxgl/mapping/InitMapSpec.js';
8687
import './mapboxgl/mapping/VideoMapSpec.js';
87-
import './mapboxgl/mapping/utils/L7LayerUtilSpec.js';
88-
import './mapboxgl/mapping/utils/ColorUtilSpec.js';

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy