@mapwhit/tilerenderer 0.47.1

package/src/symbol/collision_index.js

@@ -0,0 +1,379 @@
+const Point = require('@mapbox/point-geometry');
+
+const intersectionTests = require('../util/intersection_tests');
+const Grid = require('./grid_index');
+
+const projection = require('../symbol/projection');
+
+// 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 {
+  constructor(
+    transform,
+    grid = new Grid(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25),
+    ignoredGrid = 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;
+  }
+
+  placeCollisionBox(collisionBox, allowOverlap, textPixelRatio, posMatrix, collisionGroupPredicate) {
+    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 (!allowOverlap) {
+      if (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, lastSegmentAngle, pixelsToTileUnits, cameraToAnchorDistance, pitchWithMap) {
+    // 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,
+    allowOverlap,
+    scale,
+    textPixelRatio,
+    key,
+    symbol,
+    lineVertexArray,
+    glyphOffsetArray,
+    fontSize,
+    posMatrix,
+    labelPlaneMatrix,
+    showCollisionCircles,
+    pitchWithMap,
+    collisionGroupPredicate
+  ) {
+    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 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;
+    let 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);
+
+      entirelyOffscreen =
+        entirelyOffscreen &&
+        this.isOffscreen(
+          projectedPoint.x - radius,
+          projectedPoint.y - radius,
+          projectedPoint.x + radius,
+          projectedPoint.y + radius
+        );
+
+      if (!allowOverlap) {
+        if (this.grid.hitTestCircle(projectedPoint.x, projectedPoint.y, radius, collisionGroupPredicate)) {
+          if (!showCollisionCircles) {
+            return {
+              circles: [],
+              offscreen: false
+            };
+          }
+          // 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 ? [] : 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) {
+    if (viewportQueryGeometry.length === 0 || (this.grid.keysLength() === 0 && this.ignoredGrid.keysLength() === 0)) {
+      return {};
+    }
+
+    const query = [];
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_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, ignorePlacement, bucketInstanceId, featureIndex, collisionGroupID) {
+    const grid = ignorePlacement ? this.ignoredGrid : this.grid;
+
+    const key = {
+      bucketInstanceId: bucketInstanceId,
+      featureIndex: featureIndex,
+      collisionGroupID: collisionGroupID
+    };
+    grid.insert(key, collisionBox[0], collisionBox[1], collisionBox[2], collisionBox[3]);
+  }
+
+  insertCollisionCircles(collisionCircles, ignorePlacement, bucketInstanceId, featureIndex, collisionGroupID) {
+    const grid = ignorePlacement ? this.ignoredGrid : this.grid;
+
+    const key = {
+      bucketInstanceId: bucketInstanceId,
+      featureIndex: featureIndex,
+      collisionGroupID: collisionGroupID
+    };
+    for (let k = 0; k < collisionCircles.length; k += 4) {
+      grid.insertCircle(key, collisionCircles[k], collisionCircles[k + 1], collisionCircles[k + 2]);
+    }
+  }
+
+  projectAnchor(posMatrix, x, y) {
+    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, x, y) {
+    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, x, y) {
+    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, y1, x2, y2) {
+    return (
+      x2 < viewportPadding || x1 >= this.screenRightBoundary || y2 < viewportPadding || y1 > this.screenBottomBoundary
+    );
+  }
+}
+
+function markCollisionCircleUsed(collisionCircles, index, used) {
+  collisionCircles[index + 4] = used ? 1 : 0;
+}
+
+module.exports = CollisionIndex;

package/src/symbol/cross_tile_symbol_index.js

@@ -0,0 +1,270 @@
+const EXTENT = require('../data/extent');
+
+/*
+    The CrossTileSymbolIndex generally works on the assumption that
+    a conceptual "unique symbol" can be identified by the text of
+    the label combined with the anchor point. The goal is to assign
+    these conceptual "unique symbols" a shared crossTileID that can be
+    used by Placement to keep fading opacity states consistent and to
+    deduplicate labels.
+
+    The CrossTileSymbolIndex indexes all the current symbol instances and
+    their crossTileIDs. When a symbol bucket gets added or updated, the
+    index assigns a crossTileID to each of it's symbol instances by either
+    matching it with an existing id or assigning a new one.
+*/
+
+// Round anchor positions to roughly 4 pixel grid
+const roundingFactor = 512 / EXTENT / 2;
+
+class TileLayerIndex {
+  constructor(tileID, symbolInstances, bucketInstanceId) {
+    this.tileID = tileID;
+    this.indexedSymbolInstances = {};
+    this.bucketInstanceId = bucketInstanceId;
+
+    for (const symbolInstance of symbolInstances) {
+      const key = symbolInstance.key;
+      if (!this.indexedSymbolInstances[key]) {
+        this.indexedSymbolInstances[key] = [];
+      }
+      // This tile may have multiple symbol instances with the same key
+      // Store each one along with its coordinates
+      this.indexedSymbolInstances[key].push({
+        crossTileID: symbolInstance.crossTileID,
+        coord: this.getScaledCoordinates(symbolInstance, tileID)
+      });
+    }
+  }
+
+  // Converts the coordinates of the input symbol instance into coordinates that be can compared
+  // against other symbols in this index. Coordinates are:
+  // (1) world-based (so after conversion the source tile is irrelevant)
+  // (2) converted to the z-scale of this TileLayerIndex
+  // (3) down-sampled by "roundingFactor" from tile coordinate precision in order to be
+  //     more tolerant of small differences between tiles.
+  getScaledCoordinates(symbolInstance, childTileID) {
+    const zDifference = childTileID.canonical.z - this.tileID.canonical.z;
+    const scale = roundingFactor / 2 ** zDifference;
+    const anchor = symbolInstance.anchor;
+    return {
+      x: Math.floor((childTileID.canonical.x * EXTENT + anchor.x) * scale),
+      y: Math.floor((childTileID.canonical.y * EXTENT + anchor.y) * scale)
+    };
+  }
+
+  findMatches(symbolInstances, newTileID, zoomCrossTileIDs) {
+    const tolerance =
+      this.tileID.canonical.z < newTileID.canonical.z ? 1 : 2 ** (this.tileID.canonical.z - newTileID.canonical.z);
+
+    for (const symbolInstance of symbolInstances) {
+      if (symbolInstance.crossTileID) {
+        // already has a match, skip
+        continue;
+      }
+
+      const indexedInstances = this.indexedSymbolInstances[symbolInstance.key];
+      if (!indexedInstances) {
+        // No symbol with this key in this bucket
+        continue;
+      }
+
+      const scaledSymbolCoord = this.getScaledCoordinates(symbolInstance, newTileID);
+
+      for (const thisTileSymbol of indexedInstances) {
+        // Return any symbol with the same keys whose coordinates are within 1
+        // grid unit. (with a 4px grid, this covers a 12px by 12px area)
+        if (
+          Math.abs(thisTileSymbol.coord.x - scaledSymbolCoord.x) <= tolerance &&
+          Math.abs(thisTileSymbol.coord.y - scaledSymbolCoord.y) <= tolerance &&
+          !zoomCrossTileIDs[thisTileSymbol.crossTileID]
+        ) {
+          // Once we've marked ourselves duplicate against this parent symbol,
+          // don't let any other symbols at the same zoom level duplicate against
+          // the same parent (see issue #5993)
+          zoomCrossTileIDs[thisTileSymbol.crossTileID] = true;
+          symbolInstance.crossTileID = thisTileSymbol.crossTileID;
+          break;
+        }
+      }
+    }
+  }
+}
+
+class CrossTileIDs {
+  constructor() {
+    this.maxCrossTileID = 0;
+  }
+  generate() {
+    return ++this.maxCrossTileID;
+  }
+}
+
+class CrossTileSymbolLayerIndex {
+  constructor() {
+    this.indexes = {};
+    this.usedCrossTileIDs = {};
+    this.lng = 0;
+  }
+
+  /*
+   * Sometimes when a user pans across the antimeridian the longitude value gets wrapped.
+   * To prevent labels from flashing out and in we adjust the tileID values in the indexes
+   * so that they match the new wrapped version of the map.
+   */
+  handleWrapJump(lng) {
+    const wrapDelta = Math.round((lng - this.lng) / 360);
+    if (wrapDelta !== 0) {
+      for (const zoom in this.indexes) {
+        const zoomIndexes = this.indexes[zoom];
+        const newZoomIndex = {};
+        for (const key in zoomIndexes) {
+          // change the tileID's wrap and add it to a new index
+          const index = zoomIndexes[key];
+          index.tileID = index.tileID.unwrapTo(index.tileID.wrap + wrapDelta);
+          newZoomIndex[index.tileID.key] = index;
+        }
+        this.indexes[zoom] = newZoomIndex;
+      }
+    }
+    this.lng = lng;
+  }
+
+  addBucket(tileID, bucket, crossTileIDs) {
+    if (this.indexes[tileID.overscaledZ] && this.indexes[tileID.overscaledZ][tileID.key]) {
+      if (this.indexes[tileID.overscaledZ][tileID.key].bucketInstanceId === bucket.bucketInstanceId) {
+        return false;
+      }
+      // We're replacing this bucket with an updated version
+      // Remove the old bucket's "used crossTileIDs" now so that
+      // the new bucket can claim them.
+      // The old index entries themselves stick around until
+      // 'removeStaleBuckets' is called.
+      this.removeBucketCrossTileIDs(tileID.overscaledZ, this.indexes[tileID.overscaledZ][tileID.key]);
+    }
+
+    for (const symbolInstance of bucket.symbolInstances) {
+      symbolInstance.crossTileID = 0;
+    }
+
+    if (!this.usedCrossTileIDs[tileID.overscaledZ]) {
+      this.usedCrossTileIDs[tileID.overscaledZ] = {};
+    }
+    const zoomCrossTileIDs = this.usedCrossTileIDs[tileID.overscaledZ];
+
+    for (const zoom in this.indexes) {
+      const zoomIndexes = this.indexes[zoom];
+      if (Number(zoom) > tileID.overscaledZ) {
+        for (const id in zoomIndexes) {
+          const childIndex = zoomIndexes[id];
+          if (childIndex.tileID.isChildOf(tileID)) {
+            childIndex.findMatches(bucket.symbolInstances, tileID, zoomCrossTileIDs);
+          }
+        }
+      } else {
+        const parentCoord = tileID.scaledTo(Number(zoom));
+        const parentIndex = zoomIndexes[parentCoord.key];
+        if (parentIndex) {
+          parentIndex.findMatches(bucket.symbolInstances, tileID, zoomCrossTileIDs);
+        }
+      }
+    }
+
+    for (const symbolInstance of bucket.symbolInstances) {
+      if (!symbolInstance.crossTileID) {
+        // symbol did not match any known symbol, assign a new id
+        symbolInstance.crossTileID = crossTileIDs.generate();
+        zoomCrossTileIDs[symbolInstance.crossTileID] = true;
+      }
+    }
+
+    if (this.indexes[tileID.overscaledZ] === undefined) {
+      this.indexes[tileID.overscaledZ] = {};
+    }
+    this.indexes[tileID.overscaledZ][tileID.key] = new TileLayerIndex(
+      tileID,
+      bucket.symbolInstances,
+      bucket.bucketInstanceId
+    );
+
+    return true;
+  }
+
+  removeBucketCrossTileIDs(zoom, removedBucket) {
+    for (const key in removedBucket.indexedSymbolInstances) {
+      for (const symbolInstance of removedBucket.indexedSymbolInstances[key]) {
+        delete this.usedCrossTileIDs[zoom][symbolInstance.crossTileID];
+      }
+    }
+  }
+
+  removeStaleBuckets(currentIDs) {
+    let tilesChanged = false;
+    for (const z in this.indexes) {
+      const zoomIndexes = this.indexes[z];
+      for (const tileKey in zoomIndexes) {
+        if (!currentIDs[zoomIndexes[tileKey].bucketInstanceId]) {
+          this.removeBucketCrossTileIDs(z, zoomIndexes[tileKey]);
+          delete zoomIndexes[tileKey];
+          tilesChanged = true;
+        }
+      }
+    }
+    return tilesChanged;
+  }
+}
+
+class CrossTileSymbolIndex {
+  constructor() {
+    this.layerIndexes = {};
+    this.crossTileIDs = new CrossTileIDs();
+    this.maxBucketInstanceId = 0;
+    this.bucketsInCurrentPlacement = {};
+  }
+
+  addLayer(styleLayer, tiles, lng) {
+    let layerIndex = this.layerIndexes[styleLayer.id];
+    if (layerIndex === undefined) {
+      layerIndex = this.layerIndexes[styleLayer.id] = new CrossTileSymbolLayerIndex();
+    }
+
+    let symbolBucketsChanged = false;
+    const currentBucketIDs = {};
+
+    layerIndex.handleWrapJump(lng);
+
+    for (const tile of tiles) {
+      const symbolBucket = tile.getBucket(styleLayer);
+      if (!symbolBucket || styleLayer.id !== symbolBucket.layerIds[0]) continue;
+
+      if (!symbolBucket.bucketInstanceId) {
+        symbolBucket.bucketInstanceId = ++this.maxBucketInstanceId;
+      }
+
+      if (layerIndex.addBucket(tile.tileID, symbolBucket, this.crossTileIDs)) {
+        symbolBucketsChanged = true;
+      }
+      currentBucketIDs[symbolBucket.bucketInstanceId] = true;
+    }
+
+    if (layerIndex.removeStaleBuckets(currentBucketIDs)) {
+      symbolBucketsChanged = true;
+    }
+
+    return symbolBucketsChanged;
+  }
+
+  pruneUnusedLayers(usedLayers) {
+    const usedLayerMap = {};
+    usedLayers.forEach(usedLayer => {
+      usedLayerMap[usedLayer] = true;
+    });
+    for (const layerId in this.layerIndexes) {
+      if (!usedLayerMap[layerId]) {
+        delete this.layerIndexes[layerId];
+      }
+    }
+  }
+}
+
+module.exports = CrossTileSymbolIndex;