[fix]maplibre-l7多坐标系

Author: luoxiao-supermap

src/maplibregl/overlay/L7/l7-render.js

@@ -27,6 +27,51 @@ export class L7Layer extends L7LayerBase {
       this.l7layer = new L7[type]({ ...options, name: this.id });
       this.setDataFn = this.l7layer.setData.bind(this.l7layer);
     }
+    this.overlay = true;
+  }
+  /**
+   * @function L7Layer.prototype.getL7Layer
+   * @description 获取@antv/L7的layer实例。
+   * @returns {Object} @antv/L7的layer实例。
+   */
+  getL7Layer() {
+    return this.l7layer;
+  }
+
+  /**
+   * @function L7Layer.prototype.reRender
+   * @description  当修改@antv/L7的layer的配置时，重新渲染。
+   */
+  reRender() {
+    if (this.scene && this.scene.getLayer(this.l7layer.id)) {
+      this.scene.layerService.renderLayer(this.l7layer.id);
+    }
+    this.map && this.map.triggerRepaint();
+  }
+
+  moveLayer(id, beforeId) {
+    this.map.style.moveLayer(id, beforeId);
+  }
+
+  setVisibility(visibility) {
+    if (this.animateStatus) {
+      this.cancelAnimationFrame();
+    }
+    visibility ? this.l7layer.show() : this.l7layer.hide();
+    this.map.style.setLayoutProperty(this.id, 'visibility', visibility ? 'visible' : 'none');
+  }
+  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) {
@@ -36,10 +81,10 @@ export class L7Layer extends L7LayerBase {
       map.$l7scene = scene;
       scene.on('loaded', () => {
         this.addSceneLayer(scene);
-      })
+      });
       return;
     }
-    this.addSceneLayer(map.$l7scene)
+    this.addSceneLayer(map.$l7scene);
   }
 
   _getL7Filter(filter) {

src/maplibregl/overlay/L7Layer.js

@@ -8,30 +8,32 @@ var url = GlobeParameter.ChinaURL + '/zxyTileImage.png?z={z}&x={x}&y={y}';
 
 describe('maplibregl_L7Layer', () => {
   var originalTimeout;
-  var testDiv, map, getL7Scene, setLayoutProperty,removeLayer;
+  var testDiv, map, getL7Scene, setLayoutProperty, removeLayer;
   var data = [
     {
       id: '5011000000404',
       name: '铁路新村(华池路)',
       longitude: 121.4316962,
       latitude: 31.26082325,
       unit_price: 71469.4,
-      count: 2
+      count: 2,
+      v: 100
     }
   ];
   beforeAll((done) => {
     getL7Scene = maplibregl.Map.prototype.getL7Scene;
     setLayoutProperty = maplibregl.Map.prototype.setLayoutProperty;
     removeLayer = maplibregl.Map.prototype.removeLayer;
     mbglmap.prototype.getL7Scene = getL7Scene;
+    mbglmap.prototype.setLayoutProperty = setLayoutProperty;
 
     spyOn(maplibregl, 'Map').and.callFake(mbglmap);
 
     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, 'Maplibre').and.callFake(mockL7.Maplibre);
-
     testDiv = window.document.createElement('div');
     testDiv.setAttribute('id', 'map');
     testDiv.style.styleFloat = 'left';
@@ -83,14 +85,16 @@ describe('maplibregl_L7Layer', () => {
     document.body.removeChild(testDiv);
     map = null;
   });
+
   it('getL7Scene', (done) => {
     map.getL7Scene().then((scene) => {
       expect(scene).not.toBeNull();
       map.$l7scene = null;
       done();
     });
   });
-  it('getL7Scene', (done) => {
+
+  it('getL7Scene1', (done) => {
     var layer = new L7Layer({ type: 'PointLayer' });
     var l7Layer = layer.getL7Layer();
     l7Layer
@@ -111,6 +115,7 @@ describe('maplibregl_L7Layer', () => {
       map.$l7scene = null;
       done();
     });
+    expect(layer.isSourceLoaded()).toBeTruthy();
   });
 
   it('PointLayer', (done) => {
@@ -272,7 +277,6 @@ describe('maplibregl_L7Layer', () => {
     expect(map.style.setLayoutProperty).toHaveBeenCalled();
     expect(layer.animateStatus).toBeFalsy();
 
-
     map.setLayoutProperty(layer.id, 'visibility', 'visible');
     expect(l7Layer.show).toHaveBeenCalled();
     expect(map.style.setLayoutProperty).toHaveBeenCalled();
@@ -299,15 +303,17 @@ describe('maplibregl_L7Layer', () => {
     map.addLayer(layer);
     map.style.fire = () => {};
     map.style.setLayoutProperty = () => {};
+
     map.overlayLayersManager = { [layer.id]: layer };
     expect(l7Layer).not.toBeNull();
     map.setLayoutProperty = setLayoutProperty;
+
     spyOn(l7Layer, 'show');
     spyOn(l7Layer, 'hide');
     spyOn(map.style, 'setLayoutProperty');
     expect(layer.animateStatus).toBeTruthy();
 
-    map.setLayoutProperty(layer.id, 'visibility', 'hidden');
+    map.setLayoutProperty(layer.id, 'visibility', 'none');
     expect(l7Layer.hide).toHaveBeenCalled();
     expect(map.style.setLayoutProperty).toHaveBeenCalled();
     expect(layer.animateStatus).toBeFalsy();
@@ -318,6 +324,109 @@ describe('maplibregl_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' });
+    var l7Layer = layer.getL7Layer();
+    l7Layer
+      .source('http://localhost:8190/zhejiang.mbtiles/{z}/{x}/{y}.pbf', {
+        parser: {
+          type: 'mvt',
+          tileSize: 256,
+          zoomOffset: 0,
+          maxZoom: 9,
+          extent: [-180, -85.051129, 179, 85.051129]
+        }
+      })
+      .shape('circle')
+      .color('#4cfd47');
+    map.addLayer(layer);
+    map.style.fire = () => {};
+    map.style.setLayoutProperty = () => {};
+
+    map.overlayLayersManager = { [layer.id]: layer };
+    expect(layer.sourceId).toBe(layer.id);
+    const layerSource = layer.getSource(layer.id);
+    expect(layerSource.type).toBe('vector');
+    let features;
+    const result = {
+      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);
+
+    layer = new L7Layer({ type: 'PointLayer', options: { layerID: 'empty-test' } });
+    l7Layer = layer.getL7Layer();
+    l7Layer
+      .source('http://localhost:8190/zhejiang.mbtiles/{z}/{x}/{y}.pbf', {
+        parser: {
+          type: 'mvt',
+          tileSize: 256,
+          zoomOffset: 0,
+          maxZoom: 9,
+          extent: [-180, -85.051129, 179, 85.051129]
+        }
+      })
+      .shape('circle')
+      .color('#4cfd47');
+    map.addLayer(layer);
+    expect(layer.isSourceLoaded()).toBeFalsy();
+
+    map.overlayLayersManager = { [layer.id]: layer };
+    l7Layer.rawConfig.name = 'empty-test';
+    expect(layer.querySourceFeatures().length).toBe(0);
+    done();
+  });
 
   it('extend custom overlayLayer base', (done) => {
     const paint = {