ol 9.2.5-sh.1 → 10.0.0

package/renderer/webgl/VectorLayer.js

@@ -100,8 +100,14 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
      */
     this.hitRenderTarget_;
 
+    /**
+     * @private
+     */
     this.sourceRevision_ = -1;
 
+    /**
+     * @private
+     */
     this.previousExtent_ = createEmpty();
 
     /**
@@ -113,8 +119,17 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
      */
     this.currentTransform_ = createTransform();
 
+    /**
+     * @private
+     */
     this.tmpCoords_ = [0, 0];
+    /**
+     * @private
+     */
     this.tmpTransform_ = createTransform();
+    /**
+     * @private
+     */
     this.tmpMat4_ = createMat4();
 
     /**
@@ -225,6 +240,9 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     );
   }
 
+  /**
+   * @override
+   */
   reset(options) {
     this.applyOptions_(options);
     if (this.helper) {
@@ -233,6 +251,9 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     super.reset(options);
   }
 
+  /**
+   * @override
+   */
   afterHelperCreated() {
     this.createRenderers_();
     if (this.hitDetectionEnabled_) {
@@ -307,6 +328,7 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
    * Render the layer.
    * @param {import("../../Map.js").FrameState} frameState Frame state.
    * @return {HTMLElement} The rendered element.
+   * @override
    */
   renderFrame(frameState) {
     const gl = this.helper.getGL();
@@ -343,6 +365,7 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
    * Determine whether renderFrame should be called.
    * @param {import("../../Map.js").FrameState} frameState Frame state.
    * @return {boolean} Layer is ready to be rendered.
+   * @override
    */
   prepareFrameInternal(frameState) {
     if (!this.initialFeaturesAdded_) {
@@ -391,6 +414,9 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
 
       const generatePromises = this.styleRenderers_.map((renderer, i) =>
         renderer.generateBuffers(this.batch_, transform).then((buffers) => {
+          if (this.buffers_[i]) {
+            this.disposeBuffers(this.buffers_[i]);
+          }
           this.buffers_[i] = buffers;
         }),
       );
@@ -460,6 +486,7 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
    * @param {Array<import("../Map.js").HitMatch<T>>} matches The hit detected matches with tolerance.
    * @return {T|undefined} Callback result.
    * @template T
+   * @override
    */
   forEachFeatureAtCoordinate(
     coordinate,
@@ -491,10 +518,36 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     return undefined;
   }
 
+  /**
+   * Will release a set of Webgl buffers
+   * @param {import('../../render/webgl/VectorStyleRenderer.js').WebGLBuffers} buffers Buffers
+   */
+  disposeBuffers(buffers) {
+    if (buffers.pointBuffers) {
+      buffers.pointBuffers
+        .filter(Boolean)
+        .forEach((buffer) => this.helper.deleteBuffer(buffer));
+    }
+    if (buffers.lineStringBuffers) {
+      buffers.lineStringBuffers
+        .filter(Boolean)
+        .forEach((buffer) => this.helper.deleteBuffer(buffer));
+    }
+    if (buffers.polygonBuffers) {
+      buffers.polygonBuffers
+        .filter(Boolean)
+        .forEach((buffer) => this.helper.deleteBuffer(buffer));
+    }
+  }
+
   /**
    * Clean up.
+   * @override
    */
   disposeInternal() {
+    this.buffers_.forEach((buffers) => {
+      this.disposeBuffers(buffers);
+    });
     if (this.sourceListenKeys_) {
       this.sourceListenKeys_.forEach(function (key) {
         unlistenByKey(key);

package/renderer/webgl/VectorTileLayer.d.ts

@@ -7,24 +7,6 @@ export const Uniforms: {
     RENDER_EXTENT: string;
     PATTERN_ORIGIN: string;
     RESOLUTION: string;
-    /**
-     * @typedef {import('../../render/webgl/VectorStyleRenderer.js').VectorStyle} VectorStyle
-     */
-    /**
-     * @typedef {Object} Options
-     * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
-     * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
-     * prevent all hit detection on the layer.
-     * @property {number} [cacheSize=512] The vector tile cache size.
-     */
-    /**
-     * @typedef {import("../../layer/BaseTile.js").default} LayerType
-     */
-    /**
-     * @classdesc
-     * WebGL renderer for vector tile layers. Experimental.
-     * @extends {WebGLBaseTileLayerRenderer<LayerType>}
-     */
     ZOOM: string;
     GLOBAL_ALPHA: string;
     PROJECTION_MATRIX: string;
@@ -34,7 +16,7 @@ export namespace Attributes {
     let POSITION: string;
 }
 export default WebGLVectorTileLayerRenderer;
-export type VectorStyle = import('../../render/webgl/VectorStyleRenderer.js').VectorStyle;
+export type VectorStyle = import("../../render/webgl/VectorStyleRenderer.js").VectorStyle;
 export type Options = {
     /**
      * Vector style as literal style or shaders; can also accept an array of styles
@@ -74,7 +56,7 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @param {LayerType} tileLayer Tile layer.
      * @param {Options} options Options.
      */
-    constructor(tileLayer: import("../../layer/BaseTile.js").default<any, any>, options: Options);
+    constructor(tileLayer: LayerType, options: Options);
     /**
      * @type {boolean}
      * @private
@@ -98,8 +80,14 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @private
      */
     private currentFrameStateTransform_;
-    tmpTransform_: number[];
-    tmpMat4_: number[];
+    /**
+     * @private
+     */
+    private tmpTransform_;
+    /**
+     * @private
+     */
+    private tmpMat4_;
     /**
      * @type {WebGLRenderTarget}
      * @private
@@ -116,12 +104,14 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
     private tileMaskAttributes_;
     /**
      * @type {WebGLProgram}
+     * @private
      */
-    tileMaskProgram_: WebGLProgram;
+    private tileMaskProgram_;
     /**
      * @param {Options} options Options.
+     * @override
      */
-    reset(options: Options): void;
+    override reset(options: Options): void;
     /**
      * @param {Options} options Options.
      * @private
@@ -135,10 +125,22 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @private
      */
     private initTileMask_;
-    createTileRepresentation(options: any): TileGeometry;
-    beforeTilesRender(frameState: any, tilesWithAlpha: any): void;
-    beforeTilesMaskRender(frameState: any): boolean;
-    renderTileMask(tileRepresentation: any, tileZ: any, extent: any, depth: any): void;
+    /**
+     * @override
+     */
+    override createTileRepresentation(options: any): TileGeometry;
+    /**
+     * @override
+     */
+    override beforeTilesRender(frameState: any, tilesWithAlpha: any): void;
+    /**
+     * @override
+     */
+    override beforeTilesMaskRender(frameState: any): boolean;
+    /**
+     * @override
+     */
+    override renderTileMask(tileRepresentation: any, tileZ: any, extent: any, depth: any): void;
     /**
      * @param {number} alpha Alpha value of the tile
      * @param {import("../../extent.js").Extent} renderExtent Which extent to restrict drawing to
@@ -148,7 +150,10 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @private
      */
     private applyUniforms_;
-    renderTile(tileRepresentation: any, tileTransform: any, frameState: any, renderExtent: any, tileResolution: any, tileSize: any, tileOrigin: any, tileExtent: any, depth: any, gutter: any, alpha: any): void;
+    /**
+     * @override
+     */
+    override renderTile(tileRepresentation: any, tileTransform: any, frameState: any, renderExtent: any, tileResolution: any, tileSize: any, tileOrigin: any, tileExtent: any, depth: any, gutter: any, alpha: any): void;
     /**
      * Render declutter items for this layer
      * @param {import("../../Map.js").FrameState} frameState Frame state.

package/renderer/webgl/VectorTileLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":"AA2BA;;;;;;;;;IAUA;;OAEG;IAEH;;;;;;OAMG;IAEH;;OAEG;IAEH;;;;OAIG;;;;;EA1BD;;;;;0BAOW,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,MAAM,WAAW,CAAC;;;;;;;;;;;;AAN5C;;GAEG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,qFAFW,OAAO,EA0EjB;IA/DC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD,wBAAsC;IACtC,mBAA4B;IAE5B;;;OAGG;IACH,wBAA2B;IAE3B;;OAEG;IACH,yBAGC;IAGD;;;OAGG;IACH,4BAMC;IAED;;OAEG;IACH,kBAFU,YAAY,CAED;IAKvB;;OAEG;IACH,eAFW,OAAO,QAUjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAwCC;IAED;;OAEG;IACH,sBAYC;IAOD,qDAWC;IAED,8DAMC;IAED,gDA0BC;IAED,mFAeC;IAED;;;;;;;OAOG;IACH,uBAoBC;IAED,6MA4BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAQ/B;uCApWM,oBAAoB;yBALF,6BAA6B"}
+{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;EAIE;;;;;0BAOW,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,KAAK,CAAC,WAAW,CAAC;;;;;;;;;;;wBAO/B,mDAAyC;AAbtD;;GAEG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,uBAHW,SAAS,WACT,OAAO,EAiFjB;IAtEC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD;;OAEG;IACH,sBAAsC;IACtC;;OAEG;IACH,iBAA4B;IAE5B;;;OAGG;IACH,wBAA2B;IAE3B;;OAEG;IACH,yBAGC;IAGD;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,yBAAqB;IAKvB;;;OAGG;IACH,wBAHW,OAAO,QAWjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAwCC;IAED;;OAEG;IACH,sBAYC;IAUD;;OAEG;IACH,8DAWC;IAED;;OAEG;IACH,uEAMC;IAED;;OAEG;IACH,yDA0BC;IAED;;OAEG;IACH,4FAeC;IAED;;;;;;;OAOG;IACH,uBAoBC;IAED;;OAEG;IACH,sNA4BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAS/B;uCA/XM,oBAAoB;yBALF,6BAA6B"}

package/renderer/webgl/VectorTileLayer.js

@@ -97,7 +97,13 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
      */
     this.currentFrameStateTransform_ = createTransform();
 
+    /**
+     * @private
+     */
     this.tmpTransform_ = createTransform();
+    /**
+     * @private
+     */
     this.tmpMat4_ = createMat4();
 
     /**
@@ -129,6 +135,7 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
 
     /**
      * @type {WebGLProgram}
+     * @private
      */
     this.tileMaskProgram_;
 
@@ -137,6 +144,7 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
 
   /**
    * @param {Options} options Options.
+   * @override
    */
   reset(options) {
     super.reset(options);
@@ -220,11 +228,17 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
     this.helper.flushBufferData(this.tileMaskIndices_);
   }
 
+  /**
+   * @override
+   */
   afterHelperCreated() {
     this.createRenderers_();
     this.initTileMask_();
   }
 
+  /**
+   * @override
+   */
   createTileRepresentation(options) {
     const tileRep = new TileGeometry(options, this.styleRenderers_);
     // redraw the layer when the tile is ready
@@ -238,6 +252,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
     return tileRep;
   }
 
+  /**
+   * @override
+   */
   beforeTilesRender(frameState, tilesWithAlpha) {
     super.beforeTilesRender(frameState, true); // always consider that tiles need alpha blending
     this.helper.makeProjectionTransform(
@@ -246,6 +263,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
     );
   }
 
+  /**
+   * @override
+   */
   beforeTilesMaskRender(frameState) {
     this.helper.makeProjectionTransform(
       frameState,
@@ -274,6 +294,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
     return true;
   }
 
+  /**
+   * @override
+   */
   renderTileMask(tileRepresentation, tileZ, extent, depth) {
     if (!tileRepresentation.ready) {
       return;
@@ -321,6 +344,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
     this.helper.setUniformFloatVec4(Uniforms.RENDER_EXTENT, renderExtent);
   }
 
+  /**
+   * @override
+   */
   renderTile(
     tileRepresentation,
     tileTransform,
@@ -359,6 +385,7 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
 
   /**
    * Clean up.
+   * @override
    */
   disposeInternal() {
     super.disposeInternal();

package/renderer/webgl/worldUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worldUtil.d.ts","sourceRoot":"","sources":["worldUtil.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,+CAJW,OAAO,cAAc,EAAE,UAAU,SACjC,GAAG,GACF,MAAM,MAAM,CAAC,CAoBxB"}
+{"version":3,"file":"worldUtil.d.ts","sourceRoot":"","sources":["worldUtil.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,+CAJW,OAAO,cAAc,EAAE,UAAU,SACjC,GAAG,GACF,KAAK,CAAC,MAAM,CAAC,CAoBxB"}

package/reproj/DataTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":";gCAoBsB,MAAM,QAAE,MAAM,QAAE,MAAM,QAAE,MAAM,KAAI,OAAO,gBAAgB,EAAE,OAAO;;;;;UAK1E,QAAQ;;;;YACR,MAAM;;;;;;gBAKN,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;eACzC,OAAO,iBAAiB,EAAE,SAAS;;;;;;;;gBAEnC,MAAM;;;;YACN,MAAM;;;;qBACN,UAAU;;;;;;;;;;;;;;;;AApBxB;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAyNjB;IA/MC;;;OAGG;IACH,oBAAqC;IAErC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,oBAAuB;IAEvB;;;OAGG;IACH,qBAAwB;IAExB;;;OAGG;IACH,oBAA4B;IAE5B;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,0BAAsE;IAEtE;;;OAGG;IACH,qBAAsB;IAEtB;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAIwB;IAmDxB;;;OAGG;IACH,uBAOC;IA6FH;;OAEG;IACH,mBAiLC;IAyDD;;OAEG;IACH,yBAGC;CACF;qBAzhByD,gBAAgB"}
+{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":";yBAoBa,CAAS,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,KAAI,OAAO,gBAAgB,EAAE,OAAO;;;;;UAK1E,QAAQ;;;;YACR,MAAM;;;;;;gBAKN,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;eACzC,OAAO,iBAAiB,EAAE,SAAS;;;;;;;;gBAEnC,MAAM;;;;YACN,MAAM;;;;qBACN,UAAU;;;;;;;;;;;;;;;;AApBxB;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAyNjB;IA/MC;;;OAGG;IACH,oBAAqC;IAErC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,oBAAuB;IAEvB;;;OAGG;IACH,qBAAwB;IAExB;;;OAGG;IACH,oBAA4B;IAE5B;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,0BAAsE;IAEtE;;;OAGG;IACH,qBAAsB;IAEtB;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAIwB;IAmDxB;;;OAGG;IACH,uBAOC;IAgGH;;OAEG;IACH,mBAoLC;IAqDD;;OAEG;IACH,yBAGC;CACF;qBA3hByD,gBAAgB"}

package/reproj/DataTile.js

@@ -58,7 +58,7 @@ class ReprojDataTile extends DataTile {
   constructor(options) {
     super({
       tileCoord: options.tileCoord,
-      loader: () => Promise.resolve(new Uint8Array(4)),
+      loader: () => Promise.resolve(new Uint8ClampedArray(4)),
       interpolate: options.interpolate,
       transition: options.transition,
     });
@@ -275,6 +275,7 @@ class ReprojDataTile extends DataTile {
   /**
    * Get the tile size.
    * @return {import('../size.js').Size} Tile size.
+   * @override
    */
   getSize() {
     return this.reprojSize_;
@@ -283,6 +284,7 @@ class ReprojDataTile extends DataTile {
   /**
    * Get the data for the tile.
    * @return {import("../DataTile.js").Data} Tile data.
+   * @override
    */
   getData() {
     return this.reprojData_;
@@ -291,6 +293,7 @@ class ReprojDataTile extends DataTile {
   /**
    * Get any loading error.
    * @return {Error} Loading error.
+   * @override
    */
   getError() {
     return this.reprojError_;
@@ -301,6 +304,7 @@ class ReprojDataTile extends DataTile {
    */
   reproject_() {
     const dataSources = [];
+    let imageLike = false;
     this.sourceTiles_.forEach((source) => {
       const tile = source.tile;
       if (!tile || tile.getState() !== TileState.LOADED) {
@@ -316,12 +320,13 @@ class ReprojDataTile extends DataTile {
       if (arrayData) {
         tileData = arrayData;
       } else {
+        imageLike = true;
         tileData = toArray(asImageLike(tile.getData()));
       }
       const pixelSize = [size[0] + 2 * gutter, size[1] + 2 * gutter];
       const isFloat = tileData instanceof Float32Array;
       const pixelCount = pixelSize[0] * pixelSize[1];
-      const DataType = isFloat ? Float32Array : Uint8Array;
+      const DataType = isFloat ? Float32Array : Uint8ClampedArray;
       const tileDataR = new DataType(tileData.buffer);
       const bytesPerElement = DataType.BYTES_PER_ELEMENT;
       const bytesPerPixel = (bytesPerElement * tileDataR.length) / pixelCount;
@@ -354,7 +359,7 @@ class ReprojDataTile extends DataTile {
       dataSources.push({
         extent: extent,
         clipExtent: clipExtent,
-        data: new Uint8Array(packedData.buffer),
+        data: new Uint8ClampedArray(packedData.buffer),
         dataType: DataType,
         bytesPerPixel: bytesPerPixel,
         pixelSize: pixelSize,
@@ -364,122 +369,124 @@ class ReprojDataTile extends DataTile {
 
     if (dataSources.length === 0) {
       this.state = TileState.ERROR;
-    } else {
-      const z = this.wrappedTileCoord_[0];
-      const size = this.targetTileGrid_.getTileSize(z);
-      const targetWidth = typeof size === 'number' ? size : size[0];
-      const targetHeight = 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.changed();
+      return;
+    }
 
-      let dataR, dataU;
-
-      const bytesPerPixel = dataSources[0].bytesPerPixel;
-
-      const reprojs = Math.ceil(bytesPerPixel / 3);
-      for (let reproj = reprojs - 1; reproj >= 0; --reproj) {
-        const sources = [];
-        for (let i = 0, len = dataSources.length; i < len; ++i) {
-          const dataSource = dataSources[i];
-          const buffer = dataSource.data;
-          const pixelSize = dataSource.pixelSize;
-          const width = pixelSize[0];
-          const height = pixelSize[1];
-          const context = createCanvasContext2D(width, height, canvasPool);
-          const imageData = context.createImageData(width, height);
-          const data = imageData.data;
-          let offset = reproj * 3;
-          for (let j = 0, len = data.length; j < len; j += 4) {
-            data[j] = buffer[offset];
-            data[j + 1] = buffer[offset + 1];
-            data[j + 2] = buffer[offset + 2];
-            data[j + 3] = 255;
-            offset += bytesPerPixel;
-          }
-          context.putImageData(imageData, 0, 0);
-          sources.push({
-            extent: dataSource.extent,
-            clipExtent: dataSource.clipExtent,
-            image: context.canvas,
-          });
-        }
+    const z = this.wrappedTileCoord_[0];
+    const size = this.targetTileGrid_.getTileSize(z);
+    const targetWidth = typeof size === 'number' ? size : size[0];
+    const targetHeight = typeof size === 'number' ? size : size[1];
+    const targetResolution = this.targetTileGrid_.getResolution(z);
+    const sourceResolution = this.sourceTileGrid_.getResolution(this.sourceZ_);
 
-        const canvas = renderReprojected(
-          targetWidth,
-          targetHeight,
-          this.pixelRatio_,
-          sourceResolution,
-          this.sourceTileGrid_.getExtent(),
-          targetResolution,
-          targetExtent,
-          this.triangulation_,
-          sources,
-          this.gutter_,
-          false,
-          false,
-          false,
-          //true,
-        );
+    const targetExtent = this.targetTileGrid_.getTileCoordExtent(
+      this.wrappedTileCoord_,
+    );
 
-        for (let i = 0, len = sources.length; i < len; ++i) {
-          const canvas = sources[i].image;
-          const context = canvas.getContext('2d');
-          releaseCanvas(context);
-          canvasPool.push(context.canvas);
+    let dataR, dataU;
+
+    const bytesPerPixel = dataSources[0].bytesPerPixel;
+
+    const reprojs = Math.ceil(bytesPerPixel / 3);
+    for (let reproj = reprojs - 1; reproj >= 0; --reproj) {
+      const sources = [];
+      for (let i = 0, len = dataSources.length; i < len; ++i) {
+        const dataSource = dataSources[i];
+        const buffer = dataSource.data;
+        const pixelSize = dataSource.pixelSize;
+        const width = pixelSize[0];
+        const height = pixelSize[1];
+        const context = createCanvasContext2D(width, height, canvasPool);
+        const imageData = context.createImageData(width, height);
+        const data = imageData.data;
+        let offset = reproj * 3;
+        for (let j = 0, len = data.length; j < len; j += 4) {
+          data[j] = buffer[offset];
+          data[j + 1] = buffer[offset + 1];
+          data[j + 2] = buffer[offset + 2];
+          data[j + 3] = 255;
+          offset += bytesPerPixel;
         }
+        context.putImageData(imageData, 0, 0);
+        sources.push({
+          extent: dataSource.extent,
+          clipExtent: dataSource.clipExtent,
+          image: context.canvas,
+        });
+      }
 
-        const context = canvas.getContext('2d');
-        const imageData = context.getImageData(
-          0,
-          0,
-          canvas.width,
-          canvas.height,
-        );
+      const canvas = renderReprojected(
+        targetWidth,
+        targetHeight,
+        this.pixelRatio_,
+        sourceResolution,
+        this.sourceTileGrid_.getExtent(),
+        targetResolution,
+        targetExtent,
+        this.triangulation_,
+        sources,
+        this.gutter_,
+        false,
+        false,
+        false,
+      );
 
+      for (let i = 0, len = sources.length; i < len; ++i) {
+        const canvas = sources[i].image;
+        const context = canvas.getContext('2d');
         releaseCanvas(context);
-        canvasPool.push(canvas);
+        canvasPool.push(context.canvas);
+      }
 
-        if (!dataR) {
-          dataU = new Uint8Array(
-            bytesPerPixel * imageData.width * imageData.height,
-          );
-          dataR = new dataSources[0].dataType(dataU.buffer);
-        }
+      const context = canvas.getContext('2d');
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
-        const data = imageData.data;
-        let offset = reproj * 3;
-        for (let i = 0, len = data.length; i < len; i += 4) {
-          if (data[i + 3] === 255) {
-            dataU[offset] = data[i];
-            dataU[offset + 1] = data[i + 1];
-            dataU[offset + 2] = data[i + 2];
-          } else {
-            dataU[offset] = 0;
-            dataU[offset + 1] = 0;
-            dataU[offset + 2] = 0;
-          }
-          offset += bytesPerPixel;
+      releaseCanvas(context);
+      canvasPool.push(canvas);
+
+      if (!dataR) {
+        dataU = new Uint8ClampedArray(
+          bytesPerPixel * imageData.width * imageData.height,
+        );
+        dataR = new dataSources[0].dataType(dataU.buffer);
+      }
+
+      const data = imageData.data;
+      let offset = reproj * 3;
+      for (let i = 0, len = data.length; i < len; i += 4) {
+        if (data[i + 3] === 255) {
+          dataU[offset] = data[i];
+          dataU[offset + 1] = data[i + 1];
+          dataU[offset + 2] = data[i + 2];
+        } else {
+          dataU[offset] = 0;
+          dataU[offset + 1] = 0;
+          dataU[offset + 2] = 0;
         }
+        offset += bytesPerPixel;
       }
+    }
 
+    if (imageLike) {
+      const context = createCanvasContext2D(targetWidth, targetHeight);
+      const imageData = new ImageData(dataR, targetWidth);
+      context.putImageData(imageData, 0, 0);
+      this.reprojData_ = context.canvas;
+    } else {
       this.reprojData_ = dataR;
-      this.reprojSize_ = [
-        Math.round(targetWidth * this.pixelRatio_),
-        Math.round(targetHeight * this.pixelRatio_),
-      ];
-      this.state = TileState.LOADED;
     }
+    this.reprojSize_ = [
+      Math.round(targetWidth * this.pixelRatio_),
+      Math.round(targetHeight * this.pixelRatio_),
+    ];
+    this.state = TileState.LOADED;
     this.changed();
   }
 
   /**
    * Load not yet loaded URI.
+   * @override
    */
   load() {
     if (this.state !== TileState.IDLE && this.state !== TileState.ERROR) {
@@ -498,26 +505,21 @@ class ReprojDataTile extends DataTile {
       }
       leftToLoad++;
 
-      const sourceListenKey = listen(
-        tile,
-        EventType.CHANGE,
-        function () {
-          const state = tile.getState();
-          if (
-            state == TileState.LOADED ||
-            state == TileState.ERROR ||
-            state == TileState.EMPTY
-          ) {
-            unlistenByKey(sourceListenKey);
-            leftToLoad--;
-            if (leftToLoad === 0) {
-              this.unlistenSources_();
-              this.reproject_();
-            }
+      const sourceListenKey = listen(tile, EventType.CHANGE, () => {
+        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);
     });
 

package/reproj/Image.d.ts

@@ -72,8 +72,9 @@ declare class ReprojImage extends ImageWrapper {
     private sourceListenerKey_;
     /**
      * @return {HTMLCanvasElement} Image.
+     * @override
      */
-    getImage(): HTMLCanvasElement;
+    override getImage(): HTMLCanvasElement;
     /**
      * @return {import("../proj/Projection.js").default} Projection.
      */