switch TileCoord to -native's TileID types (#5782)

bench/benchmarks/layout.js

@@ -11,7 +11,8 @@ const promisify = require('pify');
 const WorkerTile = require('../../src/source/worker_tile');
 const StyleLayerIndex = require('../../src/style/style_layer_index');
 const deref = require('../../src/style-spec/deref');
-const TileCoord = require('../../src/source/tile_coord');
+const {OverscaledTileID} = require('../../src/source/tile_id');
+
 const {
     normalizeStyleURL,
     normalizeSourceURL,
@@ -26,14 +27,14 @@ module.exports = class Layout extends Benchmark {
     icons: Object;
     workerTile: WorkerTile;
     layerIndex: StyleLayerIndex;
-    tiles: Array<{coord: TileCoord, buffer: ArrayBuffer}>;
+    tiles: Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>;
 
-    tileCoords(): Array<TileCoord> {
+    tileIDs(): Array<OverscaledTileID> {
         return [
-            new TileCoord(12, 655, 1583),
-            new TileCoord(8, 40, 98),
-            new TileCoord(4, 3, 6),
-            new TileCoord(0, 0, 0)
+            new OverscaledTileID(12, 0, 12, 655, 1583),
+            new OverscaledTileID(8, 0, 8, 40, 98),
+            new OverscaledTileID(4, 0, 4, 3, 6),
+            new OverscaledTileID(0, 0, 0, 0, 0)
         ];
     }
 
@@ -46,15 +47,15 @@ module.exports = class Layout extends Benchmark {
             .then(response => response.json());
     }
 
-    fetchTiles(styleJSON: StyleSpecification): Promise<Array<{coord: TileCoord, buffer: ArrayBuffer}>> {
+    fetchTiles(styleJSON: StyleSpecification): Promise<Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>> {
         const sourceURL: string = (styleJSON.sources[this.sourceID()]: any).url;
         return fetch(normalizeSourceURL(sourceURL))
             .then(response => response.json())
             .then((tileJSON: TileJSON) => {
-                return Promise.all(this.tileCoords().map(coord => {
-                    return fetch((normalizeTileURL(coord.url(tileJSON.tiles))))
+                return Promise.all(this.tileIDs().map(tileID => {
+                    return fetch((normalizeTileURL(tileID.canonical.url(tileJSON.tiles))))
                         .then(response => response.arrayBuffer())
-                        .then(buffer => ({coord, buffer}));
+                        .then(buffer => ({tileID, buffer}));
                 }));
             });
     }
@@ -105,11 +106,11 @@ module.exports = class Layout extends Benchmark {
 
         let promise: Promise<void> = Promise.resolve();
 
-        for (const {coord, buffer} of this.tiles) {
+        for (const {tileID, buffer} of this.tiles) {
             promise = promise.then(() => {
                 const workerTile = new WorkerTile({
-                    coord,
-                    zoom: coord.z,
+                    tileID: tileID,
+                    zoom: tileID.overscaledZ,
                     tileSize: 512,
                     overscaling: 1,
                     showCollisionBoxes: false,

bench/benchmarks/layout_dds.js

@@ -1,14 +1,14 @@
 // @flow
 
 const Layout = require('./layout');
-const TileCoord = require('../../src/source/tile_coord');
+const {OverscaledTileID} = require('../../src/source/tile_id');
 
 const LAYER_COUNT = 2;
 
 module.exports = class LayoutDDS extends Layout {
-    tileCoords(): Array<TileCoord> {
+    tileIDs(): Array<OverscaledTileID> {
         return [
-            new TileCoord(15, 9373, 12535)
+            new OverscaledTileID(15, 0, 15, 9373, 12535)
         ];
     }
 

src/data/feature_index.js

@@ -11,7 +11,7 @@ const vt = require('@mapbox/vector-tile');
 const Protobuf = require('pbf');
 const GeoJSONFeature = require('../util/vectortile_to_geojson');
 const arraysIntersect = require('../util/util').arraysIntersect;
-const TileCoord = require('../source/tile_coord');
+const {OverscaledTileID} = require('../source/tile_id');
 const {register} = require('../util/web_worker_transfer');
 
 import type CollisionIndex from '../symbol/collision_index';
@@ -39,13 +39,12 @@ type QueryParameters = {
         filter: FilterSpecification,
         layers: Array<string>,
     },
-    tileSourceMaxZoom: number,
     collisionBoxArray: any,
     sourceID: string
 }
 
 class FeatureIndex {
-    coord: TileCoord;
+    tileID: OverscaledTileID;
     overscaling: number;
     x: number;
     y: number;
@@ -61,15 +60,15 @@ class FeatureIndex {
 
     collisionIndex: CollisionIndex;
 
-    constructor(coord: TileCoord,
+    constructor(tileID: OverscaledTileID,
                 overscaling: number,
                 grid?: Grid,
                 featureIndexArray?: FeatureIndexArray) {
-        this.coord = coord;
+        this.tileID = tileID;
         this.overscaling = overscaling;
-        this.x = coord.x;
-        this.y = coord.y;
-        this.z = coord.z - Math.log(overscaling) / Math.LN2;
+        this.x = tileID.canonical.x;
+        this.y = tileID.canonical.y;
+        this.z = tileID.canonical.z;
         this.grid = grid || new Grid(EXTENT, 16, 0);
         this.featureIndexArray = featureIndexArray || new FeatureIndexArray();
     }
@@ -134,7 +133,7 @@ class FeatureIndex {
         this.filterMatching(result, matching, this.featureIndexArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits);
 
         const matchingSymbols = this.collisionIndex ?
-            this.collisionIndex.queryRenderedSymbols(queryGeometry, this.coord, args.tileSourceMaxZoom, EXTENT / args.tileSize, args.collisionBoxArray, args.sourceID) :
+            this.collisionIndex.queryRenderedSymbols(queryGeometry, this.tileID, EXTENT / args.tileSize, args.collisionBoxArray, args.sourceID) :
             [];
         matchingSymbols.sort();
         this.filterMatching(result, matchingSymbols, args.collisionBoxArray, queryGeometry, filter, params.layers, styleLayers, args.bearing, pixelsToTileUnits);
@@ -170,7 +169,7 @@ class FeatureIndex {
             const sourceLayer = this.vtLayers[sourceLayerName];
             const feature = sourceLayer.feature(match.featureIndex);
 
-            if (!filter({zoom: this.coord.z}, feature)) continue;
+            if (!filter({zoom: this.tileID.overscaledZ}, feature)) continue;
 
             let geometry = null;
 

src/geo/transform.js

@@ -5,7 +5,8 @@ const LngLat = require('./lng_lat'),
     Coordinate = require('./coordinate'),
     util = require('../util/util'),
     interp = require('../style-spec/util/interpolate').number,
-    TileCoord = require('../source/tile_coord'),
+    tileCover = require('../util/tile_cover'),
+    {CanonicalTileID, UnwrappedTileID} = require('../source/tile_id'),
     EXTENT = require('../data/extent'),
     glmatrix = require('@mapbox/gl-matrix');
 
@@ -43,7 +44,7 @@ class Transform {
     _maxZoom: number;
     _center: LngLat;
     _constraining: boolean;
-    _posMatrixCache: {[string]: Float32Array};
+    _posMatrixCache: {[number]: Float32Array};
 
     constructor(minZoom: ?number, maxZoom: ?number, renderWorldCopies: boolean | void) {
         this.tileSize = 512; // constant
@@ -189,15 +190,15 @@ class Transform {
      *
      * @private
      */
-    getVisibleWrappedCoordinates(tileCoord: TileCoord) {
+    getVisibleUnwrappedCoordinates(tileID: CanonicalTileID) {
         const ul = this.pointCoordinate(new Point(0, 0), 0);
         const ur = this.pointCoordinate(new Point(this.width, 0), 0);
         const w0 = Math.floor(ul.column);
         const w1 = Math.floor(ur.column);
-        const result = [tileCoord];
+        const result = [new UnwrappedTileID(0, tileID)];
         for (let w = w0; w <= w1; w++) {
             if (w === 0) continue;
-            result.push(new TileCoord(tileCoord.z, tileCoord.x, tileCoord.y, w));
+            result.push(new UnwrappedTileID(w, tileID));
         }
         return result;
     }
@@ -238,8 +239,8 @@ class Transform {
             this.pointCoordinate(new Point(this.width, this.height), z),
             this.pointCoordinate(new Point(0, this.height), z)
         ];
-        return TileCoord.cover(z, cornerCoords, options.reparseOverscaled ? actualZ : z, this._renderWorldCopies)
-            .sort((a, b) => centerPoint.dist(a) - centerPoint.dist(b));
+        return tileCover(z, cornerCoords, options.reparseOverscaled ? actualZ : z, this._renderWorldCopies)
+            .sort((a, b) => centerPoint.dist(a.canonical) - centerPoint.dist(b.canonical));
     }
 
     resize(width: number, height: number) {
@@ -393,24 +394,20 @@ class Transform {
 
     /**
      * Calculate the posMatrix that, given a tile coordinate, would be used to display the tile on a map.
-     * @param {TileCoord} tileCoord
-     * @param {number} maxZoom maximum source zoom to account for overscaling
+     * @param {UnwrappedTileID} unwrappedTileID;
      */
-    calculatePosMatrix(tileCoord: TileCoord, maxZoom?: number): Float32Array {
-        let posMatrixKey = tileCoord.id.toString();
-        if (maxZoom) {
-            posMatrixKey += maxZoom.toString();
-        }
+    calculatePosMatrix(unwrappedTileID: UnwrappedTileID): Float32Array {
+        const posMatrixKey = unwrappedTileID.key;
         if (this._posMatrixCache[posMatrixKey]) {
             return this._posMatrixCache[posMatrixKey];
         }
-        // if z > maxzoom then the tile is actually a overscaled maxzoom tile,
-        // so calculate the matrix the maxzoom tile would use.
-        const coord = tileCoord.toCoordinate(maxZoom);
-        const scale = this.worldSize / this.zoomScale(coord.zoom);
+
+        const canonical = unwrappedTileID.canonical;
+        const scale = this.worldSize / this.zoomScale(canonical.z);
+        const unwrappedX = canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap;
 
         const posMatrix = mat4.identity(new Float64Array(16));
-        mat4.translate(posMatrix, posMatrix, [coord.column * scale, coord.row * scale, 0]);
+        mat4.translate(posMatrix, posMatrix, [unwrappedX * scale, canonical.y * scale, 0]);
         mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
         mat4.multiply(posMatrix, this.projMatrix, posMatrix);
 

src/render/draw_background.js

@@ -53,13 +53,13 @@ function drawBackground(painter: Painter, sourceCache: SourceCache, layer: Backg
         painter.tileExtentVAO.bind(context, program, painter.tileExtentBuffer);
     }
 
-    const coords = transform.coveringTiles({tileSize});
+    const tileIDs = transform.coveringTiles({tileSize});
 
-    for (const coord of coords) {
+    for (const tileID of tileIDs) {
         if (image) {
-            pattern.setTile({coord, tileSize}, painter, program);
+            pattern.setTile({tileID, tileSize}, painter, program);
         }
-        gl.uniformMatrix4fv(program.uniforms.u_matrix, false, painter.transform.calculatePosMatrix(coord));
+        gl.uniformMatrix4fv(program.uniforms.u_matrix, false, painter.transform.calculatePosMatrix(tileID.toUnwrapped()));
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, painter.tileExtentBuffer.length);
     }
 }

src/render/draw_circle.js

@@ -6,11 +6,11 @@ import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type CircleStyleLayer from '../style/style_layer/circle_style_layer';
 import type CircleBucket from '../data/bucket/circle_bucket';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 
 module.exports = drawCircles;
 
-function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<TileCoord>) {
+function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<OverscaledTileID>) {
     if (painter.renderPass !== 'translucent') return;
 
     const opacity = layer.paint.get('circle-opacity');

src/render/draw_collision_debug.js

@@ -3,13 +3,13 @@
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type StyleLayer from '../style/style_layer';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 import type SymbolBucket from '../data/bucket/symbol_bucket';
 const pixelsToTileUnits = require('../source/pixels_to_tile_units');
 
 module.exports = drawCollisionDebug;
 
-function drawCollisionDebugGeometry(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<TileCoord>, drawCircles: boolean) {
+function drawCollisionDebugGeometry(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>, drawCircles: boolean) {
     const context = painter.context;
     const gl = context.gl;
     const program = drawCircles ? painter.useProgram('collisionCircle') : painter.useProgram('collisionBox');
@@ -29,7 +29,7 @@ function drawCollisionDebugGeometry(painter: Painter, sourceCache: SourceCache,
 
         gl.uniform1f(program.uniforms.u_camera_to_center_distance, painter.transform.cameraToCenterDistance);
         const pixelRatio = pixelsToTileUnits(tile, 1, painter.transform.zoom);
-        const scale = Math.pow(2, painter.transform.zoom - tile.coord.z);
+        const scale = Math.pow(2, painter.transform.zoom - tile.tileID.overscaledZ);
         gl.uniform1f(program.uniforms.u_pixels_to_tile_units, pixelRatio);
         gl.uniform2f(program.uniforms.u_extrude_scale,
             painter.transform.pixelsToGLUnits[0] / (pixelRatio * scale),
@@ -48,7 +48,7 @@ function drawCollisionDebugGeometry(painter: Painter, sourceCache: SourceCache,
     }
 }
 
-function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<TileCoord>) {
+function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>) {
     drawCollisionDebugGeometry(painter, sourceCache, layer, coords, false);
     drawCollisionDebugGeometry(painter, sourceCache, layer, coords, true);
 }

src/render/draw_debug.js

@@ -8,11 +8,11 @@ const PosArray = require('../data/pos_array');
 
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 
 module.exports = drawDebug;
 
-function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<TileCoord>) {
+function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<OverscaledTileID>) {
     for (let i = 0; i < coords.length; i++) {
         drawDebugTile(painter, sourceCache, coords[i]);
     }
@@ -46,7 +46,7 @@ function drawDebugTile(painter, sourceCache, coord) {
     // Draw the halo with multiple 1px lines instead of one wider line because
     // the gl spec doesn't guarantee support for lines with width > 1.
     const tileSize = sourceCache.getTile(coord).tileSize;
-    const onePixel = EXTENT / (Math.pow(2, painter.transform.zoom - coord.z) * tileSize);
+    const onePixel = EXTENT / (Math.pow(2, painter.transform.zoom - coord.overscaledZ) * tileSize);
     const translations = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
     for (let i = 0; i < translations.length; i++) {
         const translation = translations[i];

src/render/draw_fill.js

@@ -7,12 +7,12 @@ import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type FillStyleLayer from '../style/style_layer/fill_style_layer';
 import type FillBucket from '../data/bucket/fill_bucket';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 import type {CrossFaded} from '../style/cross_faded';
 
 module.exports = drawFill;
 
-function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLayer, coords: Array<TileCoord>) {
+function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLayer, coords: Array<OverscaledTileID>) {
     const color = layer.paint.get('fill-color');
     const opacity = layer.paint.get('fill-opacity');
 

src/render/draw_fill_extrusion.js

@@ -11,11 +11,11 @@ import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type FillExtrusionStyleLayer from '../style/style_layer/fill_extrusion_style_layer';
 import type FillExtrusionBucket from '../data/bucket/fill_extrusion_bucket';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 
 module.exports = draw;
 
-function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<TileCoord>) {
+function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<OverscaledTileID>) {
     if (layer.paint.get('fill-extrusion-opacity') === 0) {
         return;
     }
@@ -82,7 +82,7 @@ function drawExtrusion(painter, source, layer, coord) {
         if (pattern.isPatternMissing(image, painter)) return;
         pattern.prepare(image, painter, program);
         pattern.setTile(tile, painter, program);
-        gl.uniform1f(program.uniforms.u_height_factor, -Math.pow(2, coord.z) / tile.tileSize / 8);
+        gl.uniform1f(program.uniforms.u_height_factor, -Math.pow(2, coord.overscaledZ) / tile.tileSize / 8);
     }
 
     painter.context.gl.uniformMatrix4fv(program.uniforms.u_matrix, false, painter.translatePosMatrix(

src/render/draw_heatmap.js

@@ -9,11 +9,11 @@ import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
 import type HeatmapStyleLayer from '../style/style_layer/heatmap_style_layer';
 import type HeatmapBucket from '../data/bucket/heatmap_bucket';
-import type TileCoord from '../source/tile_coord';
+import type {OverscaledTileID} from '../source/tile_id';
 
 module.exports = drawHeatmap;
 
-function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, coords: Array<TileCoord>) {
+function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, coords: Array<OverscaledTileID>) {
     if (painter.isOpaquePass) return;
     if (layer.paint.get('heatmap-opacity') === 0) {
         return;