[fix]l7聚合图数据更新，reRender时机

Author: luoxiao-supermap

src/mapboxgl/overlay/L7Layer.js

@@ -61,6 +61,15 @@ export class L7Layer {
   addSceneLayer(scene) {
     this.scene = scene;
     this.scene.addLayer(this.l7layer);
+    this.updateSourceEffect();
+  }
+
+  updateSourceEffect() {
+    const source = this.l7layer.getSource();
+    source &&
+      source.on('update', () => {
+        this.reRender();
+      });
   }
 
   onAdd(map) {

test/mapboxgl/overlay/L7LayerSpec.js

@@ -16,7 +16,8 @@ describe('mapboxgl L7Layer', () => {
       longitude: 121.4316962,
       latitude: 31.26082325,
       unit_price: 71469.4,
-      count: 2
+      count: 2,
+      v: 100
     }
   ];
   beforeAll((done) => {
@@ -30,6 +31,8 @@ describe('mapboxgl L7Layer', () => {
 
     spyOn(L7, 'PointLayer').and.callFake(mockL7.PointLayer);
     spyOn(L7, 'GeometryLayer').and.callFake(mockL7.GeometryLayer);
+    spyOn(L7, 'HeatmapLayer').and.callFake(mockL7.HeatmapLayer);
+
     spyOn(L7, 'Scene').and.callFake(mockL7.Scene);
     spyOn(L7, 'Mapbox').and.callFake(mockL7.Mapbox);
     testDiv = window.document.createElement('div');
@@ -321,4 +324,49 @@ 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();
+  });
 });

test/tool/mock_l7.js

@@ -5,7 +5,7 @@ class Scene {
       stopAnimate: () => true,
       startAnimate: () => true
     };
-    this.callbacks = {}
+    this.callbacks = {};
   }
   removeAllLayer() {}
   getLayer() {
@@ -19,7 +19,7 @@ class Scene {
   }
   on(type, callback) {
     this.callbacks[type] = callback;
-    callback()
+    callback();
   }
   emit(type) {
     this.callbacks[type]();
@@ -49,6 +49,7 @@ class Layer {
     this.layerModel = {
       spriteAnimate: false
     };
+    this.stacks = {};
   }
   source() {
     return this;
@@ -90,7 +91,23 @@ class Layer {
   hide() {
     return this;
   }
+  getSource() {
+    return {
+      on: (type, cb) => {
+        this.stacks[type] = [cb];
+      },
+      emit: (type) => {
+        this.stacks[type].forEach((cb) => {
+          cb();
+        });
+      }
+    };
+  }
+  setData() {
+    this.getSource().emit('update');
+  }
 }
 const PointLayer = Layer;
 const GeometryLayer = Layer;
-export { PointLayer, GeometryLayer, Scene, Mapbox, Maplibre };
+const HeatmapLayer = Layer;
+export { PointLayer, GeometryLayer, HeatmapLayer, Scene, Mapbox, Maplibre };