@mapgis/mapbox-gl 1.9.12 → 16.0.0

package/src/symbol/clip_line.js

@@ -0,0 +1,71 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+
+export default clipLine;
+
+/**
+ * Returns the part of a multiline that intersects with the provided rectangular box.
+ *
+ * @param lines
+ * @param x1 the left edge of the box
+ * @param y1 the top edge of the box
+ * @param x2 the right edge of the box
+ * @param y2 the bottom edge of the box
+ * @returns lines
+ * @private
+ */
+function clipLine(lines: Array<Array<Point>>, x1: number, y1: number, x2: number, y2: number): Array<Array<Point>> {
+    const clippedLines = [];
+
+    for (let l = 0; l < lines.length; l++) {
+        const line = lines[l];
+        let clippedLine;
+
+        for (let i = 0; i < line.length - 1; i++) {
+            let p0 = line[i];
+            let p1 = line[i + 1];
+
+            if (p0.x < x1 && p1.x < x1) {
+                continue;
+            } else if (p0.x < x1) {
+                p0 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+            } else if (p1.x < x1) {
+                p1 = new Point(x1, p0.y + (p1.y - p0.y) * ((x1 - p0.x) / (p1.x - p0.x)))._round();
+            }
+
+            if (p0.y < y1 && p1.y < y1) {
+                continue;
+            } else if (p0.y < y1) {
+                p0 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+            } else if (p1.y < y1) {
+                p1 = new Point(p0.x + (p1.x - p0.x) * ((y1 - p0.y) / (p1.y - p0.y)), y1)._round();
+            }
+
+            if (p0.x >= x2 && p1.x >= x2) {
+                continue;
+            } else if (p0.x >= x2) {
+                p0 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+            } else if (p1.x >= x2) {
+                p1 = new Point(x2, p0.y + (p1.y - p0.y) * ((x2 - p0.x) / (p1.x - p0.x)))._round();
+            }
+
+            if (p0.y >= y2 && p1.y >= y2) {
+                continue;
+            } else if (p0.y >= y2) {
+                p0 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+            } else if (p1.y >= y2) {
+                p1 = new Point(p0.x + (p1.x - p0.x) * ((y2 - p0.y) / (p1.y - p0.y)), y2)._round();
+            }
+
+            if (!clippedLine || !p0.equals(clippedLine[clippedLine.length - 1])) {
+                clippedLine = [p0];
+                clippedLines.push(clippedLine);
+            }
+
+            clippedLine.push(p1);
+        }
+    }
+
+    return clippedLines;
+}

package/src/symbol/collision_feature.js

@@ -0,0 +1,217 @@
+// @flow
+
+import type {CollisionBoxArray} from '../data/array_types';
+import Point from '@mapbox/point-geometry';
+import type Anchor from './anchor';
+
+/**
+ * A CollisionFeature represents the area of the tile covered by a single label.
+ * It is used with CollisionIndex to check if the label overlaps with any
+ * previous labels. A CollisionFeature is mostly just a set of CollisionBox
+ * objects.
+ *
+ * @private
+ */
+class CollisionFeature {
+    boxStartIndex: number;
+    boxEndIndex: number;
+
+    /**
+     * Create a CollisionFeature, adding its collision box data to the given collisionBoxArray in the process.
+     *
+     * @param line The geometry the label is placed on.
+     * @param anchor The point along the line around which the label is anchored.
+     * @param shaped The text or icon shaping results.
+     * @param boxScale A magic number used to convert from glyph metrics units to geometry units.
+     * @param padding The amount of padding to add around the label edges.
+     * @param alignLine Whether the label is aligned with the line or the viewport.
+     * @private
+     */
+    constructor(collisionBoxArray: CollisionBoxArray,
+                line: Array<Point>,
+                anchor: Anchor,
+                featureIndex: number,
+                sourceLayerIndex: number,
+                bucketIndex: number,
+                shaped: Object,
+                boxScale: number,
+                padding: number,
+                alignLine: boolean,
+                overscaling: number,
+                rotate: number) {
+        let y1 = shaped.top * boxScale - padding;
+        let y2 = shaped.bottom * boxScale + padding;
+        let x1 = shaped.left * boxScale - padding;
+        let x2 = shaped.right * boxScale + padding;
+
+        const collisionPadding = shaped.collisionPadding;
+        if (collisionPadding) {
+            x1 -= collisionPadding[0] * boxScale;
+            y1 -= collisionPadding[1] * boxScale;
+            x2 += collisionPadding[2] * boxScale;
+            y2 += collisionPadding[3] * boxScale;
+        }
+
+        this.boxStartIndex = collisionBoxArray.length;
+
+        if (alignLine) {
+
+            let height = y2 - y1;
+            const length = x2 - x1;
+
+            if (height > 0) {
+                // set minimum box height to avoid very many small labels
+                height = Math.max(10 * boxScale, height);
+
+                this._addLineCollisionCircles(collisionBoxArray, line, anchor, (anchor.segment: any), length, height, featureIndex, sourceLayerIndex, bucketIndex, overscaling);
+            }
+
+        } else {
+            if (rotate) {
+                // Account for *-rotate in point collision boxes
+                // See https://github.com/mapbox/mapbox-gl-js/issues/6075
+                // Doesn't account for icon-text-fit
+
+                const tl = new Point(x1, y1);
+                const tr = new Point(x2, y1);
+                const bl = new Point(x1, y2);
+                const br = new Point(x2, y2);
+
+                const rotateRadians = rotate * Math.PI / 180;
+
+                tl._rotate(rotateRadians);
+                tr._rotate(rotateRadians);
+                bl._rotate(rotateRadians);
+                br._rotate(rotateRadians);
+
+                // Collision features require an "on-axis" geometry,
+                // so take the envelope of the rotated geometry
+                // (may be quite large for wide labels rotated 45 degrees)
+                x1 = Math.min(tl.x, tr.x, bl.x, br.x);
+                x2 = Math.max(tl.x, tr.x, bl.x, br.x);
+                y1 = Math.min(tl.y, tr.y, bl.y, br.y);
+                y2 = Math.max(tl.y, tr.y, bl.y, br.y);
+            }
+            collisionBoxArray.emplaceBack(anchor.x, anchor.y, x1, y1, x2, y2, featureIndex, sourceLayerIndex, bucketIndex,
+                0, 0);
+        }
+
+        this.boxEndIndex = collisionBoxArray.length;
+    }
+
+    /**
+     * Create a set of CollisionBox objects for a line.
+     *
+     * @param labelLength The length of the label in geometry units.
+     * @param anchor The point along the line around which the label is anchored.
+     * @param boxSize The size of the collision boxes that will be created.
+     * @private
+     */
+    _addLineCollisionCircles(collisionBoxArray: CollisionBoxArray,
+                           line: Array<Point>,
+                           anchor: Anchor,
+                           segment: number,
+                           labelLength: number,
+                           boxSize: number,
+                           featureIndex: number,
+                           sourceLayerIndex: number,
+                           bucketIndex: number,
+                           overscaling: number) {
+        const step = boxSize / 2;
+        const nBoxes = Math.floor(labelLength / step) || 1;
+        // We calculate line collision circles out to 300% of what would normally be our
+        // max size, to allow collision detection to work on labels that expand as
+        // they move into the distance
+        // Vertically oriented labels in the distant field can extend past this padding
+        // This is a noticeable problem in overscaled tiles where the pitch 0-based
+        // symbol spacing will put labels very close together in a pitched map.
+        // To reduce the cost of adding extra collision circles, we slowly increase
+        // them for overscaled tiles.
+        const overscalingPaddingFactor = 1 + .4 * Math.log(overscaling) / Math.LN2;
+        const nPitchPaddingBoxes = Math.floor(nBoxes * overscalingPaddingFactor / 2);
+
+        // offset the center of the first box by half a box so that the edge of the
+        // box is at the edge of the label.
+        const firstBoxOffset = -boxSize / 2;
+
+        let p = anchor;
+        let index = segment + 1;
+        let anchorDistance = firstBoxOffset;
+        const labelStartDistance = -labelLength / 2;
+        const paddingStartDistance = labelStartDistance - labelLength / 4;
+        // move backwards along the line to the first segment the label appears on
+        do {
+            index--;
+
+            if (index < 0) {
+                if (anchorDistance > labelStartDistance) {
+                    // there isn't enough room for the label after the beginning of the line
+                    // checkMaxAngle should have already caught this
+                    return;
+                } else {
+                    // The line doesn't extend far enough back for all of our padding,
+                    // but we got far enough to show the label under most conditions.
+                    index = 0;
+                    break;
+                }
+            } else {
+                anchorDistance -= line[index].dist(p);
+                p = line[index];
+            }
+        } while (anchorDistance > paddingStartDistance);
+
+        let segmentLength = line[index].dist(line[index + 1]);
+
+        for (let i = -nPitchPaddingBoxes; i < nBoxes + nPitchPaddingBoxes; i++) {
+
+            // the distance the box will be from the anchor
+            const boxOffset = i * step;
+            let boxDistanceToAnchor = labelStartDistance + boxOffset;
+
+            // make the distance between pitch padding boxes bigger
+            if (boxOffset < 0) boxDistanceToAnchor += boxOffset;
+            if (boxOffset > labelLength) boxDistanceToAnchor += boxOffset - labelLength;
+
+            if (boxDistanceToAnchor < anchorDistance) {
+                // The line doesn't extend far enough back for this box, skip it
+                // (This could allow for line collisions on distant tiles)
+                continue;
+            }
+
+            // the box is not on the current segment. Move to the next segment.
+            while (anchorDistance + segmentLength < boxDistanceToAnchor) {
+                anchorDistance += segmentLength;
+                index++;
+
+                // There isn't enough room before the end of the line.
+                if (index + 1 >= line.length) {
+                    return;
+                }
+
+                segmentLength = line[index].dist(line[index + 1]);
+            }
+
+            // the distance the box will be from the beginning of the segment
+            const segmentBoxDistance = boxDistanceToAnchor - anchorDistance;
+
+            const p0 = line[index];
+            const p1 = line[index + 1];
+            const boxAnchorPoint = p1.sub(p0)._unit()._mult(segmentBoxDistance)._add(p0)._round();
+
+            // If the box is within boxSize of the anchor, force the box to be used
+            // (so even 0-width labels use at least one box)
+            // Otherwise, the .8 multiplication gives us a little bit of conservative
+            // padding in choosing which boxes to use (see CollisionIndex#placedCollisionCircles)
+            const paddedAnchorDistance = Math.abs(boxDistanceToAnchor - firstBoxOffset) < step ?
+                0 :
+                (boxDistanceToAnchor - firstBoxOffset) * 0.8;
+
+            collisionBoxArray.emplaceBack(boxAnchorPoint.x, boxAnchorPoint.y,
+                -boxSize / 2, -boxSize / 2, boxSize / 2, boxSize / 2,
+                featureIndex, sourceLayerIndex, bucketIndex,
+                boxSize / 2, paddedAnchorDistance);
+        }
+    }
+}
+
+export default CollisionFeature;

package/src/symbol/collision_index.js

@@ -0,0 +1,372 @@
+// @flow
+
+import Point from '@mapbox/point-geometry';
+
+import * as intersectionTests from '../util/intersection_tests';
+import Grid from './grid_index';
+import {mat4} from 'gl-matrix';
+
+import * as projection from '../symbol/projection';
+
+import type Transform from '../geo/transform';
+import type {SingleCollisionBox} from '../data/bucket/symbol_bucket';
+import type {
+    GlyphOffsetArray,
+    SymbolLineVertexArray
+} from '../data/array_types';
+
+// When a symbol crosses the edge that causes it to be included in
+// collision detection, it will cause changes in the symbols around
+// it. This constant specifies how many pixels to pad the edge of
+// the viewport for collision detection so that the bulk of the changes
+// occur offscreen. Making this constant greater increases label
+// stability, but it's expensive.
+const viewportPadding = 100;
+
+/**
+ * A collision index used to prevent symbols from overlapping. It keep tracks of
+ * where previous symbols have been placed and is used to check if a new
+ * symbol overlaps with any previously added symbols.
+ *
+ * There are two steps to insertion: first placeCollisionBox/Circles checks if
+ * there's room for a symbol, then insertCollisionBox/Circles actually puts the
+ * symbol in the index. The two step process allows paired symbols to be inserted
+ * together even if they overlap.
+ *
+ * @private
+ */
+class CollisionIndex {
+    grid: Grid;
+    ignoredGrid: Grid;
+    transform: Transform;
+    pitchfactor: number;
+    screenRightBoundary: number;
+    screenBottomBoundary: number;
+    gridRightBoundary: number;
+    gridBottomBoundary: number;
+
+    constructor(
+        transform: Transform,
+        grid: Grid = new Grid(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25),
+        ignoredGrid: Grid = new Grid(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25)
+    ) {
+        this.transform = transform;
+
+        this.grid = grid;
+        this.ignoredGrid = ignoredGrid;
+        this.pitchfactor = Math.cos(transform._pitch) * transform.cameraToCenterDistance;
+
+        this.screenRightBoundary = transform.width + viewportPadding;
+        this.screenBottomBoundary = transform.height + viewportPadding;
+        this.gridRightBoundary = transform.width + 2 * viewportPadding;
+        this.gridBottomBoundary = transform.height + 2 * viewportPadding;
+    }
+
+    placeCollisionBox(collisionBox: SingleCollisionBox, allowOverlap: boolean, textPixelRatio: number, posMatrix: mat4, collisionGroupPredicate?: any): { box: Array<number>, offscreen: boolean } {
+        const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, collisionBox.anchorPointX, collisionBox.anchorPointY);
+        const tileToViewport = textPixelRatio * projectedPoint.perspectiveRatio;
+        const tlX = collisionBox.x1 * tileToViewport + projectedPoint.point.x;
+        const tlY = collisionBox.y1 * tileToViewport + projectedPoint.point.y;
+        const brX = collisionBox.x2 * tileToViewport + projectedPoint.point.x;
+        const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
+
+        if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
+            (!allowOverlap && this.grid.hitTest(tlX, tlY, brX, brY, collisionGroupPredicate))) {
+            return {
+                box: [],
+                offscreen: false
+            };
+        }
+
+        return {
+            box: [tlX, tlY, brX, brY],
+            offscreen: this.isOffscreen(tlX, tlY, brX, brY)
+        };
+    }
+
+    approximateTileDistance(tileDistance: any, lastSegmentAngle: number, pixelsToTileUnits: number, cameraToAnchorDistance: number, pitchWithMap: boolean): number {
+        // This is a quick and dirty solution for chosing which collision circles to use (since collision circles are
+        // laid out in tile units). Ideally, I think we should generate collision circles on the fly in viewport coordinates
+        // at the time we do collision detection.
+        // See https://github.com/mapbox/mapbox-gl-js/issues/5474
+
+        // incidenceStretch is the ratio of how much y space a label takes up on a tile while drawn perpendicular to the viewport vs
+        //  how much space it would take up if it were drawn flat on the tile
+        // Using law of sines, camera_to_anchor/sin(ground_angle) = camera_to_center/sin(incidence_angle)
+        // Incidence angle 90 -> head on, sin(incidence_angle) = 1, no stretch
+        // Incidence angle 1 -> very oblique, sin(incidence_angle) =~ 0, lots of stretch
+        // ground_angle = u_pitch + PI/2 -> sin(ground_angle) = cos(u_pitch)
+        // incidenceStretch = 1 / sin(incidenceAngle)
+
+        const incidenceStretch = pitchWithMap ? 1 : cameraToAnchorDistance / this.pitchfactor;
+        const lastSegmentTile = tileDistance.lastSegmentViewportDistance * pixelsToTileUnits;
+        return tileDistance.prevTileDistance +
+            lastSegmentTile +
+            (incidenceStretch - 1) * lastSegmentTile * Math.abs(Math.sin(lastSegmentAngle));
+    }
+
+    placeCollisionCircles(collisionCircles: Array<number>,
+                          allowOverlap: boolean,
+                          scale: number,
+                          textPixelRatio: number,
+                          symbol: any,
+                          lineVertexArray: SymbolLineVertexArray,
+                          glyphOffsetArray: GlyphOffsetArray,
+                          fontSize: number,
+                          posMatrix: mat4,
+                          labelPlaneMatrix: mat4,
+                          showCollisionCircles: boolean,
+                          pitchWithMap: boolean,
+                          collisionGroupPredicate?: any): { circles: Array<number>, offscreen: boolean } {
+        const placedCollisionCircles = [];
+
+        const projectedAnchor = this.projectAnchor(posMatrix, symbol.anchorX, symbol.anchorY);
+
+        const projectionCache = {};
+        const fontScale = fontSize / 24;
+        const lineOffsetX = symbol.lineOffsetX * fontSize;
+        const lineOffsetY = symbol.lineOffsetY * fontSize;
+
+        const tileUnitAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
+        // projection.project generates NDC coordinates, as opposed to the
+        // pixel-based grid coordinates generated by this.projectPoint
+        const labelPlaneAnchorPoint =
+            projection.project(tileUnitAnchorPoint, labelPlaneMatrix).point;
+        const firstAndLastGlyph = projection.placeFirstAndLastGlyph(
+            fontScale,
+            glyphOffsetArray,
+            lineOffsetX,
+            lineOffsetY,
+            /*flip*/ false,
+            labelPlaneAnchorPoint,
+            tileUnitAnchorPoint,
+            symbol,
+            lineVertexArray,
+            labelPlaneMatrix,
+            projectionCache,
+            /*return tile distance*/ true);
+
+        let collisionDetected = false;
+        let inGrid = false;
+        let entirelyOffscreen = true;
+
+        const tileToViewport = projectedAnchor.perspectiveRatio * textPixelRatio;
+        // pixelsToTileUnits is used for translating line geometry to tile units
+        // ... so we care about 'scale' but not 'perspectiveRatio'
+        // equivalent to pixel_to_tile_units
+        const pixelsToTileUnits = 1 / (textPixelRatio * scale);
+
+        let firstTileDistance = 0, lastTileDistance = 0;
+        if (firstAndLastGlyph) {
+            firstTileDistance = this.approximateTileDistance(firstAndLastGlyph.first.tileDistance, firstAndLastGlyph.first.angle, pixelsToTileUnits, projectedAnchor.cameraDistance, pitchWithMap);
+            lastTileDistance = this.approximateTileDistance(firstAndLastGlyph.last.tileDistance, firstAndLastGlyph.last.angle, pixelsToTileUnits, projectedAnchor.cameraDistance, pitchWithMap);
+        }
+
+        for (let k = 0; k < collisionCircles.length; k += 5) {
+            const anchorPointX = collisionCircles[k];
+            const anchorPointY = collisionCircles[k + 1];
+            const tileUnitRadius = collisionCircles[k + 2];
+            const boxSignedDistanceFromAnchor = collisionCircles[k + 3];
+            if (!firstAndLastGlyph ||
+                (boxSignedDistanceFromAnchor < -firstTileDistance) ||
+                (boxSignedDistanceFromAnchor > lastTileDistance)) {
+                // The label either doesn't fit on its line or we
+                // don't need to use this circle because the label
+                // doesn't extend this far. Either way, mark the circle unused.
+                markCollisionCircleUsed(collisionCircles, k, false);
+                continue;
+            }
+
+            const projectedPoint = this.projectPoint(posMatrix, anchorPointX, anchorPointY);
+            const radius = tileUnitRadius * tileToViewport;
+
+            const atLeastOneCirclePlaced = placedCollisionCircles.length > 0;
+            if (atLeastOneCirclePlaced) {
+                const dx = projectedPoint.x - placedCollisionCircles[placedCollisionCircles.length - 4];
+                const dy = projectedPoint.y - placedCollisionCircles[placedCollisionCircles.length - 3];
+                // The circle edges touch when the distance between their centers is 2x the radius
+                // When the distance is 1x the radius, they're doubled up, and we could remove
+                // every other circle while keeping them all in touch.
+                // We actually start removing circles when the distance is √2x the radius:
+                //  thinning the number of circles as much as possible is a major performance win,
+                //  and the small gaps introduced don't make a very noticeable difference.
+                const placedTooDensely = radius * radius * 2 > dx * dx + dy * dy;
+                if (placedTooDensely) {
+                    const atLeastOneMoreCircle = (k + 8) < collisionCircles.length;
+                    if (atLeastOneMoreCircle) {
+                        const nextBoxDistanceToAnchor = collisionCircles[k + 8];
+                        if ((nextBoxDistanceToAnchor > -firstTileDistance) &&
+                        (nextBoxDistanceToAnchor < lastTileDistance)) {
+                            // Hide significantly overlapping circles, unless this is the last one we can
+                            // use, in which case we want to keep it in place even if it's tightly packed
+                            // with the one before it.
+                            markCollisionCircleUsed(collisionCircles, k, false);
+                            continue;
+                        }
+                    }
+                }
+            }
+            const collisionBoxArrayIndex = k / 5;
+            placedCollisionCircles.push(projectedPoint.x, projectedPoint.y, radius, collisionBoxArrayIndex);
+            markCollisionCircleUsed(collisionCircles, k, true);
+
+            const x1 = projectedPoint.x - radius;
+            const y1 = projectedPoint.y - radius;
+            const x2 = projectedPoint.x + radius;
+            const y2 = projectedPoint.y + radius;
+            entirelyOffscreen = entirelyOffscreen && this.isOffscreen(x1, y1, x2, y2);
+            inGrid = inGrid || this.isInsideGrid(x1, y1, x2, y2);
+
+            if (!allowOverlap) {
+                if (this.grid.hitTestCircle(projectedPoint.x, projectedPoint.y, radius, collisionGroupPredicate)) {
+                    if (!showCollisionCircles) {
+                        return {
+                            circles: [],
+                            offscreen: false
+                        };
+                    } else {
+                        // Don't early exit if we're showing the debug circles because we still want to calculate
+                        // which circles are in use
+                        collisionDetected = true;
+                    }
+                }
+            }
+        }
+
+        return {
+            circles: (collisionDetected || !inGrid) ? [] : placedCollisionCircles,
+            offscreen: entirelyOffscreen
+        };
+    }
+
+    /**
+     * Because the geometries in the CollisionIndex are an approximation of the shape of
+     * symbols on the map, we use the CollisionIndex to look up the symbol part of
+     * `queryRenderedFeatures`.
+     *
+     * @private
+     */
+    queryRenderedSymbols(viewportQueryGeometry: Array<Point>) {
+        if (viewportQueryGeometry.length === 0 || (this.grid.keysLength() === 0 && this.ignoredGrid.keysLength() === 0)) {
+            return {};
+        }
+
+        const query = [];
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const point of viewportQueryGeometry) {
+            const gridPoint = new Point(point.x + viewportPadding, point.y + viewportPadding);
+            minX = Math.min(minX, gridPoint.x);
+            minY = Math.min(minY, gridPoint.y);
+            maxX = Math.max(maxX, gridPoint.x);
+            maxY = Math.max(maxY, gridPoint.y);
+            query.push(gridPoint);
+        }
+
+        const features = this.grid.query(minX, minY, maxX, maxY)
+            .concat(this.ignoredGrid.query(minX, minY, maxX, maxY));
+
+        const seenFeatures = {};
+        const result = {};
+
+        for (const feature of features) {
+            const featureKey = feature.key;
+            // Skip already seen features.
+            if (seenFeatures[featureKey.bucketInstanceId] === undefined) {
+                seenFeatures[featureKey.bucketInstanceId] = {};
+            }
+            if (seenFeatures[featureKey.bucketInstanceId][featureKey.featureIndex]) {
+                continue;
+            }
+
+            // Check if query intersects with the feature box
+            // "Collision Circles" for line labels are treated as boxes here
+            // Since there's no actual collision taking place, the circle vs. square
+            // distinction doesn't matter as much, and box geometry is easier
+            // to work with.
+            const bbox = [
+                new Point(feature.x1, feature.y1),
+                new Point(feature.x2, feature.y1),
+                new Point(feature.x2, feature.y2),
+                new Point(feature.x1, feature.y2)
+            ];
+            if (!intersectionTests.polygonIntersectsPolygon(query, bbox)) {
+                continue;
+            }
+
+            seenFeatures[featureKey.bucketInstanceId][featureKey.featureIndex] = true;
+            if (result[featureKey.bucketInstanceId] === undefined) {
+                result[featureKey.bucketInstanceId] = [];
+            }
+            result[featureKey.bucketInstanceId].push(featureKey.featureIndex);
+        }
+
+        return result;
+    }
+
+    insertCollisionBox(collisionBox: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+        const grid = ignorePlacement ? this.ignoredGrid : this.grid;
+
+        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        grid.insert(key, collisionBox[0], collisionBox[1], collisionBox[2], collisionBox[3]);
+    }
+
+    insertCollisionCircles(collisionCircles: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+        const grid = ignorePlacement ? this.ignoredGrid : this.grid;
+
+        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        for (let k = 0; k < collisionCircles.length; k += 4) {
+            grid.insertCircle(key, collisionCircles[k], collisionCircles[k + 1], collisionCircles[k + 2]);
+        }
+    }
+
+    projectAnchor(posMatrix: mat4, x: number, y: number) {
+        const p = [x, y, 0, 1];
+        projection.xyTransformMat4(p, p, posMatrix);
+        return {
+            perspectiveRatio: 0.5 + 0.5 * (this.transform.cameraToCenterDistance / p[3]),
+            cameraDistance: p[3]
+        };
+    }
+
+    projectPoint(posMatrix: mat4, x: number, y: number) {
+        const p = [x, y, 0, 1];
+        projection.xyTransformMat4(p, p, posMatrix);
+        return new Point(
+            (((p[0] / p[3] + 1) / 2) * this.transform.width) + viewportPadding,
+            (((-p[1] / p[3] + 1) / 2) * this.transform.height) + viewportPadding
+        );
+    }
+
+    projectAndGetPerspectiveRatio(posMatrix: mat4, x: number, y: number) {
+        const p = [x, y, 0, 1];
+        projection.xyTransformMat4(p, p, posMatrix);
+        const a = new Point(
+            (((p[0] / p[3] + 1) / 2) * this.transform.width) + viewportPadding,
+            (((-p[1] / p[3] + 1) / 2) * this.transform.height) + viewportPadding
+        );
+        return {
+            point: a,
+            // See perspective ratio comment in symbol_sdf.vertex
+            // We're doing collision detection in viewport space so we need
+            // to scale down boxes in the distance
+            perspectiveRatio: 0.5 + 0.5 * (this.transform.cameraToCenterDistance / p[3])
+        };
+    }
+
+    isOffscreen(x1: number, y1: number, x2: number, y2: number) {
+        return x2 < viewportPadding || x1 >= this.screenRightBoundary || y2 < viewportPadding || y1 > this.screenBottomBoundary;
+    }
+
+    isInsideGrid(x1: number, y1: number, x2: number, y2: number) {
+        return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
+    }
+}
+
+function markCollisionCircleUsed(collisionCircles: Array<number>, index: number, used: boolean) {
+    collisionCircles[index + 4] = used ? 1 : 0;
+}
+
+export default CollisionIndex;