add gutter option

src/ol/source/DataTile.js

@@ -27,6 +27,9 @@ import {toPromise} from '../functions.js';
  * @property {number} [maxZoom=42] Optional max zoom level. Not used if `tileGrid` is provided.
  * @property {number} [minZoom=0] Optional min zoom level. Not used if `tileGrid` is provided.
  * @property {number|import("../size.js").Size} [tileSize=[256, 256]] The pixel width and height of the tiles.
+ * @property {number} [gutter=0] The size in pixels of the gutter around data tiles to ignore.
+ * This allows artifacts of rendering at tile edges to be ignored.
+ * Supported data should be wider and taller than the tile size by a value of `2 x gutter`.
  * @property {number} [maxResolution] Optional tile grid resolution at level zero. Not used if `tileGrid` is provided.
  * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Tile projection.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
@@ -80,6 +83,12 @@ class DataTileSource extends TileSource {
       interpolate: options.interpolate,
     });
 
+    /**
+     * @private
+     * @type {number}
+     */
+    this.gutter_ = options.gutter !== undefined ? options.gutter : 0;
+
     /**
      * @private
      * @type {!Object<string, boolean>}
@@ -99,6 +108,14 @@ class DataTileSource extends TileSource {
     this.bandCount = options.bandCount === undefined ? 4 : options.bandCount; // assume RGBA if undefined
   }
 
+  /**
+   * @param {import("../proj/Projection.js").default} projection Projection.
+   * @return {number} Gutter.
+   */
+  getGutterForProjection(projection) {
+    return this.gutter_;
+  }
+
   /**
    * @param {Loader} loader The data loader.
    * @protected

src/ol/source/XYZ.js

@@ -36,6 +36,9 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js';
  * should be set to `2`.
  * @property {number|import("../size.js").Size} [tileSize=[256, 256]] The tile size used by the tile service.
  * Not used if `tileGrid` is provided.
+ * @property {number} [gutter=0] The size in pixels of the gutter around image tiles to ignore.
+ * This allows artifacts of rendering at tile edges to be ignored.
+ * Supported images should be wider and taller than the tile size by a value of `2 x gutter`.
  * @property {import("../Tile.js").UrlFunction} [tileUrlFunction] Optional function to get
  * tile URL given a tile coordinate and the projection.
  * Required if `url` or `urls` are not provided.
@@ -114,6 +117,19 @@ class XYZ extends TileImage {
       attributionsCollapsible: options.attributionsCollapsible,
       zDirection: options.zDirection,
     });
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.gutter_ = options.gutter !== undefined ? options.gutter : 0;
+  }
+
+  /**
+   * @return {number} Gutter.
+   */
+  getGutter() {
+    return this.gutter_;
   }
 }
 

test/rendering/cases/webgl-data-tile-interpolate-gutter/main.js

@@ -0,0 +1,33 @@
+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';
+
+const size = 260;
+
+const data = new Uint8Array(size * size);
+for (let row = 0; row < size; ++row) {
+  for (let col = 0; col < size; ++col) {
+    data[row * size + col] = (row + col) % 2 === 0 ? 255 : 0;
+  }
+}
+
+new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new DataTile({
+        maxZoom: 1,
+        interpolate: true,
+        loader: () => data,
+        gutter: 2,
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 5,
+  }),
+});
+
+render();