【feature】L7 filter 优化; map 加载相同的l7layer优化;

Author: xiongjiaojiao

package.json

@@ -154,6 +154,7 @@
     "jsonsql": "0.2.5",
     "leaflet": "1.9.4",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.difference": "^4.5.0",
     "lodash.remove": "^4.7.0",
     "lodash.topairs": "4.3.0",

src/mapboxgl/mapping/utils/L7LayerUtil.js

@@ -7,6 +7,7 @@ import * as G2 from '@antv/g2';
 import { Util } from '../../core/Util';
 import { L7Layer, L7 } from '../../overlay/L7Layer';
 import Color from './Color';
+import debounce from 'lodash.debounce';
 
 const SelectStyleTypes = {
   basic: 'base',
@@ -1990,7 +1991,16 @@ function getL7Layer(l, sourceInfo) {
     l7Layer.animate(l.animate);
   }
   if (l.filter) {
-    l7Layer.filter(l.filter.field, l.filter.values);
+    const refresh = debounce(function () {
+      layer.reRender();
+    }, 500);
+    l7Layer.filter(l.filter.field, (...args) => {
+      const result = l.filter.values(...args);
+      if (result) {
+        refresh();
+      }
+      return result;
+    });
   }
   return layer;
 }

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

@@ -196,7 +196,7 @@ export class WebMap extends mapboxgl.Evented {
 
   async copyLayer(id, layerInfo = {}) {
     const matchLayer = this._mapInfo.layers.find(layer => layer.id === id);
-    if (!matchLayer || this.map.getLayer(layerInfo.id)) {
+    if (!matchLayer || this.getLayerOnMap(layerInfo.id)) {
       return;
     }
     const copyLayerId = layerInfo.id || `${matchLayer.id}_copy`;
@@ -496,7 +496,7 @@ export class WebMap extends mapboxgl.Evented {
     }
     for (const layer of layersToMap) {
       const originId = layer.id;
-      if (this.map.getLayer(layer.id)) {
+      if (this.getLayerOnMap(layer.id)) {
         const layerId = layer.id + timestamp;
         layer.id = layerId;
       }
@@ -526,6 +526,34 @@ export class WebMap extends mapboxgl.Evented {
     };
   }
 
+  getLayerOnMap(layerId) {
+    const overlayLayer = this.map.overlayLayersManager[layerId];
+    if (overlayLayer) {
+      return overlayLayer;
+    }
+    const l7MarkerLayers = getL7MarkerLayers();
+    const l7MarkerLayer = l7MarkerLayers[layerId];
+    if (l7MarkerLayer) {
+      return l7MarkerLayer;
+    }
+    return this.map.getLayer(layerId);
+  }
+
+  _findLayerCatalog(items, id) {
+    for (const item of items) {
+      if (item.id === id) {
+        return item;
+      }
+      if (item.children) {
+        const found = this._findLayerCatalog(item.children, id);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null; 
+  }
+
   _deleteLayerCatalog(catalogs, id) {
     for (let index = 0; index < catalogs.length; index++) {
       const catalog = catalogs[index];
@@ -539,14 +567,20 @@ export class WebMap extends mapboxgl.Evented {
     }
   }
 
-  _updateLayerCatalogsId({ loopData, catalogs, layerIdMapList, catalogTypeField = 'type', layerIdsField = 'parts', unspportedLayers }) {
+  _updateLayerCatalogsId({
+    loopData,
+    catalogs,
+    layerIdMapList,
+    catalogTypeField = 'type',
+    layerIdsField = 'parts',
+    unspportedLayers
+  }) {
     loopData.forEach((loopItem) => {
-      const catalog = catalogs.find(item => item.id === loopItem.id);
-      const { id, children } = catalog;
-      if (catalog[catalogTypeField] === 'group') {
+      const { id, children } = loopItem;
+      if (loopItem[catalogTypeField] === 'group') {
         this._updateLayerCatalogsId({
           loopData: children,
-          catalogs: children,
+          catalogs,
           layerIdMapList,
           catalogTypeField,
           layerIdsField,
@@ -556,6 +590,7 @@ export class WebMap extends mapboxgl.Evented {
       }
       const matchLayer = layerIdMapList.find((item) => item.originId === id);
       if (matchLayer) {
+        const catalog = this._findLayerCatalog(catalogs, id);
         catalog.id = matchLayer.renderId;
         if (catalog[layerIdsField]) {
           catalog[layerIdsField] = this._renameLayerIdsContent(catalog[layerIdsField], layerIdMapList);
@@ -683,6 +718,7 @@ export class WebMap extends mapboxgl.Evented {
     const { catalogs = [], datas = [] } = this._mapResourceInfo;
     const projectCataglogs = this._getLayerInfosFromCatalogs(catalogs, 'catalogType');
     const metadataCatalogs = this._getLayerInfosFromCatalogs(this._mapInfo.metadata.layerCatalog);
+    const l7MarkerLayers = getL7MarkerLayers();
     const layers = allLayersOnMap.reduce((layersList, layer) => {
       const containLayer = metadataCatalogs.find((item) => {
         if (item.parts && item.id !== layer.id) {
@@ -743,6 +779,9 @@ export class WebMap extends mapboxgl.Evented {
         dataSource,
         themeSetting: {}
       });
+      if (l7MarkerLayers[layer.id]) {
+        overlayLayers.l7MarkerLayer = l7MarkerLayers[layer.id];
+      }
       if (isL7Layer(layer)) {
         overlayLayers.l7Layer = true;
       }
@@ -813,6 +852,9 @@ export class WebMap extends mapboxgl.Evented {
         if (l7MarkerLayers[id]) {
           formatItem.l7MarkerLayer = l7MarkerLayers[id];
         }
+        if (matchLayer.l7Layer) {
+          formatItem.l7Layer = matchLayer.l7Layer;
+        }
       }
       return formatItem;
     });
@@ -1106,7 +1148,7 @@ export class WebMap extends mapboxgl.Evented {
     if (currentType === 'simple') {
       return !!this._getImageIdFromValue(symbolsContent.value.style, SymbolType[symbolType]).length;
     }
-    const styles = (symbolsContent.values).map((v) => v.value).concat(symbolsContent.defaultValue);
+    const styles = symbolsContent.values.map((v) => v.value).concat(symbolsContent.defaultValue);
     return styles.every((v) => {
       return !!this._getImageIdFromValue(v.style, SymbolType[symbolType]).length;
     });

src/mapboxgl/package.json

@@ -26,6 +26,7 @@
     "canvg": "3.0.10",
     "fast-xml-parser": "^4.2.7",
     "flatgeobuf": "3.31.1",
+    "lodash.debounce": "^4.0.8",
     "rbush": "^2.0.2",
     "proj4": "2.11.0",
     "flv.js": "^1.6.2",

test/mapboxgl/mapping/utils/L7LayerUtilSpec.js

@@ -1,5 +1,6 @@
 import { addL7Layers, isL7Layer, getL7Filter } from '../../../../src/mapboxgl/mapping/utils/L7LayerUtil';
 import * as mockL7 from '../../../tool/mock_l7';
+import * as L7 from '../../../../src/mapboxgl/overlay/L7/l7-render';
 import { FetchRequest } from '@supermap/iclient-common/util/FetchRequest';
 
 describe('L7LayerUtil', () => {
@@ -481,6 +482,72 @@ describe('L7LayerUtil', () => {
     });
   });
 
+  it('filter reRender', (done) => {
+    spyOn(FetchRequest, 'post').and.callFake((url) => {
+      if (url.indexOf('/data-ZhongGuoDiTu/rest/data/featureResults.geojson') > -1) {
+        return Promise.resolve(new Response(RESTDATA_FEATURES_RES));
+      }
+      return Promise.resolve();
+    });
+    const layers = [
+      {
+        filter: ['all', ['==', '$type', 'Polygon']],
+        layout: {
+          visibility: 'visible',
+          'line-extrusion-pattern-interval': 20,
+          'line-extrusion-animate-duration': 6,
+          'line-extrusion-pattern-blend': 'normal',
+          'line-extrusion-animate-trailLength': 1.5,
+          'line-extrusion-animate-interval': 0.6
+        },
+        metadata: {
+          MapStudio: {
+            title: '县级行政区划@link'
+          }
+        },
+        maxzoom: 24,
+        paint: {
+          'line-extrusion-base': 0,
+          'line-extrusion-opacity': 1,
+          'line-extrusion-width': 20,
+          'line-extrusion-base-fixed': false,
+          'line-extrusion-color': '#4CC8A3',
+          'line-extrusion-pattern': 'ms_icon_shape1'
+        },
+        source: 'ms_县级行政区划@link_1719822607738_6',
+        'source-layer': '县级行政区划@link',
+        id: '县级行政区划@link_outline(0_24)',
+        type: 'line-extrusion',
+        minzoom: 0
+      }
+    ];
+    const sources = {
+      'ms_县级行政区划@link_1719822607738_6': {
+        tiles: [
+          'http://localhost:8195/portalproxy/592c4095f464540e/iserver/services/map-LinkMap/restjsr/v1/vectortile/maps/%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92%40link/tiles/{z}/{x}/{y}.mvt'
+        ],
+        bounds: [102.98962307000005, 30.090978575000065, 104.89626180000005, 31.437765225000078],
+        type: 'vector',
+        promoteId: 'spmid'
+      }
+    };
+    const nextOptions = {
+      ...addOptions,
+      webMapInfo: { ...mapstudioWebMap_L7LayersRes, layers, sources },
+      l7Layers: layers
+    };
+    const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
+    const spy1 = spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);
+    addL7Layers(nextOptions).then(() => {
+      setTimeout(() => {
+        expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
+        spy.calls.reset();
+        spy1.calls.reset();
+        done();
+      }, 1100);
+    });
+  });
+
   it('filter expression', () => {
     const expr = ['any', ['all', ['==', ['get', 'smpid'], 5], ['==', ['get', '新建字段'], '']]];
     const result = getL7Filter(expr);