Explicit data tile size

test/browser/spec/ol/DataTile.test.js

@@ -33,6 +33,28 @@ describe('ol/DataTile', function () {
     });
   });
 
+  describe('#getSize()', function () {
+    it('returns [256, 256] by default', function () {
+      const tileCoord = [0, 0, 0];
+      const tile = new DataTile({
+        tileCoord: tileCoord,
+        loader: loader,
+      });
+      expect(tile.getSize()).to.eql([256, 256]);
+    });
+
+    it('respects what is provided in the constructor', function () {
+      const size = [123, 456];
+      const tileCoord = [0, 0, 0];
+      const tile = new DataTile({
+        size: size,
+        tileCoord: tileCoord,
+        loader: loader,
+      });
+      expect(tile.getSize()).to.eql(size);
+    });
+  });
+
   describe('#load()', function () {
     it('handles loading states correctly', function (done) {
       const tileCoord = [0, 0, 0];

test/browser/spec/ol/layer/WebGLTile.test.js

@@ -5,6 +5,7 @@ import View from '../../../../../src/ol/View.js';
 import WebGLHelper from '../../../../../src/ol/webgl/Helper.js';
 import WebGLTileLayer from '../../../../../src/ol/layer/WebGLTile.js';
 import {createCanvasContext2D} from '../../../../../src/ol/dom.js';
+import {createXYZ} from '../../../../../src/ol/tilegrid.js';
 import {getForViewAndSize} from '../../../../../src/ol/extent.js';
 import {getRenderPixel} from '../../../../../src/ol/render.js';
 
@@ -81,7 +82,8 @@ describe('ol/layer/WebGLTile', function () {
     it('retrieves pixel data', (done) => {
       const layer = new WebGLTileLayer({
         source: new DataTileSource({
-          tilePixelRatio: 1 / 256,
+          tileSize: 1,
+          tileGrid: createXYZ(),
           loader(z, x, y) {
             return new Uint8Array([5, 4, 3, 2, 1]);
           },
@@ -106,7 +108,8 @@ describe('ol/layer/WebGLTile', function () {
     it('preserves the original data type', (done) => {
       const layer = new WebGLTileLayer({
         source: new DataTileSource({
-          tilePixelRatio: 1 / 256,
+          tileSize: 1,
+          tileGrid: createXYZ(),
           loader(z, x, y) {
             return new Float32Array([1.11, 2.22, 3.33, 4.44, 5.55]);
           },

test/browser/spec/ol/source/DataTile.test.js

@@ -40,6 +40,30 @@ describe('ol/source/DataTile', function () {
     });
   });
 
+  describe('#getTileSize()', function () {
+    it('returns [256, 256] by default', function () {
+      const source = new DataTileSource({});
+      expect(source.getTileSize(0)).to.eql([256, 256]);
+    });
+
+    it('respects a tileSize passed to the constructor', function () {
+      const size = [1234, 5678];
+      const source = new DataTileSource({tileSize: size});
+      expect(source.getTileSize(0)).to.eql(size);
+    });
+
+    it('picks from an array of sizes passed to setTileSizes()', function () {
+      const sizes = [
+        [123, 456],
+        [234, 567],
+        [345, 678],
+      ];
+      const source = new DataTileSource({});
+      source.setTileSizes(sizes);
+      expect(source.getTileSize(1)).to.eql(sizes[1]);
+    });
+  });
+
   describe('#getInterpolate()', function () {
     it('is false by default', function () {
       const source = new DataTileSource({loader: () => {}});

test/rendering/cases/webgl-data-tile-tilepixelratio2/main.js

@@ -2,6 +2,7 @@ import DataTile from '../../../../src/ol/source/DataTile.js';
 import Map from '../../../../src/ol/Map.js';
 import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
 import View from '../../../../src/ol/View.js';
+// import {createXYZ} from '../../../../src/ol/tilegrid.js';
 
 const size = 512;
 
@@ -17,9 +18,14 @@ new Map({
   layers: [
     new TileLayer({
       source: new DataTile({
+        // remove this in the next major release
+        tilePixelRatio: 2,
+
+        // instead use an explicit source and render tile size
+        // tileSize: size,
+        // tileGrid: createXYZ({maxZoom: 0}),
         maxZoom: 0,
         loader: () => data,
-        tilePixelRatio: 2,
       }),
     }),
   ],

test/rendering/cases/webgl-tile-aspect-ratio/main.js

@@ -0,0 +1,21 @@
+import GeoTIFF from '../../../../src/ol/source/GeoTIFF.js';
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+
+const source = new GeoTIFF({
+  convertToRGB: true,
+  sources: [{url: '/data/raster/non-square-pixels.tif'}],
+});
+
+new Map({
+  target: 'map',
+  layers: [new TileLayer({source})],
+  view: source.getView().then((config) => ({
+    ...config,
+    rotation: Math.PI / 6,
+  })),
+});
+
+render({
+  message: 'properly renders rotated non-square pixels',
+});