Merge pull request #10093 from mike-000/patch-3

Set label text for Graticule option styles

src/ol/layer/Graticule.js

@@ -318,10 +318,23 @@ class Graticule extends VectorLayer {
         options.latLabelPosition;
 
       /**
-       * @type {Object.<string,Style>}
+       * @type {Style}
        * @private
        */
-      this.lonLabelStyleCache_ = {};
+      this.lonLabelStyleBase_ = new Style({
+        text: options.lonLabelStyle !== undefined ? options.lonLabelStyle.clone() :
+          new Text({
+            font: '12px Calibri,sans-serif',
+            textBaseline: 'bottom',
+            fill: new Fill({
+              color: 'rgba(0,0,0,1)'
+            }),
+            stroke: new Stroke({
+              color: 'rgba(255,255,255,1)',
+              width: 3
+            })
+          })
+      });
 
       /**
        * @private
@@ -330,31 +343,28 @@ class Graticule extends VectorLayer {
        */
       this.lonLabelStyle_ = function(feature) {
         const label = feature.get('graticule_label');
-        if (!this.lonLabelStyleCache_[label]) {
+        this.lonLabelStyleBase_.getText().setText(label);
-          this.lonLabelStyleCache_[label] = new Style({
+        return this.lonLabelStyleBase_;
-            text: options.lonLabelStyle !== undefined ? options.lonLabelStyle :
-              new Text({
-                text: label,
-                font: '12px Calibri,sans-serif',
-                textBaseline: 'bottom',
-                fill: new Fill({
-                  color: 'rgba(0,0,0,1)'
-                }),
-                stroke: new Stroke({
-                  color: 'rgba(255,255,255,1)',
-                  width: 3
-                })
-              })
-          });
-        }
-        return this.lonLabelStyleCache_[label];
       }.bind(this);
 
       /**
-       * @type {Object.<string,Style>}
+       * @type {Style}
        * @private
        */
-      this.latLabelStyleCache_ = {};
+      this.latLabelStyleBase_ = new Style({
+        text: options.latLabelStyle !== undefined ? options.latLabelStyle.clone() :
+          new Text({
+            font: '12px Calibri,sans-serif',
+            textAlign: 'right',
+            fill: new Fill({
+              color: 'rgba(0,0,0,1)'
+            }),
+            stroke: new Stroke({
+              color: 'rgba(255,255,255,1)',
+              width: 3
+            })
+          })
+      });
 
       /**
        * @private
@@ -363,24 +373,8 @@ class Graticule extends VectorLayer {
        */
       this.latLabelStyle_ = function(feature) {
         const label = feature.get('graticule_label');
-        if (!this.latLabelStyleCache_[label]) {
+        this.latLabelStyleBase_.getText().setText(label);
-          this.latLabelStyleCache_[label] = new Style({
+        return this.latLabelStyleBase_;
-            text: options.latLabelStyle !== undefined ? options.latLabelStyle :
-              new Text({
-                text: label,
-                font: '12px Calibri,sans-serif',
-                textAlign: 'right',
-                fill: new Fill({
-                  color: 'rgba(0,0,0,1)'
-                }),
-                stroke: new Stroke({
-                  color: 'rgba(255,255,255,1)',
-                  width: 3
-                })
-              })
-          });
-        }
-        return this.latLabelStyleCache_[label];
       }.bind(this);
 
       this.meridiansLabels_ = [];

test/spec/ol/graticule.test.js

@@ -32,6 +32,7 @@ describe('ol.layer.Graticule', function() {
     });
 
     it('creates a graticule with labels', function() {
+      const feature = new Feature();
       graticule = new Graticule({
         showLabels: true
       });
@@ -51,6 +52,10 @@ describe('ol.layer.Graticule', function() {
       expect(graticule.parallelsLabels_.length).to.be(3);
       expect(graticule.parallelsLabels_[0].text).to.be('0° 00′ 00″');
       expect(graticule.parallelsLabels_[0].geom.getCoordinates()[1]).to.roughlyEqual(0, 1e-9);
+      feature.set('graticule_label', graticule.meridiansLabels_[0].text);
+      expect(graticule.lonLabelStyle_(feature).getText().getText()).to.be('0° 00′ 00″');
+      feature.set('graticule_label', graticule.parallelsLabels_[0].text);
+      expect(graticule.latLabelStyle_(feature).getText().getText()).to.be('0° 00′ 00″');
     });
 
     it('has a default stroke style', function() {
@@ -105,6 +110,10 @@ describe('ol.layer.Graticule', function() {
       expect(graticule.parallelsLabels_[0].text).to.be('lat: 0');
       expect(graticule.lonLabelStyle_(feature).getText()).to.eql(lonLabelStyle);
       expect(graticule.latLabelStyle_(feature).getText()).to.eql(latLabelStyle);
+      feature.set('graticule_label', graticule.meridiansLabels_[0].text);
+      expect(graticule.lonLabelStyle_(feature).getText().getText()).to.be('lon: 0');
+      feature.set('graticule_label', graticule.parallelsLabels_[0].text);
+      expect(graticule.latLabelStyle_(feature).getText().getText()).to.be('lat: 0');
       expect(graticule.lonLabelPosition_).to.be(0.9);
       expect(graticule.latLabelPosition_).to.be(0.1);
     });