【feature】mapboxgl querySourceFeatures queryRenderedFeatures 过滤不可见图层的查询

Author: xiongjiaojiao

src/mapboxgl/overlay/Base.js

@@ -60,9 +60,9 @@ export class CustomOverlayLayer {
   // 移除 layer 事件
   off() {}
 
-  // 查询足查询参数的可见要素的 GeoJSON 要素对象数组
+  // 查询足查询参数的可见要素的 GeoJSON 要素对象数组，如果图层不可见则返回空
   queryRenderedFeatures() {}
 
-  // 查询满足查询参数的指定矢量切片或 GeoJSON 源中的要素
+  // 查询满足查询参数的指定矢量切片或 GeoJSON 源中的要素，如果图层不可见则返回空
   querySourceFeatures() {}
 }

src/mapboxgl/overlay/L7Layer.js

@@ -292,7 +292,7 @@ export class L7Layer extends CustomOverlayLayer {
   }
 
   queryRenderedFeatures(geometry, options, cb) {
-    if (!this.l7layer) {
+    if (!this.l7layer || !this.l7layer.rawConfig.visible) {
       return cb([]);
     }
     let box = geometry;
@@ -321,7 +321,7 @@ export class L7Layer extends CustomOverlayLayer {
   }
 
   querySourceFeatures() {
-    if (!this.l7layer) {
+    if (!this.l7layer || !this.l7layer.rawConfig.visible) {
       return [];
     }
     const layerSource = this.l7layer.layerSource;

test/mapboxgl/overlay/L7LayerSpec.js

@@ -507,6 +507,28 @@ describe('mapboxgl L7Layer', () => {
     const nextLayerFilter = layer.getFilter();
     expect(nextLayerFilter.field).toEqual([]);
     expect(nextLayerFilter.values('1')).toBeTruthy();
+
+    let queryFeatures;
+    const queryResult = {
+      cb: function (data) {
+        queryFeatures = data;
+      }
+    };
+    spyOn(queryResult, 'cb').and.callThrough();
+    layer.queryRenderedFeatures([0, 0], {}, queryResult.cb);
+    expect(queryResult.cb.calls.count()).toBe(1);
+    expect(queryFeatures).not.toBeUndefined();
+    expect(queryFeatures.length).toBeGreaterThan(0);
+    expect(layer.querySourceFeatures().length).toBeGreaterThan(0);
+    expect(layer.getLayer().layout.visibility).toBe('visible');
+    layer.setLayoutProperty('visibility', 'none');
+    expect(layer.getLayer().layout.visibility).toBe('none');
+    expect(layer.querySourceFeatures().length).toBe(0);
+    layer.queryRenderedFeatures([0, 0], {}, queryResult.cb);
+    expect(queryResult.cb.calls.count()).toBe(2);
+    expect(queryFeatures.length).toBe(0);
+    layer.setLayoutProperty('visibility', 'visible');
+
     spyOn(l7Layer, 'on');
     spyOn(l7Layer, 'once');
     spyOn(l7Layer, 'off');

test/tool/mock_l7.js

@@ -57,6 +57,9 @@ class Layer {
         dataArray: []
       }
     };
+    if (this.rawConfig.visible === void 0) {
+      this.rawConfig.visible = true;
+    }
   }
   source(data, options = {}) {
     const parser = options.parser || { type: "geojson" };
@@ -124,9 +127,11 @@ class Layer {
     return this;
   }
   show() {
+    this.rawConfig.visible = true;
     return this;
   }
   hide() {
+    this.rawConfig.visible = false;
     return this;
   }
   getSource() {