[feature]webmap新增排序方法 review by xiongjj

Author: chenxianhuii

src/common/mapping/MapBase.js

@@ -38,6 +38,25 @@ export function createMapClassExtending(SuperClass = class {}) {
       this._sourceListModel && this._sourceListModel.toggleLayerVisible(layerId, visible);
     }
 
+    rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
+      const renderLayers = appreciableLayers
+        .filter((item) => !item.reused)
+        .reduce((layers, layer) => {
+          return layers.concat(layer.renderLayers);
+        }, []);
+      const exsitLayers = renderLayers.filter((layerId) => !!this.map.getLayer(layerId));
+      for (let index = exsitLayers.length - 1; index > -1; index--) {
+        const targetlayerId = exsitLayers[index];
+        const afterLayers = exsitLayers.slice(index + 1);
+        let beforLayerId = afterLayers.find((id) => this.map.style._layers[id]);
+        if (!afterLayers.length) {
+          beforLayerId = topLayerBeforeId;
+        }
+        this.map.moveLayer(targetlayerId, beforLayerId);
+      }
+      return exsitLayers;
+    }
+
     echartsLayerResize() {}
 
     updateOverlayLayer() {}

src/common/mapping/WebMapBase.js

@@ -416,6 +416,15 @@
     getWebMapType() {
       return this.type;
     }
+    
+    /**
+     * @version 11.3.0
+     * @function WebMapBase.prototype.rectifyLayersOrder
+     * @description 根据已知顺序的可感知图层，对地图上图顺序进行排序。
+     */
+    rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
+      this._handler && this._handler.rectifyLayersOrder(appreciableLayers, topLayerBeforeId);
+    }
 
     /**
      * @version 11.2.1

src/common/mapping/WebMapV2.js

@@ -2235,7 +2235,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         this._changeSourceListModel();
         const appreciableLayers = this.getLayers();
         const layerOptions = this._getSelfAppreciableLayers(appreciableLayers);
-        this._rectifyLayersOrder(layerOptions.layers);
+        this.rectifyLayersOrder(layerOptions.layers);
         this.fire('mapcreatesucceeded', {
           ...layerOptions,
           map: this.map,
@@ -2244,22 +2244,11 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
       }
     }
 
-    _rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
-      const renderLayers = appreciableLayers
-        .filter((item) => !item.reused)
-        .reduce((layers, layer) => {
-          return layers.concat(layer.renderLayers);
-        }, []);
+    rectifyLayersOrder(appreciableLayers, topLayerBeforeId) {
+      const exsitLayers = super.rectifyLayersOrder(appreciableLayers, topLayerBeforeId);
       const labelLayerIds = [];
-      const exsitLayers = renderLayers.filter((layerId) => !!this.map.getLayer(layerId));
       for (let index = exsitLayers.length - 1; index > -1; index--) {
         const targetlayerId = exsitLayers[index];
-        const afterLayers = exsitLayers.slice(index + 1);
-        let beforLayerId = afterLayers.find((id) => this.map.style._layers[id]);
-        if (!afterLayers.length) {
-          beforLayerId = topLayerBeforeId;
-        }
-        this.map.moveLayer(targetlayerId, beforLayerId);
         const labelLayerId = this._getSymbolLabelLayerName(targetlayerId);
         if (this.map.getLayer(labelLayerId)) {
           labelLayerIds.push(labelLayerId);
@@ -2781,7 +2770,7 @@ export function createWebMapV2Extending(SuperClass, { MapManager, mapRepo }) {
         const appreciableLayers = this.getLayers();
         const selfAppreciableLayers = this.getSelfAppreciableLayers(appreciableLayers);
         const topLayerBeforeId = this._findTopLayerBeforeId(selfAppreciableLayers);
-        this._rectifyLayersOrder(selfAppreciableLayers, topLayerBeforeId);
+        this.rectifyLayersOrder(selfAppreciableLayers, topLayerBeforeId);
         this.fire('layeraddchanged', this._getSelfAppreciableLayers(appreciableLayers));
       }
     }

test/mapboxgl/mapping/WebMapSpec.js

@@ -1263,4 +1263,27 @@ describe('mapboxgl_WebMap', () => {
     };
     datavizWebmap.once('mapcreatesucceeded', callback);
   });
+
+  it('rectifyLayersOrder', (done) => {
+    const commonOption = {
+      server: 'http://fack:8190/iportal/',
+      target: 'map',
+      withCredentials: false
+    };
+    datavizWebmap = new WebMap(
+      '',
+      { ...commonOption },
+      mapOptionsList[0]
+    );
+    const callback = function ({map}) {
+      let layers = datavizWebmap.getLayers();
+      expect(layers.length).toBe(2);
+      let newLayers = [layers[1], layers[0]];
+      datavizWebmap.rectifyLayersOrder(newLayers);
+      const layersOnMap = map.getStyle().layers;
+      expect(layersOnMap[0].id).toBe('未命名数据')
+      done();
+    };
+    datavizWebmap.once('mapcreatesucceeded', callback);
+  });
 });

test/maplibregl/mapping/WebMapSpec.js

@@ -1244,4 +1244,27 @@ describe('maplibregl_WebMap', () => {
     };
     datavizWebmap.once('mapcreatesucceeded', callback);
   });
+
+  it('rectifyLayersOrder', (done) => {
+    const commonOption = {
+      server: 'http://fack:8190/iportal/',
+      target: 'map',
+      withCredentials: false
+    };
+    datavizWebmap = new WebMap(
+      '',
+      { ...commonOption },
+      mapOptionsList[0]
+    );
+    const callback = function ({map}) {
+      let layers = datavizWebmap.getLayers();
+      expect(layers.length).toBe(2);
+      let newLayers = [layers[1], layers[0]];
+      datavizWebmap.rectifyLayersOrder(newLayers);
+      const layersOnMap = map.getStyle().layers;
+      expect(layersOnMap[0].id).toBe('未命名数据')
+      done();
+    };
+    datavizWebmap.once('mapcreatesucceeded', callback);
+  });
 });