【feature】l7layer getlayer 新增接口reRender; l7 指定featureId优化

Author: xiongjiaojiao

src/mapboxgl/mapping/utils/L7LayerUtil.js

@@ -640,9 +640,9 @@ function vectorSourceToL7Source(source, sourceLayer, options) {
   };
   if (isIportalProxyServiceUrl(result.data, options)) {
     Object.assign(result.parser, {
-        requestParameters: {
-            credentials: 'include'
-        }
+      requestParameters: {
+        credentials: 'include'
+      }
     });
   }
   return result;
@@ -978,12 +978,12 @@ function isSolidDasharray(dasharray) {
 }
 
 /**
-* 根据dasharray获取线型
-* @param dasharray
-*/
+ * 根据dasharray获取线型
+ * @param dasharray
+ */
 function getLineTypeByDashArray(dasharray) {
   if (dasharray && dasharray.length > 1 && !isSolidDasharray(dasharray)) {
-      return 'dash';
+    return 'dash';
   }
   return 'solid';
 }
@@ -1957,9 +1957,18 @@ function getL7Layer(l, sourceInfo) {
     [MSLayerType.heatmap]: 'HeatmapLayer'
   };
   const source = l.source || {};
+  // 解决L7结构化数据监听click事件会返回多个features问题
+  let promoteId = sourceInfo.promoteId;
+  if (!promoteId) {
+    promoteId = sourceInfo.tiles && sourceInfo.tiles[0].includes('/structureddata/') ? 'smpid' : undefined;
+  }
   const layer = new L7Layer({
     type: typeRule[l.type],
-    options: { ...l.options, layerID: (l.options || {}).name, featureId: sourceInfo.promoteId } // 解决L7结构化数据监听click事件会返回多个features问题
+    options: {
+      ...l.options,
+      layerID: (l.options || {}).name,
+      featureId: promoteId
+    }
   });
   // getL7Layer返回原生antv l7 layer的实例
   const l7Layer = layer.getL7Layer();

src/mapboxgl/overlay/L7Layer.js

@@ -58,6 +58,7 @@ export class L7Layer extends CustomOverlayLayer {
     this.eventListeners = {};
     this.selectedDatas = [];
     this.setSelectedDatasFn = this.setSelectedDatas.bind(this);
+    this.reRenderFn = this.reRender.bind(this);
   }
   /**
    * @function L7Layer.prototype.getL7Layer
@@ -117,7 +118,8 @@ export class L7Layer extends CustomOverlayLayer {
       id: this.id,
       l7layer: this.l7layer,
       scene: this.scene,
-      setSelectedDatas: this.setSelectedDatasFn
+      setSelectedDatas: this.setSelectedDatasFn,
+      reRender: this.reRenderFn
     };
     delete layerInfo.sourceId;
     delete layerInfo.layerID;

test/mapboxgl/mapping/utils/L7LayerUtilSpec.js

@@ -7,9 +7,12 @@ describe('L7LayerUtil', () => {
   const mapstudioWebMap_L7LayersRes = JSON.parse(mapstudioWebMap_L7Layers);
 
   const scene = new mockL7.Scene();
+  let layerMaplist = {};
   const map = {
     getL7Scene: () => Promise.resolve(scene),
-    addLayer: () => {},
+    addLayer: (layer) => {
+      layerMaplist[layer.id] = layer;
+    },
     getZoom: () => 3,
     getLayer: (layerId) => layerId.includes('-highlight')
   };
@@ -37,6 +40,10 @@ describe('L7LayerUtil', () => {
     options
   };
 
+  afterEach(() => {
+    layerMaplist = {};
+  });
+
   it('add od layer', (done) => {
     spyOn(FetchRequest, 'get').and.callFake((url, _, options) => {
       expect(options.withCredentials).toBe(options.withCredentials);
@@ -351,8 +358,11 @@ describe('L7LayerUtil', () => {
     const spy1 = spyOn(nextOptions.map, 'addLayer').and.callThrough();
     const spy2 = spyOn(nextOptions.options, 'emitterEvent');
     addL7Layers(nextOptions).then(() => {
-      // expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
+      expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
       expect(nextOptions.options.emitterEvent).toHaveBeenCalledTimes(1);
+      expect(layerMaplist['ms_New_LINE_1716864449916_8']).toBeUndefined();
+      expect(layerMaplist['ms_label_县级行政区划_1719818803020_5']).toBeTruthy();
+      expect(layerMaplist['ms_label_县级行政区划_1719818803020_5'].getLayer().featureId).toBe('smpid');
       spy1.calls.reset();
       spy2.calls.reset();
       done();
@@ -461,7 +471,7 @@ describe('L7LayerUtil', () => {
         ],
         bounds: [102.98962307000005, 30.090978575000065, 104.89626180000005, 31.437765225000078],
         type: 'vector',
-        promoteId: 'spmid'
+        promoteId: 'SmID'
       }
     };
     const nextOptions = {
@@ -477,6 +487,7 @@ describe('L7LayerUtil', () => {
     const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
     addL7Layers(nextOptions).then(() => {
       expect(nextOptions.map.addLayer.calls.count()).toEqual(2);
+      expect(layerMaplist['县级行政区划@link_outline(0_24)'].getLayer().featureId).toBe('SmID');
       spy.calls.reset();
       done();
     });
@@ -539,10 +550,14 @@ describe('L7LayerUtil', () => {
     const spy = spyOn(nextOptions.map, 'addLayer').and.callThrough();
     const spy1 = spyOn(L7, 'LineLayer').and.callFake(mockL7.PointLayer);
     addL7Layers(nextOptions).then(() => {
+      const iclientL7Layer = layerMaplist['县级行政区划@link_outline(0_24)'];
+      const spy2 = spyOn(iclientL7Layer, 'reRender').and.callThrough();
       setTimeout(() => {
         expect(nextOptions.map.addLayer.calls.count()).toEqual(1);
+        expect(iclientL7Layer.reRender.calls.count()).toEqual(1);
         spy.calls.reset();
         spy1.calls.reset();
+        spy2.calls.reset();
         done();
       }, 1100);
     });

test/mapboxgl/overlay/L7LayerSpec.js

@@ -395,13 +395,15 @@ describe('mapboxgl L7Layer', () => {
     expect(layerSource.type).toBe('vector');
     let features;
     const result = {
-      cb: function(data) { features = data; }
+      cb: function (data) {
+        features = data;
+      }
     };
     spyOn(result, 'cb').and.callThrough();
     layer.queryRenderedFeatures([0, 0], {}, result.cb);
     expect(result.cb.calls.count()).toBe(1);
     expect(features).not.toBeUndefined();
-    expect(layer.querySourceFeatures().length).toBeGreaterThan(0)
+    expect(layer.querySourceFeatures().length).toBeGreaterThan(0);
 
     layer = new L7Layer({ type: 'PointLayer', options: { layerID: 'empty-test' } });
     l7Layer = layer.getL7Layer();
@@ -467,6 +469,13 @@ describe('mapboxgl L7Layer', () => {
     expect(layerOnMap.paint).toEqual(options.paint);
     expect(layerOnMap.layout.visibility).toBeTruthy();
     expect(layerOnMap.filter).toEqual(filter);
+    spyOn(map, 'triggerRepaint');
+    layerOnMap.reRender();
+    expect(map.triggerRepaint).toHaveBeenCalled();
+    const activeFeature = { properties: { name: 'test' } };
+    layerOnMap.setSelectedDatas(activeFeature);
+    expect(layer.selectedDatas).toEqual([activeFeature]);
+    layer.setSelectedDatas([]);
     expect(layer.getPaintProperty('point-extrusion-width')).toBe(paint['point-extrusion-width']);
     expect(layer.getLayoutProperty('point-extrusion-shape')).toBe(layout['point-extrusion-shape']);
     const layerFilter = layer.getFilter();
@@ -499,7 +508,7 @@ describe('mapboxgl L7Layer', () => {
     spyOn(l7Layer, 'on');
     spyOn(l7Layer, 'once');
     spyOn(l7Layer, 'off');
-    const cb = () => {}
+    const cb = () => {};
     layer.on('mouseover', cb);
     layer.once('mouseover', cb);
     layer.off('mouseover', cb);