fix 过滤显示l7 drill 图层 reivew by xiongjj

Author: xilanhuaweidapao

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

@@ -87,6 +87,12 @@ export const LEGEND_STYLE_TYPES = {
   STYLE: 'style'
 };
 
+const UN_SUPPORTED_LAYER_TYPE = ['point-extrusion', 'heatmap-extrusion', 'radar', 'line-extrusion', 'line-curve', 'line-curve-extrusion', 'chart']
+const UN_SUPPORTED_LAYER_ATTRS_MAP = {
+  circle: ['circle-animate-speed', 'circle-animate-rings'],
+  line: ['line-animate-duration', 'line-animate-interval ', 'line-animate-trailLength ']
+}
+
 export class WebMap extends mapboxgl.Evented {
   constructor(mapId, options, mapOptions = {}) {
     super();
@@ -116,6 +122,7 @@ export class WebMap extends mapboxgl.Evented {
    * @param {Object} map - map 实例。
    */
   initializeMap(mapInfo, map) {
+    mapInfo = this._handleUnSupportedLayers(mapInfo);
     this._mapInfo = mapInfo;
     if (map) {
       this._appendLayers = true;
@@ -333,15 +340,19 @@ export class WebMap extends mapboxgl.Evented {
   }
 
   _updateLayerCatalogsId(catalogs, layerIdMapList) {
-    catalogs.forEach((catalog) => {
+    catalogs.forEach((catalog, index) => {
       const { id, children } = catalog;
       if (catalog.type === 'group') {
         this._updateLayerCatalogsId(children, layerIdMapList);
         return;
       }
       const matchLayer = layerIdMapList.find((item) => item.originId === id);
-      catalog.originId = id;
-      catalog.id = matchLayer.renderId;
+      if (matchLayer) {
+        catalog.originId = id;
+        catalog.id = matchLayer.renderId;
+      } else {
+        catalogs.splice(index, 1);
+      }
     });
   }
 
@@ -358,15 +369,15 @@ export class WebMap extends mapboxgl.Evented {
     this.fire('addlayerssucceeded', { map: this.map, mapparams: this.mapParams, layers: matchLayers });
   }
 
-  _getLayerInfosFromCatalogs(catalogs) {
+  _getLayerInfosFromCatalogs(catalogs, layers) {
     const results = [];
     for (let i = 0; i < catalogs.length; i++) {
-      const { catalogType, children, visible } = catalogs[i];
-      if (catalogType === 'layer' && visible) {
+      const { catalogType, children, visible, id } = catalogs[i];
+      if (catalogType === 'layer' && visible && layers.find((layer) => { return layer.id === id})) {
         results.push(catalogs[i]);
       }
       if (catalogType === 'group' && children && children.length > 0) {
-        const result = this._getLayerInfosFromCatalogs(children);
+        const result = this._getLayerInfosFromCatalogs(children, layers);
         results.push(...result);
       }
     }
@@ -422,15 +433,15 @@ export class WebMap extends mapboxgl.Evented {
   _generateLayers() {
     const allLayersOnMap = this._getLayersOnMap();
     const { catalogs = [], datas = [] } = this._mapResourceInfo;
-    const originLayers = this._getLayerInfosFromCatalogs(catalogs);
+    const originLayers = this._getLayerInfosFromCatalogs(catalogs, this._mapInfo.layers);
     const layers = allLayersOnMap.map((layer) => {
       const matchOriginLayer = this._layerIdRenameMapList.find((item) => item.renderId === layer.id) || {};
       const matchLayer = originLayers.find((item) => item.id === matchOriginLayer.originId) || {};
       const { title = layer.id, visualization, layersContent, msDatasetId } = matchLayer;
       let dataType = '';
       let dataId = '';
       for (const data of datas) {
-        const matchData = data.datasets.find((dataset) => dataset.msDatasetId === msDatasetId);
+        const matchData = data.datasets && data.datasets.find((dataset) => dataset.msDatasetId === msDatasetId);
         if (matchData) {
           dataType = data.sourceType;
           dataId = matchData.datasetId;
@@ -625,7 +636,7 @@ export class WebMap extends mapboxgl.Evented {
 
   _createLegendInfo() {
     const { catalogs = [] } = this._mapResourceInfo;
-    const originLayers = this._getLayerInfosFromCatalogs(catalogs);
+    const originLayers = this._getLayerInfosFromCatalogs(catalogs, this._mapInfo.layers);
     for (const layer of originLayers) {
       const { renderer } = layer.visualization || {};
       if (!renderer) {
@@ -1072,4 +1083,47 @@ export class WebMap extends mapboxgl.Evented {
     });
     return Number((topBoundary - bottomBoundary).toFixed(2));
   }
+
+  _handleUnSupportedLayers(mapInfo) {
+    let filterLayerIds = [];
+    const unSupportedMsg = 'layer are not supported yet';
+    let { layers, interaction } = mapInfo;
+    if (interaction && interaction.drill) {
+      this.fire('getlayersfailed', { error: `drill ${unSupportedMsg}` });
+      interaction.drill.forEach((drillItem) => {
+        filterLayerIds = filterLayerIds.concat(drillItem.layerIds);
+      });
+    }
+    layers.forEach((layerInfo) => {
+      if (UN_SUPPORTED_LAYER_TYPE.includes(layerInfo.type)) {
+        this.fire('getlayersfailed', { error: `${layerInfo.type} ${unSupportedMsg}` });
+        filterLayerIds.push(layerInfo.id);
+        return;
+      }
+      if (layerInfo.type === 'heatmap' && layerInfo.paint && ['spuare', 'hexagon'].includes(layerInfo.paint['heatmap-shape'])) {
+        this.fire('getlayersfailed', { error: `${layerInfo.paint['heatmap-shape']}-heatmap ${unSupportedMsg}` });
+        filterLayerIds.push(layerInfo.id);
+      }
+      let partialUnSupportProps = UN_SUPPORTED_LAYER_ATTRS_MAP[layerInfo.type];
+      let triggered = false;
+      if (partialUnSupportProps) {
+        partialUnSupportProps.forEach((attr) => {
+          layerInfo.layout && Object.keys(layerInfo.layout).forEach((layoutProp) => {
+            if (layoutProp === attr && !triggered) {
+              this.fire('getlayersfailed', { error: `${layerInfo.type}-animate ${unSupportedMsg}` });
+              filterLayerIds.push(layerInfo.id);
+              triggered = true;
+            }
+          });
+        });
+      }
+    });
+    mapInfo.layers = layers.filter((layer) => {
+      return !filterLayerIds.includes(layer.id);
+    });
+    // metadata.layerCatalog = metadata.layerCatalog.filter((catalog) => {
+    //   return !filterLayerIds.includes(catalog.id);
+    // });
+    return mapInfo;
+  }
 }

test/mapboxgl/mapping/WebMapV3Spec.js

@@ -280,4 +280,27 @@ describe('mapboxgl-webmap3.0', () => {
       done();
     });
   });
+
+  it('filter l7 and drill test', (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_l7_and_drill);
+    const mapstudioWebmap = new WebMapV3(mapInfo, {
+      server: server,
+      target: 'map'
+    });
+    let count = 0;
+    mapstudioWebmap.on('getlayersfailed', ({ error }) => {
+      expect(['drill', 'line-curve', 'chart', 'circle-animate', 'heatmap-extrusion', 'point-extrusion'].indexOf(error.split(' ')[0]) > -1).toBeTruthy();
+      count++;
+      if (count === 7) {
+        done();
+      }
+    });
+    mapstudioWebmap.initializeMap(mapInfo);
+  });
 });