diff --git a/src/ol/source/TileArcGISRest.js b/src/ol/source/TileArcGISRest.js
index ec06b2ed0c..c85cf4c6f1 100644
--- a/src/ol/source/TileArcGISRest.js
+++ b/src/ol/source/TileArcGISRest.js
@@ -76,7 +76,6 @@ class TileArcGISRest extends TileImage {
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileGrid: options.tileGrid,
       tileLoadFunction: options.tileLoadFunction,
-      tileUrlFunction: tileUrlFunction,
       url: options.url,
       urls: options.urls,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
@@ -193,52 +192,52 @@ class TileArcGISRest extends TileImage {
     assign(this.params_, params);
     this.setKey(this.getKeyForParams_());
   }
-}
 
-/**
- * @param {import("../tilecoord.js").TileCoord} tileCoord The tile coordinate
- * @param {number} pixelRatio The pixel ratio
- * @param {import("../proj/Projection.js").default} projection The projection
- * @return {string|undefined} The tile URL
- * @this {TileArcGISRest}
- */
-function tileUrlFunction(tileCoord, pixelRatio, projection) {
-  let tileGrid = this.getTileGrid();
-  if (!tileGrid) {
-    tileGrid = this.getTileGridForProjection(projection);
+  /**
+   * @param {import("../tilecoord.js").TileCoord} tileCoord The tile coordinate
+   * @param {number} pixelRatio The pixel ratio
+   * @param {import("../proj/Projection.js").default} projection The projection
+   * @return {string|undefined} The tile URL
+   * @override
+   */
+  tileUrlFunction(tileCoord, pixelRatio, projection) {
+    let tileGrid = this.getTileGrid();
+    if (!tileGrid) {
+      tileGrid = this.getTileGridForProjection(projection);
+    }
+
+    if (tileGrid.getResolutions().length <= tileCoord[0]) {
+      return undefined;
+    }
+
+    if (pixelRatio != 1 && !this.hidpi_) {
+      pixelRatio = 1;
+    }
+
+    const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent_);
+    let tileSize = toSize(tileGrid.getTileSize(tileCoord[0]), this.tmpSize);
+
+    if (pixelRatio != 1) {
+      tileSize = scaleSize(tileSize, pixelRatio, this.tmpSize);
+    }
+
+    // Apply default params and override with user specified values.
+    const baseParams = {
+      'F': 'image',
+      'FORMAT': 'PNG32',
+      'TRANSPARENT': true,
+    };
+    assign(baseParams, this.params_);
+
+    return this.getRequestUrl_(
+      tileCoord,
+      tileSize,
+      tileExtent,
+      pixelRatio,
+      projection,
+      baseParams
+    );
   }
-
-  if (tileGrid.getResolutions().length <= tileCoord[0]) {
-    return undefined;
-  }
-
-  if (pixelRatio != 1 && !this.hidpi_) {
-    pixelRatio = 1;
-  }
-
-  const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent_);
-  let tileSize = toSize(tileGrid.getTileSize(tileCoord[0]), this.tmpSize);
-
-  if (pixelRatio != 1) {
-    tileSize = scaleSize(tileSize, pixelRatio, this.tmpSize);
-  }
-
-  // Apply default params and override with user specified values.
-  const baseParams = {
-    'F': 'image',
-    'FORMAT': 'PNG32',
-    'TRANSPARENT': true,
-  };
-  assign(baseParams, this.params_);
-
-  return this.getRequestUrl_(
-    tileCoord,
-    tileSize,
-    tileExtent,
-    pixelRatio,
-    projection,
-    baseParams
-  );
 }
 
 export default TileArcGISRest;
diff --git a/src/ol/source/TileWMS.js b/src/ol/source/TileWMS.js
index 21ab627c95..7647b8bb8d 100644
--- a/src/ol/source/TileWMS.js
+++ b/src/ol/source/TileWMS.js
@@ -97,7 +97,6 @@ class TileWMS extends TileImage {
       tileClass: options.tileClass,
       tileGrid: options.tileGrid,
       tileLoadFunction: options.tileLoadFunction,
-      tileUrlFunction: tileUrlFunction,
       url: options.url,
       urls: options.urls,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
@@ -409,60 +408,60 @@ class TileWMS extends TileImage {
     const version = this.params_['VERSION'] || DEFAULT_WMS_VERSION;
     this.v13_ = compareVersions(version, '1.3') >= 0;
   }
-}
 
-/**
- * @param {import("../tilecoord.js").TileCoord} tileCoord The tile coordinate
- * @param {number} pixelRatio The pixel ratio
- * @param {import("../proj/Projection.js").default} projection The projection
- * @return {string|undefined} The tile URL
- * @this {TileWMS}
- */
-function tileUrlFunction(tileCoord, pixelRatio, projection) {
-  let tileGrid = this.getTileGrid();
-  if (!tileGrid) {
-    tileGrid = this.getTileGridForProjection(projection);
+  /**
+   * @param {import("../tilecoord.js").TileCoord} tileCoord The tile coordinate
+   * @param {number} pixelRatio The pixel ratio
+   * @param {import("../proj/Projection.js").default} projection The projection
+   * @return {string|undefined} The tile URL
+   * @override
+   */
+  tileUrlFunction(tileCoord, pixelRatio, projection) {
+    let tileGrid = this.getTileGrid();
+    if (!tileGrid) {
+      tileGrid = this.getTileGridForProjection(projection);
+    }
+
+    if (tileGrid.getResolutions().length <= tileCoord[0]) {
+      return undefined;
+    }
+
+    if (pixelRatio != 1 && (!this.hidpi_ || this.serverType_ === undefined)) {
+      pixelRatio = 1;
+    }
+
+    const tileResolution = tileGrid.getResolution(tileCoord[0]);
+    let tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent_);
+    let tileSize = toSize(tileGrid.getTileSize(tileCoord[0]), this.tmpSize);
+
+    const gutter = this.gutter_;
+    if (gutter !== 0) {
+      tileSize = bufferSize(tileSize, gutter, this.tmpSize);
+      tileExtent = buffer(tileExtent, tileResolution * gutter, tileExtent);
+    }
+
+    if (pixelRatio != 1) {
+      tileSize = scaleSize(tileSize, pixelRatio, this.tmpSize);
+    }
+
+    const baseParams = {
+      'SERVICE': 'WMS',
+      'VERSION': DEFAULT_WMS_VERSION,
+      'REQUEST': 'GetMap',
+      'FORMAT': 'image/png',
+      'TRANSPARENT': true,
+    };
+    assign(baseParams, this.params_);
+
+    return this.getRequestUrl_(
+      tileCoord,
+      tileSize,
+      tileExtent,
+      pixelRatio,
+      projection,
+      baseParams
+    );
   }
-
-  if (tileGrid.getResolutions().length <= tileCoord[0]) {
-    return undefined;
-  }
-
-  if (pixelRatio != 1 && (!this.hidpi_ || this.serverType_ === undefined)) {
-    pixelRatio = 1;
-  }
-
-  const tileResolution = tileGrid.getResolution(tileCoord[0]);
-  let tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent_);
-  let tileSize = toSize(tileGrid.getTileSize(tileCoord[0]), this.tmpSize);
-
-  const gutter = this.gutter_;
-  if (gutter !== 0) {
-    tileSize = bufferSize(tileSize, gutter, this.tmpSize);
-    tileExtent = buffer(tileExtent, tileResolution * gutter, tileExtent);
-  }
-
-  if (pixelRatio != 1) {
-    tileSize = scaleSize(tileSize, pixelRatio, this.tmpSize);
-  }
-
-  const baseParams = {
-    'SERVICE': 'WMS',
-    'VERSION': DEFAULT_WMS_VERSION,
-    'REQUEST': 'GetMap',
-    'FORMAT': 'image/png',
-    'TRANSPARENT': true,
-  };
-  assign(baseParams, this.params_);
-
-  return this.getRequestUrl_(
-    tileCoord,
-    tileSize,
-    tileExtent,
-    pixelRatio,
-    projection,
-    baseParams
-  );
 }
 
 export default TileWMS;
diff --git a/src/ol/source/UrlTile.js b/src/ol/source/UrlTile.js
index ba267f7695..f48e20cc6f 100644
--- a/src/ol/source/UrlTile.js
+++ b/src/ol/source/UrlTile.js
@@ -4,11 +4,7 @@
 import TileEventType from './TileEventType.js';
 import TileSource, {TileSourceEvent} from './Tile.js';
 import TileState from '../TileState.js';
-import {
-  createFromTemplates,
-  expandUrl,
-  nullTileUrlFunction,
-} from '../tileurlfunction.js';
+import {createFromTemplates, expandUrl} from '../tileurlfunction.js';
 import {getKeyZXY} from '../tilecoord.js';
 import {getUid} from '../util.js';
 
@@ -62,7 +58,8 @@ class UrlTile extends TileSource {
      * @private
      * @type {boolean}
      */
-    this.generateTileUrlFunction_ = !options.tileUrlFunction;
+    this.generateTileUrlFunction_ =
+      this.tileUrlFunction === UrlTile.prototype.tileUrlFunction;
 
     /**
      * @protected
@@ -70,13 +67,9 @@ class UrlTile extends TileSource {
      */
     this.tileLoadFunction = options.tileLoadFunction;
 
-    /**
-     * @protected
-     * @type {import("../Tile.js").UrlFunction}
-     */
-    this.tileUrlFunction = options.tileUrlFunction
-      ? options.tileUrlFunction.bind(this)
-      : nullTileUrlFunction;
+    if (options.tileUrlFunction) {
+      this.tileUrlFunction = options.tileUrlFunction.bind(this);
+    }
 
     /**
      * @protected
@@ -206,6 +199,16 @@ class UrlTile extends TileSource {
     }
   }
 
+  /**
+   * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {import("../proj/Projection.js").default} projection Projection.
+   * @return {string|undefined} Tile URL.
+   */
+  tileUrlFunction(tileCoord, pixelRatio, projection) {
+    return undefined;
+  }
+
   /**
    * Marks a tile coord as being used, without triggering a load.
    * @param {number} z Tile coordinate z.
diff --git a/src/ol/source/WMTS.js b/src/ol/source/WMTS.js
index 352e477ed3..51273db0b1 100644
--- a/src/ol/source/WMTS.js
+++ b/src/ol/source/WMTS.js
@@ -7,11 +7,7 @@ import WMTSRequestEncoding from './WMTSRequestEncoding.js';
 import {appendParams} from '../uri.js';
 import {assign} from '../obj.js';
 import {createFromCapabilitiesMatrixSet} from '../tilegrid/WMTS.js';
-import {
-  createFromTileUrlFunctions,
-  expandUrl,
-  nullTileUrlFunction,
-} from '../tileurlfunction.js';
+import {createFromTileUrlFunctions, expandUrl} from '../tileurlfunction.js';
 import {equivalent, get as getProjection} from '../proj.js';
 import {find, findIndex, includes} from '../array.js';
 
@@ -95,7 +91,6 @@ class WMTS extends TileImage {
       tileGrid: tileGrid,
       tileLoadFunction: options.tileLoadFunction,
       tilePixelRatio: options.tilePixelRatio,
-      tileUrlFunction: nullTileUrlFunction,
       urls: urls,
       wrapX: options.wrapX !== undefined ? options.wrapX : false,
       transition: options.transition,
@@ -151,7 +146,7 @@ class WMTS extends TileImage {
 
     if (urls && urls.length > 0) {
       this.tileUrlFunction = createFromTileUrlFunctions(
-        urls.map(createFromWMTSTemplate.bind(this))
+        urls.map(this.createFromWMTSTemplate.bind(this))
       );
     }
   }
@@ -165,7 +160,9 @@ class WMTS extends TileImage {
     this.urls = urls;
     const key = urls.join('\n');
     this.setTileUrlFunction(
-      createFromTileUrlFunctions(urls.map(createFromWMTSTemplate.bind(this))),
+      createFromTileUrlFunctions(
+        urls.map(this.createFromWMTSTemplate.bind(this))
+      ),
       key
     );
   }
@@ -257,6 +254,76 @@ class WMTS extends TileImage {
     assign(this.dimensions_, dimensions);
     this.setKey(this.getKeyForDimensions_());
   }
+
+  /**
+   * @param {string} template Template.
+   * @return {import("../Tile.js").UrlFunction} Tile URL function.
+   */
+  createFromWMTSTemplate(template) {
+    const requestEncoding = this.requestEncoding_;
+
+    // context property names are lower case to allow for a case insensitive
+    // replacement as some services use different naming conventions
+    const context = {
+      'layer': this.layer_,
+      'style': this.style_,
+      'tilematrixset': this.matrixSet_,
+    };
+
+    if (requestEncoding == WMTSRequestEncoding.KVP) {
+      assign(context, {
+        'Service': 'WMTS',
+        'Request': 'GetTile',
+        'Version': this.version_,
+        'Format': this.format_,
+      });
+    }
+
+    // TODO: we may want to create our own appendParams function so that params
+    // order conforms to wmts spec guidance, and so that we can avoid to escape
+    // special template params
+
+    template =
+      requestEncoding == WMTSRequestEncoding.KVP
+        ? appendParams(template, context)
+        : template.replace(/\{(\w+?)\}/g, function (m, p) {
+            return p.toLowerCase() in context ? context[p.toLowerCase()] : m;
+          });
+
+    const tileGrid = /** @type {import("../tilegrid/WMTS.js").default} */ (this
+      .tileGrid);
+    const dimensions = this.dimensions_;
+
+    return (
+      /**
+       * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
+       * @param {number} pixelRatio Pixel ratio.
+       * @param {import("../proj/Projection.js").default} projection Projection.
+       * @return {string|undefined} Tile URL.
+       */
+      function (tileCoord, pixelRatio, projection) {
+        if (!tileCoord) {
+          return undefined;
+        } else {
+          const localContext = {
+            'TileMatrix': tileGrid.getMatrixId(tileCoord[0]),
+            'TileCol': tileCoord[1],
+            'TileRow': tileCoord[2],
+          };
+          assign(localContext, dimensions);
+          let url = template;
+          if (requestEncoding == WMTSRequestEncoding.KVP) {
+            url = appendParams(url, localContext);
+          } else {
+            url = url.replace(/\{(\w+?)\}/g, function (m, p) {
+              return localContext[p];
+            });
+          }
+          return url;
+        }
+      }
+    );
+  }
 }
 
 export default WMTS;
@@ -468,74 +535,3 @@ export function optionsFromCapabilities(wmtsCap, config) {
     crossOrigin: config['crossOrigin'],
   };
 }
-
-/**
- * @param {string} template Template.
- * @return {import("../Tile.js").UrlFunction} Tile URL function.
- * @this {WMTS}
- */
-function createFromWMTSTemplate(template) {
-  const requestEncoding = this.requestEncoding_;
-
-  // context property names are lower case to allow for a case insensitive
-  // replacement as some services use different naming conventions
-  const context = {
-    'layer': this.layer_,
-    'style': this.style_,
-    'tilematrixset': this.matrixSet_,
-  };
-
-  if (requestEncoding == WMTSRequestEncoding.KVP) {
-    assign(context, {
-      'Service': 'WMTS',
-      'Request': 'GetTile',
-      'Version': this.version_,
-      'Format': this.format_,
-    });
-  }
-
-  // TODO: we may want to create our own appendParams function so that params
-  // order conforms to wmts spec guidance, and so that we can avoid to escape
-  // special template params
-
-  template =
-    requestEncoding == WMTSRequestEncoding.KVP
-      ? appendParams(template, context)
-      : template.replace(/\{(\w+?)\}/g, function (m, p) {
-          return p.toLowerCase() in context ? context[p.toLowerCase()] : m;
-        });
-
-  const tileGrid = /** @type {import("../tilegrid/WMTS.js").default} */ (this
-    .tileGrid);
-  const dimensions = this.dimensions_;
-
-  return (
-    /**
-     * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
-     * @param {number} pixelRatio Pixel ratio.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @return {string|undefined} Tile URL.
-     */
-    function (tileCoord, pixelRatio, projection) {
-      if (!tileCoord) {
-        return undefined;
-      } else {
-        const localContext = {
-          'TileMatrix': tileGrid.getMatrixId(tileCoord[0]),
-          'TileCol': tileCoord[1],
-          'TileRow': tileCoord[2],
-        };
-        assign(localContext, dimensions);
-        let url = template;
-        if (requestEncoding == WMTSRequestEncoding.KVP) {
-          url = appendParams(url, localContext);
-        } else {
-          url = url.replace(/\{(\w+?)\}/g, function (m, p) {
-            return localContext[p];
-          });
-        }
-        return url;
-      }
-    }
-  );
-}