Fix private scope issues in source/UrlTile and subclasses

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,16 +192,15 @@ 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}
+   * @override
    */
-function tileUrlFunction(tileCoord, pixelRatio, projection) {
+  tileUrlFunction(tileCoord, pixelRatio, projection) {
     let tileGrid = this.getTileGrid();
     if (!tileGrid) {
       tileGrid = this.getTileGridForProjection(projection);
@@ -240,5 +238,6 @@ function tileUrlFunction(tileCoord, pixelRatio, projection) {
       baseParams
     );
   }
+}
 
 export default TileArcGISRest;

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,16 +408,15 @@ 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}
+   * @override
    */
-function tileUrlFunction(tileCoord, pixelRatio, projection) {
+  tileUrlFunction(tileCoord, pixelRatio, projection) {
     let tileGrid = this.getTileGrid();
     if (!tileGrid) {
       tileGrid = this.getTileGridForProjection(projection);
@@ -464,5 +462,6 @@ function tileUrlFunction(tileCoord, pixelRatio, projection) {
       baseParams
     );
   }
+}
 
 export default TileWMS;

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 {
+import {createFromTemplates, expandUrl} from '../tileurlfunction.js';
-  createFromTemplates,
-  expandUrl,
-  nullTileUrlFunction,
-} 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;
 
-    /**
+    if (options.tileUrlFunction) {
-     * @protected
+      this.tileUrlFunction = options.tileUrlFunction.bind(this);
-     * @type {import("../Tile.js").UrlFunction}
+    }
-     */
-    this.tileUrlFunction = options.tileUrlFunction
-      ? options.tileUrlFunction.bind(this)
-      : nullTileUrlFunction;
 
     /**
      * @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.

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 {
+import {createFromTileUrlFunctions, expandUrl} from '../tileurlfunction.js';
-  createFromTileUrlFunctions,
-  expandUrl,
-  nullTileUrlFunction,
-} 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;
-      }
-    }
-  );
-}