[BUG] chart and pixelratio #1109

Author: Viglino

examples/map/map.clustering.html

@@ -15,7 +15,14 @@
 
   <!-- Openlayers -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
+
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
+  <!--
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v10.2.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v9.2.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
+  -->
 
 
   <!-- ol-ext -->
@@ -117,6 +124,7 @@ <h2>Select options:</h2>
       var data = [0,0,0,0];
       for (var i=0, f; f=features[i]; i++) data[f.get('type')]++;
       var style = styleCache[data.join(',')];
+      style = false;
       if (!style) {
         var radius = Math.min(size+7, 20);
         style = styleCache[data.join(',')] = new ol.style.Style({
@@ -235,7 +243,6 @@ <h2>Select options:</h2>
   })
 
   function testFontLoaded () {
-    console.log('TEST', $(".maki-bus").width())
     // Loaded ?
     if ($(".maki-bus").width() > 60) {
       styleCache = {};

examples/style/map.style.chart.html

@@ -16,7 +16,15 @@
 
   <!-- Openlayers -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
+
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
+  
+  <!--
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v10.2.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v9.2.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
+  <script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
+-->
 
 
   <!-- ol-ext -->
@@ -83,8 +91,11 @@ <h2>Options:</h2>
   var styleCache = {};
 
   function getFeatureStyle (feature, sel) {
-    var k = $("#graph").val()+"-"+ $("#color").val()+"-"+(sel?"1-":"")+feature.get("data");
-    var style = styleCache[k];
+    var key = $("#graph").val()
+      +"-"+ $("#color").val()
+      +"-"+ (sel?"sel":"nsel")
+      +"-"+ feature.get("data").join('-');
+    var style = styleCache[key];
     if (!style) {
       var radius = 15;
       // area proportional to data size: s=PI*r^2
@@ -93,7 +104,7 @@ <h2>Options:</h2>
       }
       // Create chart style
       var c = $("#color").val();
-      styleCache[k] = style = [
+      styleCache[key] = style = [
         new ol.style.Style({
           image: new ol.style.Chart({
             type: $("#graph").val(), 
@@ -113,14 +124,22 @@ <h2>Options:</h2>
           })
         }),
         /*
+        new ol.style.Style({
+          text: new ol.style.Text({
+            text: key,//feature.get("data").join('-'),
+            fill: new ol.style.Fill({
+              color: '#000'
+            })
+          })
+        }),
         new ol.style.Style({
           image: new ol.style.Circle({
             radius: 5,
             stroke: new ol.style.Stroke({ color: '#fff', width: 1.5 }),
             fill: new ol.style.Fill({ color: '#f00' })
           })
         })
-        */
+        /**/
       ];
     }
     style[0].getImage().setAnimation(animation);
@@ -189,7 +208,7 @@ <h2>Options:</h2>
     //map.renderSync();
   }
 
-  doAnimate();
+  // doAnimate();
   </script>
 
 </body>

src/style/Chart.js

@@ -64,8 +64,6 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
       if (!this._colors)
         this._colors = ol_style_Chart.colors.classic;
     }
-
-    this.renderChart_();
   }
   /**
    * Clones the style.
@@ -100,7 +98,6 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
   */
   setData(data) {
     this._data = data;
-    this.renderChart_();
   }
   /** Get symbol radius
   */
@@ -114,7 +111,6 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
   setRadius(radius, ratio) {
     this._radius = radius;
     this.donuratio_ = ratio || this.donuratio_;
-    this.renderChart_();
   }
   /** Set animation step
   *	@param {false|number} false to stop animation or the step of the animation [0,1]
@@ -130,11 +126,12 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
       this._animation.animate = true;
       this._animation.step = step;
     }
-    this.renderChart_();
   }
   /** @private
   */
-  renderChart_(pixelratio) {
+  getImage(pixelratio) {
+    pixelratio = pixelratio || 1;
+    /*
     if (!pixelratio) {
       if (this.getPixelRatio) {
         pixelratio = window.devicePixelRatio;
@@ -146,6 +143,7 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
       }
       return;
     }
+    */
 
     var strokeStyle;
     var strokeWidth = 0;
@@ -156,7 +154,7 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
     }
 
     // no atlas manager is used, create a new canvas
-    var canvas = this.getImage(pixelratio);
+    var canvas = super.getImage(pixelratio);
 
     // draw the circle on the canvas
     var context = (canvas.getContext('2d'));
@@ -266,6 +264,9 @@ var ol_style_Chart = class olstyleChart extends ol_style_RegularShape {
       anchor[0] = c - this._offset[0];
       anchor[1] = c - this._offset[1];
     }
+    
+    // return image
+    return canvas;
   }
 };