Don't Use tileSize for Determining z of Tile Indexing in InfoVis (visgl#5895)

Author: ilan-gold

modules/geo-layers/src/tile-layer/tileset-2d.js

@@ -174,7 +174,8 @@ export default class Tileset2D {
 
   // Add custom metadata to tiles
   getTileMetadata({x, y, z}) {
-    return {bbox: tileToBoundingBox(this._viewport, x, y, z)};
+    const {tileSize} = this.opts;
+    return {bbox: tileToBoundingBox(this._viewport, x, y, z, tileSize)};
   }
 
   // Returns {x, y, z} of the parent tile

modules/geo-layers/src/tile-layer/utils.js

@@ -117,38 +117,37 @@ function getIndexingCoords(bbox, scale, modelMatrixInverse) {
   return bbox.map(i => (i * scale) / TILE_SIZE);
 }
 
-function getScale(z) {
-  return Math.pow(2, z);
+function getScale(z, tileSize) {
+  return (Math.pow(2, z) * TILE_SIZE) / tileSize;
 }
 
 // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Lon..2Flat._to_tile_numbers_2
 export function osmTile2lngLat(x, y, z) {
-  const scale = getScale(z);
+  const scale = getScale(z, TILE_SIZE);
   const lng = (x / scale) * 360 - 180;
   const n = Math.PI - (2 * Math.PI * y) / scale;
   const lat = (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
   return [lng, lat];
 }
 
-function tile2XY(x, y, z) {
-  const scale = getScale(z);
+function tile2XY(x, y, z, tileSize) {
+  const scale = getScale(z, tileSize);
   return [(x / scale) * TILE_SIZE, (y / scale) * TILE_SIZE];
 }
-
-export function tileToBoundingBox(viewport, x, y, z) {
+export function tileToBoundingBox(viewport, x, y, z, tileSize = TILE_SIZE) {
   if (viewport.isGeospatial) {
     const [west, north] = osmTile2lngLat(x, y, z);
     const [east, south] = osmTile2lngLat(x + 1, y + 1, z);
     return {west, north, east, south};
   }
-  const [left, top] = tile2XY(x, y, z);
-  const [right, bottom] = tile2XY(x + 1, y + 1, z);
+  const [left, top] = tile2XY(x, y, z, tileSize);
+  const [right, bottom] = tile2XY(x + 1, y + 1, z, tileSize);
   return {left, top, right, bottom};
 }
 
-function getIdentityTileIndices(viewport, z, extent, modelMatrixInverse) {
+function getIdentityTileIndices(viewport, z, tileSize, extent, modelMatrixInverse) {
   const bbox = getBoundingBox(viewport, null, extent);
-  const scale = getScale(z);
+  const scale = getScale(z, tileSize);
   const [minX, minY, maxX, maxY] = getIndexingCoords(bbox, scale, modelMatrixInverse);
   const indices = [];
 
@@ -180,7 +179,9 @@ export function getTileIndices({
   modelMatrix,
   modelMatrixInverse
 }) {
-  let z = Math.round(viewport.zoom + Math.log2(TILE_SIZE / tileSize));
+  let z = viewport.isGeospatial
+    ? Math.round(viewport.zoom + Math.log2(TILE_SIZE / tileSize))
+    : Math.ceil(viewport.zoom);
   if (Number.isFinite(minZoom) && z < minZoom) {
     if (!extent) {
       return [];
@@ -196,7 +197,13 @@ export function getTileIndices({
   }
   return viewport.isGeospatial
     ? getOSMTileIndices(viewport, z, zRange, extent || DEFAULT_EXTENT)
-    : getIdentityTileIndices(viewport, z, transformedExtent || DEFAULT_EXTENT, modelMatrixInverse);
+    : getIdentityTileIndices(
+        viewport,
+        z,
+        tileSize,
+        transformedExtent || DEFAULT_EXTENT,
+        modelMatrixInverse
+      );
 }
 
 /**

test/modules/geo-layers/tile-layer/utils.spec.js

@@ -142,7 +142,7 @@ const TEST_CASES = [
       }
     }),
     tileSize: 256,
-    output: ['1,2,4', '1,3,4', '2,2,4', '2,3,4', '3,2,4', '3,3,4', '4,2,4', '4,3,4']
+    output: ['1,2,3', '1,3,3', '2,2,3', '2,3,3', '3,2,3', '3,3,3', '4,2,3', '4,3,3']
   },
   {
     title: 'non-geospatial modelMatrix identity',
@@ -396,6 +396,12 @@ test('tileToBoundingBox#Infovis', t => {
     '0,0,1 Should match the results.'
   );
 
+  t.deepEqual(
+    tileToBoundingBox(viewport, 0, 0, 0, 256),
+    {left: 0, top: 0, right: 256, bottom: 256},
+    '0,0,0 with custom tileSize Should match the results.'
+  );
+
   t.deepEqual(
     tileToBoundingBox(viewport, 4, -1, 2),
     {left: 512, top: -128, right: 640, bottom: 0},
@@ -408,6 +414,12 @@ test('tileToBoundingBox#Infovis', t => {
     '4,-1,3 Should match the results.'
   );
 
+  t.deepEqual(
+    tileToBoundingBox(viewport, 4, -1, 2, 256),
+    {left: 256, top: -64, right: 320, bottom: 0},
+    '4,-1,2 with custom tileSize Should match the results.'
+  );
+
   t.end();
 });