Merge pull request #9714 from fredj/f9662

Update the circle style after setRadius calls

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

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

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,