【feature】获取图层列表和可感知图层优化; fix webmapv2 加载 baselayer source 存在时优化

Author: xiongjiaojiao

src/common/mapping/MapBase.js

@@ -26,16 +26,16 @@ export function createMapClassExtending(SuperClass = class {}) {
       return this._legendList;
     }
 
-    getSelfAppreciableLayers(appreciableLayers) {
-      return (this._sourceListModel && this._sourceListModel.getSelfLayers(appreciableLayers)) || [];
+    getSelfAppreciableLayers() {
+      return (this._sourceListModel && this._sourceListModel.getSelfLayers(...arguments)) || [];
     }
 
-    setLayersVisible(layers, visibility) {
-      this._sourceListModel && this._sourceListModel.setLayersVisible(layers, visibility);
+    setLayersVisible() {
+      this._sourceListModel && this._sourceListModel.setLayersVisible(...arguments);
     }
 
-    toggleLayerVisible(layerId, visible) {
-      this._sourceListModel && this._sourceListModel.toggleLayerVisible(layerId, visible);
+    toggleLayerVisible() {
+      this._sourceListModel && this._sourceListModel.toggleLayerVisible(...arguments);
     }
 
     rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {

src/common/mapping/WebMapBase.js

@@ -392,23 +392,23 @@
       return (this._handler && this._handler.getLayerCatalog()) || [];
     }
 
-    setLayersVisible(layers, visibility) {
-      this._handler && this._handler.setLayersVisible(layers, visibility);
+    setLayersVisible() {
+      this._handler && this._handler.setLayersVisible(...arguments);
     }
 
     /**
      * @version 11.2.1
      * @function WebMapBase.prototype.toggleLayerVisible
-     * @param {string} layerId - 图层 id。
+     * @param {string} layer - 图层信息。
      * @param {boolean} visible - 图层是否可见。true 表示显示，false 表示隐藏。
      * @description 设置图层显隐。
      */
-    toggleLayerVisible(layerId, visible) {
-      this._handler && this._handler.toggleLayerVisible(layerId, visible);
+    toggleLayerVisible() {
+      this._handler && this._handler.toggleLayerVisible(...arguments);
     }
 
     /**
-     * @version 11.3.0
+     * @version 11.2.1
      * @function WebMapBase.prototype.getWebMapType
      * @description 获取地图类型。
      * @returns {String} 地图类型。
@@ -418,12 +418,14 @@
     }
 
     /**
-     * @version 11.3.0
+     * @version 11.2.1
      * @function WebMapBase.prototype.rectifyLayersOrder
+     * @param {Array} layers - 图层列表。
+     * @param {string} topLayerBeforeId - 图层列表中置顶图层指定的 beforeId。
      * @description 根据已知顺序的可感知图层，对地图上图顺序进行排序。
      */
-    rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
-      this._handler && this._handler.rectifyLayersOrder(appreciableLayers, topLayerBeforeId);
+    rectifyLayersOrder() {
+      this._handler && this._handler.rectifyLayersOrder(...arguments);
     }
 
     /**
@@ -436,8 +438,8 @@
      * @param {Array} features - 要素信息。
      * @param {string} mergeByField - 属性关联字段。
      */
-    updateOverlayLayer(layerInfo, features, mergeByField) {
-      this._handler && this._handler.updateOverlayLayer(layerInfo, features, mergeByField);
+    updateOverlayLayer() {
+      this._handler && this._handler.updateOverlayLayer(...arguments);
     }
 
     /**
@@ -448,8 +450,8 @@
      * @param {Object} [layerInfo] - 复制图层信息。如 id、source、layout
      * @returns {Array} 复制成功的信图层信息。
      */
-    copyLayer(id, layerInfo) {
-      return this._handler && this._handler.copyLayer(id, layerInfo);
+    copyLayer() {
+      return this._handler && this._handler.copyLayer(...arguments);
     }
 
     /**

src/common/mapping/WebMapV2.js

@@ -337,7 +337,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
             }
             style.layers.forEach(layer => {
               layer.layout && (layer.layout.visibility = this._getVisibility(layerInfo.visible));
-            })
+            });
             this.map.addStyle(style);
             const layerIds = [];
             style.layers.forEach((item) => {
@@ -2394,11 +2394,16 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       if (bounds) {
         source.bounds = bounds;
       }
+      let sourceId = source;
+      if (this.map.getSource(layerID) && (!this.map.getLayer(layerID) || !this.checkSameLayer || !this._isSameRasterLayer(layerID, source))) {
+        sourceId = `${layerID}_${+new Date()}`;
+        this.map.addSource(sourceId, source);
+      }
       this._addLayer(
         {
           id: layerID,
           type: 'raster',
-          source: source,
+          source: sourceId,
           minzoom: minzoom || 0,
           maxzoom: maxzoom || 22,
           layout: {
@@ -2740,7 +2745,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
     _addLayer(layerInfo, parentLayerId = layerInfo.id, beforeId) {
       const { id } = layerInfo;
       if (this.map.getLayer(id)) {
-        if (this.checkSameLayer && this._isSameRasterLayer(id, layerInfo)) {
+        if (this.checkSameLayer && this._isSameRasterLayer(id, layerInfo.source)) {
           this._setCacheLayer({ layerInfo, parentLayerId, id, reused: true, beforeId });
           return;
         }
@@ -2847,8 +2852,8 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       };
     }
 
-    _isSameRasterLayer(id, layerInfo) {
-      return isSameRasterLayer(layerInfo.source, this.map.getSource(id));
+    _isSameRasterLayer(sourceId, sourceInfo) {
+      return isSameRasterLayer(sourceInfo, this.map.getSource(sourceId));
     }
 
     _centerValid(center) {

src/common/mapping/utils/AppreciableLayerBase.js

@@ -10,17 +10,12 @@ export class AppreciableLayerBase extends Events {
     this.appendLayers = options.appendLayers || false;
     this.unexpectedSourceNames = ['tdt-search-', 'tdt-route-', 'smmeasure', 'mapbox-gl-draw', 'maplibre-gl-draw', /tracklayer-\d+-line/];
     this.layersVisibleMap = new Map();
-    this.layerCatalogs = [];
-    this.appreciableLayers = [];
     this.eventTypes = ['layerupdatechanged'];
     this._styleDataUpdatedHandler = this._styleDataUpdatedHandler.bind(this);
   }
 
   setSelfLayers(layers) {
     this.layers = layers;
-    if (this.appreciableLayers.length > 0) {
-      this._styleDataUpdatedHandler();
-    }
   }
 
   createAppreciableLayers() {
@@ -36,11 +31,13 @@ export class AppreciableLayerBase extends Events {
   }
 
   getLayerCatalog() {
-    return this.layerCatalogs;
+    const layerCatalog = this.createLayerCatalogs();
+    this._updateLayerCatalogsVisible(layerCatalog);
+    return layerCatalog;
   }
 
   getLayers() {
-    return this.appreciableLayers;
+    return this.createAppreciableLayers();
   }
 
   getSelfLayers(appreciableLayers = this.getLayers()) {
@@ -50,19 +47,15 @@ export class AppreciableLayerBase extends Events {
     );
   }
 
-  toggleLayerVisible(layerId, visible) {
-    const item = this._findLayerCatalog(this.layerCatalogs, layerId);
-    if (!item) {
-      return;
-    }
+  toggleLayerVisible(layer, visible) {
     const visibility = visible ? 'visible' : 'none';
-    if (item.type === 'group') {
-      const visbleId = this._getLayerVisibleId(item);
+    if (layer.type === 'group') {
+      const visbleId = this._getLayerVisibleId(layer);
       this.layersVisibleMap.set(visbleId, visible);
-      const targetLayers = getLayerInfosFromCatalogs(item.children);
+      const targetLayers = getLayerInfosFromCatalogs(layer.children);
       this.setLayersVisible(targetLayers, visibility);
     } else {
-      this.setLayersVisible([item], visibility);
+      this.setLayersVisible([layer], visibility);
     }
   }
 
@@ -74,7 +67,7 @@ export class AppreciableLayerBase extends Events {
         (layer.CLASS_INSTANCE && layer.CLASS_INSTANCE.show && layer.CLASS_INSTANCE.hide)
       ) {
         visibility === 'visible' ? layer.CLASS_INSTANCE.show() : layer.CLASS_INSTANCE.hide();
-        this._styleDataUpdatedHandler();
+        this.map.style.fire('data', { dataType: 'style' });
         return;
       }
       layer.renderLayers.forEach((layerId) => {
@@ -98,7 +91,7 @@ export class AppreciableLayerBase extends Events {
     if (!this.map) {
       return;
     }
-    this._initializeData();
+    this._styleDataUpdatedHandler();
     this._registerMapEvent();
   }
 
@@ -122,20 +115,19 @@ export class AppreciableLayerBase extends Events {
   }
 
   _initSourceList(detailLayers) {
-    const datas = detailLayers.reduce((sourceList, layer) => {
+    const datas = detailLayers.slice().reverse().reduce((sourceList, layer) => {
+      const id = layer.renderSource.sourceLayer ? `${layer.renderSource.id}-${+new Date()}` : layer.id;
       let matchItem = sourceList.find((item) => {
-        const sourceId = layer.renderSource.id || layer.id;
-        return item.id === sourceId;
+        return item.id === id;
       });
       if (!matchItem) {
-        const sourceListItem = new SourceModel(layer);
+        const sourceListItem = new SourceModel(layer, id);
         sourceList.push(sourceListItem);
         matchItem = sourceListItem;
       }
       matchItem.addLayer(layer);
       return sourceList;
     }, []);
-    datas.reverse();
     return datas;
   }
 
@@ -278,23 +270,14 @@ export class AppreciableLayerBase extends Events {
     }
   }
 
-  _initializeData() {
-    this.appreciableLayers = this.createAppreciableLayers();
-    this.layerCatalogs = this.createLayerCatalogs();
-    this._updateLayerCatalogsVisible(this.layerCatalogs);
-  }
-
   _registerMapEvent() {
     this.map.on('styledata', this._styleDataUpdatedHandler);
   }
 
   _styleDataUpdatedHandler() {
-    this._initializeData();
-    if (!this._appendLayers) {
-      this.triggerEvent('layerupdatechanged', {
-        layers: this.appreciableLayers,
-        layerCatalog: this.layerCatalogs
-      });
+    this.triggerEvent('layerupdatechanged', {
+      layers: this.getLayers(),
+      layerCatalog: this.getLayerCatalog()
+    });
     }
   }
-}

src/common/mapping/utils/SourceModel.js

@@ -1,7 +1,7 @@
 class SourceModel {
-  constructor(options) {
+  constructor(options, id) {
     this.dataSource = options.dataSource;
-    this.id = options.renderSource.id || options.id;
+    this.id = id;
     this.title = options.title;
     this.renderSource = options.renderSource;
     this.renderLayers = [];

test/common/mapping/utils/SourceListModelV2Spec.js

@@ -200,7 +200,14 @@ describe('SourceListV2', () => {
         if (this.overlayLayersManager[layerId]) {
           this.overlayLayersManager.visible = visibility === 'visible';
         }
-      })
+      }),
+      style: {
+        fire(type, options) {
+          if (type === 'data' && options.dataType === 'style' && mockEvents.styledata) {
+            mockEvents.styledata();
+          }
+        }
+      }
     };
   });
 
@@ -440,7 +447,7 @@ describe('SourceListV2', () => {
     const layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(2);
     expect(layerList[0].children.length).toBe(2);
-    expect(layerList[0].children[1].renderLayers).toEqual(appreciableLayers[2].renderLayers);
+    expect(layerList[0].children[0].renderLayers).toEqual(appreciableLayers[2].renderLayers);
     expect(layerList[0].type).toBe('group');
     done();
   });
@@ -528,7 +535,7 @@ describe('SourceListV2', () => {
         done();
       }
     });
-    sourceListModel.toggleLayerVisible(layerList[1].id, false);
+    sourceListModel.toggleLayerVisible(layerList[1], false);
     expect(mockEvents.styledata).not.toBeUndefined();
     mockEvents.styledata();
   });

test/common/mapping/utils/SourceListModelV3Spec.js

@@ -202,7 +202,14 @@ describe('SourceListV3', () => {
         if (this.overlayLayersManager[layerId]) {
           this.overlayLayersManager.visible = visibility === 'visible';
         }
-      })
+      }),
+      style: {
+        fire(type, options) {
+          if (type === 'data' && options.dataType === 'style' && mockEvents.styledata) {
+            mockEvents.styledata();
+          }
+        }
+      }
     };
   });
 
@@ -311,7 +318,7 @@ describe('SourceListV3', () => {
         done();
       }
     });
-    sourceListModel.toggleLayerVisible(layerList[3].id, false);
+    sourceListModel.toggleLayerVisible(layerList[3], false);
   });
 
   it('toggleLayerVisible true', (done) => {
@@ -335,11 +342,11 @@ describe('SourceListV3', () => {
     let layerList = sourceListModel.getLayerCatalog();
     expect(layerList.length).toBe(mapInfo.metadata.layerCatalog.length + 3);
     expect(layerList[3].visible).toBeTruthy();
-    sourceListModel.toggleLayerVisible(layerList[3].id, false);
+    sourceListModel.toggleLayerVisible(layerList[3], false);
     layerList = sourceListModel.getLayerCatalog();
     expect(layerList[3].visible).toBeFalsy();
     expect(markerList[layerList[3].id].hide).toHaveBeenCalledTimes(1);
-    sourceListModel.toggleLayerVisible(layerList[3].id, true);
+    sourceListModel.toggleLayerVisible(layerList[3], true);
     layerList = sourceListModel.getLayerCatalog();
     expect(layerList[3].visible).toBeTruthy();
     expect(markerList[layerList[3].id].show).toHaveBeenCalledTimes(1);

test/mapboxgl/mapping/WebMapSpec.js

@@ -1251,7 +1251,7 @@ describe('mapboxgl_WebMap', () => {
       expect(layers.length).toBe(2);
       expect(layers[0].id).toBe('China4269@DataSource');
       expect(layers[0].visible).toBeTruthy();
-      datavizWebmap.toggleLayerVisible(layers[0].id, false);
+      datavizWebmap.toggleLayerVisible(layers[0], false);
       layers = datavizWebmap.getLayers();
       expect(layers[0].visible).toBeFalsy();
       datavizWebmap.once('layerupdatechanged', () => {