Skip to content

Commit 867365c

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】可感知图层列表优化; dataflow/经纬网加载优化; 图层顺序优化
1 parent 5777acb commit 867365c

File tree

6 files changed

+514
-349
lines changed

6 files changed

+514
-349
lines changed

‎src/mapboxgl/core/MapExtend.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export var MapExtend = (function () {
9797
: this._moveToHandler(id, beforeId);
9898
return this;
9999
}
100-
if (this.style._layers[id] && this.style._layers[beforeId]) {
100+
if (this.style._layers[id]) {
101101
this.style.moveLayer(id, beforeId);
102102
this._update(true);
103103
}

‎src/mapboxgl/mapping/WebMap.js

Lines changed: 52 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ const WORLD_WIDTH = 360;
5252
export class WebMap extends mapboxgl.Evented {
5353
constructor(
5454
id,
55-
options = {},
56-
mapOptions = {},
57-
map,
58-
layerFilter = function () {
59-
return true;
60-
}
55+
options = {
56+
layerFilter: function () {
57+
return true;
58+
}
59+
},
60+
mapOptions = { style: { version: 8, sources: {}, layers: [] } }
6161
) {
6262
super();
6363
this.mapId = id;
@@ -70,12 +70,15 @@ export class WebMap extends mapboxgl.Evented {
7070
mapOptions.center = [0, 0];
7171
mapOptions.zoom = 0;
7272
}
73+
if (options.map) {
74+
this.map = options.map;
75+
}
7376
this.options = Object.assign({}, options);
77+
delete this.options.map;
7478
this.options.serverUrl = transformServerUrl(options.server);
7579
this.options.target = options.target || 'map';
7680
this.options.withCredentials = options.withCredentials || false;
7781
this.mapOptions = mapOptions;
78-
this.layerFilter = layerFilter;
7982
this.webMapService = new WebMapService(id, options);
8083
this.eventTypes = [
8184
'getmapinfofailed',
@@ -85,16 +88,14 @@ export class WebMap extends mapboxgl.Evented {
8588
'notsupportbaidumap',
8689
'dataflowfeatureupdated',
8790
'addlayerssucceeded',
91+
'addlayerchanged',
8892
'getlayersfailed',
8993
'beforeremovemap',
9094
'crsnotsupport'
9195
];
9296
this._mapInitializedHandler = this._mapInitializedHandler.bind(this);
9397
this._addLayersSucceededHandler = this._addLayersSucceededHandler.bind(this);
94-
if (map) {
95-
this.map = map;
96-
this._appendLayers = true;
97-
}
98+
this._addLayerChangedHandler = this._addLayerChangedHandler.bind(this);
9899
this._initWebMap(!this.map);
99100
}
100101

@@ -221,46 +222,15 @@ export class WebMap extends mapboxgl.Evented {
221222
this._handler && this._handler.updateOverlayLayer(layerInfo, features, mergeByField);
222223
}
223224

224-
getCacheLayerIds() {
225-
return (
226-
this._cacheLayerIds ||
227-
this._cacheCleanLayers.reduce((ids, item) => {
228-
ids.push(...item.renderLayers);
229-
return ids;
230-
}, [])
231-
);
232-
}
233-
234225
copyLayer(id, layerInfo) {
235226
return this._handler && this._handler.copyLayer(id, layerInfo);
236227
}
237228

238-
cleanLayers() {
239-
this._taskID = null;
240-
const sourceList = [];
229+
clean(removeMap = true) {
241230
if (this.map) {
242-
for (const item of this._cacheCleanLayers) {
243-
item.renderLayers.forEach((layerId) => {
244-
if (this.map.getLayer(layerId)) {
245-
this.map.removeLayer(layerId);
246-
}
247-
});
248-
if (this.map.getSource(item.renderSource.id) && !item.l7Layer) {
249-
sourceList.push(item.renderSource.id);
250-
}
251-
}
252-
Array.from(new Set(sourceList)).forEach((sourceId) => {
253-
this.map.removeSource(sourceId);
254-
});
255-
}
256-
this._cacheCleanLayers = [];
257-
}
258-
259-
clean() {
260-
if (this.map) {
261-
this.fire('beforeremovemap', { map: this.map });
231+
removeMap && this.fire('beforeremovemap', { map: this.map });
262232
if (this._handler) {
263-
this._handler.clean();
233+
this._handler.clean(removeMap);
264234
this._handler = null;
265235
}
266236
this.map = null;
@@ -271,6 +241,29 @@ export class WebMap extends mapboxgl.Evented {
271241
}
272242
}
273243

244+
cleanLayers() {
245+
// 清空追加的地图图层以及对应的事件
246+
if (!this.map) {
247+
return;
248+
}
249+
const sourceList = [];
250+
for (const item of this._cacheCleanLayers) {
251+
item.renderLayers.forEach((layerId) => {
252+
if (this.map.getLayer(layerId)) {
253+
this.map.removeLayer(layerId);
254+
}
255+
});
256+
if (this.map.getSource(item.renderSource.id) && !item.l7Layer) {
257+
sourceList.push(item.renderSource.id);
258+
}
259+
}
260+
Array.from(new Set(sourceList)).forEach((sourceId) => {
261+
this.map.removeSource(sourceId);
262+
});
263+
this._cacheCleanLayers = [];
264+
this.clean(false);
265+
}
266+
274267
_initWebMap(clean = true) {
275268
clean && this.clean();
276269
if (this.webMapInfo) {
@@ -372,7 +365,7 @@ export class WebMap extends mapboxgl.Evented {
372365
}
373366

374367
_createWebMapV2(commonOptions, mapOptions) {
375-
const webMapHandler = new WebMapV2(this.mapId, commonOptions, mapOptions, this.layerFilter);
368+
const webMapHandler = new WebMapV2(this.mapId, commonOptions, mapOptions);
376369
return webMapHandler;
377370
}
378371

@@ -394,16 +387,14 @@ export class WebMap extends mapboxgl.Evented {
394387
this.fire('mapinitialized', { map: this.map });
395388
}
396389

397-
_addLayersSucceededHandler({ mapparams, layers, cacheLayerIds }) {
398-
this.mapParams = mapparams;
399-
this._cacheCleanLayers = layers;
400-
this._cacheLayerIds = cacheLayerIds;
401-
this.fire('addlayerssucceeded', {
402-
map: this.map,
403-
mapparams: this.mapParams,
404-
layers,
405-
cacheLayerIds
406-
});
390+
_addLayersSucceededHandler(params) {
391+
this.mapParams = params.mapparams;
392+
this.fire('addlayerssucceeded', params);
393+
}
394+
395+
_addLayerChangedHandler(params) {
396+
this._cacheCleanLayers = params.layers;
397+
this.fire('addlayerchanged', params);
407398
}
408399

409400
_getMapInfo(mapInfo) {
@@ -415,9 +406,7 @@ export class WebMap extends mapboxgl.Evented {
415406
const commonOptions = {
416407
...this.options,
417408
iportalServiceProxyUrlPrefix: this.webMapService.iportalServiceProxyUrl,
418-
serverUrl: this.options.serverUrl,
419-
withCredentials: this.options.withCredentials,
420-
target: this.options.target
409+
serverUrl: this.options.serverUrl
421410
};
422411
const commonEvents = {
423412
...this.eventTypes.reduce((events, name) => {
@@ -427,7 +416,8 @@ export class WebMap extends mapboxgl.Evented {
427416
return events;
428417
}, {}),
429418
mapinitialized: this._mapInitializedHandler,
430-
addlayerssucceeded: this._addLayersSucceededHandler
419+
addlayerssucceeded: this._addLayersSucceededHandler,
420+
addlayerchanged: this._addLayerChangedHandler
431421
};
432422
const mapOptions = cloneDeep(this.mapOptions);
433423
switch (type) {
@@ -446,10 +436,11 @@ export class WebMap extends mapboxgl.Evented {
446436
this._handler.on(type, commonEvents[type]);
447437
}
448438
let _mapInfo = {};
439+
const layerFilter = this.options.layerFilter;
449440
if (mapInfo) {
450441
_mapInfo = {
451442
...mapInfo,
452-
layers: typeof this.layerFilter === 'function' ? mapInfo.layers.filter(this.layerFilter) : mapInfo.layers
443+
layers: typeof layerFilter === 'function' ? mapInfo.layers.filter(layerFilter) : mapInfo.layers
453444
};
454445
}
455446
this._handler.initializeMap(_mapInfo, this.map);

‎src/mapboxgl/mapping/utils/SourceListModel.js

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ export class SourceListModel {
66
this.layers = options.layers || [];
77
this.appendLayers = options.appendLayers || false;
88
this.excludeSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw', /tracklayer-\d+-line/];
9+
this.excludeLayerTypes = ['background'];
10+
}
11+
12+
setSelfLayers(layers) {
13+
this.layers = layers;
914
}
1015

1116
getLayers() {
@@ -28,9 +33,9 @@ export class SourceListModel {
2833
}
2934

3035
_initLayers() {
31-
const layersOnMap = this.map.getStyle().layers.map(layer => this.map.getLayer(layer.id));
36+
const layersOnMap = this.map.getStyle().layers.map((layer) => this.map.getLayer(layer.id));
3237
const overlayLayers = Object.values(this.map.overlayLayersManager).reduce((layers, overlayLayer) => {
33-
if (overlayLayer.id && !layers.some(item => item.id === overlayLayer.id)) {
38+
if (overlayLayer.id && !layers.some((item) => item.id === overlayLayer.id)) {
3439
const visibility =
3540
overlayLayer.visibility === 'visible' ||
3641
overlayLayer.visibility ||
@@ -53,27 +58,30 @@ export class SourceListModel {
5358
}, []);
5459
const renderLayers = layersOnMap
5560
.concat(overlayLayers)
56-
.filter(layer => !this.appendLayers || this.layers.some(item => layer.id === item.id));
57-
const nextLayers = renderLayers
58-
.filter(layer => this.excludeSource(layer.source))
59-
.filter(layer => !layer.id.includes('-SM-'));
61+
.filter((layer) => !this.appendLayers || this.layers.some((item) => this._isBelongToMapJSON(item, layer)));
62+
const nextLayers = renderLayers.filter(
63+
(layer) =>
64+
!layer.id.includes('-SM-') &&
65+
!this.excludeLayerTypes.some((item) => item === layer.type) &&
66+
this.excludeSource(layer.source)
67+
);
6068
const selfLayers = [];
6169
const selfLayerIds = [];
6270
// 排序
63-
this.layers.forEach(item => {
64-
const matchLayer = nextLayers.find(layer => layer.id === item.id);
65-
if (matchLayer) {
66-
selfLayers.push(matchLayer);
67-
selfLayerIds.push(matchLayer.id);
71+
this.layers.forEach((item) => {
72+
const matchLayer = nextLayers.find((layer) => this._isBelongToMapJSON(item, layer));
73+
if (matchLayer && matchLayer.id === item.id) {
74+
selfLayers.push({ ...matchLayer, layerInfo: item });
75+
selfLayerIds.push(...item.renderLayers);
6876
}
6977
});
70-
const otherLayers = nextLayers.filter(item => !selfLayerIds.includes(item.id));
78+
const otherLayers = nextLayers.filter((item) => !selfLayerIds.includes(item.id));
7179
return selfLayers.concat(otherLayers);
7280
}
7381

7482
_initSource(detailLayers) {
7583
const datas = detailLayers.reduce((sourceList, layer) => {
76-
let matchItem = sourceList.find(item => {
84+
let matchItem = sourceList.find((item) => {
7785
const sourceId = layer.renderSource.id || layer.id;
7886
return item.id === sourceId;
7987
});
@@ -92,23 +100,27 @@ export class SourceListModel {
92100
_initAppreciableLayers(detailLayers) {
93101
// dv 没有关联一个可感知图层对应对个渲染图层的关系，默认相同source的layer就是渲染图层
94102
return detailLayers.reduce((layers, layer) => {
95-
let matchLayer = layers.find(item => {
96-
const layerId = layer.sourceLayer || layer.source || layer.id;
103+
const layerId = this._createAppreciableLayerId(layer);
104+
let matchLayer = layers.find((item) => {
97105
return item.id === layerId;
98106
});
99107
if (!matchLayer) {
100108
matchLayer = this._createCommonFields(layer);
101109
layers.push(matchLayer);
102110
}
103-
matchLayer.renderLayers.push(layer.id);
111+
if (layer.layerInfo) {
112+
matchLayer.renderLayers.push(...layer.layerInfo.renderLayers);
113+
} else {
114+
matchLayer.renderLayers.push(layer.id);
115+
}
104116
return layers;
105117
}, []);
106118
}
107119

108120
_createCommonFields(layer) {
109-
const layerInfo = this.layers.find(layerItem => layer.id === layerItem.id) || {};
121+
const layerInfo = layer.layerInfo || {};
110122
// type: background overlaymanager layers 只有 id
111-
const layerId = layer.sourceLayer || layer.source || layer.id;
123+
const layerId = this._createAppreciableLayerId(layer);
112124
const {
113125
dataSource,
114126
themeSetting = {},
@@ -122,10 +134,12 @@ export class SourceListModel {
122134
title: name,
123135
type: layer.type,
124136
visible,
125-
renderSource: {
126-
id: layer.source,
127-
type: sourceOnMap && sourceOnMap.type
128-
},
137+
renderSource: sourceOnMap
138+
? {
139+
id: layer.source,
140+
type: sourceOnMap.type
141+
}
142+
: {},
129143
renderLayers: [],
130144
dataSource: dataSource || (serverId ? { serverId } : {}),
131145
themeSetting
@@ -135,4 +149,15 @@ export class SourceListModel {
135149
}
136150
return fields;
137151
}
152+
153+
_isBelongToMapJSON(layerFromMapJSON, layerOnMap) {
154+
return layerFromMapJSON.renderLayers.some((subLayerId) => subLayerId === layerOnMap.id);
155+
}
156+
157+
_createAppreciableLayerId(layer) {
158+
// 往空地图上追加图层 且 只有一个webmap this.layers是空
159+
// layer.sourceLayer 针对 MapboxStyle
160+
const metadata = layer.metadata || {};
161+
return metadata.parentLayerId || layer.sourceLayer || layer.source || layer.id;
162+
}
138163
}

‎src/mapboxgl/mapping/webmap/MapStyle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export class MapStyle extends createMapClassExtending(mapboxgl.Evented) {
6565
});
6666
}
6767

68-
clean() {
68+
clean(removeMap = true) {
6969
if (this.map) {
70-
this.map.remove();
70+
removeMap && this.map.remove();
7171
this.map = null;
7272
this._sourceListModel = null;
7373
}

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