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 659c71d305..59161e0456 100644 --- a/src/ol/style/Circle.js +++ b/src/ol/style/Circle.js @@ -53,13 +53,14 @@ class CircleStyle extends RegularShape { } /** - * Set the circle radius. - * - * @param {number} radius Circle radius. - * @api - */ + * Set the circle radius. + * + * @param {number} radius Circle radius. + * @api + */ setRadius(radius) { this.radius_ = radius; + this.render(); } } diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js index d8dd972151..b7fcf9b930 100644 --- a/src/ol/style/RegularShape.js +++ b/src/ol/style/RegularShape.js @@ -142,7 +142,7 @@ class RegularShape extends ImageStyle { */ this.hitDetectionImageSize_ = null; - this.render_(); + this.render(); } @@ -301,7 +301,7 @@ class RegularShape extends ImageStyle { /** * @protected */ - render_() { + render() { let lineCap = ''; let lineJoin = ''; let miterLimit = 0; @@ -338,7 +338,6 @@ class RegularShape extends ImageStyle { let size = 2 * (this.radius_ + strokeWidth) + 1; - /** @type {RenderOptions} */ const renderOptions = { strokeStyle: strokeStyle, strokeWidth: strokeWidth,