ol 10.7.1-dev.1765787011335 → 10.7.1-dev.1766068548052

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "10.7.1-dev.1765787011335",
+  "version": "10.7.1-dev.1766068548052",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",

package/render/canvas/style.js

@@ -756,7 +756,20 @@ function buildIcon(flatStyle, context) {
     flatStyle,
     prefix + 'anchor-y-units',
   );
-  const color = optionalColorLike(flatStyle, prefix + 'color');
+  const colorValue = getExpressionValue(flatStyle, prefix + 'color');
+  let color;
+  let evaluateColor = null;
+  if (colorValue !== undefined) {
+    const isColorExpression =
+      Array.isArray(colorValue) &&
+      colorValue.length > 0 &&
+      typeof colorValue[0] === 'string';
+    if (isColorExpression) {
+      evaluateColor = colorLikeEvaluator(flatStyle, prefix + 'color', context);
+    } else {
+      color = requireColorLike(colorValue, prefix + 'color');
+    }
+  }
   const crossOrigin = optionalString(flatStyle, prefix + 'cross-origin');
   const offset = optionalNumberArray(flatStyle, prefix + 'offset');
   const offsetOrigin = optionalIconOrigin(flatStyle, prefix + 'offset-origin');
@@ -768,12 +781,11 @@ function buildIcon(flatStyle, context) {
     prefix + 'declutter-mode',
   );
 
-  const icon = new Icon({
+  const iconOptions = {
     src,
     anchorOrigin,
     anchorXUnits,
     anchorYUnits,
-    color,
     crossOrigin,
     offset,
     offsetOrigin,
@@ -781,9 +793,22 @@ function buildIcon(flatStyle, context) {
     width,
     size,
     declutterMode,
-  });
+  };
+
+  let icon = null;
 
   return function (context) {
+    if (!icon) {
+      // lazily create the icon to allow for expression evaluation
+      const initialColor = evaluateColor ? evaluateColor(context) : color;
+      icon = new Icon(
+        initialColor !== undefined
+          ? Object.assign({}, iconOptions, {color: initialColor})
+          : Object.assign({}, iconOptions),
+      );
+    } else if (evaluateColor) {
+      icon.setColor(evaluateColor(context));
+    }
     if (evaluateOpacity) {
       icon.setOpacity(evaluateOpacity(context));
     }
@@ -1311,19 +1336,6 @@ function optionalDeclutterMode(flatStyle, property) {
   return encoded;
 }
 
-/**
- * @param {FlatStyle} flatStyle The flat style.
- * @param {string} property The symbolizer property.
- * @return {string|Array<number>|undefined} A string or an array of color values or undefined.
- */
-function optionalColorLike(flatStyle, property) {
-  const encoded = flatStyle[property];
-  if (encoded === undefined) {
-    return undefined;
-  }
-  return requireColorLike(encoded, property);
-}
-
 /**
  * @param {any} value The value.
  * @param {string} property The property.

package/style/Icon.d.ts

@@ -189,6 +189,16 @@ declare class Icon extends ImageStyle {
      * @api
      */
     getColor(): import("../color.js").Color;
+    /**
+     * Set the icon color.
+     *
+     * Warning: Repeatedly setting the color on an icon style
+     * causes the icon image to be re-created each time. This can have a
+     * severe performance impact.
+     *
+     * @param {import("../color.js").Color|string|null|undefined} color Color.
+     */
+    setColor(color: import("../color.js").Color | string | null | undefined): void;
     /**
      * Get the image icon.
      * @param {number} pixelRatio Pixel ratio.

package/style/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":";;;;8BAYa,UAAU,GAAG,QAAQ;;;;yBAKrB,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DtE;;;;GAIG;AACH;IACE;;OAEG;IACH,sBAFW,OAAO,EA0MjB;IAtKC;;;OAGG;IACH,gBAAyE;IAEzE;;;OAGG;IACH,0BAA6B;IAE7B;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,qBACgE;IA0ChE;;;OAGG;IACH,eAAyE;IAEzE;;;OAGG;IACH,mBAMC;IAED;;;OAGG;IACH,gBAAqE;IACrE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,gBAAmB;IAEnB;;;OAGG;IACH,cAA6D;IAoBvD,qCAA8B;IA4BtC;;;;;OAKG;IACH,kBAJY,IAAI,CAoCf;IA8DD;;;;;;OAMG;IACH,kBAHW,KAAK,CAAC,MAAM,CAAC,QAMvB;IAED;;;;OAIG;IACH,YAHY,OAAO,aAAa,EAAE,KAAK,CAKtC;IAED;;;;;;;OAOG;IACH,8BANW,MAAM,GACL,gBAAgB,GAAC,iBAAiB,GAAC,eAAe,GAAC,WAAW,CAOzE;IA6BD;;;OAGG;IACH,iCAHY,gBAAgB,GAAC,iBAAiB,GAAC,eAAe,GAAC,WAAW,CAKzE;IAsCD;;;;OAIG;IACH,UAHY,MAAM,GAAC,SAAS,CAK3B;IAED;;;;OAIG;IACH,YAHW,MAAM,QAWhB;IAYD;;;;OAIG;IACH,YAHY,MAAM,CAYjB;IAED;;;;OAIG;IACH,aAHY,MAAM,CAYjB;CAgDF;uBAllBsB,YAAY"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":";;;;8BAYa,UAAU,GAAG,QAAQ;;;;yBAKrB,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DtE;;;;GAIG;AACH;IACE;;OAEG;IACH,sBAFW,OAAO,EA0MjB;IAtKC;;;OAGG;IACH,gBAAyE;IAEzE;;;OAGG;IACH,0BAA6B;IAE7B;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,qBACgE;IA0ChE;;;OAGG;IACH,eAAyE;IAEzE;;;OAGG;IACH,mBAMC;IAED;;;OAGG;IACH,gBAAqE;IACrE;;;OAGG;IACH,sBACwE;IAExE;;;OAGG;IACH,gBAAmB;IAEnB;;;OAGG;IACH,cAA6D;IAoBvD,qCAA8B;IA4BtC;;;;;OAKG;IACH,kBAJY,IAAI,CAoCf;IA8DD;;;;;;OAMG;IACH,kBAHW,KAAK,CAAC,MAAM,CAAC,QAMvB;IAED;;;;OAIG;IACH,YAHY,OAAO,aAAa,EAAE,KAAK,CAKtC;IAED;;;;;;;;OAQG;IACH,gBAFW,OAAO,aAAa,EAAE,KAAK,GAAC,MAAM,GAAC,IAAI,GAAC,SAAS,QA2B3D;IAED;;;;;;;OAOG;IACH,8BANW,MAAM,GACL,gBAAgB,GAAC,iBAAiB,GAAC,eAAe,GAAC,WAAW,CAOzE;IA6BD;;;OAGG;IACH,iCAHY,gBAAgB,GAAC,iBAAiB,GAAC,eAAe,GAAC,WAAW,CAKzE;IAsCD;;;;OAIG;IACH,UAHY,MAAM,GAAC,SAAS,CAK3B;IAED;;;;OAIG;IACH,YAHW,MAAM,QAWhB;IAYD;;;;OAIG;IACH,YAHY,MAAM,CAYjB;IAED;;;;OAIG;IACH,aAHY,MAAM,CAYjB;CAgDF;uBAtnBsB,YAAY"}

package/style/Icon.js

@@ -406,6 +406,42 @@ class Icon extends ImageStyle {
     return this.color_;
   }
 
+  /**
+   * Set the icon color.
+   *
+   * Warning: Repeatedly setting the color on an icon style
+   * causes the icon image to be re-created each time. This can have a
+   * severe performance impact.
+   *
+   * @param {import("../color.js").Color|string|null|undefined} color Color.
+   */
+  setColor(color) {
+    const nextColor = color ? asArray(color) : null;
+    if (
+      this.color_ === nextColor ||
+      (this.color_ &&
+        nextColor &&
+        this.color_.length === nextColor.length &&
+        this.color_.every((value, index) => value === nextColor[index]))
+    ) {
+      // Discard if the color hasn't changed.
+      return;
+    }
+
+    this.color_ = nextColor;
+    const src = this.getSrc();
+    const image = src !== undefined ? null : this.getHitDetectionImage();
+    const imageState =
+      src !== undefined ? ImageState.IDLE : this.iconImage_.getImageState();
+    this.iconImage_ = getIconImage(
+      image,
+      src,
+      this.crossOrigin_,
+      imageState,
+      this.color_,
+    );
+  }
+
   /**
    * Get the image icon.
    * @param {number} pixelRatio Pixel ratio.

package/util.js

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