[fix]新增l7layer的reRender时机

Author: luoxiao-supermap

src/common/overlay/l7/L7LayerBase.js

@@ -95,6 +95,7 @@ export class L7LayerBase extends CustomOverlayLayer {
       source.on('update', () => {
         this.reRender();
       });
+    this.l7layer.on('add', () => this.reRender());
   }
 
   getLayer() {
@@ -215,15 +216,15 @@ export class L7LayerBase extends CustomOverlayLayer {
               type: 'Point'
             },
             properties: {
-             ...feature
+              ...feature
             }
-          }
+          };
         });
         sourceInfo.getData = () => {
           return {
             type: 'FeatureCollection',
             features: formatData
-          }
+          };
         };
         break;
     }
@@ -302,7 +303,9 @@ export class L7LayerBase extends CustomOverlayLayer {
     }
     const { layerSource, pickingService } = this.l7layer;
     let datas = pickingService.handleRawFeature(layerSource.data.dataArray, this.l7layer);
-    const { parser: { type } } = layerSource;
+    const {
+      parser: { type }
+    } = layerSource;
     if (type === 'mvt') {
       const { tileset: { cacheTiles = [] } = {} } = layerSource;
       const { sourceLayer, featureId = 'id' } = this.l7layer.rawConfig;

test/mapboxgl/overlay/L7LayerSpec.js

@@ -94,6 +94,53 @@ describe('mapboxgl_L7Layer', () => {
       done();
     });
   });
+  it('HeatmapLayer grid updateSource', (done) => {
+    var layer = new L7Layer({ type: 'HeatmapLayer' });
+    var l7Layer = layer.getL7Layer();
+    l7Layer
+      .source(data, {
+        parser: {
+          type: 'json',
+          x: 'longitude',
+          y: 'latitude'
+        },
+        transforms: [
+          {
+            type: 'grid',
+            size: 2000000,
+            field: 'v',
+            method: 'sum'
+          }
+        ]
+      })
+      .shape('circle')
+      .active(true)
+      .animate(true)
+      .size(56)
+      .color('#4cfd47');
+    spyOn(layer, 'reRender');
+    map.addLayer(layer);
+    l7Layer.setData(data, {
+      parser: {
+        type: 'json',
+        x: 'j',
+        y: 'w'
+      },
+      transforms: [
+        {
+          type: 'grid',
+          size: 200000,
+          field: 'v',
+          method: 'sum'
+        }
+      ]
+    });
+    expect(l7Layer).not.toBeNull();
+    setTimeout(() => {
+      expect(layer.reRender).toHaveBeenCalledTimes(2);
+      done();
+    }, 200);
+  });
 
   it('getL7Scene1', (done) => {
     var layer = new L7Layer({ type: 'PointLayer' });
@@ -325,51 +372,6 @@ describe('mapboxgl_L7Layer', () => {
 
     done();
   });
-  it('HeatmapLayer grid updateSource', (done) => {
-    var layer = new L7Layer({ type: 'HeatmapLayer' });
-    var l7Layer = layer.getL7Layer();
-    l7Layer
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'longitude',
-          y: 'latitude'
-        },
-        transforms: [
-          {
-            type: 'grid',
-            size: 2000000,
-            field: 'v',
-            method: 'sum'
-          }
-        ]
-      })
-      .shape('circle')
-      .active(true)
-      .animate(true)
-      .size(56)
-      .color('#4cfd47');
-    map.addLayer(layer);
-    spyOn(layer, 'reRender');
-    l7Layer.setData(data, {
-      parser: {
-        type: 'json',
-        x: 'j',
-        y: 'w'
-      },
-      transforms: [
-        {
-          type: 'grid',
-          size: 200000,
-          field: 'v',
-          method: 'sum'
-        }
-      ]
-    });
-    expect(l7Layer).not.toBeNull();
-    expect(layer.reRender).toHaveBeenCalled();
-    done();
-  });
 
   it('mvt layer', (done) => {
     var layer = new L7Layer({ type: 'PointLayer' });