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

xiongjiaojiao · xiongjiaojiao · commit 86feffa136a2 · 2024-07-16T14:43:37.000+08:00
diff --git a/src/mapboxgl/overlay/Base.js b/src/mapboxgl/overlay/Base.js
@@ -60,9 +60,9 @@ export class CustomOverlayLayer {
   // 移除 layer 事件
   off() {}
 
-  // 查询足查询参数的可见要素的 GeoJSON 要素对象数组
+  // 查询足查询参数的可见要素的 GeoJSON 要素对象数组，如果图层不可见则返回空
   queryRenderedFeatures() {}
 
-  // 查询满足查询参数的指定矢量切片或 GeoJSON 源中的要素
+  // 查询满足查询参数的指定矢量切片或 GeoJSON 源中的要素，如果图层不可见则返回空
   querySourceFeatures() {}
 }
diff --git a/src/mapboxgl/overlay/L7Layer.js b/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;
diff --git a/test/mapboxgl/overlay/L7LayerSpec.js b/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');
diff --git a/test/tool/mock_l7.js b/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() {

Original file line number	Diff line number	Diff line change
`@@ -292,7 +292,7 @@ export class L7Layer extends CustomOverlayLayer {`
`292`	`292`	`}`
`293`	`293`
`294`	`294`	`queryRenderedFeatures(geometry, options, cb) {`
`295`		`- if (!this.l7layer) {`
	`295`	`+ if (!this.l7layer \|\| !this.l7layer.rawConfig.visible) {`
`296`	`296`	`return cb([]);`
`297`	`297`	`}`
`298`	`298`	`let box = geometry;`
`@@ -321,7 +321,7 @@ export class L7Layer extends CustomOverlayLayer {`
`321`	`321`	`}`
`322`	`322`
`323`	`323`	`querySourceFeatures() {`
`324`		`- if (!this.l7layer) {`
	`324`	`+ if (!this.l7layer \|\| !this.l7layer.rawConfig.visible) {`
`325`	`325`	`return [];`
`326`	`326`	`}`
`327`	`327`	`const layerSource = this.l7layer.layerSource;`
Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,9 @@ class Layer {`
`57`	`57`	`dataArray: []`
`58`	`58`	`}`
`59`	`59`	`};`
	`60`	`+ if (this.rawConfig.visible === void 0) {`
	`61`	`+ this.rawConfig.visible = true;`
	`62`	`+ }`
`60`	`63`	`}`
`61`	`64`	`source(data, options = {}) {`
`62`	`65`	`const parser = options.parser \|\| { type: "geojson" };`
`@@ -124,9 +127,11 @@ class Layer {`
`124`	`127`	`return this;`
`125`	`128`	`}`
`126`	`129`	`show() {`
	`130`	`+ this.rawConfig.visible = true;`
`127`	`131`	`return this;`
`128`	`132`	`}`
`129`	`133`	`hide() {`
	`134`	`+ this.rawConfig.visible = false;`
`130`	`135`	`return this;`
`131`	`136`	`}`
`132`	`137`	`getSource() {`