ol 10.2.2-dev.1730916385053 → 10.2.2-dev.1730987055849

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "10.2.2-dev.1730916385053",
+  "version": "10.2.2-dev.1730987055849",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",

package/style/Fill.d.ts

@@ -56,6 +56,10 @@ declare class Fill {
      * @api
      */
     setColor(color: import("../color.js").Color | import("../colorlike.js").ColorLike | import("../colorlike.js").PatternDescriptor | null): void;
+    /**
+     * @return {string} Key of the fill for cache lookup.
+     */
+    getKey(): string;
     /**
      * @return {boolean} The fill style is loading an image pattern.
      */

package/style/Fill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fill.d.ts","sourceRoot":"","sources":["Fill.js"],"names":[],"mappings":";;;;;;;;;;;AAOA;;;;;;;GAOG;AAEH;;;;GAIG;AACH;IACE;;OAEG;IACH,2CAiBC;IAdC;;;OAGG;IACH,sBAAyB;IAEzB;;;OAGG;IACH,eAAkB;IAMpB;;;;OAIG;IACH,SAHY,IAAI,CAQf;IAED;;;;OAIG;IACH,YAHY,OAAO,aAAa,EAAE,KAAK,GAAC,OAAO,iBAAiB,EAAE,SAAS,GAAC,OAAO,iBAAiB,EAAE,iBAAiB,GAAC,IAAI,CAK3H;IAED;;;;;OAKG;IACH,gBAHW,OAAO,aAAa,EAAE,KAAK,GAAC,OAAO,iBAAiB,EAAE,SAAS,GAAC,OAAO,iBAAiB,EAAE,iBAAiB,GAAC,IAAI,QAwB1H;IAED;;OAEG;IACH,WAFY,OAAO,CAIlB;IAED;;OAEG;IACH,SAFY,OAAO,CAAC,IAAI,CAAC,CAIxB;CACF"}
+{"version":3,"file":"Fill.d.ts","sourceRoot":"","sources":["Fill.js"],"names":[],"mappings":";;;;;;;;;;;AASA;;;;;;;GAOG;AAEH;;;;GAIG;AACH;IACE;;OAEG;IACH,2CAiBC;IAdC;;;OAGG;IACH,sBAAyB;IAEzB;;;OAGG;IACH,eAAkB;IAMpB;;;;OAIG;IACH,SAHY,IAAI,CAQf;IAED;;;;OAIG;IACH,YAHY,OAAO,aAAa,EAAE,KAAK,GAAC,OAAO,iBAAiB,EAAE,SAAS,GAAC,OAAO,iBAAiB,EAAE,iBAAiB,GAAC,IAAI,CAK3H;IAED;;;;;OAKG;IACH,gBAHW,OAAO,aAAa,EAAE,KAAK,GAAC,OAAO,iBAAiB,EAAE,SAAS,GAAC,OAAO,iBAAiB,EAAE,iBAAiB,GAAC,IAAI,QAwB1H;IAED;;OAEG;IACH,UAFY,MAAM,CAYjB;IAED;;OAEG;IACH,WAFY,OAAO,CAIlB;IAED;;OAEG;IACH,SAFY,OAAO,CAAC,IAAI,CAAC,CAIxB;CACF"}

package/style/Fill.js

@@ -3,7 +3,9 @@
  */
 
 import ImageState from '../ImageState.js';
+import {asArray} from '../color.js';
 import {get as getIconImage} from './IconImage.js';
+import {getUid} from '../util.js';
 
 /**
  * @typedef {Object} Options
@@ -92,6 +94,21 @@ class Fill {
     this.color_ = color;
   }
 
+  /**
+   * @return {string} Key of the fill for cache lookup.
+   */
+  getKey() {
+    const fill = this.getColor();
+    if (!fill) {
+      return '';
+    }
+    return fill instanceof CanvasPattern || fill instanceof CanvasGradient
+      ? getUid(fill)
+      : typeof fill === 'object' && 'src' in fill
+        ? fill.src + ':' + fill.offset
+        : asArray(fill).toString();
+  }
+
   /**
    * @return {boolean} The fill style is loading an image pattern.
    */

package/style/IconImageCache.d.ts

@@ -72,8 +72,8 @@ declare class IconImageCache {
      */
     set(src: string, crossOrigin: string | null, color: import("../color.js").Color | string | null, iconImage: import("./IconImage.js").default | null, pattern?: boolean | undefined): void;
     /**
-     * Set the cache size of the icon cache. Default is `32`. Change this value when
-     * your map uses more than 32 different icon images and you are not caching icon
+     * Set the cache size of the icon cache. Default is `1024`. Change this value when
+     * your map uses more than 1024 different icon images and you are not caching icon
      * styles on the application level.
      * @param {number} maxCacheSize Cache max size.
      * @api

package/style/IconImageCache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconImageCache.d.ts","sourceRoot":"","sources":["IconImageCache.js"],"names":[],"mappings":"AA4IA;;;;;GAKG;AACH,iCALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,MAAM,CAKjB;;AAID;;;;GAIG;AACH,oCAA2C;AAvJ3C;;;GAGG;AACH;IAEI;;;OAGG;IACH,eAAgB;IAEhB;;;OAGG;IACH,sBAAuB;IAEvB;;;OAGG;IACH,mBAAmB;IAEnB;;;OAGG;IACH,sBAAuB;IAGzB;;OAEG;IACH,cAIC;IAED;;OAEG;IACH,kBAFY,OAAO,CAIlB;IAED;;OAEG;IACH,eAYC;IAED;;;;;OAKG;IACH,SALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,OAAO,gBAAgB,EAAE,OAAO,CAK3C;IAED;;;;;OAKG;IACH,gBALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,aAAa,CAKxB;IAED;;;;;;OAMG;IACH,SANW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,aACvC,OAAO,gBAAgB,EAAE,OAAO,GAAC,IAAI,uCA4B/C;IAED;;;;;;OAMG;IACH,sBAHW,MAAM,QAMhB;CACF"}
+{"version":3,"file":"IconImageCache.d.ts","sourceRoot":"","sources":["IconImageCache.js"],"names":[],"mappings":"AA4IA;;;;;GAKG;AACH,iCALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,MAAM,CAKjB;;AAID;;;;GAIG;AACH,oCAA2C;AAvJ3C;;;GAGG;AACH;IAEI;;;OAGG;IACH,eAAgB;IAEhB;;;OAGG;IACH,sBAAuB;IAEvB;;;OAGG;IACH,mBAAmB;IAEnB;;;OAGG;IACH,sBAAyB;IAG3B;;OAEG;IACH,cAIC;IAED;;OAEG;IACH,kBAFY,OAAO,CAIlB;IAED;;OAEG;IACH,eAYC;IAED;;;;;OAKG;IACH,SALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,OAAO,gBAAgB,EAAE,OAAO,CAK3C;IAED;;;;;OAKG;IACH,gBALW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GACtC,aAAa,CAKxB;IAED;;;;;;OAMG;IACH,SANW,MAAM,eACL,MAAM,OAAA,SACP,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,aACvC,OAAO,gBAAgB,EAAE,OAAO,GAAC,IAAI,uCA4B/C;IAED;;;;;;OAMG;IACH,sBAHW,MAAM,QAMhB;CACF"}

package/style/IconImageCache.js

@@ -33,7 +33,7 @@ class IconImageCache {
      * @type {number}
      * @private
      */
-    this.maxCacheSize_ = 32;
+    this.maxCacheSize_ = 1024;
   }
 
   /**
@@ -126,8 +126,8 @@ class IconImageCache {
   }
 
   /**
-   * Set the cache size of the icon cache. Default is `32`. Change this value when
-   * your map uses more than 32 different icon images and you are not caching icon
+   * Set the cache size of the icon cache. Default is `1024`. Change this value when
+   * your map uses more than 1024 different icon images and you are not caching icon
    * styles on the application level.
    * @param {number} maxCacheSize Cache max size.
    * @api

package/style/RegularShape.d.ts

@@ -126,11 +126,6 @@ declare class RegularShape extends ImageStyle {
      * @param {Options} options Options.
      */
     constructor(options: Options);
-    /**
-     * @private
-     * @type {Object<number, HTMLCanvasElement>}
-     */
-    private canvases_;
     /**
      * @private
      * @type {HTMLCanvasElement|null}

package/style/RegularShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegularShape.d.ts","sourceRoot":"","sources":["RegularShape.js"],"names":[],"mappings":";;;;;;;;;;;;;YAsBc,MAAM;;;;YAEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAeN,OAAO,iBAAiB,EAAE,SAAS,GAAC,SAAS;;;;iBAC7C,MAAM;;;;UACN,MAAM;;;;aACN,aAAa;;;;cACb,KAAK,CAAC,MAAM,CAAC,GAAC,IAAI;;;;oBAClB,MAAM;;;;cACN,cAAc;;;;gBACd,MAAM;;AA5BpB;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;GAUG;AAEH;;;;;;GAMG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EA2FjB;IA7EC;;;OAGG;IACH,kBAAc;IAEd;;;OAGG;IACH,4BAA+B;IAE/B;;;OAGG;IACH,cAA6D;IAE7D;;;OAGG;IACH,gBAAqB;IAErB;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,kBAFU,MAAM,CAEY;IAE5B;;;OAGG;IACH,iBAA+B;IAE/B;;;OAGG;IACH,eAA6D;IAE7D;;;OAGG;IACH,gBAAmE;IAEnE;;;OAGG;IACH,cAAU;IAEV;;;OAGG;IACH,uBAAmB;IAEnB;;OAEG;IACH,oBAGuB;IAOzB;;;;;OAKG;IACH,kBAJY,YAAY,CAqBvB;IAqBD;;;;OAIG;IACH,YAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,WAHY,OAAO,WAAW,EAAE,OAAO,GAAC,IAAI,CAK3C;IAED;;;;OAIG;IACH,cAHW,OAAO,WAAW,EAAE,OAAO,GAAC,IAAI,QAM1C;IAED;;;OAGG;IACH,iCAHY,iBAAiB,CAU5B;IAED;;;;;;OAMG;IACH,8BALW,MAAM,GACL,iBAAiB,CAkB5B;IAsCD;;;;OAIG;IACH,aAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,aAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,cAHY,MAAM,GAAC,SAAS,CAK3B;IAYD;;;;OAIG;IACH,aAHY,OAAO,aAAa,EAAE,OAAO,GAAC,IAAI,CAK7C;IAED;;;;OAIG;IACH,kBAHW,OAAO,aAAa,EAAE,OAAO,GAAC,IAAI,QAM5C;IAoBD;;;;;;;OAOG;IACH,+BAgFC;IAED;;;OAGG;IACH,iCAHY,aAAa,CAoCxB;IAED;;OAEG;IACH,yBAMC;IAED;;;;;OAKG;IACH,cA2BC;IAED;;;;OAIG;IACH,kCAuBC;IAED;;;OAGG;IACH,oBAmBC;IAED;;;;OAIG;IACH,gCAmBC;CAQF;uBAlnBsB,YAAY"}
+{"version":3,"file":"RegularShape.d.ts","sourceRoot":"","sources":["RegularShape.js"],"names":[],"mappings":";;;;;;;;;;;;;YAwBc,MAAM;;;;YAEN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAeN,OAAO,iBAAiB,EAAE,SAAS,GAAC,SAAS;;;;iBAC7C,MAAM;;;;UACN,MAAM;;;;aACN,aAAa;;;;cACb,KAAK,CAAC,MAAM,CAAC,GAAC,IAAI;;;;oBAClB,MAAM;;;;cACN,cAAc;;;;gBACd,MAAM;;AA5BpB;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;GAUG;AAEH;;;;;;GAMG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAqFjB;IAvEC;;;OAGG;IACH,4BAA+B;IAE/B;;;OAGG;IACH,cAA6D;IAE7D;;;OAGG;IACH,gBAAqB;IAErB;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,kBAFU,MAAM,CAEY;IAE5B;;;OAGG;IACH,iBAA+B;IAE/B;;;OAGG;IACH,eAA6D;IAE7D;;;OAGG;IACH,gBAAmE;IAEnE;;;OAGG;IACH,cAAU;IAEV;;;OAGG;IACH,uBAAmB;IAEnB;;OAEG;IACH,oBAGuB;IAOzB;;;;;OAKG;IACH,kBAJY,YAAY,CAqBvB;IAqBD;;;;OAIG;IACH,YAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,WAHY,OAAO,WAAW,EAAE,OAAO,GAAC,IAAI,CAK3C;IAED;;;;OAIG;IACH,cAHW,OAAO,WAAW,EAAE,OAAO,GAAC,IAAI,QAM1C;IAED;;;OAGG;IACH,iCAHY,iBAAiB,CAU5B;IAED;;;;;;OAMG;IACH,8BALW,MAAM,GACL,iBAAiB,CA6B5B;IAsCD;;;;OAIG;IACH,aAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,aAHY,MAAM,CAKjB;IAED;;;;OAIG;IACH,cAHY,MAAM,GAAC,SAAS,CAK3B;IAYD;;;;OAIG;IACH,aAHY,OAAO,aAAa,EAAE,OAAO,GAAC,IAAI,CAK7C;IAED;;;;OAIG;IACH,kBAHW,OAAO,aAAa,EAAE,OAAO,GAAC,IAAI,QAM5C;IAoBD;;;;;;;OAOG;IACH,+BAgFC;IAED;;;OAGG;IACH,iCAHY,aAAa,CAoCxB;IAED;;OAEG;IACH,yBAKC;IAED;;;;;OAKG;IACH,cA2BC;IAED;;;;OAIG;IACH,kCAuBC;IAED;;;OAGG;IACH,oBAmBC;IAED;;;;OAIG;IACH,gCAmBC;CAQF;uBAvnBsB,YAAY"}

package/style/RegularShape.js

@@ -2,6 +2,7 @@
  * @module ol/style/RegularShape
  */
 
+import IconImage from './IconImage.js';
 import ImageState from '../ImageState.js';
 import ImageStyle from './Image.js';
 import {asArray} from '../color.js';
@@ -15,6 +16,7 @@ import {
   defaultMiterLimit,
   defaultStrokeStyle,
 } from '../render/canvas.js';
+import {shared as iconImageCache} from './IconImageCache.js';
 
 /**
  * Specify radius for regular polygons, or both radius and radius2 for stars.
@@ -70,12 +72,6 @@ class RegularShape extends ImageStyle {
       declutterMode: options.declutterMode,
     });
 
-    /**
-     * @private
-     * @type {Object<number, HTMLCanvasElement>}
-     */
-    this.canvases_;
-
     /**
      * @private
      * @type {HTMLCanvasElement|null}
@@ -242,7 +238,13 @@ class RegularShape extends ImageStyle {
    * @override
    */
   getImage(pixelRatio) {
-    let image = this.canvases_[pixelRatio];
+    const fillKey = this.fill_?.getKey();
+    const cacheKey =
+      `${pixelRatio},${this.angle_},${this.radius},${this.radius2_},${this.points_},${fillKey}` +
+      Object.values(this.renderOptions_).join(',');
+    let image = /** @type {HTMLCanvasElement} */ (
+      iconImageCache.get(cacheKey, null, null)?.getImage(1)
+    );
     if (!image) {
       const renderOptions = this.renderOptions_;
       const context = createCanvasContext2D(
@@ -252,7 +254,12 @@ class RegularShape extends ImageStyle {
       this.draw_(renderOptions, context, pixelRatio);
 
       image = context.canvas;
-      this.canvases_[pixelRatio] = image;
+      iconImageCache.set(
+        cacheKey,
+        null,
+        null,
+        new IconImage(image, undefined, null, ImageState.LOADED, null),
+      );
     }
     return image;
   }
@@ -502,7 +509,6 @@ class RegularShape extends ImageStyle {
   render() {
     this.renderOptions_ = this.createRenderOptions();
     const size = this.renderOptions_.size;
-    this.canvases_ = {};
     this.hitDetectionCanvas_ = null;
     this.size_ = [size, size];
   }

package/util.js

@@ -33,4 +33,4 @@ export function getUid(obj) {
  * OpenLayers version.
  * @type {string}
  */
-export const VERSION = '10.2.2-dev.1730916385053';
+export const VERSION = '10.2.2-dev.1730987055849';