fix querying features that extend across tile boundaries

src/data/feature_index.js

@@ -23,9 +23,11 @@ const {FeatureIndexArray} = require('./array_types');
 type QueryParameters = {
     scale: number,
     bearing: number,
+    cameraToCenterDistance: number,
+    posMatrix: Float32Array,
     tileSize: number,
     queryGeometry: Array<Array<Point>>,
-    additionalRadius: number,
+    queryPadding: number,
     params: {
         filter: FilterSpecification,
         layers: Array<string>,
@@ -98,7 +100,7 @@ class FeatureIndex {
             filter = featureFilter(params.filter);
 
         const queryGeometry = args.queryGeometry;
-        const additionalRadius = args.additionalRadius * pixelsToTileUnits;
+        const queryPadding = args.queryPadding * pixelsToTileUnits;
 
         let minX = Infinity;
         let minY = Infinity;
@@ -115,15 +117,15 @@ class FeatureIndex {
             }
         }
 
-        const matching = this.grid.query(minX - additionalRadius, minY - additionalRadius, maxX + additionalRadius, maxY + additionalRadius);
+        const matching = this.grid.query(minX - queryPadding, minY - queryPadding, maxX + queryPadding, maxY + queryPadding);
         matching.sort(topDownFeatureComparator);
-        this.filterMatching(result, matching, this.featureIndexArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits);
+        this.filterMatching(result, matching, this.featureIndexArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits, args.cameraToCenterDistance, args.posMatrix);
 
         const matchingSymbols = args.collisionIndex ?
             args.collisionIndex.queryRenderedSymbols(queryGeometry, this.tileID, args.tileSize / EXTENT, args.collisionBoxArray, args.sourceID, args.bucketInstanceIds) :
             [];
         matchingSymbols.sort();
-        this.filterMatching(result, matchingSymbols, args.collisionBoxArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits);
+        this.filterMatching(result, matchingSymbols, args.collisionBoxArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits, args.cameraToCenterDistance, args.posMatrix);
 
         return result;
     }
@@ -137,7 +139,9 @@ class FeatureIndex {
         filterLayerIDs: Array<string>,
         styleLayers: {[string]: StyleLayer},
         bearing: number,
-        pixelsToTileUnits: number
+        pixelsToTileUnits: number,
+        cameraToCenterDistance: number,
+        posMatrix: Float32Array
     ) {
         let previousIndex;
         for (let k = 0; k < matching.length; k++) {
@@ -175,7 +179,7 @@ class FeatureIndex {
                     if (!geometry) {
                         geometry = loadGeometry(feature);
                     }
-                    if (!styleLayer.queryIntersectsFeature(queryGeometry, feature, geometry, this.z, bearing, pixelsToTileUnits)) {
+                    if (!styleLayer.queryIntersectsFeature(queryGeometry, feature, geometry, this.z, bearing, pixelsToTileUnits, cameraToCenterDistance, posMatrix)) {
                         continue;
                     }
                 }

src/geo/transform.js

@@ -559,6 +559,13 @@ class Transform {
         this._posMatrixCache = {};
         this._alignedPosMatrixCache = {};
     }
+
+    getPitchScaleFactor() {
+        const coord = this.pointCoordinate(new Point(0, 0)).zoomTo(this.zoom);
+        const p = [coord.column * this.tileSize, coord.row * this.tileSize, 0, 1];
+        const topPoint = vec4.transformMat4(p, p, this.pixelMatrix);
+        return topPoint[3] / this.cameraToCenterDistance;
+    }
 }
 
 module.exports = Transform;

src/source/query_features.js

@@ -12,7 +12,8 @@ exports.rendered = function(sourceCache: SourceCache,
                             zoom: number,
                             bearing: number,
                             collisionIndex: ?CollisionIndex) {
-    const tilesIn = sourceCache.tilesIn(queryGeometry);
+    const pitchScaleFactor = sourceCache.transform.getPitchScaleFactor();
+    const tilesIn = sourceCache.tilesIn(queryGeometry, pitchScaleFactor);
 
     tilesIn.sort(sortTilesIn);
 
@@ -26,6 +27,9 @@ exports.rendered = function(sourceCache: SourceCache,
                 tileIn.scale,
                 params,
                 bearing,
+                sourceCache.transform.cameraToCenterDistance,
+                pitchScaleFactor,
+                sourceCache.transform.calculatePosMatrix(tileIn.tileID.toUnwrapped()),
                 sourceCache.id,
                 collisionIndex)
         });

src/source/source_cache.js

@@ -682,7 +682,7 @@ class SourceCache extends Evented {
      * @param queryGeometry coordinates of the corners of bounding rectangle
      * @returns {Array<Object>} result items have {tile, minX, maxX, minY, maxY}, where min/max bounding values are the given bounds transformed in into the coordinate space of this tile.
      */
-    tilesIn(queryGeometry: Array<Coordinate>) {
+    tilesIn(queryGeometry: Array<Coordinate>, pitchScaleFactor: number) {
         const tileResults = [];
         const ids = this.getIds();
 
@@ -704,14 +704,16 @@ class SourceCache extends Evented {
         for (let i = 0; i < ids.length; i++) {
             const tile = this._tiles[ids[i]];
             const tileID = tile.tileID;
+            const scale = Math.pow(2, this.transform.zoom - tile.tileID.overscaledZ);
+            const queryPadding = pitchScaleFactor * tile.queryPadding * EXTENT / tile.tileSize / scale;
 
             const tileSpaceBounds = [
                 coordinateToTilePoint(tileID, new Coordinate(minX, minY, z)),
                 coordinateToTilePoint(tileID, new Coordinate(maxX, maxY, z))
             ];
 
-            if (tileSpaceBounds[0].x < EXTENT && tileSpaceBounds[0].y < EXTENT &&
-                tileSpaceBounds[1].x >= 0 && tileSpaceBounds[1].y >= 0) {
+            if (tileSpaceBounds[0].x - queryPadding < EXTENT && tileSpaceBounds[0].y - queryPadding < EXTENT &&
+                tileSpaceBounds[1].x + queryPadding >= 0 && tileSpaceBounds[1].y + queryPadding >= 0) {
 
                 const tileSpaceQueryGeometry = [];
                 for (let j = 0; j < queryGeometry.length; j++) {
@@ -722,7 +724,7 @@ class SourceCache extends Evented {
                     tile: tile,
                     tileID: tileID,
                     queryGeometry: [tileSpaceQueryGeometry],
-                    scale: Math.pow(2, this.transform.zoom - tile.tileID.overscaledZ)
+                    scale: scale
                 });
             }
         }

src/source/tile.js

@@ -91,6 +91,7 @@ class Tile {
     refreshedUponExpiration: boolean;
     reloadCallback: any;
     resourceTiming: ?Array<PerformanceResourceTiming>;
+    queryPadding: number;
 
     /**
      * @param {OverscaledTileID} tileID
@@ -103,6 +104,7 @@ class Tile {
         this.tileSize = size;
         this.buckets = {};
         this.expirationTime = null;
+        this.queryPadding = 0;
 
         // Counts the number of times a response was already expired when
         // received. We're using this to add a delay when making a new request
@@ -166,6 +168,12 @@ class Tile {
             }
         }
 
+        this.queryPadding = 0;
+        for (const id in this.buckets) {
+            const bucket = this.buckets[id];
+            this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+        }
+
         if (data.iconAtlasImage) {
             this.iconAtlasImage = data.iconAtlasImage;
         }
@@ -234,19 +242,19 @@ class Tile {
                           scale: number,
                           params: { filter: FilterSpecification, layers: Array<string> },
                           bearing: number,
+                          cameraToCenterDistance: number,
+                          pitchScaleFactor: number,
+                          posMatrix: Float32Array,
                           sourceID: string,
                           collisionIndex: ?CollisionIndex): {[string]: Array<{ featureIndex: number, feature: GeoJSONFeature }>} {
         if (!this.featureIndex || !this.collisionBoxArray)
             return {};
 
-        // Determine the additional radius needed factoring in property functions
-        let additionalRadius = 0;
+        // Create the set of the current bucket instance ids
         const bucketInstanceIds = {};
         for (const id in layers) {
             const bucket = this.getBucket(layers[id]);
             if (bucket) {
-                additionalRadius = Math.max(additionalRadius, layers[id].queryRadius(bucket));
-
                 // Add the bucket instance's id to the set of current ids.
                 // The query will only include results from current buckets.
                 if (bucket instanceof SymbolBucket && bucket.bucketInstanceId !== undefined) {
@@ -260,8 +268,10 @@ class Tile {
             scale: scale,
             tileSize: this.tileSize,
             bearing: bearing,
+            cameraToCenterDistance: cameraToCenterDistance,
+            posMatrix: posMatrix,
             params: params,
-            additionalRadius: additionalRadius,
+            queryPadding: this.queryPadding * pitchScaleFactor,
             collisionBoxArray: this.collisionBoxArray,
             sourceID: sourceID,
             collisionIndex: collisionIndex,

src/style/style_layer.js

@@ -49,7 +49,9 @@ class StyleLayer extends Evented {
                               geometry: Array<Array<Point>>,
                               zoom: number,
                               bearing: number,
-                              pixelsToTileUnits: number) => boolean;
+                              pixelsToTileUnits: number,
+                              cameraToCenterDistance: number,
+                              posMatrix: Float32Array) => boolean;
 
     constructor(layer: LayerSpecification, properties: {layout?: Properties<*>, paint: Properties<*>}) {
         super();

src/style/style_layer/circle_style_layer.js

@@ -2,9 +2,10 @@
 
 const StyleLayer = require('../style_layer');
 const CircleBucket = require('../../data/bucket/circle_bucket');
-const {multiPolygonIntersectsBufferedMultiPoint} = require('../../util/intersection_tests');
+const {multiPolygonIntersectsBufferedPoint} = require('../../util/intersection_tests');
 const {getMaximumPaintValue, translateDistance, translate} = require('../query_utils');
 const properties = require('./circle_style_layer_properties');
+const {vec4} = require('@mapbox/gl-matrix');
 
 const {
     Transitionable,
@@ -41,14 +42,31 @@ class CircleStyleLayer extends StyleLayer {
                            geometry: Array<Array<Point>>,
                            zoom: number,
                            bearing: number,
-                           pixelsToTileUnits: number): boolean {
+                           pixelsToTileUnits: number,
+                           cameraToCenterDistance: number,
+                           posMatrix: Float32Array): boolean {
         const translatedPolygon = translate(queryGeometry,
             this.paint.get('circle-translate'),
             this.paint.get('circle-translate-anchor'),
             bearing, pixelsToTileUnits);
         const radius = this.paint.get('circle-radius').evaluate(feature) * pixelsToTileUnits;
         const stroke = this.paint.get('circle-stroke-width').evaluate(feature) * pixelsToTileUnits;
-        return multiPolygonIntersectsBufferedMultiPoint(translatedPolygon, geometry, radius + stroke);
+        const size  = radius + stroke;
+
+        for (const ring of geometry) {
+            for (const point of ring) {
+                let adjustedSize = size;
+
+                if (this.paint.get('circle-pitch-scale') === 'viewport') {
+                    const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], posMatrix);
+                    adjustedSize *= projectedCenter[3] / cameraToCenterDistance;
+                }
+
+                if (multiPolygonIntersectsBufferedPoint(translatedPolygon, point, adjustedSize)) return true;
+            }
+        }
+
+        return false;
     }
 }
 

src/util/intersection_tests.js

@@ -5,6 +5,7 @@ const {isCounterClockwise} = require('./util');
 import type Point from '@mapbox/point-geometry';
 
 module.exports = {
+    multiPolygonIntersectsBufferedPoint,
     multiPolygonIntersectsBufferedMultiPoint,
     multiPolygonIntersectsMultiPolygon,
     multiPolygonIntersectsBufferedMultiLine,
@@ -32,16 +33,20 @@ function polygonIntersectsPolygon(polygonA: Polygon, polygonB: Polygon) {
     return false;
 }
 
-function multiPolygonIntersectsBufferedMultiPoint(multiPolygon: MultiPolygon, rings: Array<Ring>, radius: number) {
+function multiPolygonIntersectsBufferedPoint(multiPolygon: MultiPolygon, point: Point, radius: number) {
     for (let j = 0; j < multiPolygon.length; j++) {
         const polygon = multiPolygon[j];
-        for (let i = 0; i < rings.length; i++) {
-            const ring = rings[i];
-            for (let k = 0; k < ring.length; k++) {
-                const point = ring[k];
-                if (polygonContainsPoint(polygon, point)) return true;
-                if (pointIntersectsBufferedLine(point, polygon, radius)) return true;
-            }
+        if (polygonContainsPoint(polygon, point)) return true;
+        if (pointIntersectsBufferedLine(point, polygon, radius)) return true;
+    }
+    return false;
+}
+
+function multiPolygonIntersectsBufferedMultiPoint(multiPolygon: MultiPolygon, rings: Array<Ring>, radius: number) {
+    for (let i = 0; i < rings.length; i++) {
+        const ring = rings[i];
+        for (let k = 0; k < ring.length; k++) {
+            if (multiPolygonIntersectsBufferedPoint(multiPolygon, ring[k], radius)) return true;
         }
     }
     return false;

test/integration/query-tests/circle-pitch-scale/map-inside-align-map/expected.json

@@ -0,0 +1,13 @@
+[
+  {
+    "geometry": {
+      "type": "Point",
+      "coordinates": [
+        -84.3310546875,
+        33.92512970007199
+      ]
+    },
+    "type": "Feature",
+    "properties": {}
+  }
+]

test/integration/query-tests/circle-pitch-scale/map-inside-align-map/style.json

@@ -0,0 +1,45 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "queryGeometry": [
+        292,
+        35
+      ]
+    }
+  },
+  "center": [
+      -92.3780691249957,
+      -20
+  ],
+  "zoom": 2,
+  "pitch": 60,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+          "type": "FeatureCollection",
+          "features": [{
+              "type": "Feature",
+              "geometry": {
+                  "type": "Point",
+                  "coordinates": [-84.333565, 33.925575]
+              }
+          }]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "road",
+      "type": "circle",
+      "source": "geojson",
+      "paint": {
+        "circle-pitch-alignment": "map",
+        "circle-pitch-scale": "map",
+        "circle-radius": 20
+      }
+    }
+  ]
+}

test/integration/query-tests/circle-pitch-scale/map-outside-align-map/expected.json

@@ -0,0 +1 @@
+[]

test/integration/query-tests/circle-pitch-scale/map-outside-align-map/style.json

@@ -0,0 +1,45 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "queryGeometry": [
+        295,
+        35
+      ]
+    }
+  },
+  "center": [
+      -92.3780691249957,
+      -20
+  ],
+  "zoom": 2,
+  "pitch": 60,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+          "type": "FeatureCollection",
+          "features": [{
+              "type": "Feature",
+              "geometry": {
+                  "type": "Point",
+                  "coordinates": [-84.333565, 33.925575]
+              }
+          }]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "road",
+      "type": "circle",
+      "source": "geojson",
+      "paint": {
+        "circle-pitch-alignment": "map",
+        "circle-pitch-scale": "map",
+        "circle-radius": 20
+      }
+    }
+  ]
+}