diff --git a/rendering/cases/circle-style/expected.png b/rendering/cases/circle-style/expected.png new file mode 100644 index 0000000000..84eef2b6e8 Binary files /dev/null and b/rendering/cases/circle-style/expected.png differ diff --git a/rendering/cases/circle-style/main.js b/rendering/cases/circle-style/main.js new file mode 100644 index 0000000000..d4f743a627 --- /dev/null +++ b/rendering/cases/circle-style/main.js @@ -0,0 +1,57 @@ +import Map from '../../../src/ol/Map.js'; +import View from '../../../src/ol/View.js'; +import Feature from '../../../src/ol/Feature.js'; +import Point from '../../../src/ol/geom/Point.js'; +import VectorLayer from '../../../src/ol/layer/Vector.js'; +import VectorSource from '../../../src/ol/source/Vector.js'; +import Circle from '../../../src/ol/style/Circle.js'; +import Style from '../../../src/ol/style/Style.js'; +import Stroke from '../../../src/ol/style/Stroke.js'; + + +const vectorSource = new VectorSource(); + +vectorSource.addFeatures([ + new Feature({ + geometry: new Point([-50, 50]), + radius: 10 + }), + new Feature({ + geometry: new Point([50, -50]), + radius: 20 + }), + new Feature({ + geometry: new Point([50, 50]), + radius: 30 + }) +]); + +const style = new Style({ + image: new Circle({ + radius: 1, + stroke: new Stroke({ + color: '#00f', + width: 3 + }) + }) +}); + +new Map({ + pixelRatio: 1, + layers: [ + new VectorLayer({ + source: vectorSource, + style: function(feature) { + style.getImage().setRadius(feature.get('radius')); + return style; + } + }) + ], + target: 'map', + view: new View({ + center: [0, 0], + resolution: 1 + }) +}); + +render(); diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js index b778cbde26..59161e0456 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -60,6 +60,7 @@ class CircleStyle extends RegularShape { */ setRadius(radius) { this.radius_ = radius; + this.render(); } }