Accept an object literal for static layer styling

2022-07-28 18:13:13 -06:00
parent d5086a7ab5
commit ab48290bd7
22 changed files with 705 additions and 174 deletions
--- a/config/jsdoc/api/conf.json
+++ b/config/jsdoc/api/conf.json
@@ -14,6 +14,7 @@
    ]
  },
  "plugins": [
+    "jsdoc-plugin-intersection",
    "config/jsdoc/plugins/markdown.cjs",
    "jsdoc-plugin-typescript",
    "config/jsdoc/plugins/inline-options.cjs",
--- a/examples/canvas-gradient-pattern.js
+++ b/examples/canvas-gradient-pattern.js
@@ -4,7 +4,6 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {fromLonLat} from '../src/ol/proj.js';

 // Gradient and pattern are in canvas pixel space, so we adjust for the
@@ -29,13 +28,11 @@ const vectorLayer = new VectorLayer({
    url: 'data/kml/states.kml',
    format: new KML({extractStyles: false}),
  }),
-  style: new Style({
-    fill: new Fill({color: gradient}),
-    stroke: new Stroke({
-      color: '#333',
-      width: 1,
-    }),
-  }),
+  style: {
+    'fill-color': gradient,
+    'stroke-width': 1,
+    'stroke-color': '#333',
+  },
 });

 const map = new Map({
--- a/examples/center.js
+++ b/examples/center.js
@@ -1,38 +1,27 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';

-/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
  url: 'data/geojson/switzerland.geojson',
  format: new GeoJSON(),
 });
-const style = new Style({
-  fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  image: new CircleStyle({
-    radius: 5,
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.6)',
-    }),
-    stroke: new Stroke({
-      color: '#319FD3',
-      width: 1,
-    }),
-  }),
-});
+
 const vectorLayer = new VectorLayer({
  source: source,
-  style: style,
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.6)',
+    'stroke-width': 1,
+    'stroke-color': '#319FD3',
+    'circle-radius': 5,
+    'circle-fill-color': 'rgba(255, 255, 255, 0.6)',
+    'circle-stroke-width': 1,
+    'circle-stroke-color': '#319FD3',
+  },
 });
+
 const view = new View({
  center: [0, 0],
  zoom: 1,
--- a/examples/custom-interactions.js
+++ b/examples/custom-interactions.js
@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 import {LineString, Point, Polygon} from '../src/ol/geom.js';
 import {
  Pointer as PointerInteraction,
@@ -147,22 +146,16 @@ const map = new Map({
      source: new VectorSource({
        features: [pointFeature, lineFeature, polygonFeature],
      }),
-      style: new Style({
-        image: new Icon({
-          anchor: [0.5, 46],
-          anchorXUnits: 'fraction',
-          anchorYUnits: 'pixels',
-          opacity: 0.95,
-          src: 'data/icon.png',
-        }),
-        stroke: new Stroke({
-          width: 3,
-          color: [255, 0, 0, 1],
-        }),
-        fill: new Fill({
-          color: [0, 0, 255, 0.6],
-        }),
-      }),
+      style: {
+        'icon-src': 'data/icon.png',
+        'icon-opacity': 0.95,
+        'icon-anchor': [0.5, 46],
+        'icon-anchor-x-units': 'fraction',
+        'icon-anchor-y-units': 'pixels',
+        'stroke-width': 3,
+        'stroke-color': [255, 0, 0, 1],
+        'fill-color': [0, 0, 255, 0.6],
+      },
    }),
  ],
  target: 'map',
--- a/examples/draw-and-modify-features.js
+++ b/examples/draw-and-modify-features.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Draw, Modify, Snap} from '../src/ol/interaction.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -13,21 +12,13 @@ const raster = new TileLayer({
 const source = new VectorSource();
 const vector = new VectorLayer({
  source: source,
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });

 // Limit multi-world panning to one world east and west of the real world.
--- a/examples/geographic.js
+++ b/examples/geographic.js
@@ -1,4 +1,3 @@
-import {Circle, Fill, Style} from '../src/ol/style.js';
 import {Feature, Map, Overlay, View} from '../src/ol/index.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Point} from '../src/ol/geom.js';
@@ -25,12 +24,10 @@ const map = new Map({
      source: new VectorSource({
        features: [new Feature(point)],
      }),
-      style: new Style({
-        image: new Circle({
-          radius: 9,
-          fill: new Fill({color: 'red'}),
-        }),
-      }),
+      style: {
+        'circle-radius': 9,
+        'circle-fill-color': 'red',
+      },
    }),
  ],
 });
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -17,21 +17,13 @@ const source = new VectorSource();

 const vector = new VectorLayer({
  source: source,
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });

 /**
--- a/examples/snap.js
+++ b/examples/snap.js
@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -11,21 +10,13 @@ const raster = new TileLayer({

 const vector = new VectorLayer({
  source: new VectorSource(),
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });

 const map = new Map({
--- a/examples/vector-wfs.js
+++ b/examples/vector-wfs.js
@@ -3,7 +3,6 @@ import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-import {Stroke, Style} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js';

@@ -24,12 +23,11 @@ const vectorSource = new VectorSource({

 const vector = new VectorLayer({
  source: vectorSource,
-  style: new Style({
-    stroke: new Stroke({
-      color: 'rgba(0, 0, 255, 1.0)',
-      width: 2,
-    }),
-  }),
+  style: {
+    'stroke-width': 0.75,
+    'stroke-color': 'white',
+    'fill-color': 'rgba(100,100,100,0.25)',
+  },
 });

 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
        "handlebars": "4.7.7",
        "jquery": "3.6.0",
        "jsdoc": "3.6.11",
+        "jsdoc-plugin-intersection": "^1.0.4",
        "jsdoc-plugin-typescript": "^2.1.1",
        "json-stringify-safe": "^5.0.1",
        "karma": "^6.3.8",
@@ -6306,6 +6307,12 @@
        "node": ">=12.0.0"
      }
    },
+    "node_modules/jsdoc-plugin-intersection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/jsdoc-plugin-intersection/-/jsdoc-plugin-intersection-1.0.4.tgz",
+      "integrity": "sha512-5OGv+aWpp0pYRMnhaUeqijesIi/xD2z8IIwIlK+JsQ0sXzMjiWT2YgNSvxcd476pRdh70Xmby/l7GD3NkWcKcQ==",
+      "dev": true
+    },
    "node_modules/jsdoc-plugin-typescript": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/jsdoc-plugin-typescript/-/jsdoc-plugin-typescript-2.1.1.tgz",
@@ -15040,6 +15047,12 @@
        }
      }
    },
+    "jsdoc-plugin-intersection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/jsdoc-plugin-intersection/-/jsdoc-plugin-intersection-1.0.4.tgz",
+      "integrity": "sha512-5OGv+aWpp0pYRMnhaUeqijesIi/xD2z8IIwIlK+JsQ0sXzMjiWT2YgNSvxcd476pRdh70Xmby/l7GD3NkWcKcQ==",
+      "dev": true
+    },
    "jsdoc-plugin-typescript": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/jsdoc-plugin-typescript/-/jsdoc-plugin-typescript-2.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
    "handlebars": "4.7.7",
    "jquery": "3.6.0",
    "jsdoc": "3.6.11",
+    "jsdoc-plugin-intersection": "^1.0.4",
    "jsdoc-plugin-typescript": "^2.1.1",
    "json-stringify-safe": "^5.0.1",
    "karma": "^6.3.8",
--- a/src/ol/layer/BaseVector.js
+++ b/src/ol/layer/BaseVector.js
@@ -3,10 +3,11 @@
 */
 import Layer from './Layer.js';
 import RBush from 'rbush';
-import {
+import Style, {
  createDefaultStyle,
  toFunction as toStyleFunction,
 } from '../style/Style.js';
+import {toStyle} from '../style/flat.js';

 /**
 * @template {import("../source/Vector.js").default|import("../source/VectorTile.js").default} VectorSourceType
@@ -49,7 +50,7 @@ import {
 * the fill and stroke styles of all of those layers regardless of z-index.  To opt out of this
 * behavior and place declutterd features with their own layer configure the layer with a `className`
 * other than `ol-layer`.
- * @property {import("../style/Style.js").StyleLike|null} [style] Layer style. When set to `null`, only
+ * @property {import("../style/Style.js").StyleLike|import("../style/flat.js").FlatStyleLike|null} [style] Layer style. When set to `null`, only
 * features that have their own style will be rendered. See {@link module:ol/style/Style~Style} for the default style
 * which will be used if this is not set.
 * @property {import("./Base.js").BackgroundColor} [background] Background color for the layer. If not specified, no background
@@ -249,12 +250,51 @@ class BaseVectorLayer extends Layer {
   * an array of styles. If set to `null`, the layer has no style (a `null` style),
   * so only features that have their own styles will be rendered in the layer. Call
   * `setStyle()` without arguments to reset to the default style. See
-   * {@link module:ol/style/Style~Style} for information on the default style.
-   * @param {import("../style/Style.js").StyleLike|null} [opt_style] Layer style.
+   * [the ol/style/Style module]{@link module:ol/style/Style~Style} for information on the default style.
+   *
+   * If your layer has a static style, you can use "flat" style object literals instead of
+   * using the `Style` and symbolizer constructors (`Fill`, `Stroke`, etc.).  See the documentation
+   * for the [flat style types]{@link module:ol/style/flat~FlatStyle} to see what properties are supported.
+   *
+   * @param {import("../style/Style.js").StyleLike|import("../style/flat.js").FlatStyleLike|null} [opt_style] Layer style.
   * @api
   */
  setStyle(opt_style) {
-    this.style_ = opt_style !== undefined ? opt_style : createDefaultStyle;
+    /**
+     * @type {import("../style/Style.js").StyleLike|null}
+     */
+    let style;
+
+    if (opt_style === undefined) {
+      style = createDefaultStyle;
+    } else if (opt_style === null) {
+      style = null;
+    } else if (typeof opt_style === 'function') {
+      style = opt_style;
+    } else if (opt_style instanceof Style) {
+      style = opt_style;
+    } else if (Array.isArray(opt_style)) {
+      const len = opt_style.length;
+
+      /**
+       * @type {Array<Style>}
+       */
+      const styles = new Array(len);
+
+      for (let i = 0; i < len; ++i) {
+        const s = opt_style[i];
+        if (s instanceof Style) {
+          styles[i] = s;
+        } else {
+          styles[i] = toStyle(s);
+        }
+      }
+      style = styles;
+    } else {
+      style = toStyle(opt_style);
+    }
+
+    this.style_ = style;
    this.styleFunction_ =
      opt_style === null ? undefined : toStyleFunction(this.style_);
    this.changed();
--- a/src/ol/style/flat.js
+++ b/src/ol/style/flat.js
@@ -0,0 +1,341 @@
+/**
+ * @module ol/style/flat
+ */
+
+import Circle from '../style/Circle.js';
+import Fill from './Fill.js';
+import Icon from './Icon.js';
+import RegularShape from './RegularShape.js';
+import Stroke from './Stroke.js';
+import Style from './Style.js';
+import Text from './Text.js';
+
+/**
+ * For static styling, the [layer.setStyle()]{@link module:ol/layer/Vector~VectorLayer#setStyle} method
+ * can be called with an object literal that has fill, stroke, text, icon, regular shape, and/or circle properties.
+ * @api
+ *
+ * @typedef {FlatFill & FlatStroke & FlatText & FlatIcon & FlatShape & FlatCircle} FlatStyle
+ */
+
+/**
+ * A flat style literal or an array of the same.
+ *
+ * @typedef {FlatStyle|Array<FlatStyle>} FlatStyleLike
+ */
+
+/**
+ * Fill style properties applied to polygon features.
+ *
+ * @typedef {Object} FlatFill
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [fill-color] The fill color.
+ */
+
+/**
+ * Stroke style properties applied to line strings and polygon boundaries.  To apply a stroke, at least one of
+ * `stroke-color` or `stroke-width` must be provided.
+ *
+ * @typedef {Object} FlatStroke
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [stroke-color] The stroke color.
+ * @property {number} [stroke-width] Stroke pixel width.
+ * @property {CanvasLineCap} [stroke-line-cap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [stroke-line-join='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {Array<number>} [stroke-line-dash] Line dash pattern.
+ * @property {number} [stroke-line-dash-offset=0] Line dash offset.
+ * @property {number} [stroke-miter-limit=10] Miter limit.
+ */
+
+/**
+ * Label style properties applied to all features.  At a minimum, a `text-value` must be provided.
+ *
+ * @typedef {Object} FlatText
+ * @property {string|Array<string>} [text-value] Text content or rich text content. For plain text provide a string, which can
+ * contain line breaks (`\n`). For rich text provide an array of text/font tuples. A tuple consists of the text to
+ * render and the font to use (or `''` to use the text style's font). A line break has to be a separate tuple (i.e. `'\n', ''`).
+ * **Example:** `['foo', 'bold 10px sans-serif', ' bar', 'italic 10px sans-serif', ' baz', '']` will yield "**foo** *bar* baz".
+ * **Note:** Rich text is not supported for the immediate rendering API.
+ * @property {string} [text-font] Font style as CSS `font` value, see:
+ * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is `'10px sans-serif'`
+ * @property {number} [text-max-angle=Math.PI/4] When `text-placement` is set to `'line'`, allow a maximum angle between adjacent characters.
+ * The expected value is in radians, and the default is 45° (`Math.PI / 4`).
+ * @property {number} [text-offset-x=0] Horizontal text offset in pixels. A positive will shift the text right.
+ * @property {number} [text-offset-y=0] Vertical text offset in pixels. A positive will shift the text down.
+ * @property {boolean} [text-overflow=false] For polygon labels or when `placement` is set to `'line'`, allow text to exceed
+ * the width of the polygon at the label position or the length of the path that it follows.
+ * @property {import("./Text.js").TextPlacement} [text-placement='point'] Text placement.
+ * @property {number|import("../size.js").Size} [text-scale] Scale.
+ * @property {boolean} [text-rotate-with-view=false] Whether to rotate the text with the view.
+ * @property {number} [text-rotation=0] Rotation in radians (positive rotation clockwise).
+ * @property {CanvasTextAlign} [text-align] Text alignment. Possible values: `'left'`, `'right'`, `'center'`, `'end'` or `'start'`.
+ * Default is `'center'` for `text-placement: 'point'`. For `text-placement: 'line'`, the default is to let the renderer choose a
+ * placement where `text-max-angle` is not exceeded.
+ * @property {import('./Text.js').TextJustify} [text-justify] Text justification within the text box.
+ * If not set, text is justified towards the `textAlign` anchor.
+ * Otherwise, use options `'left'`, `'center'`, or `'right'` to justify the text within the text box.
+ * **Note:** `text-justify` is ignored for immediate rendering and also for `text-placement: 'line'`.
+ * @property {CanvasTextBaseline} [text-baseline='middle'] Text base line. Possible values: `'bottom'`, `'top'`, `'middle'`, `'alphabetic'`,
+ * `'hanging'`, `'ideographic'`.
+ * @property {Array<number>} [text-padding=[0, 0, 0, 0]] Padding in pixels around the text for decluttering and background. The order of
+ * values in the array is `[top, right, bottom, left]`.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [text-fill-color] The fill color.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [text-background-fill-color] The fill color.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [text-stroke-color] The stroke color.
+ * @property {CanvasLineCap} [text-stroke-line-cap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [text-stroke-line-join='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {Array<number>} [text-stroke-line-dash] Line dash pattern.
+ * @property {number} [text-stroke-line-dash-offset=0] Line dash offset.
+ * @property {number} [text-stroke-miter-limit=10] Miter limit.
+ * @property {number} [text-stroke-width] Stroke pixel width.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [text-background-stroke-color] The stroke color.
+ * @property {CanvasLineCap} [text-background-stroke-line-cap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [text-background-stroke-line-join='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {Array<number>} [text-background-stroke-line-dash] Line dash pattern.
+ * @property {number} [text-background-stroke-line-dash-offset=0] Line dash offset.
+ * @property {number} [text-background-stroke-miter-limit=10] Miter limit.
+ * @property {number} [text-background-stroke-width] Stroke pixel width.
+ */
+
+/**
+ * Icon style properties applied to point features.  One of `icon-src` or `icon-img` must be provided to render
+ * points with an icon.
+ *
+ * @typedef {Object} FlatIcon
+ * @property {string} [icon-src] Image source URI.
+ * @property {HTMLImageElement|HTMLCanvasElement} [icon-img] Image object for the icon. If the `icon-src` option is not provided then the
+ * provided image must already be loaded. And in that case, it is required
+ * to provide the size of the image, with the `icon-img-size` option.
+ * @property {import("../size.js").Size} [icon-img-size] Image size in pixels. Only required if `icon-img` is set and `icon-src` is not.
+ * The provided size needs to match the actual size of the image.
+ * @property {Array<number>} [icon-anchor=[0.5, 0.5]] Anchor. Default value is the icon center.
+ * @property {import("./Icon.js").IconOrigin} [icon-anchor-origin='top-left'] Origin of the anchor: `bottom-left`, `bottom-right`,
+ * `top-left` or `top-right`.
+ * @property {import("./Icon.js").IconAnchorUnits} [icon-anchor-x-units='fraction'] Units in which the anchor x value is
+ * specified. A value of `'fraction'` indicates the x value is a fraction of the icon. A value of `'pixels'` indicates
+ * the x value in pixels.
+ * @property {import("./Icon.js").IconAnchorUnits} [icon-anchor-y-units='fraction'] Units in which the anchor y value is
+ * specified. A value of `'fraction'` indicates the y value is a fraction of the icon. A value of `'pixels'` indicates
+ * the y value in pixels.
+ * @property {import("../color.js").Color|string} [icon-color] Color to tint the icon. If not specified,
+ * the icon will be left as is.
+ * @property {null|string} [icon-cross-origin] The `crossOrigin` attribute for loaded images. Note that you must provide a
+ * `icon-cross-origin` value if you want to access pixel data with the Canvas renderer.
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
+ * @property {Array<number>} [icon-offset=[0, 0]] Offset, which, together with the size and the offset origin, define the
+ * sub-rectangle to use from the original icon image.
+ * @property {Array<number>} [icon-displacement=[0,0]] Displacement of the icon.
+ * @property {import("./Icon.js").IconOrigin} [icon-offset-origin='top-left'] Origin of the offset: `bottom-left`, `bottom-right`,
+ * `top-left` or `top-right`.
+ * @property {number} [icon-opacity=1] Opacity of the icon.
+ * @property {number|import("../size.js").Size} [icon-scale=1] Scale.
+ * @property {number} [icon-rotation=0] Rotation in radians (positive rotation clockwise).
+ * @property {boolean} [icon-rotate-with-view=false] Whether to rotate the icon with the view.
+ * @property {import("../size.js").Size} [icon-size] Icon size in pixel. Can be used together with `icon-offset` to define the
+ * sub-rectangle to use from the origin (sprite) icon image.
+ * @property {"declutter"|"obstacle"|"none"|undefined} [icon-declutter-mode] Declutter mode
+ */
+
+/**
+ * Regular shape style properties for rendering point features.  At least `shape-points` must be provided.
+ *
+ * @typedef {Object} FlatShape
+ * @property {number} [shape-points] Number of points for stars and regular polygons. In case of a polygon, the number of points
+ * is the number of sides.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [shape-fill-color] The fill color.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [shape-stroke-color] The stroke color.
+ * @property {number} [shape-stroke-width] Stroke pixel width.
+ * @property {CanvasLineCap} [shape-stroke-line-cap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [shape-stroke-line-join='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {Array<number>} [shape-stroke-line-dash] Line dash pattern.
+ * @property {number} [shape-stroke-line-dash-offset=0] Line dash offset.
+ * @property {number} [shape-stroke-miter-limit=10] Miter limit.
+ * @property {number} [shape-radius] Radius of a regular polygon.
+ * @property {number} [shape-radius1] First radius of a star. Ignored if radius is set.
+ * @property {number} [shape-radius2] Second radius of a star.
+ * @property {number} [shape-angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
+ * @property {Array<number>} [shape-displacement=[0,0]] Displacement of the shape
+ * @property {number} [shape-rotation=0] Rotation in radians (positive rotation clockwise).
+ * @property {boolean} [shape-rotate-with-view=false] Whether to rotate the shape with the view.
+ * @property {number|import("../size.js").Size} [shape-scale=1] Scale. Unless two dimensional scaling is required a better
+ * result may be obtained with appropriate settings for `shape-radius`, `shape-radius1` and `shape-radius2`.
+ * @property {"declutter"|"obstacle"|"none"|undefined} [shape-declutter-mode] Declutter mode.
+ */
+
+/**
+ * Circle style properties for rendering point features.  At least `circle-radius` must be provided.
+ *
+ * @typedef {Object} FlatCircle
+ * @property {number} [circle-radius] Circle radius.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [circle-fill-color] The fill color.
+ * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [circle-stroke-color] The stroke color.
+ * @property {number} [circle-stroke-width] Stroke pixel width.
+ * @property {CanvasLineCap} [circle-stroke-line-cap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [circle-stroke-line-join='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {Array<number>} [circle-stroke-line-dash] Line dash pattern.
+ * @property {number} [circle-stroke-line-dash-offset=0] Line dash offset.
+ * @property {number} [circle-stroke-miter-limit=10] Miter limit.
+ * @property {Array<number>} [circle-displacement=[0,0]] displacement
+ * @property {number|import("../size.js").Size} [circle-scale=1] Scale. A two dimensional scale will produce an ellipse.
+ * Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for `circle-radius`.
+ * @property {number} [circle-rotation=0] Rotation in radians
+ * (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale).
+ * @property {boolean} [circle-rotate-with-view=false] Whether to rotate the shape with the view
+ * (meaningful only when used in conjunction with a two dimensional scale).
+ * @property {"declutter"|"obstacle"|"none"|undefined} [circle-declutter-mode] Declutter mode
+ */
+
+/**
+ * @param {FlatStyle} flatStyle A flat style literal.
+ * @return {import("./Style.js").default} A style instance.
+ */
+export function toStyle(flatStyle) {
+  const style = new Style({
+    fill: getFill(flatStyle, ''),
+    stroke: getStroke(flatStyle, ''),
+    text: getText(flatStyle),
+    image: getImage(flatStyle),
+  });
+
+  return style;
+}
+
+/**
+ * @param {FlatStyle} flatStyle The flat style.
+ * @param {string} prefix The property prefix.
+ * @return {Fill|undefined} The fill (if any).
+ */
+function getFill(flatStyle, prefix) {
+  const color = flatStyle[prefix + 'fill-color'];
+  if (!color) {
+    return;
+  }
+
+  return new Fill({color: color});
+}
+
+/**
+ * @param {FlatStyle} flatStyle The flat style.
+ * @param {string} prefix The property prefix.
+ * @return {Stroke|undefined} The stroke (if any).
+ */
+function getStroke(flatStyle, prefix) {
+  const width = flatStyle[prefix + 'stroke-width'];
+  const color = flatStyle[prefix + 'stroke-color'];
+  if (!width && !color) {
+    return;
+  }
+
+  return new Stroke({
+    width: width,
+    color: color,
+    lineCap: flatStyle[prefix + 'stroke-line-cap'],
+    lineJoin: flatStyle[prefix + 'stroke-line-join'],
+    lineDash: flatStyle[prefix + 'stroke-line-dash'],
+    lineDashOffset: flatStyle[prefix + 'stroke-line-dash-offset'],
+    miterLimit: flatStyle[prefix + 'stroke-miter-limit'],
+  });
+}
+
+/**
+ * @param {FlatStyle} flatStyle The flat style.
+ * @return {Text|undefined} The text (if any).
+ */
+function getText(flatStyle) {
+  const value = flatStyle['text-value'];
+  if (!value) {
+    return;
+  }
+
+  const text = new Text({
+    text: value,
+    font: flatStyle['text-font'],
+    maxAngle: flatStyle['text-max-angle'],
+    offsetX: flatStyle['text-offset-x'],
+    offsetY: flatStyle['text-offset-y'],
+    overflow: flatStyle['text-overflow'],
+    placement: flatStyle['text-placement'],
+    scale: flatStyle['text-scale'],
+    rotateWithView: flatStyle['text-rotate-with-view'],
+    rotation: flatStyle['text-rotation'],
+    textAlign: flatStyle['text-align'],
+    justify: flatStyle['text-justify'],
+    textBaseline: flatStyle['text-baseline'],
+    padding: flatStyle['text-padding'],
+    fill: getFill(flatStyle, 'text-'),
+    backgroundFill: getFill(flatStyle, 'text-background-'),
+    stroke: getStroke(flatStyle, 'text-'),
+    backgroundStroke: getStroke(flatStyle, 'text-background-'),
+  });
+
+  return text;
+}
+
+/**
+ * @param {FlatStyle} flatStyle The flat style.
+ * @return {import("./Image.js").default|undefined} The image (if any).
+ */
+function getImage(flatStyle) {
+  const iconSrc = flatStyle['icon-src'];
+  const iconImg = flatStyle['icon-img'];
+  if (iconSrc || iconImg) {
+    const icon = new Icon({
+      src: iconSrc,
+      img: iconImg,
+      imgSize: flatStyle['icon-img-size'],
+      anchor: flatStyle['icon-anchor'],
+      anchorOrigin: flatStyle['icon-anchor-origin'],
+      anchorXUnits: flatStyle['icon-anchor-x-units'],
+      anchorYUnits: flatStyle['icon-anchor-y-units'],
+      color: flatStyle['icon-color'],
+      crossOrigin: flatStyle['icon-cross-origin'],
+      offset: flatStyle['icon-offset'],
+      displacement: flatStyle['icon-displacement'],
+      opacity: flatStyle['icon-opacity'],
+      scale: flatStyle['icon-scale'],
+      rotation: flatStyle['icon-rotation'],
+      rotateWithView: flatStyle['icon-rotate-with-view'],
+      size: flatStyle['icon-size'],
+      declutterMode: flatStyle['icon-declutter-mode'],
+    });
+    return icon;
+  }
+
+  const shapePoints = flatStyle['shape-points'];
+  if (shapePoints) {
+    const prefix = 'shape-';
+    const shape = new RegularShape({
+      points: shapePoints,
+      fill: getFill(flatStyle, prefix),
+      stroke: getStroke(flatStyle, prefix),
+      radius: flatStyle['shape-radius'],
+      radius1: flatStyle['shape-radius1'],
+      radius2: flatStyle['shape-radius2'],
+      angle: flatStyle['shape-angle'],
+      displacement: flatStyle['shape-displacement'],
+      rotation: flatStyle['shape-rotation'],
+      rotateWithView: flatStyle['shape-rotate-with-view'],
+      scale: flatStyle['shape-scale'],
+      declutterMode: flatStyle['shape-declutter-mode'],
+    });
+
+    return shape;
+  }
+
+  const circleRadius = flatStyle['circle-radius'];
+  if (circleRadius) {
+    const prefix = 'circle-';
+    const circle = new Circle({
+      radius: circleRadius,
+      fill: getFill(flatStyle, prefix),
+      stroke: getStroke(flatStyle, prefix),
+      displacement: flatStyle['circle-displacement'],
+      scale: flatStyle['circle-scale'],
+      rotation: flatStyle['circle-rotation'],
+      rotateWithView: flatStyle['circle-rotate-with-view'],
+      declutterMode: flatStyle['circle-declutter-mode'],
+    });
+
+    return circle;
+  }
+
+  return;
+}
--- a/test/browser/spec/ol/renderer/canvas/VectorLayer.test.js
+++ b/test/browser/spec/ol/renderer/canvas/VectorLayer.test.js
@@ -22,7 +22,7 @@ import {createFontStyle} from '../../../util.js';
 import {fromExtent} from '../../../../../../src/ol/geom/Polygon.js';
 import {get as getProjection} from '../../../../../../src/ol/proj.js';

-describe('ol.renderer.canvas.VectorLayer', function () {
+describe('ol/renderer/canvas/VectorLayer', function () {
  describe('constructor', function () {
    const fontFamily = 'Ubuntu - VectorLayerTest';
    const font = createFontStyle({
@@ -92,7 +92,7 @@ describe('ol.renderer.canvas.VectorLayer', function () {
      map.addLayer(layer);
      const spy = sinon.spy(layer.getRenderer(), 'renderFeature');
      map.renderSync();
-      expect(spy.getCall(0).args[2]).to.be(layerStyle);
+      expect(spy.getCall(0).args[2]).to.eql(layerStyle);
      expect(spy.getCall(1).args[2]).to.be(featureStyle);
      document.body.removeChild(target);
    });
--- a/test/node/ol/layer/Vector.test.js
+++ b/test/node/ol/layer/Vector.test.js
@@ -0,0 +1,57 @@
+import Fill from '../../../../src/ol/style/Fill.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import Vector from '../../../../src/ol/layer/Vector.js';
+import expect from '../../expect.js';
+
+describe('ol/layer/Vector.js', () => {
+  describe('setStyle()', () => {
+    it('accepts a flat style', () => {
+      const layer = new Vector();
+      layer.setStyle({
+        'fill-color': 'red',
+      });
+
+      const style = layer.getStyle();
+      expect(style).to.be.a(Style);
+
+      const fill = style.getFill();
+      expect(fill).to.be.a(Fill);
+      expect(fill.getColor()).to.be('red');
+    });
+
+    it('accepts an array of flat styles', () => {
+      const layer = new Vector();
+      layer.setStyle([
+        {
+          'stroke-color': 'red',
+          'stroke-width': 10,
+        },
+        {
+          'stroke-color': 'yellow',
+          'stroke-width': 5,
+        },
+      ]);
+
+      const style = layer.getStyle();
+      expect(Array.isArray(style)).to.be(true);
+      expect(style).to.have.length(2);
+
+      const first = style[0];
+      expect(first).to.be.a(Style);
+
+      const firstStroke = first.getStroke();
+      expect(firstStroke).to.be.a(Stroke);
+      expect(firstStroke.getColor()).to.be('red');
+      expect(firstStroke.getWidth()).to.be(10);
+
+      const second = style[1];
+      expect(second).to.be.a(Style);
+
+      const secondStroke = second.getStroke();
+      expect(secondStroke).to.be.a(Stroke);
+      expect(secondStroke.getColor()).to.be('yellow');
+      expect(secondStroke.getWidth()).to.be(5);
+    });
+  });
+});
--- a/test/node/ol/style/flat.test.js
+++ b/test/node/ol/style/flat.test.js
@@ -0,0 +1,161 @@
+import Fill from '../../../../src/ol/style/Fill.js';
+import Icon from '../../../../src/ol/style/Icon.js';
+import RegularShape from '../../../../src/ol/style/RegularShape.js';
+import Stroke from '../../../../src/ol/style/Stroke.js';
+import Style from '../../../../src/ol/style/Style.js';
+import Text from '../../../../src/ol/style/Text.js';
+import expect from '../../expect.js';
+import {toStyle} from '../../../../src/ol/style/flat.js';
+
+describe('ol/style/flat.js', () => {
+  describe('toStyle()', () => {
+    it('creates a style with a fill', () => {
+      const style = toStyle({
+        'fill-color': 'red',
+      });
+
+      expect(style).to.be.a(Style);
+
+      const fill = style.getFill();
+      expect(fill).to.be.a(Fill);
+      expect(fill.getColor()).to.be('red');
+
+      expect(style.getStroke()).to.be(null);
+      expect(style.getText()).to.be(null);
+      expect(style.getImage()).to.be(null);
+    });
+
+    it('creates a style with a stroke', () => {
+      const style = toStyle({
+        'stroke-width': 2,
+      });
+
+      expect(style).to.be.a(Style);
+
+      const stroke = style.getStroke();
+      expect(stroke).to.be.a(Stroke);
+      expect(stroke.getWidth()).to.be(2);
+
+      expect(style.getFill()).to.be(null);
+      expect(style.getText()).to.be(null);
+      expect(style.getImage()).to.be(null);
+    });
+
+    it('creates a style with a text', () => {
+      const style = toStyle({
+        'text-value': 'foo',
+        'text-fill-color': 'blue',
+        'text-stroke-width': 2,
+      });
+
+      expect(style).to.be.a(Style);
+
+      const text = style.getText();
+      expect(text).to.be.a(Text);
+      expect(text.getText()).to.be('foo');
+
+      const textFill = text.getFill();
+      expect(textFill).to.be.a(Fill);
+      expect(textFill.getColor()).to.be('blue');
+
+      const textStroke = text.getStroke();
+      expect(textStroke).to.be.a(Stroke);
+      expect(textStroke.getWidth()).to.be(2);
+
+      expect(style.getFill()).to.be(null);
+      expect(style.getStroke()).to.be(null);
+      expect(style.getImage()).to.be(null);
+    });
+
+    it('creates a style with an icon', () => {
+      const style = toStyle({
+        'icon-src': 'https://example.com/icon.png',
+      });
+
+      expect(style).to.be.a(Style);
+
+      const icon = style.getImage();
+      expect(icon).to.be.a(Icon);
+
+      expect(style.getFill()).to.be(null);
+      expect(style.getStroke()).to.be(null);
+      expect(style.getText()).to.be(null);
+    });
+
+    it('creates a style with a regular shape', () => {
+      const style = toStyle({
+        'shape-points': 10,
+        'shape-radius': 42,
+        'shape-fill-color': 'red',
+        'shape-stroke-color': 'blue',
+      });
+
+      expect(style).to.be.a(Style);
+
+      const shape = style.getImage();
+      expect(shape).to.be.a(RegularShape);
+      expect(shape.getPoints()).to.be(10);
+      expect(shape.getRadius()).to.be(42);
+
+      const shapeFill = shape.getFill();
+      expect(shapeFill).to.be.a(Fill);
+      expect(shapeFill.getColor()).to.be('red');
+
+      const shapeStroke = shape.getStroke();
+      expect(shapeStroke).to.be.a(Stroke);
+      expect(shapeStroke.getColor()).to.be('blue');
+
+      expect(style.getFill()).to.be(null);
+      expect(style.getStroke()).to.be(null);
+      expect(style.getText()).to.be(null);
+    });
+
+    it('creates a style with a circle', () => {
+      const style = toStyle({
+        'circle-radius': 42,
+        'circle-fill-color': 'red',
+        'circle-stroke-color': 'blue',
+      });
+
+      expect(style).to.be.a(Style);
+
+      const circle = style.getImage();
+      expect(circle).to.be.a(RegularShape);
+      expect(circle.getRadius()).to.be(42);
+
+      const circleFill = circle.getFill();
+      expect(circleFill).to.be.a(Fill);
+      expect(circleFill.getColor()).to.be('red');
+
+      const circleStroke = circle.getStroke();
+      expect(circleStroke).to.be.a(Stroke);
+      expect(circleStroke.getColor()).to.be('blue');
+
+      expect(style.getFill()).to.be(null);
+      expect(style.getStroke()).to.be(null);
+      expect(style.getText()).to.be(null);
+    });
+
+    it('creates a style with a fill and stroke', () => {
+      const style = toStyle({
+        'fill-color': 'red',
+        'stroke-width': 2,
+        'stroke-color': 'green',
+      });
+
+      expect(style).to.be.a(Style);
+
+      const fill = style.getFill();
+      expect(fill).to.be.a(Fill);
+      expect(fill.getColor()).to.be('red');
+
+      const stroke = style.getStroke();
+      expect(stroke).to.be.a(Stroke);
+      expect(stroke.getWidth()).to.be(2);
+      expect(stroke.getColor()).to.be('green');
+
+      expect(style.getText()).to.be(null);
+      expect(style.getImage()).to.be(null);
+    });
+  });
+});
--- a/test/rendering/cases/icon-opacity/main.js
+++ b/test/rendering/cases/icon-opacity/main.js
@@ -2,7 +2,6 @@ import Feature from '../../../../src/ol/Feature.js';
 import Map from '../../../../src/ol/Map.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import View from '../../../../src/ol/View.js';
-import {Icon, Style} from '../../../../src/ol/style.js';
 import {
  Tile as TileLayer,
  Vector as VectorLayer,
@@ -20,16 +19,12 @@ new Map({
      }),
    }),
    new VectorLayer({
-      style: function () {
-        return new Style({
-          image: new Icon({
-            opacity: 0.5,
-            src: '/data/icon.png',
-            anchor: [0.5, 46],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-          }),
-        });
+      style: {
+        'icon-src': '/data/icon.png',
+        'icon-opacity': 0.5,
+        'icon-anchor': [0.5, 46],
+        'icon-anchor-x-units': 'fraction',
+        'icon-anchor-y-units': 'pixels',
      },
      source: new VectorSource({
        features: [new Feature(new Point(center))],
--- a/test/rendering/cases/icon-sprite/main.js
+++ b/test/rendering/cases/icon-sprite/main.js
@@ -2,7 +2,6 @@ import Feature from '../../../../src/ol/Feature.js';
 import Map from '../../../../src/ol/Map.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import View from '../../../../src/ol/View.js';
-import {Icon, Style} from '../../../../src/ol/style.js';
 import {Vector as VectorLayer} from '../../../../src/ol/layer.js';
 import {Vector as VectorSource} from '../../../../src/ol/source.js';

@@ -12,15 +11,11 @@ new Map({
  pixelRatio: 2,
  layers: [
    new VectorLayer({
-      style: function () {
-        return new Style({
-          image: new Icon({
-            src: '/data/sprites/gis_symbols.png',
-            color: [255, 0, 0, 1],
-            offset: [32, 0],
-            size: [32, 32],
-          }),
-        });
+      style: {
+        'icon-src': '/data/sprites/gis_symbols.png',
+        'icon-color': [255, 0, 0, 1],
+        'icon-offset': [32, 0],
+        'icon-size': [32, 32],
      },
      source: new VectorSource({
        features: [new Feature(new Point(center))],
--- a/test/rendering/cases/icon-symbol/main.js
+++ b/test/rendering/cases/icon-symbol/main.js
@@ -2,7 +2,6 @@ import Feature from '../../../../src/ol/Feature.js';
 import Map from '../../../../src/ol/Map.js';
 import Point from '../../../../src/ol/geom/Point.js';
 import View from '../../../../src/ol/View.js';
-import {Icon, Style} from '../../../../src/ol/style.js';
 import {
  Tile as TileLayer,
  Vector as VectorLayer,
@@ -20,15 +19,11 @@ new Map({
      }),
    }),
    new VectorLayer({
-      style: function () {
-        return new Style({
-          image: new Icon({
-            src: '/data/icon.png',
-            anchor: [0.5, 46],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-          }),
-        });
+      style: {
+        'icon-src': '/data/icon.png',
+        'icon-anchor': [0.5, 46],
+        'icon-anchor-x-units': 'fraction',
+        'icon-anchor-y-units': 'pixels',
      },
      source: new VectorSource({
        features: [new Feature(new Point(center))],
--- a/test/rendering/cases/layer-vector-background/main.js
+++ b/test/rendering/cases/layer-vector-background/main.js
@@ -3,7 +3,6 @@ import Map from '../../../../src/ol/Map.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
-import {Fill, Stroke, Style} from '../../../../src/ol/style.js';

 new Map({
  target: 'map',
@@ -18,14 +17,10 @@ new Map({
        url: '/data/countries.json',
        format: new GeoJSON(),
      }),
-      style: new Style({
-        stroke: new Stroke({
-          color: '#ccc',
-        }),
-        fill: new Fill({
-          color: 'white',
-        }),
-      }),
+      style: {
+        'stroke-color': '#ccc',
+        'fill-color': 'white',
+      },
    }),
  ],
 });
--- a/test/rendering/cases/layer-vector-polygon-partial/main.js
+++ b/test/rendering/cases/layer-vector-polygon-partial/main.js
@@ -1,9 +1,6 @@
 import Feature from '../../../../src/ol/Feature.js';
-import Fill from '../../../../src/ol/style/Fill.js';
 import Map from '../../../../src/ol/Map.js';
 import Polygon from '../../../../src/ol/geom/Polygon.js';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-import Style from '../../../../src/ol/style/Style.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
@@ -37,15 +34,11 @@ const src = new VectorSource({
 const layer = new VectorLayer({
  renderBuffer: 0,
  source: src,
-  style: new Style({
-    stroke: new Stroke({
-      color: [0, 0, 0, 1],
-      width: 2,
-    }),
-    fill: new Fill({
-      color: [255, 0, 0, 1],
-    }),
-  }),
+  style: {
+    'stroke-color': [0, 0, 0, 1],
+    'stroke-width': 2,
+    'fill-color': [255, 0, 0, 1],
+  },
 });
 const view = new View({
  center: [-9.5, 78],
--- a/test/rendering/cases/layer-vector-polygon/main.js
+++ b/test/rendering/cases/layer-vector-polygon/main.js
@@ -1,8 +1,6 @@
 import Feature from '../../../../src/ol/Feature.js';
-import Fill from '../../../../src/ol/style/Fill.js';
 import Map from '../../../../src/ol/Map.js';
 import Polygon from '../../../../src/ol/geom/Polygon.js';
-import Style from '../../../../src/ol/style/Style.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
@@ -38,11 +36,9 @@ const src = new VectorSource({
 const layer = new VectorLayer({
  renderBuffer: 0,
  source: src,
-  style: new Style({
-    fill: new Fill({
-      color: 'blue',
-    }),
-  }),
+  style: {
+    'fill-color': 'blue',
+  },
 });
 const view = new View({
  center: [0, 0],