fix 图层管理添加地图无法取消的问题 review by xiongjj

Author: chenxianhuii

src/mapboxgl/mapping/webmap/v3/WebMap.js

@@ -455,7 +455,8 @@ export class WebMap extends mapboxgl.Evented {
   }
 
   _updateLayerCatalogsId({ loopData, catalogs, layerIdMapList, catalogTypeField = 'type', layerIdsField = 'parts', unspportedLayers }) {
-    loopData.forEach((catalog) => {
+    loopData.forEach((loopItem) => {
+      const catalog = catalogs.find(item => item.id === loopItem.id);
       const { id, children } = catalog;
       if (catalog[catalogTypeField] === 'group') {
         this._updateLayerCatalogsId({
@@ -549,7 +550,7 @@ export class WebMap extends mapboxgl.Evented {
         delete layer['source-layer'];
       }
       return layer;
-    });
+    }).filter(item => this.map.getLayer(item.id));
     if (this._appendLayers) {
       return selfLayers;
     }
@@ -682,7 +683,7 @@ export class WebMap extends mapboxgl.Evented {
     }, []);
     const allLayersOnMap = this._getLayersOnMap();
     const extraLayers = allLayersOnMap.filter((layer) => !layerIdsFromCatalog.some((id) => id === layer.id));
-    const layerCatalogs = layerCatalog.concat(extraLayers);
+    const layerCatalogs = layerCatalog.concat(extraLayers).filter(item => this.map.getLayer(item.id));
     const appreciableLayers = this.getAppreciableLayers();
     const formatLayerCatalog = this._createFormatCatalogs(layerCatalogs, appreciableLayers);
     return formatLayerCatalog;

test/mapboxgl/mapping/WebMapV3Spec.js

@@ -668,4 +668,42 @@ describe('mapboxgl-webmap3.0', () => {
       done();
     });
   });
+
+  it('layercatalog order in layerManerger', (done) => {
+    spyOn(FetchRequest, 'get').and.callFake((url) => {
+      if (url.indexOf('/sprite') > -1) {
+        return Promise.resolve(new Response(msSpriteInfo));
+      }
+      return Promise.resolve();
+    });
+    const mapInfo = JSON.parse(mapstudioWebMap_symbol);
+    mapstudioWebmap = new WebMapV3(mapInfo, {
+      server: server,
+      target: 'map'
+    });
+    mapstudioWebmap.initializeMap(mapInfo);
+
+    mapstudioWebmap.on('addlayerssucceeded', ({ map }) => {
+      const layerCatalogs = mapstudioWebmap.getLayerCatalog();
+      map.addSource('testsource', {
+        type: 'geojson',
+        data: {
+          type: 'FeatureCollection',
+          features: []
+        }
+      });
+      map.addLayer({
+        metadata: {},
+        paint: {
+          'circle-color': '#f75564'
+        },
+        id: 'testlayer',
+        source: 'testsource',
+        type: 'circle'
+      });
+      expect(mapstudioWebmap.getLayerCatalog().length).toBe(layerCatalogs.length + 1);
+      expect(mapstudioWebmap.getLayerCatalog()[layerCatalogs.length].id).toBe('testlayer');
+      done();
+    });
+  });
 });