Accept an object literal for static layer styling

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);
     });

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);
+    });
+  });
+});

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);
+    });
+  });
+});

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))],

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))],

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))],

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',
+      },
     }),
   ],
 });

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],

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],