Ensure that tile range covers all pixels

test/node/ol/tilegrid/TileGrid.test.js

@@ -823,14 +823,14 @@ describe('ol/tilegrid/TileGrid.js', function () {
       expect(tileCoord[2]).to.eql(1);
 
       // pixels are top aligned to the origin
-      coordinate = [1280, -2559.999];
+      coordinate = [1280, -2549.999];
       tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate, 10);
       expect(tileCoord[0]).to.eql(0);
       expect(tileCoord[1]).to.eql(0);
       expect(tileCoord[2]).to.eql(0);
 
       // pixels are left aligned to the origin
-      coordinate = [2559.999, -1280];
+      coordinate = [2549.999, -1280];
       tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate, 10);
       expect(tileCoord[0]).to.eql(0);
       expect(tileCoord[1]).to.eql(0);
@@ -947,6 +947,44 @@ describe('ol/tilegrid/TileGrid.js', function () {
   });
 
   describe('getTileRangeForExtentAndZ', function () {
+    it('includes a tile even if a fraction of a pixel is covered', function () {
+      const tileGrid = new TileGrid({
+        resolutions: [1],
+        origin: [0, 10],
+        tileSize: 10,
+      });
+
+      let tileRange;
+
+      // overlaps to the right
+      tileRange = tileGrid.getTileRangeForExtentAndZ([0, 0, 10.1, 10], 0);
+      expect(tileRange.minX).to.be(0);
+      expect(tileRange.maxX).to.be(1);
+      expect(tileRange.minY).to.be(0);
+      expect(tileRange.maxY).to.be(0);
+
+      // overlaps to the bottom
+      tileRange = tileGrid.getTileRangeForExtentAndZ([0, -0.1, 10, 10], 0);
+      expect(tileRange.minX).to.be(0);
+      expect(tileRange.maxX).to.be(0);
+      expect(tileRange.minY).to.be(0);
+      expect(tileRange.maxY).to.be(1);
+
+      // overlaps to the left
+      tileRange = tileGrid.getTileRangeForExtentAndZ([-0.1, 0, 10, 10], 0);
+      expect(tileRange.minX).to.be(-1);
+      expect(tileRange.maxX).to.be(0);
+      expect(tileRange.minY).to.be(0);
+      expect(tileRange.maxY).to.be(0);
+
+      // overlaps to the top
+      tileRange = tileGrid.getTileRangeForExtentAndZ([0, 0, 10, 10.1], 0);
+      expect(tileRange.minX).to.be(0);
+      expect(tileRange.maxX).to.be(0);
+      expect(tileRange.minY).to.be(-1);
+      expect(tileRange.maxY).to.be(0);
+    });
+
     it('returns the expected TileRange', function () {
       const tileGrid = new TileGrid({
         resolutions: resolutions,

test/rendering/cases/webgl-tile-range/main.js

@@ -0,0 +1,67 @@
+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 {Projection} from '../../../../src/ol/proj.js';
+
+const size = 256;
+const data = new Uint8Array(size * size * 4);
+for (let row = 0; row < size; ++row) {
+  for (let col = 0; col < size; ++col) {
+    const index = (row * size + col) * 4;
+    data[index] = 0;
+    data[index + 1] = 255;
+    data[index + 2] = 0;
+    data[index + 3] = 255;
+  }
+}
+
+const canvas = document.createElement('canvas');
+canvas.width = size;
+canvas.height = size;
+
+const context = canvas.getContext('2d');
+context.strokeStyle = 'black';
+
+function getLabels(z, x, y) {
+  context.clearRect(0, 0, size, size);
+  context.strokeRect(0, 0, size, size);
+  const data = context.getImageData(0, 0, size, size).data;
+  return new Uint8Array(data.buffer);
+}
+
+document.getElementById('map').style.background = 'red';
+
+const projection = new Projection({
+  code: 'pixels',
+  units: 'pixels',
+  extent: [0, 0, 256, 256],
+});
+
+new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new DataTile({
+        projection: projection,
+        maxZoom: 1,
+        tileSize: size,
+        loader: () => data,
+      }),
+    }),
+    new TileLayer({
+      source: new DataTile({
+        projection: projection,
+        loader: getLabels,
+        transition: 0,
+      }),
+    }),
+  ],
+  view: new View({
+    projection: projection,
+    center: [127.7, 128.3],
+    zoom: 8,
+  }),
+});
+
+render();