ol 7.5.1 → 8.0.0-dev.1692053484481

package/source/Image.js

@@ -2,12 +2,23 @@
  * @module ol/source/Image
  */
 import Event from '../events/Event.js';
+import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
+import ImageWrapper from '../Image.js';
 import ReprojImage from '../reproj/Image.js';
 import Source from './Source.js';
-import {abstract} from '../util.js';
-import {equals} from '../extent.js';
+import {DECIMALS} from './common.js';
+import {ceil} from '../math.js';
+import {
+  containsExtent,
+  equals,
+  getCenter,
+  getForViewAndSize,
+  getHeight,
+  getWidth,
+} from '../extent.js';
 import {equivalent} from '../proj.js';
+import {fromResolutionLike} from '../resolution.js';
 import {linearFindNearest} from '../array.js';
 
 /**
@@ -76,6 +87,10 @@ export class ImageSourceEvent extends Event {
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
  * @property {boolean} [interpolate=true] Use interpolated values when resampling.  By default,
  * linear interpolation is used when resampling.  Set to false to use the nearest neighbor instead.
+ * @property {import("../Image.js").Loader} [loader] Loader. Can either be a custom loader, or one of the
+ * loaders created with a `createLoader()` function ({@link module:ol/source/wms.createLoader wms},
+ * {@link module:ol/source/arcgisRest.createLoader arcgisRest}, {@link module:ol/source/mapguide.createLoader mapguide},
+ * {@link module:ol/source/static.createLoader static}).
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
  * @property {Array<number>} [resolutions] Resolutions.
  * @property {import("./Source.js").State} [state] State.
@@ -83,10 +98,7 @@ export class ImageSourceEvent extends Event {
 
 /**
  * @classdesc
- * Abstract base class; normally only used for creating subclasses and not
- * instantiated in apps.
  * Base class for sources providing a single image.
- * @abstract
  * @fires module:ol/source/Image.ImageSourceEvent
  * @api
  */
@@ -118,6 +130,12 @@ class ImageSource extends Source {
      */
     this.un;
 
+    /**
+     * @protected
+     * @type {import("../Image.js").Loader}
+     */
+    this.loader = options.loader || null;
+
     /**
      * @private
      * @type {Array<number>|null}
@@ -136,6 +154,24 @@ class ImageSource extends Source {
      * @type {number}
      */
     this.reprojectedRevision_ = 0;
+
+    /**
+     * @protected
+     * @type {import("../Image.js").default}
+     */
+    this.image = null;
+
+    /**
+     * @private
+     * @type {import("../extent.js").Extent}
+     */
+    this.wantedExtent_;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.wantedResolution_;
   }
 
   /**
@@ -171,7 +207,7 @@ class ImageSource extends Source {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {import("../proj/Projection.js").default} projection Projection.
-   * @return {import("../ImageBase.js").default} Single image.
+   * @return {import("../Image.js").default} Single image.
    */
   getImage(extent, resolution, pixelRatio, projection) {
     const sourceProjection = this.getProjection();
@@ -183,6 +219,7 @@ class ImageSource extends Source {
       if (sourceProjection) {
         projection = sourceProjection;
       }
+
       return this.getImageInternal(extent, resolution, pixelRatio, projection);
     }
     if (this.reprojectedImage_) {
@@ -219,11 +256,40 @@ class ImageSource extends Source {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {import("../proj/Projection.js").default} projection Projection.
-   * @return {import("../ImageBase.js").default} Single image.
+   * @return {import("../Image.js").default} Single image.
    * @protected
    */
   getImageInternal(extent, resolution, pixelRatio, projection) {
-    return abstract();
+    if (this.loader) {
+      const requestExtent = getRequestExtent(extent, resolution, pixelRatio, 1);
+      const requestResolution = this.findNearestResolution(resolution);
+      if (this.image) {
+        if (
+          ((this.wantedExtent_ &&
+            containsExtent(this.wantedExtent_, requestExtent)) ||
+            containsExtent(this.image.getExtent(), requestExtent)) &&
+          ((this.wantedResolution_ &&
+            fromResolutionLike(this.wantedResolution_) === requestResolution) ||
+            fromResolutionLike(this.image.getResolution()) ===
+              requestResolution)
+        ) {
+          return this.image;
+        }
+      }
+      this.wantedExtent_ = requestExtent;
+      this.wantedResolution_ = requestResolution;
+      this.image = new ImageWrapper(
+        requestExtent,
+        requestResolution,
+        pixelRatio,
+        this.loader
+      );
+      this.image.addEventListener(
+        EventType.CHANGE,
+        this.handleImageChange.bind(this)
+      );
+    }
+    return this.image;
   }
 
   /**
@@ -266,4 +332,27 @@ export function defaultImageLoadFunction(image, src) {
   /** @type {HTMLImageElement|HTMLVideoElement} */ (image.getImage()).src = src;
 }
 
+/**
+ * Adjusts the extent so it aligns with pixel boundaries.
+ * @param {import("../extent.js").Extent} extent Extent.
+ * @param {number} resolution Reolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {number} ratio Ratio between request size and view size.
+ * @return {import("../extent.js").Extent} Request extent.
+ */
+export function getRequestExtent(extent, resolution, pixelRatio, ratio) {
+  const imageResolution = resolution / pixelRatio;
+  const center = getCenter(extent);
+  const viewWidth = ceil(getWidth(extent) / imageResolution, DECIMALS);
+  const viewHeight = ceil(getHeight(extent) / imageResolution, DECIMALS);
+  const marginWidth = ceil(((ratio - 1) * viewWidth) / 2, DECIMALS);
+  const requestWidth = viewWidth + 2 * marginWidth;
+  const marginHeight = ceil(((ratio - 1) * viewHeight) / 2, DECIMALS);
+  const requestHeight = viewHeight + 2 * marginHeight;
+  return getForViewAndSize(center, imageResolution, 0, [
+    requestWidth,
+    requestHeight,
+  ]);
+}
+
 export default ImageSource;

package/source/ImageArcGISRest.d.ts

@@ -103,11 +103,6 @@ declare class ImageArcGISRest extends ImageSource {
      * @param {Options} [options] Image ArcGIS Rest Options.
      */
     constructor(options?: Options | undefined);
-    /**
-     * @private
-     * @type {CanvasRenderingContext2D}
-     */
-    private context_;
     /**
      * @private
      * @type {?string}
@@ -160,30 +155,12 @@ declare class ImageArcGISRest extends ImageSource {
      * @api
      */
     getParams(): any;
-    /**
-     * @param {import("../extent.js").Extent} extent Extent.
-     * @param {number} resolution Resolution.
-     * @param {number} pixelRatio Pixel ratio.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @return {import("../Image.js").default} Single image.
-     */
-    getImageInternal(extent: import("../extent.js").Extent, resolution: number, pixelRatio: number, projection: import("../proj/Projection.js").default): import("../Image.js").default;
     /**
      * Return the image load function of the source.
      * @return {import("../Image.js").LoadFunction} The image load function.
      * @api
      */
     getImageLoadFunction(): import("../Image.js").LoadFunction;
-    /**
-     * @param {import("../extent.js").Extent} extent Extent.
-     * @param {import("../size.js").Size} size Size.
-     * @param {number} pixelRatio Pixel ratio.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @param {Object} params Params.
-     * @return {string} Request URL.
-     * @private
-     */
-    private getRequestUrl_;
     /**
      * Return the URL used for this ArcGIS source.
      * @return {string|undefined} URL.

package/source/ImageArcGISRest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageArcGISRest.d.ts","sourceRoot":"","sources":["ImageArcGISRest.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8Bc,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;AAlBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;;;;;;;;;GAWG;AACH;IACE;;OAEG;IACH,2CAyEC;IA/DC;;;OAGG;IACH,iBAA2C;IAE3C;;;OAGG;IACH,qBACgE;IAEhE;;;OAGG;IACH,eAAgE;IAEhE;;;OAGG;IACH,aAAuB;IAEvB;;;OAGG;IACH,2BAG8B;IAE9B;;;OAGG;IACH,gBAAmC;IAEnC;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,mBAAwB;IAExB;;;OAGG;IACH,0BAA0B;IAE1B;;;OAGG;IACH,eAA+D;IAGjE;;;;;OAKG;IACH,iBAEC;IAED;;;;;;OAMG;IACH,yBANW,OAAO,cAAc,EAAE,MAAM,cAC7B,MAAM,cACN,MAAM,cACN,OAAO,uBAAuB,EAAE,OAAO,GACtC,OAAO,aAAa,EAAE,OAAO,CAiFxC;IAED;;;;OAIG;IACH,wBAHY,OAAO,aAAa,EAAE,YAAY,CAK7C;IAED;;;;;;;;OAQG;IACH,uBAwBC;IAED;;;;OAIG;IACH,UAHY,MAAM,GAAC,SAAS,CAK3B;IAED;;;;OAIG;IACH,wCAHW,OAAO,aAAa,EAAE,YAAY,QAO5C;IAED;;;;OAIG;IACH,YAHW,MAAM,GAAC,SAAS,QAS1B;IAED;;;;OAIG;IACH,gCAIC;CACF;wBAxTmD,YAAY"}
+{"version":3,"file":"ImageArcGISRest.d.ts","sourceRoot":"","sources":["ImageArcGISRest.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0Bc,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;AAlBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;;;;;;;;;GAWG;AACH;IACE;;OAEG;IACH,2CAmEC;IAzDC;;;OAGG;IACH,qBACgE;IAEhE;;;OAGG;IACH,eAAgE;IAEhE;;;OAGG;IACH,aAAuB;IAEvB;;;OAGG;IACH,2BAG8B;IAE9B;;;OAGG;IACH,gBAAmC;IAEnC;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,mBAAwB;IAExB;;;OAGG;IACH,0BAA0B;IAE1B;;;OAGG;IACH,eAA+D;IAGjE;;;;;OAKG;IACH,iBAEC;IAiCD;;;;OAIG;IACH,wBAHY,OAAO,aAAa,EAAE,YAAY,CAK7C;IAED;;;;OAIG;IACH,UAHY,MAAM,GAAC,SAAS,CAK3B;IAED;;;;OAIG;IACH,wCAHW,OAAO,aAAa,EAAE,YAAY,QAO5C;IAED;;;;OAIG;IACH,YAHW,MAAM,GAAC,SAAS,QAS1B;IAED;;;;OAIG;IACH,gCAIC;CACF;wBAnNmD,YAAY"}

package/source/ImageArcGISRest.js

@@ -2,13 +2,9 @@
  * @module ol/source/ImageArcGISRest
  */
 
-import EventType from '../events/EventType.js';
 import ImageSource, {defaultImageLoadFunction} from './Image.js';
-import ImageWrapper from '../Image.js';
-import {appendParams} from '../uri.js';
-import {assert} from '../asserts.js';
-import {containsExtent, getHeight, getWidth} from '../extent.js';
-import {createCanvasContext2D} from '../dom.js';
+import {createLoader} from './arcgisRest.js';
+import {decode} from '../Image.js';
 
 /**
  * @typedef {Object} Options
@@ -65,12 +61,6 @@ class ImageArcGISRest extends ImageSource {
       resolutions: options.resolutions,
     });
 
-    /**
-     * @private
-     * @type {CanvasRenderingContext2D}
-     */
-    this.context_ = createCanvasContext2D(1, 1);
-
     /**
      * @private
      * @type {?string}
@@ -151,81 +141,24 @@ class ImageArcGISRest extends ImageSource {
     if (this.url_ === undefined) {
       return null;
     }
-
-    resolution = this.findNearestResolution(resolution);
-    pixelRatio = this.hidpi_ ? pixelRatio : 1;
-
-    const image = this.image_;
-    if (
-      image &&
-      this.renderedRevision_ == this.getRevision() &&
-      image.getResolution() == resolution &&
-      image.getPixelRatio() == pixelRatio &&
-      containsExtent(image.getExtent(), extent)
-    ) {
-      return image;
+    if (!this.loader) {
+      // Lazily create loader to pick up the view projection and to allow `params` updates
+      this.loader = createLoader({
+        crossOrigin: this.crossOrigin_,
+        params: this.params_,
+        projection: projection,
+        hidpi: this.hidpi_,
+        url: this.url_,
+        ratio: this.ratio_,
+        load: (image, src) => {
+          this.image.setImage(image);
+          this.imageLoadFunction_(this.image, src);
+          return decode(image);
+        },
+      });
     }
 
-    const params = {
-      'F': 'image',
-      'FORMAT': 'PNG32',
-      'TRANSPARENT': true,
-    };
-    Object.assign(params, this.params_);
-
-    extent = extent.slice();
-    const centerX = (extent[0] + extent[2]) / 2;
-    const centerY = (extent[1] + extent[3]) / 2;
-    if (this.ratio_ != 1) {
-      const halfWidth = (this.ratio_ * getWidth(extent)) / 2;
-      const halfHeight = (this.ratio_ * getHeight(extent)) / 2;
-      extent[0] = centerX - halfWidth;
-      extent[1] = centerY - halfHeight;
-      extent[2] = centerX + halfWidth;
-      extent[3] = centerY + halfHeight;
-    }
-
-    const imageResolution = resolution / pixelRatio;
-
-    // Compute an integer width and height.
-    const width = Math.ceil(getWidth(extent) / imageResolution);
-    const height = Math.ceil(getHeight(extent) / imageResolution);
-
-    // Modify the extent to match the integer width and height.
-    extent[0] = centerX - (imageResolution * width) / 2;
-    extent[2] = centerX + (imageResolution * width) / 2;
-    extent[1] = centerY - (imageResolution * height) / 2;
-    extent[3] = centerY + (imageResolution * height) / 2;
-
-    this.imageSize_[0] = width;
-    this.imageSize_[1] = height;
-
-    const url = this.getRequestUrl_(
-      extent,
-      this.imageSize_,
-      pixelRatio,
-      projection,
-      params
-    );
-
-    this.image_ = new ImageWrapper(
-      extent,
-      resolution,
-      pixelRatio,
-      url,
-      this.crossOrigin_,
-      this.imageLoadFunction_,
-      this.context_
-    );
-
-    this.renderedRevision_ = this.getRevision();
-
-    this.image_.addEventListener(
-      EventType.CHANGE,
-      this.handleImageChange.bind(this)
-    );
-
-    return this.image_;
+    return super.getImageInternal(extent, resolution, pixelRatio, projection);
   }
 
   /**
@@ -237,41 +170,6 @@ class ImageArcGISRest extends ImageSource {
     return this.imageLoadFunction_;
   }
 
-  /**
-   * @param {import("../extent.js").Extent} extent Extent.
-   * @param {import("../size.js").Size} size Size.
-   * @param {number} pixelRatio Pixel ratio.
-   * @param {import("../proj/Projection.js").default} projection Projection.
-   * @param {Object} params Params.
-   * @return {string} Request URL.
-   * @private
-   */
-  getRequestUrl_(extent, size, pixelRatio, projection, params) {
-    // ArcGIS Server only wants the numeric portion of the projection ID.
-    // (if there is no numeric portion the entire projection code must
-    // form a valid ArcGIS SpatialReference definition).
-    const srid = projection
-      .getCode()
-      .split(/:(?=\d+$)/)
-      .pop();
-
-    params['SIZE'] = size[0] + ',' + size[1];
-    params['BBOX'] = extent.join(',');
-    params['BBOXSR'] = srid;
-    params['IMAGESR'] = srid;
-    params['DPI'] = Math.round(90 * pixelRatio);
-
-    const url = this.url_;
-
-    const modifiedUrl = url
-      .replace(/MapServer\/?$/, 'MapServer/export')
-      .replace(/ImageServer\/?$/, 'ImageServer/exportImage');
-    if (modifiedUrl == url) {
-      assert(false, 50); // `options.featureTypes` should be an Array
-    }
-    return appendParams(modifiedUrl, params);
-  }
-
   /**
    * Return the URL used for this ArcGIS source.
    * @return {string|undefined} URL.

package/source/ImageMapGuide.d.ts

@@ -88,11 +88,6 @@ declare class ImageMapGuide extends ImageSource {
      * @param {Options} options ImageMapGuide options.
      */
     constructor(options: Options);
-    /**
-     * @private
-     * @type {CanvasRenderingContext2D}
-     */
-    private context_;
     /**
      * @private
      * @type {?string}
@@ -155,14 +150,6 @@ declare class ImageMapGuide extends ImageSource {
      * @api
      */
     getParams(): any;
-    /**
-     * @param {import("../extent.js").Extent} extent Extent.
-     * @param {number} resolution Resolution.
-     * @param {number} pixelRatio Pixel ratio.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @return {import("../Image.js").default} Single image.
-     */
-    getImageInternal(extent: import("../extent.js").Extent, resolution: number, pixelRatio: number, projection: import("../proj/Projection.js").default): import("../Image.js").default;
     /**
      * Return the image load function of the source.
      * @return {import("../Image.js").LoadFunction} The image load function.
@@ -175,17 +162,6 @@ declare class ImageMapGuide extends ImageSource {
      * @api
      */
     updateParams(params: any): void;
-    /**
-     * @param {string} baseUrl The mapagent url.
-     * @param {Object<string, string|number>} params Request parameters.
-     * @param {import("../extent.js").Extent} extent Extent.
-     * @param {import("../size.js").Size} size Size.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @return {string} The mapagent map image request URL.
-     */
-    getUrl(baseUrl: string, params: {
-        [x: string]: string | number;
-    }, extent: import("../extent.js").Extent, size: import("../size.js").Size, projection: import("../proj/Projection.js").default): string;
     /**
      * Set the image load function of the MapGuide source.
      * @param {import("../Image.js").LoadFunction} imageLoadFunction Image load function.

package/source/ImageMapGuide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageMapGuide.d.ts","sourceRoot":"","sources":["ImageMapGuide.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4Bc,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;AAXjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;GAMG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAuFjB;IA9EC;;;OAGG;IACH,iBAA2C;IAE3C;;;OAGG;IACH,qBACgE;IAEhE;;;OAGG;IACH,oBAC4D;IAE5D;;;OAGG;IACH,gBAAmC;IAEnC;;;OAGG;IACH,aAAuB;IAEvB;;;OAGG;IACH,2BAG8B;IAE9B;;;OAGG;IACH,eAAgE;IAEhE;;;OAGG;IACH,uBACiE;IAEjE;;;OAGG;IACH,eAA6D;IAE7D;;;OAGG;IACH,oBAC+D;IAE/D;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,0BAA0B;IAG5B;;;;;OAKG;IACH,iBAEC;IAED;;;;;;OAMG;IACH,yBANW,OAAO,cAAc,EAAE,MAAM,cAC7B,MAAM,cACN,MAAM,cACN,OAAO,uBAAuB,EAAE,OAAO,GACtC,OAAO,aAAa,EAAE,OAAO,CAqDxC;IAED;;;;OAIG;IACH,wBAHY,OAAO,aAAa,EAAE,YAAY,CAK7C;IAED;;;;OAIG;IACH,gCAGC;IAED;;;;;;;OAOG;IACH,gBAPW,MAAM;YACC,MAAM,GAAE,MAAM,GAAC,MAAM;eAC5B,OAAO,cAAc,EAAE,MAAM,QAC7B,OAAO,YAAY,EAAE,IAAI,cACzB,OAAO,uBAAuB,EAAE,OAAO,GACtC,MAAM,CAsBjB;IAED;;;;OAIG;IACH,wCAHW,OAAO,aAAa,EAAE,YAAY,QAO5C;CACF;wBArQmD,YAAY"}
+{"version":3,"file":"ImageMapGuide.d.ts","sourceRoot":"","sources":["ImageMapGuide.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmBc,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;AAXjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;GAMG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAiFjB;IAxEC;;;OAGG;IACH,qBACgE;IAEhE;;;OAGG;IACH,oBAC4D;IAE5D;;;OAGG;IACH,gBAAmC;IAEnC;;;OAGG;IACH,aAAuB;IAEvB;;;OAGG;IACH,2BAG8B;IAE9B;;;OAGG;IACH,eAAgE;IAEhE;;;OAGG;IACH,uBACiE;IAEjE;;;OAGG;IACH,eAA6D;IAE7D;;;OAGG;IACH,oBAC+D;IAE/D;;;OAGG;IACH,eAAkB;IAElB;;;OAGG;IACH,0BAA0B;IAG5B;;;;;OAKG;IACH,iBAEC;IAkCD;;;;OAIG;IACH,wBAHY,OAAO,aAAa,EAAE,YAAY,CAK7C;IAED;;;;OAIG;IACH,gCAGC;IAED;;;;OAIG;IACH,wCAHW,OAAO,aAAa,EAAE,YAAY,QAO5C;CACF;wBA7LmD,YAAY"}

package/source/ImageMapGuide.js

@@ -2,18 +2,9 @@
  * @module ol/source/ImageMapGuide
  */
 
-import EventType from '../events/EventType.js';
 import ImageSource, {defaultImageLoadFunction} from './Image.js';
-import ImageWrapper from '../Image.js';
-import {appendParams} from '../uri.js';
-import {
-  containsExtent,
-  getCenter,
-  getHeight,
-  getWidth,
-  scaleFromCenter,
-} from '../extent.js';
-import {createCanvasContext2D} from '../dom.js';
+import {createLoader} from './mapguide.js';
+import {decode} from '../Image.js';
 
 /**
  * @typedef {Object} Options
@@ -55,12 +46,6 @@ class ImageMapGuide extends ImageSource {
       resolutions: options.resolutions,
     });
 
-    /**
-     * @private
-     * @type {CanvasRenderingContext2D}
-     */
-    this.context_ = createCanvasContext2D(1, 1);
-
     /**
      * @private
      * @type {?string}
@@ -153,56 +138,28 @@ class ImageMapGuide extends ImageSource {
    * @return {import("../Image.js").default} Single image.
    */
   getImageInternal(extent, resolution, pixelRatio, projection) {
-    resolution = this.findNearestResolution(resolution);
-    pixelRatio = this.hidpi_ ? pixelRatio : 1;
-
-    let image = this.image_;
-    if (
-      image &&
-      this.renderedRevision_ == this.getRevision() &&
-      image.getResolution() == resolution &&
-      image.getPixelRatio() == pixelRatio &&
-      containsExtent(image.getExtent(), extent)
-    ) {
-      return image;
+    if (this.url_ === undefined) {
+      return null;
     }
-
-    if (this.ratio_ != 1) {
-      extent = extent.slice();
-      scaleFromCenter(extent, this.ratio_);
-    }
-    const width = getWidth(extent) / resolution;
-    const height = getHeight(extent) / resolution;
-    const size = [width * pixelRatio, height * pixelRatio];
-
-    if (this.url_ !== undefined) {
-      const imageUrl = this.getUrl(
-        this.url_,
-        this.params_,
-        extent,
-        size,
-        projection
-      );
-      image = new ImageWrapper(
-        extent,
-        resolution,
-        pixelRatio,
-        imageUrl,
-        this.crossOrigin_,
-        this.imageLoadFunction_,
-        this.context_
-      );
-      image.addEventListener(
-        EventType.CHANGE,
-        this.handleImageChange.bind(this)
-      );
-    } else {
-      image = null;
+    if (!this.loader) {
+      // Lazily create loader to pick up the view projection and to allow `params` updates
+      this.loader = createLoader({
+        crossOrigin: this.crossOrigin_,
+        params: this.params_,
+        hidpi: this.hidpi_,
+        metersPerUnit: this.metersPerUnit_,
+        url: this.url_,
+        useOverlay: this.useOverlay_,
+        ratio: this.ratio_,
+        load: (image, src) => {
+          this.image.setImage(image);
+          this.imageLoadFunction_(this.image, src);
+          return decode(image);
+        },
+      });
     }
-    this.image_ = image;
-    this.renderedRevision_ = this.getRevision();
 
-    return image;
+    return super.getImageInternal(extent, resolution, pixelRatio, projection);
   }
 
   /**
@@ -224,36 +181,6 @@ class ImageMapGuide extends ImageSource {
     this.changed();
   }
 
-  /**
-   * @param {string} baseUrl The mapagent url.
-   * @param {Object<string, string|number>} params Request parameters.
-   * @param {import("../extent.js").Extent} extent Extent.
-   * @param {import("../size.js").Size} size Size.
-   * @param {import("../proj/Projection.js").default} projection Projection.
-   * @return {string} The mapagent map image request URL.
-   */
-  getUrl(baseUrl, params, extent, size, projection) {
-    const scale = getScale(extent, size, this.metersPerUnit_, this.displayDpi_);
-    const center = getCenter(extent);
-    const baseParams = {
-      'OPERATION': this.useOverlay_
-        ? 'GETDYNAMICMAPOVERLAYIMAGE'
-        : 'GETMAPIMAGE',
-      'VERSION': '2.0.0',
-      'LOCALE': 'en',
-      'CLIENTAGENT': 'ol/source/ImageMapGuide source',
-      'CLIP': '1',
-      'SETDISPLAYDPI': this.displayDpi_,
-      'SETDISPLAYWIDTH': Math.round(size[0]),
-      'SETDISPLAYHEIGHT': Math.round(size[1]),
-      'SETVIEWSCALE': scale,
-      'SETVIEWCENTERX': center[0],
-      'SETVIEWCENTERY': center[1],
-    };
-    Object.assign(baseParams, params);
-    return appendParams(baseUrl, baseParams);
-  }
-
   /**
    * Set the image load function of the MapGuide source.
    * @param {import("../Image.js").LoadFunction} imageLoadFunction Image load function.
@@ -266,23 +193,4 @@ class ImageMapGuide extends ImageSource {
   }
 }
 
-/**
- * @param {import("../extent.js").Extent} extent The map extents.
- * @param {import("../size.js").Size} size The viewport size.
- * @param {number} metersPerUnit The meters-per-unit value.
- * @param {number} dpi The display resolution.
- * @return {number} The computed map scale.
- */
-function getScale(extent, size, metersPerUnit, dpi) {
-  const mcsW = getWidth(extent);
-  const mcsH = getHeight(extent);
-  const devW = size[0];
-  const devH = size[1];
-  const mpp = 0.0254 / dpi;
-  if (devH * mcsW > devW * mcsH) {
-    return (mcsW * metersPerUnit) / (devW * mpp); // width limited
-  }
-  return (mcsH * metersPerUnit) / (devH * mpp); // height limited
-}
-
 export default ImageMapGuide;

package/source/ImageStatic.d.ts

@@ -14,7 +14,7 @@ export type Options = {
      * Extent of the image in map coordinates.
      * This is the [left, bottom, right, top] map coordinates of your image.
      */
-    imageExtent?: import("../extent.js").Extent | undefined;
+    imageExtent: import("../extent.js").Extent;
     /**
      * Optional function to load an image given a URL.
      */
@@ -28,11 +28,6 @@ export type Options = {
      * Projection. Default is the view projection.
      */
     projection?: import("../proj.js").ProjectionLike;
-    /**
-     * Size of the image in pixels. Usually the image size is auto-detected, so this
-     * only needs to be set if auto-detection fails for some reason.
-     */
-    imageSize?: import("../size.js").Size | undefined;
     /**
      * Image URL.
      */
@@ -44,14 +39,12 @@ export type Options = {
  * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images.  Note that
  * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer.
  * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
- * @property {import("../extent.js").Extent} [imageExtent] Extent of the image in map coordinates.
+ * @property {import("../extent.js").Extent} imageExtent Extent of the image in map coordinates.
  * This is the [left, bottom, right, top] map coordinates of your image.
  * @property {import("../Image.js").LoadFunction} [imageLoadFunction] Optional function to load an image given a URL.
  * @property {boolean} [interpolate=true] Use interpolated values when resampling.  By default,
  * linear interpolation is used when resampling.  Set to false to use the nearest neighbor instead.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
- * @property {import("../size.js").Size} [imageSize] Size of the image in pixels. Usually the image size is auto-detected, so this
- * only needs to be set if auto-detection fails for some reason.
  * @property {string} url Image URL.
  */
 /**
@@ -74,30 +67,12 @@ declare class Static extends ImageSource {
      * @type {import("../extent.js").Extent}
      */
     private imageExtent_;
-    /**
-     * @private
-     * @type {import("../Image.js").default}
-     */
-    private image_;
-    /**
-     * @private
-     * @type {import("../size.js").Size|null}
-     */
-    private imageSize_;
     /**
      * Returns the image extent
      * @return {import("../extent.js").Extent} image extent.
      * @api
      */
     getImageExtent(): import("../extent.js").Extent;
-    /**
-     * @param {import("../extent.js").Extent} extent Extent.
-     * @param {number} resolution Resolution.
-     * @param {number} pixelRatio Pixel ratio.
-     * @param {import("../proj/Projection.js").default} projection Projection.
-     * @return {import("../Image.js").default} Single image.
-     */
-    getImageInternal(extent: import("../extent.js").Extent, resolution: number, pixelRatio: number, projection: import("../proj/Projection.js").default): import("../Image.js").default;
     /**
      * Return the URL used for this image source.
      * @return {string} URL.