【feature】mapboxgl/maplibregl新增切换底图api; review by chenxh

Author: xiongjiaojiao

src/common/mapping/MapBase.js

@@ -57,6 +57,10 @@ export function createMapClassExtending(SuperClass = class {}) {
       return exsitLayers;
     }
 
+    changeBaseLayer() {
+      this._sourceListModel && this._sourceListModel.changeBaseLayer(...arguments);
+    }
+
     echartsLayerResize() {}
 
     updateOverlayLayer() {}

src/common/mapping/WebMapBase.js

@@ -486,6 +486,22 @@ export function createWebMapBaseExtending(SuperClass, { mapRepo }) {
       this.clean(false);
     }
 
+    /**
+     * @version 12.0.1
+     * @function WebMapBase.prototype.changeBaseLayer
+     * @description 切换底图
+     * @param {BaseLayerConfig} layer - 图层配置对象
+     * @typedef {Object} BaseLayerConfig
+     * @property {string} id - 唯一标识
+     * @property {string} title - 显示名称
+     * @property {Array<Object>} layers - 上图的图层
+     * @property {Object} sources - 图层对应的source
+     * @returns {Object} 当前底图信息
+     */
+    changeBaseLayer() {
+      return this._handler && this._handler.changeBaseLayer(...arguments);
+    }
+
     _readyForInitializingWebMap() {
       this._initWebMap(!this.map);
     }

src/common/mapping/utils/AppreciableLayerBase.js

@@ -1,12 +1,12 @@
 import { Events } from '../../commontypes';
 import SourceModel from './SourceModel';
 import { createAppreciableLayerId, getLayerInfosFromCatalogs } from './util';
+import cloneDeep from 'lodash.clonedeep';
 
 export class AppreciableLayerBase extends Events {
   constructor(options = {}) {
     super();
     this.map = options.map;
-    this.layers = options.layers || [];
     this.appendLayers = options.appendLayers || false;
     this.unexpectedSourceNames = [
       'tdt-search-',
@@ -21,12 +21,23 @@ export class AppreciableLayerBase extends Events {
     this.layersVisibleMap = new Map();
     this.eventTypes = ['layerupdatechanged'];
     this._styleDataUpdatedHandler = this._styleDataUpdatedHandler.bind(this);
+    this.baseLayerInfoOnMap = null;
+    this.setLayers(options.layers);
+    this._initBaseLayerInfo(options.layers);
   }
 
-  setLayers(layers) {
+  setLayers(layers = []) {
     this.layers = layers;
   }
 
+  setDefaultBaseLayerInfo(baseLayerInfo) {
+    this.baseLayerInfoOnMap = baseLayerInfo;
+  }
+
+  setBaseLayer() {
+    throw new Error('setBaseLayer is not implemented');
+  }
+
   createLayerCatalogs() {
     throw new Error('createLayerCatalogs is not implemented');
   }
@@ -39,6 +50,14 @@ export class AppreciableLayerBase extends Events {
     throw new Error('initLayers is not implemented');
   }
 
+  changeBaseLayer(layer) {
+    if (this.map) {
+      this._removeBaseLayer();
+      this._addBaseLayer(layer);
+      return cloneDeep(this.baseLayerInfoOnMap);
+    }
+  }
+
   createAppreciableLayers() {
     const detailLayers = this.initLayers();
     return this._initAppreciableLayers(detailLayers);
@@ -335,4 +354,111 @@ export class AppreciableLayerBase extends Events {
     }
     return topLayers.concat(autoLayers, bottomLayers);
   }
+
+  _addBaseLayer(layerItem) {
+    const { layers, sources } = layerItem;
+    const renderSources = {};
+    Object.keys(sources).forEach(sourceId => {
+      let nextSourceId = sourceId;
+      if (this.map.getSource(sourceId)) {
+        renderSources[sourceId] = `${sourceId}_${+new Date()}`;
+        nextSourceId = renderSources[sourceId];
+      }
+      this.map.addSource(nextSourceId, sources[sourceId]);
+    });
+    const layersToAdd = [];
+    layers.forEach(layer => {
+      let { beforeId } = layer;
+      if (!beforeId) {
+        const styles = this.map.getStyle();
+        beforeId = styles.layers[0] && styles.layers[0].id;
+      }
+      const layerToAdd = Object.assign({}, layer);
+      delete layerToAdd.beforeId;
+      const sourceId = layerToAdd.source;
+      if (renderSources[sourceId]) {
+        layerToAdd.source = renderSources[sourceId];
+      }
+      if (this.map.getLayer(layerToAdd.id)) {
+        const nextLayerId = `${layerToAdd.id}_${layerToAdd.source || +new Date()}`;
+        layerToAdd.id = nextLayerId;
+      }
+      layersToAdd.push({
+        layer: layerToAdd,
+        beforeId
+      });
+    });
+    this.baseLayerInfoOnMap = {
+      ...layerItem,
+      layers: layersToAdd.map(item => Object.assign({}, item.layer)),
+      sources: Object.keys(layerItem.sources).reduce((sources, sourceId) => {
+        let source = sourceId;
+        if (renderSources[source]) {
+          source = renderSources[source];
+        }
+        sources[source] = renderSources[sourceId];
+        return sources;
+      }, {})
+    };
+    this.setBaseLayer({ ...this.baseLayerInfoOnMap });
+    layersToAdd.forEach(({ layer, beforeId }) => {
+      this.map.addLayer(layer, beforeId);
+    })
+  }
+  
+  _removeBaseLayer() {
+    if (this.baseLayerInfoOnMap) {
+      const { layers, sources } = this.baseLayerInfoOnMap;
+      const layersIds = layers.map(item => item.id);
+      const sourceIds = Object.keys(sources);
+      layersIds.forEach(layerId => {
+        if (this.map.getLayer(layerId)) {
+          this.map.removeLayer(layerId);
+        }
+      });
+      sourceIds.forEach(sourceId => {
+        if (this.map.getSource(sourceId)) {
+          this.map.removeSource(sourceId);
+        }
+      });
+    }
+  }
+
+  _initBaseLayerInfo(layers) {
+    if (layers && layers.length && !this.baseLayerInfoOnMap) {
+      const firstLayer = this.layers[0];
+      const baseLayer = firstLayer;
+      const layerList = this.map.getStyle().layers;
+      const baseLayersOnMap = baseLayer.renderLayers.map((layerId) => {
+        const nextLayer = layerList.find(item => item.id === layerId);
+        if (nextLayer) {
+          const layerIndex = layerList.findIndex(item => item.id === layerId);
+          const nextLayerIndex = layerIndex + 1;
+          if (layerList[nextLayerIndex]) {
+            nextLayer.beforeId = layerList[nextLayerIndex].id;
+          }
+          if (!nextLayer.metadata || !nextLayer.metadata.SM_Layer_Title) {
+            nextLayer.metadata = {
+              ...nextLayer.metadata,
+              SM_Layer_Title: baseLayer.title
+            };
+          }
+        }
+        return nextLayer;
+      }).filter(Boolean);
+      const sourcesMap = this.map.getStyle().sources;
+      this.setDefaultBaseLayerInfo({
+        id: `__default__${baseLayer.id}`,
+        title: baseLayer.title,
+        layers: baseLayersOnMap,
+        sources: baseLayersOnMap.reduce((sources, layer) => {
+          const sourceId = layer.source;
+          if (sourceId && !sources[sourceId]) {
+            sources[sourceId] = sourcesMap[sourceId];
+          }
+          return sources;
+        }, {})
+      });
+    }
+  }
 }

src/common/mapping/utils/SourceListModelV2.js

@@ -47,6 +47,21 @@ export class SourceListModelV2 extends AppreciableLayerBase {
     return this.concatExpectLayers(selfLayers, selfLayerIds, nextLayers);
   }
 
+  setBaseLayer(layerItem) {
+    const nextLayers = this.layers.slice(1);
+    const firstLayer = layerItem.layers[0] || {};
+    const defaultId = firstLayer.id || '';
+    const baseLayer = {
+      id: layerItem.id || defaultId,
+      visible: true,
+      name: layerItem.title || defaultId,
+      title: layerItem.title || defaultId,
+      renderLayers: layerItem.layers.map(item => item.id)
+    }
+    nextLayers.unshift(baseLayer);
+    this.setLayers(nextLayers);
+  }
+
   _isBelongToMapJSON(layerFromMapJSON, layerOnMap) {
     return (
       layerFromMapJSON.renderLayers && layerFromMapJSON.renderLayers.some((subLayerId) => subLayerId === layerOnMap.id)