Skip to content

Commit 8b55594

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【feature】抽取可感知图层公共部分
1 parent 9a5f616 commit 8b55594

File tree

14 files changed

+544
-635
lines changed

14 files changed

+544
-635
lines changed

‎src/common/mapping/MapBase.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ export function createMapClassExtending(SuperClass = class {}) {
22
return class MapBase extends SuperClass {
33
constructor() {
44
super();
5+
this._sourceListModel = null;
6+
this._legendList = [];
57
}
68

79
initializeMap() {
@@ -13,15 +15,19 @@ export function createMapClassExtending(SuperClass = class {}) {
1315
}
1416

1517
getLayerCatalog() {
16-
throw new Error('getLayerCatalog is not implemented');
18+
return (this._sourceListModel && this._sourceListModel.getSourceList()) || [];
19+
}
20+
21+
getAppreciableLayers() {
22+
return (this._sourceListModel && this._sourceListModel.getLayers()) || [];
1723
}
1824

1925
getLegendInfo() {
20-
throw new Error('getLegendInfo is not implemented');
26+
return this._legendList;
2127
}
2228

23-
getAppreciableLayers() {
24-
throw new Error('getAppreciableLayers is not implemented');
29+
getSelfAppreciableLayers(appreciableLayers) {
30+
return (this._sourceListModel && this._sourceListModel.getSelfLayers(appreciableLayers)) || [];
2531
}
2632

2733
echartsLayerResize() {}

‎src/common/mapping/MapStyle.js

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import { WebMapService } from "./WebMapService";
2-
import { SourceListModel } from './utils/SourceListModel';
1+
import { WebMapService } from './WebMapService';
2+
import { SourceListModel } from './utils/SourceListModelV2';
33

44
export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
55
return class MapStyle extends SuperClass {
6-
constructor(
7-
id,
8-
options = {},
9-
mapOptions = {}
10-
) {
6+
constructor(id, options = {}, mapOptions = {}) {
117
super();
128
this.options = options;
139
this.mapOptions = mapOptions;
1410
this.webMapService = new WebMapService(id, options);
1511
this._layerIdRenameMapList = [];
1612
this._appendLayers = false;
1713
}
18-
14+
1915
initializeMap(_, map) {
2016
if (map) {
2117
this._appendLayers = true;
@@ -62,38 +58,25 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
6258
this._sendMapToUser();
6359
});
6460
}
65-
61+
6662
clean(removeMap = true) {
6763
if (this.map) {
68-
this.map.remove();
6964
removeMap && this.map.remove();
7065
this.map = null;
7166
this._sourceListModel = null;
7267
}
7368
}
74-
75-
getLayerCatalog() {
76-
return this._sourceListModel && this._sourceListModel.getSourceList() || [];
77-
}
78-
79-
getLegendInfo() {
80-
return [];
81-
}
82-
83-
getAppreciableLayers() {
84-
return this._sourceListModel && this._sourceListModel.getLayers() || [];
85-
}
86-
69+
8770
_addLayersToMap() {
8871
const { sources, layers, layerIdMapList } = this._setUniqueId(this.mapOptions.style);
89-
layers.forEach(layer => {
72+
layers.forEach((layer) => {
9073
layer.source && !this.map.getSource(layer.source) && this.map.addSource(layer.source, sources[layer.source]);
9174
this.map.addLayer(layer);
9275
});
9376
this._layerIdRenameMapList = layerIdMapList;
9477
this._sendMapToUser();
9578
}
96-
79+
9780
_setUniqueId(style) {
9881
const layersToMap = JSON.parse(JSON.stringify(style.layers));
9982
const nextSources = {};
@@ -125,36 +108,34 @@ export function createMapStyleExtending(SuperClass, { MapManager, mapRepo }) {
125108
layerIdMapList: layerIdToChange
126109
};
127110
}
128-
111+
129112
_generateAppreciableLayers() {
130113
const layers = this.mapOptions.style.layers.map((layer) => {
131-
const matchLayer = this._layerIdRenameMapList.find(item => item.originId === layer.id) || { renderId: layer.id };
114+
const matchLayer = this._layerIdRenameMapList.find((item) => item.originId === layer.id) || {
115+
renderId: layer.id
116+
};
132117
const overlayLayers = {
133118
id: matchLayer.renderId,
134-
name: layer.id
119+
name: layer.id,
120+
renderLayers: [matchLayer.renderId]
135121
};
136122
return overlayLayers;
137123
});
138124
return layers;
139125
}
140-
126+
141127
_sendMapToUser() {
142-
const appreciableLayers = this._generateAppreciableLayers();
128+
const layersFromStyle = this._generateAppreciableLayers();
143129
this._sourceListModel = new SourceListModel({
144130
map: this.map,
145-
layers: appreciableLayers,
131+
layers: layersFromStyle,
146132
appendLayers: this._appendLayers
147133
});
148-
const matchLayers = this.getAppreciableLayers().filter((item) =>
149-
appreciableLayers.some((layer) => layer.id === item.id)
150-
);
151134
this.fire('addlayerssucceeded', {
152135
map: this.map,
153136
mapparams: { title: this.mapOptions.name, description: '' },
154-
layers: matchLayers
137+
layers: this.getSelfAppreciableLayers()
155138
});
156139
}
157-
158-
}
140+
};
159141
}
160-

‎src/common/mapping/WebMap.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
'beforeremovemap',
9090
'crsnotsupport'
9191
];
92+
this._cacheCleanLayers = [];
9293
this._mapInitializedHandler = this._mapInitializedHandler.bind(this);
9394
this._addLayersSucceededHandler = this._addLayersSucceededHandler.bind(this);
9495
this._addLayerChangedHandler = this._addLayerChangedHandler.bind(this);
@@ -374,6 +375,7 @@
374375

375376
_addLayersSucceededHandler(params) {
376377
this.mapParams = params.mapparams;
378+
this._cacheCleanLayers = params.layers;
377379
this.fire('addlayerssucceeded', params);
378380
}
379381

‎src/common/mapping/WebMapBase.js

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -392,51 +392,6 @@ export function createWebMapBaseExtending(SuperClass = Events, fireField = 'trig
392392
return features;
393393
}
394394

395-
mergeFeatures(layerId, features, mergeByField) {
396-
if (!(features instanceof Array)) {
397-
return features;
398-
}
399-
features = features.map((feature, index) => {
400-
if (!Object.prototype.hasOwnProperty.call(feature.properties, 'index')) {
401-
feature.properties.index = index;
402-
}
403-
return feature;
404-
});
405-
if (!features.length || !mergeByField && features[0].geometry) {
406-
return features;
407-
}
408-
const source = this.map.getSource(layerId);
409-
if ((!source || !source._data.features) && features[0].geometry) {
410-
return features;
411-
}
412-
const prevFeatures = source && source._data && source._data.features;
413-
const nextFeatures = [];
414-
if (!mergeByField && prevFeatures) {
415-
return prevFeatures;
416-
}
417-
features.forEach((feature) => {
418-
const prevFeature = prevFeatures.find((item) => {
419-
if (isNaN(+item.properties[mergeByField]) && isNaN(+feature.properties[mergeByField])) {
420-
return (
421-
JSON.stringify(item.properties[mergeByField] || '') ===
422-
JSON.stringify(feature.properties[mergeByField] || '')
423-
);
424-
} else {
425-
return +item.properties[mergeByField] === +feature.properties[mergeByField];
426-
}
427-
});
428-
if (prevFeature) {
429-
nextFeatures.push({
430-
...prevFeature,
431-
...feature
432-
});
433-
} else if (feature.geometry) {
434-
nextFeatures.push(feature);
435-
}
436-
});
437-
return nextFeatures;
438-
}
439-
440395
getFilterFeatures(filterCondition, allFeatures) {
441396
if (!filterCondition) {
442397
return allFeatures;

‎src/common/mapping/WebMapV2.js

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { ColorsPickerUtil } from '../util/ColorsPickerUtil';
88
import { Util } from '../commontypes/Util';
99
import { ArrayStatistic } from '../util/ArrayStatistic';
1010
import { FetchRequest } from '../util/FetchRequest';
11-
import { SourceListModel } from './utils/SourceListModel';
11+
import { SourceListModel } from './utils/SourceListModelV2';
12+
import { mergeFeatures } from './utils/util';
1213

1314
export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
1415
return class WebMap extends SuperClass {
@@ -36,7 +37,6 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
3637
this.rasterTileSize = mapOptions.rasterTileSize || 256;
3738
this.layerFilter = options.layerFilter;
3839
this.checkSameLayer = options.checkSameLayer;
39-
this._legendList = [];
4040
this._taskID = new Date();
4141
this._cacheLayerId = new Map();
4242
this._layerTimerList = [];
@@ -80,18 +80,6 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
8080
}
8181
}
8282

83-
getLayerCatalog() {
84-
return (this._sourceListModel && this._sourceListModel.getSourceList()) || [];
85-
}
86-
87-
getLegendInfo() {
88-
return this._legendList;
89-
}
90-
91-
getAppreciableLayers() {
92-
return (this._sourceListModel && this._sourceListModel.getLayers()) || [];
93-
}
94-
9583
_initWebMap() {}
9684

9785
_loadLayers(mapInfo, _taskID) {
@@ -355,7 +343,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
355343
this._setCacheLayer({
356344
parentLayerId: layerInfo.layerID || layerInfo.name,
357345
layerInfo,
358-
subRenderLayers: layerIds.map((layerId) => ({ layerId, name: layerId }))
346+
subRenderLayers: layerIds.map((layerId) => ({ layerId }))
359347
});
360348
addedCallback && addedCallback();
361349
},
@@ -465,7 +453,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
465453
_initOverlayLayer(layerInfo, features = [], mergeByField) {
466454
const { layerID, layerType, visible, style, featureType, projection } = layerInfo;
467455
layerInfo.visible = visible ? 'visible' : 'none';
468-
features = this.mergeFeatures(layerID, features, mergeByField);
456+
features = mergeFeatures({ sourceId: layerID, features, mergeByField, map: this.map });
469457
if (layerType === 'restMap') {
470458
this._createRestMapLayer(features, layerInfo);
471459
return;
@@ -2252,8 +2240,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
22522240
*/
22532241
this.addLayersSucceededLen = this._cacheLayerId.size;
22542242
const appreciableLayers = this.getAppreciableLayers();
2255-
this._rectifyLayersOrder(appreciableLayers);
22562243
const layerOptions = this._getSelfAppreciableLayers(appreciableLayers);
2244+
this._rectifyLayersOrder(layerOptions.layers);
22572245
this.fire('addlayerssucceeded', {
22582246
...layerOptions,
22592247
map: this.map,
@@ -2262,15 +2250,19 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
22622250
}
22632251
}
22642252

2265-
_rectifyLayersOrder(appreciableLayers) {
2253+
_rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
22662254
const renderLayers = appreciableLayers.reduce((layers, layer) => {
22672255
return layers.concat(layer.renderLayers);
22682256
}, []);
22692257
const labelLayerIds = [];
22702258
const exsitLayers = renderLayers.filter((layerId) => !!this.map.getLayer(layerId));
22712259
for (let index = exsitLayers.length - 1; index > -1; index--) {
22722260
const targetlayerId = exsitLayers[index];
2273-
const beforLayerId = exsitLayers.slice(index + 1).find((id) => this.map.style._layers[id]);
2261+
const afterLayers = exsitLayers.slice(index + 1);
2262+
let beforLayerId = afterLayers.find((id) => this.map.style._layers[id]);
2263+
if (!afterLayers.length) {
2264+
beforLayerId = topLayerBeforeId;
2265+
}
22742266
this.map.moveLayer(targetlayerId, beforLayerId);
22752267
const labelLayerId = this._getSymbolLabelLayerName(targetlayerId);
22762268
if (this.map.getLayer(labelLayerId)) {
@@ -2783,7 +2775,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
27832775
}
27842776

27852777
_setCacheLayer({ parentLayerId, layerInfo, ignore = false, beforeId, subRenderLayers }) {
2786-
const renderLayers = subRenderLayers || [{ layerId: layerInfo.id, name: layerInfo.name, ignore }];
2778+
const renderLayers = subRenderLayers || [{ layerId: layerInfo.id, ignore }];
27872779
if (!this._cacheLayerId.has(parentLayerId)) {
27882780
this._cacheLayerId.set(parentLayerId, renderLayers);
27892781
} else {
@@ -2812,11 +2804,9 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
28122804
if (!renderLayers.length) {
28132805
return;
28142806
}
2815-
const matchMainLayer = matchLayers.find((item) => item.layerId === targetLayerId);
28162807
layersFromMapInfo.push({
28172808
...layerInfo,
28182809
id: targetLayerId,
2819-
name: matchMainLayer && matchMainLayer.name,
28202810
visible: targetLayerVisible,
28212811
renderLayers
28222812
});
@@ -2825,11 +2815,29 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
28252815
this._changeSourceListModel(layersFromMapInfo);
28262816
const appreciableLayers = this.getAppreciableLayers();
28272817
if (this.addLayersSucceededLen && this._cacheLayerId.size !== this.addLayersSucceededLen) {
2828-
this._rectifyLayersOrder(appreciableLayers);
2818+
const selfAppreciableLayers = this.getSelfAppreciableLayers(appreciableLayers)
2819+
const topLayerBeforeId = this._findTopLayerBeforeId(selfAppreciableLayers);
2820+
this._rectifyLayersOrder(selfAppreciableLayers, topLayerBeforeId);
28292821
this.addLayersSucceededLen = this._cacheLayerId.size;
28302822
}
2831-
const layerOptions = this._getSelfAppreciableLayers(appreciableLayers);
2832-
this.fire('addlayerchanged', layerOptions);
2823+
this.fire('addlayerchanged', this._getSelfAppreciableLayers(appreciableLayers));
2824+
}
2825+
2826+
_findTopLayerBeforeId(selfAppreciableLayers) {
2827+
// fix 追加图层，异步的图层回来排序错乱
2828+
const selfLayerIds = selfAppreciableLayers.reduce((ids, item) => ids.concat(item.renderLayers), []);
2829+
const firstSelfLayerIdOnMap = selfLayerIds.find((id) => this.map.style._layers[id]);
2830+
if (!firstSelfLayerIdOnMap) {
2831+
return;
2832+
}
2833+
const firstSelfLayerIndex = this.map.getStyle().layers.findIndex((item) => item.id === firstSelfLayerIdOnMap);
2834+
const extraLayerIdsOnMap = this.map.getStyle().layers.filter(item => !selfLayerIds.some(id => id === item.id)).map(item => item.id);
2835+
for (const layerId of extraLayerIdsOnMap) {
2836+
const matchIndex = this.map.getStyle().layers.findIndex((item) => item.id === layerId);
2837+
if (matchIndex > firstSelfLayerIndex) {
2838+
return layerId;
2839+
}
2840+
}
28332841
}
28342842

28352843
_changeSourceListModel(layersFromMapInfo) {
@@ -2845,18 +2853,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
28452853
}
28462854

28472855
_getSelfAppreciableLayers(appreciableLayers) {
2848-
const cacheLayerToAddList = Array.from(this._cacheLayerId.values());
2849-
const flatCacheLayerId = cacheLayerToAddList.reduce((list, layers) => {
2850-
const layerIds = layers.map((item) => item.layerId);
2851-
list.push(...layerIds);
2852-
return list;
2853-
}, []);
2854-
const matchLayers = appreciableLayers.filter((item) =>
2855-
item.renderLayers.some((id) => flatCacheLayerId.some((layerId) => layerId === id))
2856-
);
28572856
return {
2858-
layers: matchLayers,
2859-
cacheLayerIds: flatCacheLayerId,
2857+
layers: this.getSelfAppreciableLayers(appreciableLayers),
28602858
allLoaded: this._cacheLayerId.size === this.addLayersSucceededLen
28612859
};
28622860
}

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