Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5dc375a

Browse files
【feature】mapboxgl/maplibregl新增切换底图api; review by chenxh
1 parent 55eb979 commit 5dc375a

File tree

7 files changed

+1082
-63
lines changed

7 files changed

+1082
-63
lines changed

‎src/common/mapping/MapBase.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export function createMapClassExtending(SuperClass = class {}) {
5757
return exsitLayers;
5858
}
5959

60+
changeBaseLayer() {
61+
this._sourceListModel && this._sourceListModel.changeBaseLayer(...arguments);
62+
}
63+
6064
echartsLayerResize() {}
6165

6266
updateOverlayLayer() {}

‎src/common/mapping/WebMapBase.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,22 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
486486
this.clean(false);
487487
}
488488

489+
/**
490+
* @version 12.0.1
491+
* @function WebMapBase.prototype.changeBaseLayer
492+
* @description 切换底图
493+
* @param {BaseLayerConfig} layer - 图层配置对象
494+
* @typedef {Object} BaseLayerConfig
495+
* @property {string} id - 唯一标识
496+
* @property {string} title - 显示名称
497+
* @property {Array<Object>} layers - 上图的图层
498+
* @property {Object} sources - 图层对应的source
499+
* @returns {Object} 当前底图信息
500+
*/
501+
changeBaseLayer() {
502+
return this._handler && this._handler.changeBaseLayer(...arguments);
503+
}
504+
489505
_readyForInitializingWebMap() {
490506
this._initWebMap(!this.map);
491507
}

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

Lines changed: 128 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Events } from '../../commontypes';
22
import SourceModel from './SourceModel';
33
import { createAppreciableLayerId, getLayerInfosFromCatalogs } from './util';
4+
import cloneDeep from 'lodash.clonedeep';
45

56
export class AppreciableLayerBase extends Events {
67
constructor(options = {}) {
78
super();
89
this.map = options.map;
9-
this.layers = options.layers || [];
1010
this.appendLayers = options.appendLayers || false;
1111
this.unexpectedSourceNames = [
1212
'tdt-search-',
@@ -21,12 +21,23 @@ export class AppreciableLayerBase extends Events {
2121
this.layersVisibleMap = new Map();
2222
this.eventTypes = ['layerupdatechanged'];
2323
this._styleDataUpdatedHandler = this._styleDataUpdatedHandler.bind(this);
24+
this.baseLayerInfoOnMap = null;
25+
this.setLayers(options.layers);
26+
this._initBaseLayerInfo(options.layers);
2427
}
2528

26-
setLayers(layers) {
29+
setLayers(layers=[]) {
2730
this.layers = layers;
2831
}
2932

33+
setDefaultBaseLayerInfo(baseLayerInfo) {
34+
this.baseLayerInfoOnMap = baseLayerInfo;
35+
}
36+
37+
setBaseLayer() {
38+
throw new Error('setBaseLayer is not implemented');
39+
}
40+
3041
createLayerCatalogs() {
3142
throw new Error('createLayerCatalogs is not implemented');
3243
}
@@ -39,6 +50,14 @@ export class AppreciableLayerBase extends Events {
3950
throw new Error('initLayers is not implemented');
4051
}
4152

53+
changeBaseLayer(layer) {
54+
if (this.map) {
55+
this._removeBaseLayer();
56+
this._addBaseLayer(layer);
57+
return cloneDeep(this.baseLayerInfoOnMap);
58+
}
59+
}
60+
4261
createAppreciableLayers() {
4362
const detailLayers = this.initLayers();
4463
return this._initAppreciableLayers(detailLayers);
@@ -335,4 +354,111 @@ export class AppreciableLayerBase extends Events {
335354
}
336355
return topLayers.concat(autoLayers, bottomLayers);
337356
}
357+
358+
_addBaseLayer(layerItem) {
359+
const { layers, sources } = layerItem;
360+
const renderSources = {};
361+
Object.keys(sources).forEach(sourceId => {
362+
let nextSourceId = sourceId;
363+
if (this.map.getSource(sourceId)) {
364+
renderSources[sourceId] = `${sourceId}_${+new Date()}`;
365+
nextSourceId = renderSources[sourceId];
366+
}
367+
this.map.addSource(nextSourceId, sources[sourceId]);
368+
});
369+
const layersToAdd = [];
370+
layers.forEach(layer => {
371+
let { beforeId } = layer;
372+
if (!beforeId) {
373+
const styles = this.map.getStyle();
374+
beforeId = styles.layers[0] && styles.layers[0].id;
375+
}
376+
const layerToAdd = Object.assign({}, layer);
377+
delete layerToAdd.beforeId;
378+
const sourceId = layerToAdd.source;
379+
if (renderSources[sourceId]) {
380+
layerToAdd.source = renderSources[sourceId];
381+
}
382+
if (this.map.getLayer(layerToAdd.id)) {
383+
const nextLayerId = `${layerToAdd.id}_${layerToAdd.source || +new Date()}`;
384+
layerToAdd.id = nextLayerId;
385+
}
386+
layersToAdd.push({
387+
layer: layerToAdd,
388+
beforeId
389+
});
390+
});
391+
this.baseLayerInfoOnMap = {
392+
...layerItem,
393+
layers: layersToAdd.map(item => Object.assign({}, item.layer)),
394+
sources: Object.keys(layerItem.sources).reduce((sources, sourceId) => {
395+
let source = sourceId;
396+
if (renderSources[source]) {
397+
source = renderSources[source];
398+
}
399+
sources[source] = renderSources[sourceId];
400+
return sources;
401+
}, {})
402+
};
403+
this.setBaseLayer({ ...this.baseLayerInfoOnMap });
404+
layersToAdd.forEach(({ layer, beforeId }) => {
405+
this.map.addLayer(layer, beforeId);
406+
})
407+
}
408+
409+
_removeBaseLayer() {
410+
if (this.baseLayerInfoOnMap) {
411+
const { layers, sources } = this.baseLayerInfoOnMap;
412+
const layersIds = layers.map(item => item.id);
413+
const sourceIds = Object.keys(sources);
414+
layersIds.forEach(layerId => {
415+
if (this.map.getLayer(layerId)) {
416+
this.map.removeLayer(layerId);
417+
}
418+
});
419+
sourceIds.forEach(sourceId => {
420+
if (this.map.getSource(sourceId)) {
421+
this.map.removeSource(sourceId);
422+
}
423+
});
424+
}
425+
}
426+
427+
_initBaseLayerInfo(layers) {
428+
if (layers && layers.length && !this.baseLayerInfoOnMap) {
429+
const firstLayer = this.layers[0];
430+
const baseLayer = firstLayer;
431+
const layerList = this.map.getStyle().layers;
432+
const baseLayersOnMap = baseLayer.renderLayers.map((layerId) => {
433+
const nextLayer = layerList.find(item => item.id === layerId);
434+
if (nextLayer) {
435+
const layerIndex = layerList.findIndex(item => item.id === layerId);
436+
const nextLayerIndex = layerIndex + 1;
437+
if (layerList[nextLayerIndex]) {
438+
nextLayer.beforeId = layerList[nextLayerIndex].id;
439+
}
440+
if (!nextLayer.metadata || !nextLayer.metadata.SM_Layer_Title) {
441+
nextLayer.metadata = {
442+
...nextLayer.metadata,
443+
SM_Layer_Title: baseLayer.title
444+
};
445+
}
446+
}
447+
return nextLayer;
448+
}).filter(Boolean);
449+
const sourcesMap = this.map.getStyle().sources;
450+
this.setDefaultBaseLayerInfo({
451+
id: `__default__${baseLayer.id}`,
452+
title: baseLayer.title,
453+
layers: baseLayersOnMap,
454+
sources: baseLayersOnMap.reduce((sources, layer) => {
455+
const sourceId = layer.source;
456+
if (sourceId && !sources[sourceId]) {
457+
sources[sourceId] = sourcesMap[sourceId];
458+
}
459+
return sources;
460+
}, {})
461+
});
462+
}
463+
}
338464
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,21 @@ export class SourceListModelV2 extends AppreciableLayerBase {
4747
return this.concatExpectLayers(selfLayers, selfLayerIds, nextLayers);
4848
}
4949

50+
setBaseLayer(layerItem) {
51+
const nextLayers = this.layers.slice(1);
52+
const firstLayer = layerItem.layers[0] || {};
53+
const defaultId = firstLayer.id || '';
54+
const baseLayer = {
55+
id: layerItem.id || defaultId,
56+
visible: true,
57+
name: layerItem.title || defaultId,
58+
title: layerItem.title || defaultId,
59+
renderLayers: layerItem.layers.map(item => item.id)
60+
}
61+
nextLayers.unshift(baseLayer);
62+
this.setLayers(nextLayers);
63+
}
64+
5065
_isBelongToMapJSON(layerFromMapJSON, layerOnMap) {
5166
return (
5267
layerFromMapJSON.renderLayers && layerFromMapJSON.renderLayers.some((subLayerId) => subLayerId === layerOnMap.id)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /