ol 9.0.0-dev.1707341212133 → 9.0.0-dev.1707494062569

package/render/canvas/Builder.js

@@ -247,9 +247,10 @@ class CanvasBuilder extends VectorContext {
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
    * @param {Function} renderer Renderer.
    * @param {Function} hitDetectionRenderer Renderer.
+   * @param {number} [index] Render order index.
    */
-  drawCustom(geometry, feature, renderer, hitDetectionRenderer) {
-    this.beginGeometry(geometry, feature);
+  drawCustom(geometry, feature, renderer, hitDetectionRenderer, index) {
+    this.beginGeometry(geometry, feature, index);
 
     const type = geometry.getType();
     const stride = geometry.getStride();
@@ -288,6 +289,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           renderer,
           inflateMultiCoordinatesArray,
+          index,
         ]);
         this.hitDetectionInstructions.push([
           CanvasInstruction.CUSTOM,
@@ -296,6 +298,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           hitDetectionRenderer || renderer,
           inflateMultiCoordinatesArray,
+          index,
         ]);
         break;
       case 'Polygon':
@@ -323,6 +326,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           renderer,
           inflateCoordinatesArray,
+          index,
         ]);
         this.hitDetectionInstructions.push([
           CanvasInstruction.CUSTOM,
@@ -331,6 +335,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           hitDetectionRenderer || renderer,
           inflateCoordinatesArray,
+          index,
         ]);
         break;
       case 'LineString':
@@ -351,6 +356,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           renderer,
           inflateCoordinates,
+          index,
         ]);
         this.hitDetectionInstructions.push([
           CanvasInstruction.CUSTOM,
@@ -359,6 +365,7 @@ class CanvasBuilder extends VectorContext {
           geometry,
           hitDetectionRenderer || renderer,
           inflateCoordinates,
+          index,
         ]);
         break;
       case 'MultiPoint':
@@ -373,6 +380,7 @@ class CanvasBuilder extends VectorContext {
             geometry,
             renderer,
             inflateCoordinates,
+            index,
           ]);
           this.hitDetectionInstructions.push([
             CanvasInstruction.CUSTOM,
@@ -381,6 +389,7 @@ class CanvasBuilder extends VectorContext {
             geometry,
             hitDetectionRenderer || renderer,
             inflateCoordinates,
+            index,
           ]);
         }
         break;
@@ -395,6 +404,8 @@ class CanvasBuilder extends VectorContext {
           builderEnd,
           geometry,
           renderer,
+          undefined,
+          index,
         ]);
         this.hitDetectionInstructions.push([
           CanvasInstruction.CUSTOM,
@@ -402,6 +413,8 @@ class CanvasBuilder extends VectorContext {
           builderEnd,
           geometry,
           hitDetectionRenderer || renderer,
+          undefined,
+          index,
         ]);
         break;
       default:
@@ -413,13 +426,15 @@ class CanvasBuilder extends VectorContext {
    * @protected
    * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {number} index Render order index
    */
-  beginGeometry(geometry, feature) {
+  beginGeometry(geometry, feature, index) {
     this.beginGeometryInstruction1_ = [
       CanvasInstruction.BEGIN_GEOMETRY,
       feature,
       0,
       geometry,
+      index,
     ];
     this.instructions.push(this.beginGeometryInstruction1_);
     this.beginGeometryInstruction2_ = [
@@ -427,6 +442,7 @@ class CanvasBuilder extends VectorContext {
       feature,
       0,
       geometry,
+      index,
     ];
     this.hitDetectionInstructions.push(this.beginGeometryInstruction2_);
   }

package/render/canvas/Executor.d.ts

@@ -61,7 +61,7 @@ export type ImageOrLabelDimensions = {
 };
 export type ReplayImageOrLabelArgs = {
     0: CanvasRenderingContext2D;
-    1: number;
+    1: import('../../size.js').Size;
     2: import("../canvas.js").Label | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
     3: ImageOrLabelDimensions;
     4: number;
@@ -74,9 +74,10 @@ declare class Executor {
      * @param {number} resolution Resolution.
      * @param {number} pixelRatio Pixel ratio.
      * @param {boolean} overlaps The replay can have overlapping geometries.
-     * @param {import("../canvas.js").SerializableInstructions} instructions The serializable instructions
+     * @param {import("../canvas.js").SerializableInstructions} instructions The serializable instructions.
+     * @param {boolean} [deferredRendering] Enable deferred rendering.
      */
-    constructor(resolution: number, pixelRatio: number, overlaps: boolean, instructions: import("../canvas.js").SerializableInstructions);
+    constructor(resolution: number, pixelRatio: number, overlaps: boolean, instructions: import("../canvas.js").SerializableInstructions, deferredRendering?: boolean | undefined);
     /**
      * @protected
      * @type {boolean}
@@ -161,6 +162,15 @@ declare class Executor {
      * @type {Object<string, import("../canvas.js").Label>}
      */
     private labels_;
+    /**
+     * @private
+     * @type {import("../canvas/ZIndexContext.js").default}
+     */
+    private zIndexContext_;
+    /**
+     * @return {ZIndexContext} ZIndex context.
+     */
+    getZIndexContext(): ZIndexContext;
     /**
      * @param {string|Array<string>} text Text.
      * @param {string} textKey Text style key.
@@ -203,7 +213,7 @@ declare class Executor {
     /**
      * @private
      * @param {CanvasRenderingContext2D} context Context.
-     * @param {number} contextScale Scale of the context.
+     * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size.
      * @param {import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} imageOrLabel Image.
      * @param {ImageOrLabelDimensions} dimensions Dimensions.
      * @param {number} opacity Opacity.
@@ -235,7 +245,7 @@ declare class Executor {
     /**
      * @private
      * @param {CanvasRenderingContext2D} context Context.
-     * @param {number} contextScale Scale of the context.
+     * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size
      * @param {import("../../transform.js").Transform} transform Transform.
      * @param {Array<*>} instructions Instructions array.
      * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
@@ -249,13 +259,13 @@ declare class Executor {
     private execute_;
     /**
      * @param {CanvasRenderingContext2D} context Context.
-     * @param {number} contextScale Scale of the context.
+     * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size.
      * @param {import("../../transform.js").Transform} transform Transform.
      * @param {number} viewRotation View rotation.
      * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
      * @param {import("rbush").default} [declutterTree] Declutter tree.
      */
-    execute(context: CanvasRenderingContext2D, contextScale: number, transform: import("../../transform.js").Transform, viewRotation: number, snapToPixel: boolean, declutterTree?: any): void;
+    execute(context: CanvasRenderingContext2D, scaledCanvasSize: import('../../size.js').Size, transform: import("../../transform.js").Transform, viewRotation: number, snapToPixel: boolean, declutterTree?: any): void;
     /**
      * @param {CanvasRenderingContext2D} context Context.
      * @param {import("../../transform.js").Transform} transform Transform.
@@ -268,4 +278,5 @@ declare class Executor {
      */
     executeHitDetection<T>(context: CanvasRenderingContext2D, transform: import("../../transform.js").Transform, viewRotation: number, featureCallback?: FeatureCallback<T> | undefined, hitExtent?: import("../../extent.js").Extent | undefined): T | undefined;
 }
+import ZIndexContext from '../canvas/ZIndexContext.js';
 //# sourceMappingURL=Executor.d.ts.map

package/render/canvas/Executor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Executor.d.ts","sourceRoot":"","sources":["Executor.js"],"names":[],"mappings":";;;;;UA2Bc,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;;;;;;;gBAMN,MAAM;;;;gBACN,MAAM;;;;gBACN,MAAM;;;;gBACN,MAAM;;;;aACN,MAAM;;;;aACN,MAAM;;;;WACN,MAAM,MAAM,CAAC;;;;kBACb,IAAI;;;;qBACJ,OAAO,oBAAoB,EAAE,SAAS;;qCAIvC;IAAC,CAAC,EAAE,wBAAwB,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,OAAO,cAAc,EAAE,KAAK,GAAC,gBAAgB,GAAC,iBAAiB,GAAC,gBAAgB,CAAC;IAAC,CAAC,EAAE,sBAAsB,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,UAAQ,CAAC;IAAC,CAAC,EAAE,UAAQ,CAAA;CAAC;wCAKpL,OAAO,kBAAkB,EAAE,WAAW,QAAE,OAAO,8BAA8B,EAAE,OAAO,KAAG,CAAC;AAiEhH;IACE;;;;;OAKG;IACH,wBALW,MAAM,cACN,MAAM,YACN,OAAO,gBACP,OAAO,cAAc,EAAE,wBAAwB,EAgGzD;IA7FC;;;OAGG;IACH,oBAFU,OAAO,CAEO;IAExB;;;OAGG;IACH,sBAFU,MAAM,CAEY;IAE5B;;;;OAIG;IACH,sBAFU,MAAM,CAEY;IAE5B;;;OAGG;IACH,2BAAuB;IAEvB;;;OAGG;IACH,wBAFU,UAAQ,CAE2B;IAE7C;;;OAGG;IACH,uBAFU,MAAM,MAAM,CAAC,CAEoB;IAE3C;;;OAGG;IACH,yBAA0B;IAE1B;;;OAGG;IACH,2BAA2C;IAE3C;;;OAGG;IACH,oCAFU,UAAQ,CAEmD;IAErE;;;OAGG;IACH,0BAA6B;IAE7B;;;OAGG;IACH,sBAAsB;IAEtB;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEX;IAE/C;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,WAAW;MAET;IAEnD;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEX;IAE/C;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,gBAAiB;IAGnB;;;;;;OAMG;IACH,kBANW,MAAM,GAAC,MAAM,MAAM,CAAC,WACpB,MAAM,WACN,MAAM,aACN,MAAM,GACL,OAAO,cAAc,EAAE,KAAK,CA8GvC;IAED;;;;;;;;OAQG;IACH,+BARW,wBAAwB,MACxB,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,mBACxC,UAAQ,qBACR,UAAQ,QA4BlB;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,yCA+FC;IAED;;;;;;;;;;OAUG;IACH,4BAiDC;IAED;;;OAGG;IACH,cAgBC;IAED;;;;OAIG;IACH,wBASC;IAED;;;;;;;OAOG;IACH,qCA2BC;IAED;;;;;;;;;;;;;OAaG;IACH,iBA4iBC;IAED;;;;;;;OAOG;IACH,iBAPW,wBAAwB,gBACxB,MAAM,aACN,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,eACN,OAAO,6BAsBjB;IAED;;;;;;;;;OASG;IACH,gCATW,wBAAwB,aACxB,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,6HAwBhB;CACF"}
+{"version":3,"file":"Executor.d.ts","sourceRoot":"","sources":["Executor.js"],"names":[],"mappings":";;;;;UA4Bc,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;UACN,MAAM;;;;;;;;;;gBAMN,MAAM;;;;gBACN,MAAM;;;;gBACN,MAAM;;;;gBACN,MAAM;;;;aACN,MAAM;;;;aACN,MAAM;;;;WACN,MAAM,MAAM,CAAC;;;;kBACb,IAAI;;;;qBACJ,OAAO,oBAAoB,EAAE,SAAS;;qCAIvC;IAAC,CAAC,EAAE,wBAAwB,CAAC;IAAC,CAAC,EAAE,OAAO,eAAe,EAAE,IAAI,CAAC;IAAC,CAAC,EAAE,OAAO,cAAc,EAAE,KAAK,GAAC,gBAAgB,GAAC,iBAAiB,GAAC,gBAAgB,CAAC;IAAC,CAAC,EAAE,sBAAsB,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,UAAQ,CAAC;IAAC,CAAC,EAAE,UAAQ,CAAA;CAAC;wCAK1M,OAAO,kBAAkB,EAAE,WAAW,QAAE,OAAO,8BAA8B,EAAE,OAAO,KAAG,CAAC;AAiEhH;IACE;;;;;;OAMG;IACH,wBANW,MAAM,cACN,MAAM,YACN,OAAO,gBACP,OAAO,cAAc,EAAE,wBAAwB,2CA6GzD;IAnGC;;;OAGG;IACH,oBAFU,OAAO,CAEO;IAExB;;;OAGG;IACH,sBAFU,MAAM,CAEY;IAE5B;;;;OAIG;IACH,sBAFU,MAAM,CAEY;IAE5B;;;OAGG;IACH,2BAAuB;IAEvB;;;OAGG;IACH,wBAFU,UAAQ,CAE2B;IAE7C;;;OAGG;IACH,uBAFU,MAAM,MAAM,CAAC,CAEoB;IAE3C;;;OAGG;IACH,yBAA0B;IAE1B;;;OAGG;IACH,2BAA2C;IAE3C;;;OAGG;IACH,oCAFU,UAAQ,CAEmD;IAErE;;;OAGG;IACH,0BAA6B;IAE7B;;;OAGG;IACH,sBAAsB;IAEtB;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEX;IAE/C;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,WAAW;MAET;IAEnD;;OAEG;IACH;YAFkB,MAAM,GAAE,OAAO,cAAc,EAAE,SAAS;MAEX;IAE/C;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,uBAAoE;IAGtE;;OAEG;IACH,oBAFY,aAAa,CAIxB;IAED;;;;;;OAMG;IACH,kBANW,MAAM,GAAC,MAAM,MAAM,CAAC,WACpB,MAAM,WACN,MAAM,aACN,MAAM,GACL,OAAO,cAAc,EAAE,KAAK,CA8GvC;IAED;;;;;;;;OAQG;IACH,+BARW,wBAAwB,MACxB,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,MACxC,OAAO,qBAAqB,EAAE,UAAU,mBACxC,UAAQ,qBACR,UAAQ,QA4BlB;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,yCA+FC;IAED;;;;;;;;;;OAUG;IACH,4BAgDC;IAED;;;OAGG;IACH,cAgBC;IAED;;;;OAIG;IACH,wBASC;IAED;;;;;;;OAOG;IACH,qCA2BC;IAED;;;;;;;;;;;;;OAaG;IACH,iBAokBC;IAED;;;;;;;OAOG;IACH,iBAPW,wBAAwB,oBACxB,OAAO,eAAe,EAAE,IAAI,aAC5B,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,eACN,OAAO,6BAsBjB;IAED;;;;;;;;;OASG;IACH,gCATW,wBAAwB,aACxB,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,6HAwBhB;CACF;0BAlxCyB,4BAA4B"}

package/render/canvas/Executor.js

@@ -2,6 +2,7 @@
  * @module ol/render/canvas/Executor
  */
 import CanvasInstruction from './Instruction.js';
+import ZIndexContext from '../canvas/ZIndexContext.js';
 import {TEXT_ALIGN} from './TextBuilder.js';
 import {
   apply as applyTransform,
@@ -46,7 +47,7 @@ import {transform2D} from '../../geom/flat/transform.js';
  */
 
 /**
- * @typedef {{0: CanvasRenderingContext2D, 1: number, 2: import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, 3: ImageOrLabelDimensions, 4: number, 5: Array<*>, 6: Array<*>}} ReplayImageOrLabelArgs
+ * @typedef {{0: CanvasRenderingContext2D, 1: import('../../size.js').Size, 2: import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, 3: ImageOrLabelDimensions, 4: number, 5: Array<*>, 6: Array<*>}} ReplayImageOrLabelArgs
  */
 
 /**
@@ -121,9 +122,16 @@ class Executor {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The replay can have overlapping geometries.
-   * @param {import("../canvas.js").SerializableInstructions} instructions The serializable instructions
+   * @param {import("../canvas.js").SerializableInstructions} instructions The serializable instructions.
+   * @param {boolean} [deferredRendering] Enable deferred rendering.
    */
-  constructor(resolution, pixelRatio, overlaps, instructions) {
+  constructor(
+    resolution,
+    pixelRatio,
+    overlaps,
+    instructions,
+    deferredRendering,
+  ) {
     /**
      * @protected
      * @type {boolean}
@@ -217,6 +225,19 @@ class Executor {
      * @type {Object<string, import("../canvas.js").Label>}
      */
     this.labels_ = {};
+
+    /**
+     * @private
+     * @type {import("../canvas/ZIndexContext.js").default}
+     */
+    this.zIndexContext_ = deferredRendering ? new ZIndexContext() : null;
+  }
+
+  /**
+   * @return {ZIndexContext} ZIndex context.
+   */
+  getZIndexContext() {
+    return this.zIndexContext_;
   }
 
   /**
@@ -493,7 +514,7 @@ class Executor {
   /**
    * @private
    * @param {CanvasRenderingContext2D} context Context.
-   * @param {number} contextScale Scale of the context.
+   * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size.
    * @param {import("../canvas.js").Label|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} imageOrLabel Image.
    * @param {ImageOrLabelDimensions} dimensions Dimensions.
    * @param {number} opacity Opacity.
@@ -503,7 +524,7 @@ class Executor {
    */
   replayImageOrLabel_(
     context,
-    contextScale,
+    scaledCanvasSize,
     imageOrLabel,
     dimensions,
     opacity,
@@ -513,14 +534,13 @@ class Executor {
     const fillStroke = !!(fillInstruction || strokeInstruction);
 
     const box = dimensions.declutterBox;
-    const canvas = context.canvas;
     const strokePadding = strokeInstruction
       ? (strokeInstruction[2] * dimensions.scale[0]) / 2
       : 0;
     const intersects =
-      box.minX - strokePadding <= canvas.width / contextScale &&
+      box.minX - strokePadding <= scaledCanvasSize[0] &&
       box.maxX + strokePadding >= 0 &&
-      box.minY - strokePadding <= canvas.height / contextScale &&
+      box.minY - strokePadding <= scaledCanvasSize[1] &&
       box.maxY + strokePadding >= 0;
 
     if (intersects) {
@@ -580,7 +600,7 @@ class Executor {
    * @param {Array<*>} instruction Instruction.
    */
   setStrokeStyle_(context, instruction) {
-    context['strokeStyle'] =
+    context.strokeStyle =
       /** @type {import("../../colorlike.js").ColorLike} */ (instruction[1]);
     context.lineWidth = /** @type {number} */ (instruction[2]);
     context.lineCap = /** @type {CanvasLineCap} */ (instruction[3]);
@@ -630,7 +650,7 @@ class Executor {
   /**
    * @private
    * @param {CanvasRenderingContext2D} context Context.
-   * @param {number} contextScale Scale of the context.
+   * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {Array<*>} instructions Instructions array.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
@@ -643,7 +663,7 @@ class Executor {
    */
   execute_(
     context,
-    contextScale,
+    scaledCanvasSize,
     transform,
     instructions,
     snapToPixel,
@@ -651,6 +671,7 @@ class Executor {
     hitExtent,
     declutterTree,
   ) {
+    const zIndexContext = this.zIndexContext_;
     /** @type {Array<number>} */
     let pixelCoordinates;
     if (this.pixelCoordinates_ && equals(transform, this.renderedTransform_)) {
@@ -675,6 +696,8 @@ class Executor {
     let dd; // end of per-instruction data
     let anchorX,
       anchorY,
+      /** @type {import('../../style/Style.js').DeclutterMode} */
+      declutterMode,
       prevX,
       prevY,
       roundX,
@@ -727,6 +750,9 @@ class Executor {
           } else {
             ++i;
           }
+          if (zIndexContext) {
+            zIndexContext.zIndex = instruction[4];
+          }
           break;
         case CanvasInstruction.BEGIN_PATH:
           if (pendingFill > batchSize) {
@@ -769,7 +795,7 @@ class Executor {
               instruction[3]
             );
           const renderer = instruction[4];
-          const fn = instruction.length == 6 ? instruction[5] : undefined;
+          const fn = instruction[5];
           state.geometry = geometry;
           state.feature = feature;
           if (!(i in coordinateCache)) {
@@ -783,6 +809,9 @@ class Executor {
             coords[1] = pixelCoordinates[d + 1];
             coords.length = 2;
           }
+          if (zIndexContext) {
+            zIndexContext.zIndex = instruction[6];
+          }
           renderer(coords, state);
           ++i;
           break;
@@ -807,12 +836,9 @@ class Executor {
             instruction[12]
           );
           let width = /** @type {number} */ (instruction[13]);
-          const declutterMode =
-            /** @type {"declutter"|"obstacle"|"none"|undefined} */ (
-              instruction[14]
-            );
+          declutterMode = instruction[14] || 'declutter';
           const declutterImageWithText =
-            /** @type {import("../canvas.js").DeclutterImageWithText} */ (
+            /** @type {{args: import("../canvas.js").DeclutterImageWithText, declutterMode: import('../../style/Style.js').DeclutterMode}} */ (
               instruction[15]
             );
 
@@ -894,7 +920,7 @@ class Executor {
             /** @type {ReplayImageOrLabelArgs} */
             const args = [
               context,
-              contextScale,
+              scaledCanvasSize,
               image,
               dimensions,
               opacity,
@@ -906,44 +932,59 @@ class Executor {
                 : null,
             ];
             if (declutterTree) {
-              if (declutterMode === 'none') {
-                // not rendered in declutter group
-                continue;
-              } else if (declutterMode === 'obstacle') {
-                // will always be drawn, thus no collision detection, but insert as obstacle
-                declutterTree.insert(dimensions.declutterBox);
-                continue;
-              } else {
-                let imageArgs;
-                let imageDeclutterBox;
-                if (declutterImageWithText) {
-                  const index = dd - d;
-                  if (!declutterImageWithText[index]) {
-                    // We now have the image for an image+text combination.
-                    declutterImageWithText[index] = args;
-                    // Don't render anything for now, wait for the text.
-                    continue;
-                  }
-                  imageArgs = declutterImageWithText[index];
-                  delete declutterImageWithText[index];
-                  imageDeclutterBox = getDeclutterBox(imageArgs);
-                  if (declutterTree.collides(imageDeclutterBox)) {
-                    continue;
-                  }
-                }
-                if (declutterTree.collides(dimensions.declutterBox)) {
+              let imageArgs, imageDeclutterMode, imageDeclutterBox;
+              if (declutterImageWithText) {
+                const index = dd - d;
+                if (!declutterImageWithText[index]) {
+                  // We now have the image for an image+text combination.
+                  declutterImageWithText[index] = {args, declutterMode};
+                  // Don't render anything for now, wait for the text.
                   continue;
                 }
-                if (imageArgs) {
-                  // We now have image and text for an image+text combination.
+                const imageDeclutter = declutterImageWithText[index];
+                imageArgs = imageDeclutter.args;
+                imageDeclutterMode = imageDeclutter.declutterMode;
+                delete declutterImageWithText[index];
+                imageDeclutterBox = getDeclutterBox(imageArgs);
+              }
+              // We now have image and text for an image+text combination.
+              let renderImage, renderText;
+              if (
+                imageArgs &&
+                (imageDeclutterMode !== 'declutter' ||
+                  !declutterTree.collides(imageDeclutterBox))
+              ) {
+                renderImage = true;
+              }
+              if (
+                declutterMode !== 'declutter' ||
+                !declutterTree.collides(dimensions.declutterBox)
+              ) {
+                renderText = true;
+              }
+              if (
+                imageDeclutterMode === 'declutter' &&
+                declutterMode === 'declutter'
+              ) {
+                const render = renderImage && renderText;
+                renderImage = render;
+                renderText = render;
+              }
+              if (renderImage) {
+                if (imageDeclutterMode !== 'none') {
                   declutterTree.insert(imageDeclutterBox);
-                  // Render the image before we render the text.
-                  this.replayImageOrLabel_.apply(this, imageArgs);
                 }
-                declutterTree.insert(dimensions.declutterBox);
+                this.replayImageOrLabel_.apply(this, imageArgs);
+              }
+              if (renderText) {
+                if (declutterMode !== 'none') {
+                  declutterTree.insert(dimensions.declutterBox);
+                }
+                this.replayImageOrLabel_.apply(this, args);
               }
+            } else {
+              this.replayImageOrLabel_.apply(this, args);
             }
-            this.replayImageOrLabel_.apply(this, args);
           }
           ++i;
           break;
@@ -964,6 +1005,7 @@ class Executor {
             /** @type {number} */ (instruction[13]),
             /** @type {number} */ (instruction[13]),
           ];
+          declutterMode = instruction[14] || 'declutter';
 
           const textState = this.textStates[textKey];
           const font = textState.font;
@@ -1039,13 +1081,14 @@ class Executor {
                   );
                   if (
                     declutterTree &&
+                    declutterMode === 'declutter' &&
                     declutterTree.collides(dimensions.declutterBox)
                   ) {
                     break drawChars;
                   }
                   replayImageOrLabelArgs.push([
                     context,
-                    contextScale,
+                    scaledCanvasSize,
                     label,
                     dimensions,
                     1,
@@ -1081,13 +1124,14 @@ class Executor {
                   );
                   if (
                     declutterTree &&
+                    declutterMode === 'declutter' &&
                     declutterTree.collides(dimensions.declutterBox)
                   ) {
                     break drawChars;
                   }
                   replayImageOrLabelArgs.push([
                     context,
-                    contextScale,
+                    scaledCanvasSize,
                     label,
                     dimensions,
                     1,
@@ -1096,7 +1140,7 @@ class Executor {
                   ]);
                 }
               }
-              if (declutterTree) {
+              if (declutterTree && declutterMode !== 'none') {
                 declutterTree.load(replayImageOrLabelArgs.map(getDeclutterBox));
               }
               for (let i = 0, ii = replayImageOrLabelArgs.length; i < ii; ++i) {
@@ -1201,7 +1245,7 @@ class Executor {
 
   /**
    * @param {CanvasRenderingContext2D} context Context.
-   * @param {number} contextScale Scale of the context.
+   * @param {import('../../size.js').Size} scaledCanvasSize Scaled canvas size.
    * @param {import("../../transform.js").Transform} transform Transform.
    * @param {number} viewRotation View rotation.
    * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
@@ -1209,7 +1253,7 @@ class Executor {
    */
   execute(
     context,
-    contextScale,
+    scaledCanvasSize,
     transform,
     viewRotation,
     snapToPixel,
@@ -1218,7 +1262,7 @@ class Executor {
     this.viewRotation_ = viewRotation;
     this.execute_(
       context,
-      contextScale,
+      scaledCanvasSize,
       transform,
       this.instructions,
       snapToPixel,
@@ -1248,7 +1292,7 @@ class Executor {
     this.viewRotation_ = viewRotation;
     return this.execute_(
       context,
-      1,
+      [context.canvas.width, context.canvas.height],
       transform,
       this.hitDetectionInstructions,
       true,

package/render/canvas/ExecutorGroup.d.ts

@@ -6,6 +6,21 @@
  * @return {Array<number>} An array with indexes within a circle.
  */
 export function getPixelIndexArray(radius: number): Array<number>;
+/**
+ * @const
+ * @type {Array<import("../canvas.js").BuilderType>}
+ */
+export const ALL: Array<import("../canvas.js").BuilderType>;
+/**
+ * @const
+ * @type {Array<import("../canvas.js").BuilderType>}
+ */
+export const DECLUTTER: Array<import("../canvas.js").BuilderType>;
+/**
+ * @const
+ * @type {Array<import("../canvas.js").BuilderType>}
+ */
+export const NON_DECLUTTER: Array<import("../canvas.js").BuilderType>;
 export default ExecutorGroup;
 declare class ExecutorGroup {
     /**
@@ -19,10 +34,11 @@ declare class ExecutorGroup {
      * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions
      * The serializable instructions.
      * @param {number} [renderBuffer] Optional rendering buffer.
+     * @param {boolean} [deferredRendering] Enable deferred rendering with renderDeferred().
      */
     constructor(maxExtent: import("../../extent.js").Extent, resolution: number, pixelRatio: number, overlaps: boolean, allInstructions: {
         [x: string]: any;
-    }, renderBuffer?: number | undefined);
+    }, renderBuffer?: number | undefined, deferredRendering?: boolean | undefined);
     /**
      * @private
      * @type {import("../../extent.js").Extent}
@@ -50,7 +66,7 @@ declare class ExecutorGroup {
     private renderBuffer_;
     /**
      * @private
-     * @type {!Object<string, !Object<import("../canvas.js").BuilderType, import("./Executor").default>>}
+     * @type {!Object<string, !Object<string, import("./Executor").default>>}
      */
     private executorsByZIndex_;
     /**
@@ -63,6 +79,15 @@ declare class ExecutorGroup {
      * @type {import("../../transform.js").Transform}
      */
     private hitDetectionTransform_;
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    private renderedContext_;
+    /**
+     * @type {Array<Array<import("./ZIndexContext.js").default>>}
+     */
+    deferredZIndexContexts_: Array<Array<import("./ZIndexContext.js").default>>;
     /**
      * @param {CanvasRenderingContext2D} context Context.
      * @param {import("../../transform.js").Transform} transform Transform.
@@ -71,7 +96,8 @@ declare class ExecutorGroup {
     /**
      * Create executors and populate them using the provided instructions.
      * @private
-     * @param {!Object<string, !Object<import("../canvas.js").BuilderType, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+     * @param {!Object<string, !Object<string, import("../canvas.js").SerializableInstructions>>} allInstructions The serializable instructions
+     * @param {boolean} deferredRendering Enable deferred rendering.
      */
     private createExecutors_;
     /**
@@ -100,15 +126,19 @@ declare class ExecutorGroup {
      */
     isEmpty(): boolean;
     /**
-     * @param {CanvasRenderingContext2D} context Context.
-     * @param {number} contextScale Scale of the context.
+     * @param {CanvasRenderingContext2D} targetContext Context.
+     * @param {import('../../size.js').Size} scaledCanvasSize Scale of the context.
      * @param {import("../../transform.js").Transform} transform Transform.
      * @param {number} viewRotation View rotation.
      * @param {boolean} snapToPixel Snap point symbols and test to integer pixel.
      * @param {Array<import("../canvas.js").BuilderType>} [builderTypes] Ordered replay types to replay.
-     *     Default is {@link module:ol/render/replay~ORDER}
-     * @param {import("rbush").default} [declutterTree] Declutter tree.
-     */
-    execute(context: CanvasRenderingContext2D, contextScale: number, transform: import("../../transform.js").Transform, viewRotation: number, snapToPixel: boolean, builderTypes?: import("../canvas.js").BuilderType[] | undefined, declutterTree?: any): void;
+     *     Default is {@link module:ol/render/replay~ALL}
+     * @param {import("rbush").default|null} [declutterTree] Declutter tree.
+     *     When set to null, no decluttering is done, even when the executor group has a `ZIndexContext`.
+     */
+    execute(targetContext: CanvasRenderingContext2D, scaledCanvasSize: import('../../size.js').Size, transform: import("../../transform.js").Transform, viewRotation: number, snapToPixel: boolean, builderTypes?: import("../canvas.js").BuilderType[] | undefined, declutterTree?: any | null): void;
+    getDeferredZIndexContexts(): import("./ZIndexContext.js").default[][];
+    getRenderedContext(): CanvasRenderingContext2D;
+    renderDeferred(): void;
 }
 //# sourceMappingURL=ExecutorGroup.d.ts.map

package/render/canvas/ExecutorGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutorGroup.d.ts","sourceRoot":"","sources":["ExecutorGroup.js"],"names":[],"mappings":"AAqXA;;;;;;GAMG;AACH,2CAHW,MAAM,GACL,MAAM,MAAM,CAAC,CA2CxB;;AAhZD;IACE;;;;;;;;;;;OAWG;IACH,uBAXW,OAAO,iBAAiB,EAAE,MAAM,cAIhC,MAAM,cACN,MAAM,YACN,OAAO;YACC,MAAM;0CA6DxB;IAjDC;;;OAGG;IACH,mBAA2B;IAE3B;;;OAGG;IACH,kBAAyB;IAEzB;;;OAGG;IACH,oBAA6B;IAE7B;;;OAGG;IACH,oBAA6B;IAE7B;;;OAGG;IACH,sBAAiC;IAEjC;;;OAGG;IACH,2BAA4B;IAE5B;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,+BAA+C;IAKjD;;;OAGG;IACH,cAHW,wBAAwB,aACxB,OAAO,oBAAoB,EAAE,SAAS,QAUhD;IAED;;;;OAIG;IACH,yBAkBC;IAED;;;OAGG;IACH,wBAHW,MAAM,OAAO,cAAc,EAAE,WAAW,CAAC,GACxC,OAAO,CAYlB;IAED;;;;;;;;;OASG;IACH,0CATW,OAAO,qBAAqB,EAAE,UAAU,cACxC,MAAM,YACN,MAAM,gBACN,MAAM,mBACG,OAAO,kBAAkB,EAAE,WAAW,QAAE,OAAO,8BAA8B,EAAE,OAAO,QAAE,MAAM,6BACvG,MAAM,OAAO,kBAAkB,EAAE,WAAW,CAAC,iBA4HvD;IAED;;;OAGG;IACH,yBAHW,OAAO,oBAAoB,EAAE,SAAS,GACrC,MAAM,MAAM,CAAC,GAAC,IAAI,CAc7B;IAED;;OAEG;IACH,WAFY,OAAO,CAIlB;IAED;;;;;;;;;OASG;IACH,iBATW,wBAAwB,gBACxB,MAAM,aACN,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,eACN,OAAO,8FAoDjB;CACF"}
+{"version":3,"file":"ExecutorGroup.d.ts","sourceRoot":"","sources":["ExecutorGroup.js"],"names":[],"mappings":"AA4bA;;;;;;GAMG;AACH,2CAHW,MAAM,GACL,MAAM,MAAM,CAAC,CA2CxB;AA7dD;;;GAGG;AACH,kBAFU,MAAM,OAAO,cAAc,EAAE,WAAW,CAAC,CASjD;AAEF;;;GAGG;AACH,wBAFU,MAAM,OAAO,cAAc,EAAE,WAAW,CAAC,CAER;AAE3C;;;GAGG;AACH,4BAFU,MAAM,OAAO,cAAc,EAAE,WAAW,CAAC,CAIjD;;AAEF;IACE;;;;;;;;;;;;OAYG;IACH,uBAZW,OAAO,iBAAiB,EAAE,MAAM,cAIhC,MAAM,cACN,MAAM,YACN,OAAO;YACC,MAAM;mFA0ExB;IA5DC;;;OAGG;IACH,mBAA2B;IAE3B;;;OAGG;IACH,kBAAyB;IAEzB;;;OAGG;IACH,oBAA6B;IAE7B;;;OAGG;IACH,oBAA6B;IAE7B;;;OAGG;IACH,sBAAiC;IAEjC;;;OAGG;IACH,2BAA4B;IAE5B;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,+BAA+C;IAE/C;;;OAGG;IACH,yBAA4B;IAE5B;;OAEG;IACH,yBAFU,MAAM,MAAM,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAE3B;IAKnC;;;OAGG;IACH,cAHW,wBAAwB,aACxB,OAAO,oBAAoB,EAAE,SAAS,QAUhD;IAED;;;;;OAKG;IACH,yBAmBC;IAED;;;OAGG;IACH,wBAHW,MAAM,OAAO,cAAc,EAAE,WAAW,CAAC,GACxC,OAAO,CAYlB;IAED;;;;;;;;;OASG;IACH,0CATW,OAAO,qBAAqB,EAAE,UAAU,cACxC,MAAM,YACN,MAAM,gBACN,MAAM,mBACG,OAAO,kBAAkB,EAAE,WAAW,QAAE,OAAO,8BAA8B,EAAE,OAAO,QAAE,MAAM,6BACvG,MAAM,OAAO,kBAAkB,EAAE,WAAW,CAAC,iBA4HvD;IAED;;;OAGG;IACH,yBAHW,OAAO,oBAAoB,EAAE,SAAS,GACrC,MAAM,MAAM,CAAC,GAAC,IAAI,CAc7B;IAED;;OAEG;IACH,WAFY,OAAO,CAIlB;IAED;;;;;;;;;;OAUG;IACH,uBAVW,wBAAwB,oBACxB,OAAO,eAAe,EAAE,IAAI,aAC5B,OAAO,oBAAoB,EAAE,SAAS,gBACtC,MAAM,eACN,OAAO,mFAGP,MAAwB,IAAI,QAmEtC;IAED,sEAEC;IAED,+CAEC;IAED,uBAOC;CACF"}