planning

node_modules/ol/src/reproj/Image.js

@@ -0,0 +1,244 @@
+/**
+ * @module ol/reproj/Image
+ */
+import {ERROR_THRESHOLD} from './common.js';
+
+import EventType from '../events/EventType.js';
+import ImageBase from '../ImageBase.js';
+import ImageState from '../ImageState.js';
+import Triangulation from './Triangulation.js';
+import {
+  calculateSourceResolution,
+  render as renderReprojected,
+} from '../reproj.js';
+import {getCenter, getHeight, getIntersection, getWidth} from '../extent.js';
+import {listen, unlistenByKey} from '../events.js';
+
+/**
+ * @typedef {function(import("../extent.js").Extent, number, number) : import("../ImageBase.js").default} FunctionType
+ */
+
+/**
+ * @classdesc
+ * Class encapsulating single reprojected image.
+ * See {@link module:ol/source/Image~ImageSource}.
+ */
+class ReprojImage extends ImageBase {
+  /**
+   * @param {import("../proj/Projection.js").default} sourceProj Source projection (of the data).
+   * @param {import("../proj/Projection.js").default} targetProj Target projection.
+   * @param {import("../extent.js").Extent} targetExtent Target extent.
+   * @param {number} targetResolution Target resolution.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {FunctionType} getImageFunction
+   *     Function returning source images (extent, resolution, pixelRatio).
+   * @param {boolean} interpolate Use linear interpolation when resampling.
+   */
+  constructor(
+    sourceProj,
+    targetProj,
+    targetExtent,
+    targetResolution,
+    pixelRatio,
+    getImageFunction,
+    interpolate
+  ) {
+    const maxSourceExtent = sourceProj.getExtent();
+    const maxTargetExtent = targetProj.getExtent();
+
+    const limitedTargetExtent = maxTargetExtent
+      ? getIntersection(targetExtent, maxTargetExtent)
+      : targetExtent;
+
+    const targetCenter = getCenter(limitedTargetExtent);
+    const sourceResolution = calculateSourceResolution(
+      sourceProj,
+      targetProj,
+      targetCenter,
+      targetResolution
+    );
+
+    const errorThresholdInPixels = ERROR_THRESHOLD;
+
+    const triangulation = new Triangulation(
+      sourceProj,
+      targetProj,
+      limitedTargetExtent,
+      maxSourceExtent,
+      sourceResolution * errorThresholdInPixels,
+      targetResolution
+    );
+
+    const sourceExtent = triangulation.calculateSourceExtent();
+    const sourceImage = getImageFunction(
+      sourceExtent,
+      sourceResolution,
+      pixelRatio
+    );
+    const state = sourceImage ? ImageState.IDLE : ImageState.EMPTY;
+    const sourcePixelRatio = sourceImage ? sourceImage.getPixelRatio() : 1;
+
+    super(targetExtent, targetResolution, sourcePixelRatio, state);
+
+    /**
+     * @private
+     * @type {import("../proj/Projection.js").default}
+     */
+    this.targetProj_ = targetProj;
+
+    /**
+     * @private
+     * @type {import("../extent.js").Extent}
+     */
+    this.maxSourceExtent_ = maxSourceExtent;
+
+    /**
+     * @private
+     * @type {!import("./Triangulation.js").default}
+     */
+    this.triangulation_ = triangulation;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.targetResolution_ = targetResolution;
+
+    /**
+     * @private
+     * @type {import("../extent.js").Extent}
+     */
+    this.targetExtent_ = targetExtent;
+
+    /**
+     * @private
+     * @type {import("../ImageBase.js").default}
+     */
+    this.sourceImage_ = sourceImage;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.sourcePixelRatio_ = sourcePixelRatio;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.interpolate_ = interpolate;
+
+    /**
+     * @private
+     * @type {HTMLCanvasElement}
+     */
+    this.canvas_ = null;
+
+    /**
+     * @private
+     * @type {?import("../events.js").EventsKey}
+     */
+    this.sourceListenerKey_ = null;
+  }
+
+  /**
+   * Clean up.
+   */
+  disposeInternal() {
+    if (this.state == ImageState.LOADING) {
+      this.unlistenSource_();
+    }
+    super.disposeInternal();
+  }
+
+  /**
+   * @return {HTMLCanvasElement} Image.
+   */
+  getImage() {
+    return this.canvas_;
+  }
+
+  /**
+   * @return {import("../proj/Projection.js").default} Projection.
+   */
+  getProjection() {
+    return this.targetProj_;
+  }
+
+  /**
+   * @private
+   */
+  reproject_() {
+    const sourceState = this.sourceImage_.getState();
+    if (sourceState == ImageState.LOADED) {
+      const width = getWidth(this.targetExtent_) / this.targetResolution_;
+      const height = getHeight(this.targetExtent_) / this.targetResolution_;
+
+      this.canvas_ = renderReprojected(
+        width,
+        height,
+        this.sourcePixelRatio_,
+        this.sourceImage_.getResolution(),
+        this.maxSourceExtent_,
+        this.targetResolution_,
+        this.targetExtent_,
+        this.triangulation_,
+        [
+          {
+            extent: this.sourceImage_.getExtent(),
+            image: this.sourceImage_.getImage(),
+          },
+        ],
+        0,
+        undefined,
+        this.interpolate_
+      );
+    }
+    this.state = sourceState;
+    this.changed();
+  }
+
+  /**
+   * Load not yet loaded URI.
+   */
+  load() {
+    if (this.state == ImageState.IDLE) {
+      this.state = ImageState.LOADING;
+      this.changed();
+
+      const sourceState = this.sourceImage_.getState();
+      if (sourceState == ImageState.LOADED || sourceState == ImageState.ERROR) {
+        this.reproject_();
+      } else {
+        this.sourceListenerKey_ = listen(
+          this.sourceImage_,
+          EventType.CHANGE,
+          function (e) {
+            const sourceState = this.sourceImage_.getState();
+            if (
+              sourceState == ImageState.LOADED ||
+              sourceState == ImageState.ERROR
+            ) {
+              this.unlistenSource_();
+              this.reproject_();
+            }
+          },
+          this
+        );
+        this.sourceImage_.load();
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  unlistenSource_() {
+    unlistenByKey(
+      /** @type {!import("../events.js").EventsKey} */ (this.sourceListenerKey_)
+    );
+    this.sourceListenerKey_ = null;
+  }
+}
+
+export default ReprojImage;

node_modules/ol/src/reproj/Tile.js

@@ -0,0 +1,368 @@
+/**
+ * @module ol/reproj/Tile
+ */
+import {ERROR_THRESHOLD} from './common.js';
+
+import EventType from '../events/EventType.js';
+import Tile from '../Tile.js';
+import TileState from '../TileState.js';
+import Triangulation from './Triangulation.js';
+import {
+  calculateSourceExtentResolution,
+  canvasPool,
+  render as renderReprojected,
+} from '../reproj.js';
+import {clamp} from '../math.js';
+import {getArea, getIntersection} from '../extent.js';
+import {listen, unlistenByKey} from '../events.js';
+import {releaseCanvas} from '../dom.js';
+
+/**
+ * @typedef {function(number, number, number, number) : import("../Tile.js").default} FunctionType
+ */
+
+/**
+ * @classdesc
+ * Class encapsulating single reprojected tile.
+ * See {@link module:ol/source/TileImage~TileImage}.
+ *
+ */
+class ReprojTile extends Tile {
+  /**
+   * @param {import("../proj/Projection.js").default} sourceProj Source projection.
+   * @param {import("../tilegrid/TileGrid.js").default} sourceTileGrid Source tile grid.
+   * @param {import("../proj/Projection.js").default} targetProj Target projection.
+   * @param {import("../tilegrid/TileGrid.js").default} targetTileGrid Target tile grid.
+   * @param {import("../tilecoord.js").TileCoord} tileCoord Coordinate of the tile.
+   * @param {import("../tilecoord.js").TileCoord} wrappedTileCoord Coordinate of the tile wrapped in X.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {number} gutter Gutter of the source tiles.
+   * @param {FunctionType} getTileFunction
+   *     Function returning source tiles (z, x, y, pixelRatio).
+   * @param {number} [opt_errorThreshold] Acceptable reprojection error (in px).
+   * @param {boolean} [opt_renderEdges] Render reprojection edges.
+   * @param {boolean} [opt_interpolate] Use linear interpolation when resampling.
+   */
+  constructor(
+    sourceProj,
+    sourceTileGrid,
+    targetProj,
+    targetTileGrid,
+    tileCoord,
+    wrappedTileCoord,
+    pixelRatio,
+    gutter,
+    getTileFunction,
+    opt_errorThreshold,
+    opt_renderEdges,
+    opt_interpolate
+  ) {
+    super(tileCoord, TileState.IDLE, {interpolate: !!opt_interpolate});
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.renderEdges_ = opt_renderEdges !== undefined ? opt_renderEdges : false;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.pixelRatio_ = pixelRatio;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.gutter_ = gutter;
+
+    /**
+     * @private
+     * @type {HTMLCanvasElement}
+     */
+    this.canvas_ = null;
+
+    /**
+     * @private
+     * @type {import("../tilegrid/TileGrid.js").default}
+     */
+    this.sourceTileGrid_ = sourceTileGrid;
+
+    /**
+     * @private
+     * @type {import("../tilegrid/TileGrid.js").default}
+     */
+    this.targetTileGrid_ = targetTileGrid;
+
+    /**
+     * @private
+     * @type {import("../tilecoord.js").TileCoord}
+     */
+    this.wrappedTileCoord_ = wrappedTileCoord ? wrappedTileCoord : tileCoord;
+
+    /**
+     * @private
+     * @type {!Array<import("../Tile.js").default>}
+     */
+    this.sourceTiles_ = [];
+
+    /**
+     * @private
+     * @type {?Array<import("../events.js").EventsKey>}
+     */
+    this.sourcesListenerKeys_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.sourceZ_ = 0;
+
+    const targetExtent = targetTileGrid.getTileCoordExtent(
+      this.wrappedTileCoord_
+    );
+    const maxTargetExtent = this.targetTileGrid_.getExtent();
+    let maxSourceExtent = this.sourceTileGrid_.getExtent();
+
+    const limitedTargetExtent = maxTargetExtent
+      ? getIntersection(targetExtent, maxTargetExtent)
+      : targetExtent;
+
+    if (getArea(limitedTargetExtent) === 0) {
+      // Tile is completely outside range -> EMPTY
+      // TODO: is it actually correct that the source even creates the tile ?
+      this.state = TileState.EMPTY;
+      return;
+    }
+
+    const sourceProjExtent = sourceProj.getExtent();
+    if (sourceProjExtent) {
+      if (!maxSourceExtent) {
+        maxSourceExtent = sourceProjExtent;
+      } else {
+        maxSourceExtent = getIntersection(maxSourceExtent, sourceProjExtent);
+      }
+    }
+
+    const targetResolution = targetTileGrid.getResolution(
+      this.wrappedTileCoord_[0]
+    );
+
+    const sourceResolution = calculateSourceExtentResolution(
+      sourceProj,
+      targetProj,
+      limitedTargetExtent,
+      targetResolution
+    );
+
+    if (!isFinite(sourceResolution) || sourceResolution <= 0) {
+      // invalid sourceResolution -> EMPTY
+      // probably edges of the projections when no extent is defined
+      this.state = TileState.EMPTY;
+      return;
+    }
+
+    const errorThresholdInPixels =
+      opt_errorThreshold !== undefined ? opt_errorThreshold : ERROR_THRESHOLD;
+
+    /**
+     * @private
+     * @type {!import("./Triangulation.js").default}
+     */
+    this.triangulation_ = new Triangulation(
+      sourceProj,
+      targetProj,
+      limitedTargetExtent,
+      maxSourceExtent,
+      sourceResolution * errorThresholdInPixels,
+      targetResolution
+    );
+
+    if (this.triangulation_.getTriangles().length === 0) {
+      // no valid triangles -> EMPTY
+      this.state = TileState.EMPTY;
+      return;
+    }
+
+    this.sourceZ_ = sourceTileGrid.getZForResolution(sourceResolution);
+    let sourceExtent = this.triangulation_.calculateSourceExtent();
+
+    if (maxSourceExtent) {
+      if (sourceProj.canWrapX()) {
+        sourceExtent[1] = clamp(
+          sourceExtent[1],
+          maxSourceExtent[1],
+          maxSourceExtent[3]
+        );
+        sourceExtent[3] = clamp(
+          sourceExtent[3],
+          maxSourceExtent[1],
+          maxSourceExtent[3]
+        );
+      } else {
+        sourceExtent = getIntersection(sourceExtent, maxSourceExtent);
+      }
+    }
+
+    if (!getArea(sourceExtent)) {
+      this.state = TileState.EMPTY;
+    } else {
+      const sourceRange = sourceTileGrid.getTileRangeForExtentAndZ(
+        sourceExtent,
+        this.sourceZ_
+      );
+
+      for (let srcX = sourceRange.minX; srcX <= sourceRange.maxX; srcX++) {
+        for (let srcY = sourceRange.minY; srcY <= sourceRange.maxY; srcY++) {
+          const tile = getTileFunction(this.sourceZ_, srcX, srcY, pixelRatio);
+          if (tile) {
+            this.sourceTiles_.push(tile);
+          }
+        }
+      }
+
+      if (this.sourceTiles_.length === 0) {
+        this.state = TileState.EMPTY;
+      }
+    }
+  }
+
+  /**
+   * Get the HTML Canvas element for this tile.
+   * @return {HTMLCanvasElement} Canvas.
+   */
+  getImage() {
+    return this.canvas_;
+  }
+
+  /**
+   * @private
+   */
+  reproject_() {
+    const sources = [];
+    this.sourceTiles_.forEach(
+      function (tile, i, arr) {
+        if (tile && tile.getState() == TileState.LOADED) {
+          sources.push({
+            extent: this.sourceTileGrid_.getTileCoordExtent(tile.tileCoord),
+            image: tile.getImage(),
+          });
+        }
+      }.bind(this)
+    );
+    this.sourceTiles_.length = 0;
+
+    if (sources.length === 0) {
+      this.state = TileState.ERROR;
+    } else {
+      const z = this.wrappedTileCoord_[0];
+      const size = this.targetTileGrid_.getTileSize(z);
+      const width = typeof size === 'number' ? size : size[0];
+      const height = typeof size === 'number' ? size : size[1];
+      const targetResolution = this.targetTileGrid_.getResolution(z);
+      const sourceResolution = this.sourceTileGrid_.getResolution(
+        this.sourceZ_
+      );
+
+      const targetExtent = this.targetTileGrid_.getTileCoordExtent(
+        this.wrappedTileCoord_
+      );
+
+      this.canvas_ = renderReprojected(
+        width,
+        height,
+        this.pixelRatio_,
+        sourceResolution,
+        this.sourceTileGrid_.getExtent(),
+        targetResolution,
+        targetExtent,
+        this.triangulation_,
+        sources,
+        this.gutter_,
+        this.renderEdges_,
+        this.interpolate
+      );
+
+      this.state = TileState.LOADED;
+    }
+    this.changed();
+  }
+
+  /**
+   * Load not yet loaded URI.
+   */
+  load() {
+    if (this.state == TileState.IDLE) {
+      this.state = TileState.LOADING;
+      this.changed();
+
+      let leftToLoad = 0;
+
+      this.sourcesListenerKeys_ = [];
+      this.sourceTiles_.forEach(
+        function (tile, i, arr) {
+          const state = tile.getState();
+          if (state == TileState.IDLE || state == TileState.LOADING) {
+            leftToLoad++;
+
+            const sourceListenKey = listen(
+              tile,
+              EventType.CHANGE,
+              function (e) {
+                const state = tile.getState();
+                if (
+                  state == TileState.LOADED ||
+                  state == TileState.ERROR ||
+                  state == TileState.EMPTY
+                ) {
+                  unlistenByKey(sourceListenKey);
+                  leftToLoad--;
+                  if (leftToLoad === 0) {
+                    this.unlistenSources_();
+                    this.reproject_();
+                  }
+                }
+              },
+              this
+            );
+            this.sourcesListenerKeys_.push(sourceListenKey);
+          }
+        }.bind(this)
+      );
+
+      if (leftToLoad === 0) {
+        setTimeout(this.reproject_.bind(this), 0);
+      } else {
+        this.sourceTiles_.forEach(function (tile, i, arr) {
+          const state = tile.getState();
+          if (state == TileState.IDLE) {
+            tile.load();
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  unlistenSources_() {
+    this.sourcesListenerKeys_.forEach(unlistenByKey);
+    this.sourcesListenerKeys_ = null;
+  }
+
+  /**
+   * Remove from the cache due to expiry
+   */
+  release() {
+    if (this.canvas_) {
+      releaseCanvas(this.canvas_.getContext('2d'));
+      canvasPool.push(this.canvas_);
+      this.canvas_ = null;
+    }
+    super.release();
+  }
+}
+
+export default ReprojTile;

node_modules/ol/src/reproj/Triangulation.js

@@ -0,0 +1,507 @@
+/**
+ * @module ol/reproj/Triangulation
+ */
+import {
+  boundingExtent,
+  createEmpty,
+  extendCoordinate,
+  getArea,
+  getBottomLeft,
+  getBottomRight,
+  getTopLeft,
+  getTopRight,
+  getWidth,
+  intersects,
+} from '../extent.js';
+import {getTransform} from '../proj.js';
+import {log2, modulo} from '../math.js';
+
+/**
+ * Single triangle; consists of 3 source points and 3 target points.
+ * @typedef {Object} Triangle
+ * @property {Array<import("../coordinate.js").Coordinate>} source Source.
+ * @property {Array<import("../coordinate.js").Coordinate>} target Target.
+ */
+
+/**
+ * Maximum number of subdivision steps during raster reprojection triangulation.
+ * Prevents high memory usage and large number of proj4 calls (for certain
+ * transformations and areas). At most `2*(2^this)` triangles are created for
+ * each triangulated extent (tile/image).
+ * @type {number}
+ */
+const MAX_SUBDIVISION = 10;
+
+/**
+ * Maximum allowed size of triangle relative to world width. When transforming
+ * corners of world extent between certain projections, the resulting
+ * triangulation seems to have zero error and no subdivision is performed. If
+ * the triangle width is more than this (relative to world width; 0-1),
+ * subdivison is forced (up to `MAX_SUBDIVISION`). Default is `0.25`.
+ * @type {number}
+ */
+const MAX_TRIANGLE_WIDTH = 0.25;
+
+/**
+ * @classdesc
+ * Class containing triangulation of the given target extent.
+ * Used for determining source data and the reprojection itself.
+ */
+class Triangulation {
+  /**
+   * @param {import("../proj/Projection.js").default} sourceProj Source projection.
+   * @param {import("../proj/Projection.js").default} targetProj Target projection.
+   * @param {import("../extent.js").Extent} targetExtent Target extent to triangulate.
+   * @param {import("../extent.js").Extent} maxSourceExtent Maximal source extent that can be used.
+   * @param {number} errorThreshold Acceptable error (in source units).
+   * @param {?number} opt_destinationResolution The (optional) resolution of the destination.
+   */
+  constructor(
+    sourceProj,
+    targetProj,
+    targetExtent,
+    maxSourceExtent,
+    errorThreshold,
+    opt_destinationResolution
+  ) {
+    /**
+     * @type {import("../proj/Projection.js").default}
+     * @private
+     */
+    this.sourceProj_ = sourceProj;
+
+    /**
+     * @type {import("../proj/Projection.js").default}
+     * @private
+     */
+    this.targetProj_ = targetProj;
+
+    /** @type {!Object<string, import("../coordinate.js").Coordinate>} */
+    let transformInvCache = {};
+    const transformInv = getTransform(this.targetProj_, this.sourceProj_);
+
+    /**
+     * @param {import("../coordinate.js").Coordinate} c A coordinate.
+     * @return {import("../coordinate.js").Coordinate} Transformed coordinate.
+     * @private
+     */
+    this.transformInv_ = function (c) {
+      const key = c[0] + '/' + c[1];
+      if (!transformInvCache[key]) {
+        transformInvCache[key] = transformInv(c);
+      }
+      return transformInvCache[key];
+    };
+
+    /**
+     * @type {import("../extent.js").Extent}
+     * @private
+     */
+    this.maxSourceExtent_ = maxSourceExtent;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.errorThresholdSquared_ = errorThreshold * errorThreshold;
+
+    /**
+     * @type {Array<Triangle>}
+     * @private
+     */
+    this.triangles_ = [];
+
+    /**
+     * Indicates that the triangulation crosses edge of the source projection.
+     * @type {boolean}
+     * @private
+     */
+    this.wrapsXInSource_ = false;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.canWrapXInSource_ =
+      this.sourceProj_.canWrapX() &&
+      !!maxSourceExtent &&
+      !!this.sourceProj_.getExtent() &&
+      getWidth(maxSourceExtent) == getWidth(this.sourceProj_.getExtent());
+
+    /**
+     * @type {?number}
+     * @private
+     */
+    this.sourceWorldWidth_ = this.sourceProj_.getExtent()
+      ? getWidth(this.sourceProj_.getExtent())
+      : null;
+
+    /**
+     * @type {?number}
+     * @private
+     */
+    this.targetWorldWidth_ = this.targetProj_.getExtent()
+      ? getWidth(this.targetProj_.getExtent())
+      : null;
+
+    const destinationTopLeft = getTopLeft(targetExtent);
+    const destinationTopRight = getTopRight(targetExtent);
+    const destinationBottomRight = getBottomRight(targetExtent);
+    const destinationBottomLeft = getBottomLeft(targetExtent);
+    const sourceTopLeft = this.transformInv_(destinationTopLeft);
+    const sourceTopRight = this.transformInv_(destinationTopRight);
+    const sourceBottomRight = this.transformInv_(destinationBottomRight);
+    const sourceBottomLeft = this.transformInv_(destinationBottomLeft);
+
+    /*
+     * The maxSubdivision controls how many splittings of the target area can
+     * be done. The idea here is to do a linear mapping of the target areas
+     * but the actual overal reprojection (can be) extremely non-linear. The
+     * default value of MAX_SUBDIVISION was chosen based on mapping a 256x256
+     * tile size. However this function is also called to remap canvas rendered
+     * layers which can be much larger. This calculation increases the maxSubdivision
+     * value by the right factor so that each 256x256 pixel area has
+     * MAX_SUBDIVISION divisions.
+     */
+    const maxSubdivision =
+      MAX_SUBDIVISION +
+      (opt_destinationResolution
+        ? Math.max(
+            0,
+            Math.ceil(
+              log2(
+                getArea(targetExtent) /
+                  (opt_destinationResolution *
+                    opt_destinationResolution *
+                    256 *
+                    256)
+              )
+            )
+          )
+        : 0);
+
+    this.addQuad_(
+      destinationTopLeft,
+      destinationTopRight,
+      destinationBottomRight,
+      destinationBottomLeft,
+      sourceTopLeft,
+      sourceTopRight,
+      sourceBottomRight,
+      sourceBottomLeft,
+      maxSubdivision
+    );
+
+    if (this.wrapsXInSource_) {
+      let leftBound = Infinity;
+      this.triangles_.forEach(function (triangle, i, arr) {
+        leftBound = Math.min(
+          leftBound,
+          triangle.source[0][0],
+          triangle.source[1][0],
+          triangle.source[2][0]
+        );
+      });
+
+      // Shift triangles to be as close to `leftBound` as possible
+      // (if the distance is more than `worldWidth / 2` it can be closer.
+      this.triangles_.forEach(
+        function (triangle) {
+          if (
+            Math.max(
+              triangle.source[0][0],
+              triangle.source[1][0],
+              triangle.source[2][0]
+            ) -
+              leftBound >
+            this.sourceWorldWidth_ / 2
+          ) {
+            const newTriangle = [
+              [triangle.source[0][0], triangle.source[0][1]],
+              [triangle.source[1][0], triangle.source[1][1]],
+              [triangle.source[2][0], triangle.source[2][1]],
+            ];
+            if (newTriangle[0][0] - leftBound > this.sourceWorldWidth_ / 2) {
+              newTriangle[0][0] -= this.sourceWorldWidth_;
+            }
+            if (newTriangle[1][0] - leftBound > this.sourceWorldWidth_ / 2) {
+              newTriangle[1][0] -= this.sourceWorldWidth_;
+            }
+            if (newTriangle[2][0] - leftBound > this.sourceWorldWidth_ / 2) {
+              newTriangle[2][0] -= this.sourceWorldWidth_;
+            }
+
+            // Rarely (if the extent contains both the dateline and prime meridian)
+            // the shift can in turn break some triangles.
+            // Detect this here and don't shift in such cases.
+            const minX = Math.min(
+              newTriangle[0][0],
+              newTriangle[1][0],
+              newTriangle[2][0]
+            );
+            const maxX = Math.max(
+              newTriangle[0][0],
+              newTriangle[1][0],
+              newTriangle[2][0]
+            );
+            if (maxX - minX < this.sourceWorldWidth_ / 2) {
+              triangle.source = newTriangle;
+            }
+          }
+        }.bind(this)
+      );
+    }
+
+    transformInvCache = {};
+  }
+
+  /**
+   * Adds triangle to the triangulation.
+   * @param {import("../coordinate.js").Coordinate} a The target a coordinate.
+   * @param {import("../coordinate.js").Coordinate} b The target b coordinate.
+   * @param {import("../coordinate.js").Coordinate} c The target c coordinate.
+   * @param {import("../coordinate.js").Coordinate} aSrc The source a coordinate.
+   * @param {import("../coordinate.js").Coordinate} bSrc The source b coordinate.
+   * @param {import("../coordinate.js").Coordinate} cSrc The source c coordinate.
+   * @private
+   */
+  addTriangle_(a, b, c, aSrc, bSrc, cSrc) {
+    this.triangles_.push({
+      source: [aSrc, bSrc, cSrc],
+      target: [a, b, c],
+    });
+  }
+
+  /**
+   * Adds quad (points in clock-wise order) to the triangulation
+   * (and reprojects the vertices) if valid.
+   * Performs quad subdivision if needed to increase precision.
+   *
+   * @param {import("../coordinate.js").Coordinate} a The target a coordinate.
+   * @param {import("../coordinate.js").Coordinate} b The target b coordinate.
+   * @param {import("../coordinate.js").Coordinate} c The target c coordinate.
+   * @param {import("../coordinate.js").Coordinate} d The target d coordinate.
+   * @param {import("../coordinate.js").Coordinate} aSrc The source a coordinate.
+   * @param {import("../coordinate.js").Coordinate} bSrc The source b coordinate.
+   * @param {import("../coordinate.js").Coordinate} cSrc The source c coordinate.
+   * @param {import("../coordinate.js").Coordinate} dSrc The source d coordinate.
+   * @param {number} maxSubdivision Maximal allowed subdivision of the quad.
+   * @private
+   */
+  addQuad_(a, b, c, d, aSrc, bSrc, cSrc, dSrc, maxSubdivision) {
+    const sourceQuadExtent = boundingExtent([aSrc, bSrc, cSrc, dSrc]);
+    const sourceCoverageX = this.sourceWorldWidth_
+      ? getWidth(sourceQuadExtent) / this.sourceWorldWidth_
+      : null;
+    const sourceWorldWidth = /** @type {number} */ (this.sourceWorldWidth_);
+
+    // when the quad is wrapped in the source projection
+    // it covers most of the projection extent, but not fully
+    const wrapsX =
+      this.sourceProj_.canWrapX() &&
+      sourceCoverageX > 0.5 &&
+      sourceCoverageX < 1;
+
+    let needsSubdivision = false;
+
+    if (maxSubdivision > 0) {
+      if (this.targetProj_.isGlobal() && this.targetWorldWidth_) {
+        const targetQuadExtent = boundingExtent([a, b, c, d]);
+        const targetCoverageX =
+          getWidth(targetQuadExtent) / this.targetWorldWidth_;
+        needsSubdivision =
+          targetCoverageX > MAX_TRIANGLE_WIDTH || needsSubdivision;
+      }
+      if (!wrapsX && this.sourceProj_.isGlobal() && sourceCoverageX) {
+        needsSubdivision =
+          sourceCoverageX > MAX_TRIANGLE_WIDTH || needsSubdivision;
+      }
+    }
+
+    if (!needsSubdivision && this.maxSourceExtent_) {
+      if (
+        isFinite(sourceQuadExtent[0]) &&
+        isFinite(sourceQuadExtent[1]) &&
+        isFinite(sourceQuadExtent[2]) &&
+        isFinite(sourceQuadExtent[3])
+      ) {
+        if (!intersects(sourceQuadExtent, this.maxSourceExtent_)) {
+          // whole quad outside source projection extent -> ignore
+          return;
+        }
+      }
+    }
+
+    let isNotFinite = 0;
+
+    if (!needsSubdivision) {
+      if (
+        !isFinite(aSrc[0]) ||
+        !isFinite(aSrc[1]) ||
+        !isFinite(bSrc[0]) ||
+        !isFinite(bSrc[1]) ||
+        !isFinite(cSrc[0]) ||
+        !isFinite(cSrc[1]) ||
+        !isFinite(dSrc[0]) ||
+        !isFinite(dSrc[1])
+      ) {
+        if (maxSubdivision > 0) {
+          needsSubdivision = true;
+        } else {
+          // It might be the case that only 1 of the points is infinite. In this case
+          // we can draw a single triangle with the other three points
+          isNotFinite =
+            (!isFinite(aSrc[0]) || !isFinite(aSrc[1]) ? 8 : 0) +
+            (!isFinite(bSrc[0]) || !isFinite(bSrc[1]) ? 4 : 0) +
+            (!isFinite(cSrc[0]) || !isFinite(cSrc[1]) ? 2 : 0) +
+            (!isFinite(dSrc[0]) || !isFinite(dSrc[1]) ? 1 : 0);
+          if (
+            isNotFinite != 1 &&
+            isNotFinite != 2 &&
+            isNotFinite != 4 &&
+            isNotFinite != 8
+          ) {
+            return;
+          }
+        }
+      }
+    }
+
+    if (maxSubdivision > 0) {
+      if (!needsSubdivision) {
+        const center = [(a[0] + c[0]) / 2, (a[1] + c[1]) / 2];
+        const centerSrc = this.transformInv_(center);
+
+        let dx;
+        if (wrapsX) {
+          const centerSrcEstimX =
+            (modulo(aSrc[0], sourceWorldWidth) +
+              modulo(cSrc[0], sourceWorldWidth)) /
+            2;
+          dx = centerSrcEstimX - modulo(centerSrc[0], sourceWorldWidth);
+        } else {
+          dx = (aSrc[0] + cSrc[0]) / 2 - centerSrc[0];
+        }
+        const dy = (aSrc[1] + cSrc[1]) / 2 - centerSrc[1];
+        const centerSrcErrorSquared = dx * dx + dy * dy;
+        needsSubdivision = centerSrcErrorSquared > this.errorThresholdSquared_;
+      }
+      if (needsSubdivision) {
+        if (Math.abs(a[0] - c[0]) <= Math.abs(a[1] - c[1])) {
+          // split horizontally (top & bottom)
+          const bc = [(b[0] + c[0]) / 2, (b[1] + c[1]) / 2];
+          const bcSrc = this.transformInv_(bc);
+          const da = [(d[0] + a[0]) / 2, (d[1] + a[1]) / 2];
+          const daSrc = this.transformInv_(da);
+
+          this.addQuad_(
+            a,
+            b,
+            bc,
+            da,
+            aSrc,
+            bSrc,
+            bcSrc,
+            daSrc,
+            maxSubdivision - 1
+          );
+          this.addQuad_(
+            da,
+            bc,
+            c,
+            d,
+            daSrc,
+            bcSrc,
+            cSrc,
+            dSrc,
+            maxSubdivision - 1
+          );
+        } else {
+          // split vertically (left & right)
+          const ab = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+          const abSrc = this.transformInv_(ab);
+          const cd = [(c[0] + d[0]) / 2, (c[1] + d[1]) / 2];
+          const cdSrc = this.transformInv_(cd);
+
+          this.addQuad_(
+            a,
+            ab,
+            cd,
+            d,
+            aSrc,
+            abSrc,
+            cdSrc,
+            dSrc,
+            maxSubdivision - 1
+          );
+          this.addQuad_(
+            ab,
+            b,
+            c,
+            cd,
+            abSrc,
+            bSrc,
+            cSrc,
+            cdSrc,
+            maxSubdivision - 1
+          );
+        }
+        return;
+      }
+    }
+
+    if (wrapsX) {
+      if (!this.canWrapXInSource_) {
+        return;
+      }
+      this.wrapsXInSource_ = true;
+    }
+
+    // Exactly zero or one of *Src is not finite
+    // The triangles must have the diagonal line as the first side
+    // This is to allow easy code in reproj.s to make it straight for broken
+    // browsers that can't handle diagonal clipping
+    if ((isNotFinite & 0xb) == 0) {
+      this.addTriangle_(a, c, d, aSrc, cSrc, dSrc);
+    }
+    if ((isNotFinite & 0xe) == 0) {
+      this.addTriangle_(a, c, b, aSrc, cSrc, bSrc);
+    }
+    if (isNotFinite) {
+      // Try the other two triangles
+      if ((isNotFinite & 0xd) == 0) {
+        this.addTriangle_(b, d, a, bSrc, dSrc, aSrc);
+      }
+      if ((isNotFinite & 0x7) == 0) {
+        this.addTriangle_(b, d, c, bSrc, dSrc, cSrc);
+      }
+    }
+  }
+
+  /**
+   * Calculates extent of the `source` coordinates from all the triangles.
+   *
+   * @return {import("../extent.js").Extent} Calculated extent.
+   */
+  calculateSourceExtent() {
+    const extent = createEmpty();
+
+    this.triangles_.forEach(function (triangle, i, arr) {
+      const src = triangle.source;
+      extendCoordinate(extent, src[0]);
+      extendCoordinate(extent, src[1]);
+      extendCoordinate(extent, src[2]);
+    });
+
+    return extent;
+  }
+
+  /**
+   * @return {Array<Triangle>} Array of the calculated triangles.
+   */
+  getTriangles() {
+    return this.triangles_;
+  }
+}
+
+export default Triangulation;

node_modules/ol/src/reproj/common.js

@@ -0,0 +1,17 @@
+/**
+ * @module ol/reproj/common
+ */
+
+/**
+ * Default maximum allowed threshold  (in pixels) for reprojection
+ * triangulation.
+ * @type {number}
+ */
+export const ERROR_THRESHOLD = 0.5;
+
+/**
+ * Enable automatic reprojection of raster sources. Default is `true`.
+ * TODO: decide if we want to expose this as a build flag or remove it
+ * @type {boolean}
+ */
+export const ENABLE_RASTER_REPROJECTION = true;