diff --git a/src/ol/layer/Graticule.js b/src/ol/layer/Graticule.js index e237ac85c8..d30fc2b2e3 100644 --- a/src/ol/layer/Graticule.js +++ b/src/ol/layer/Graticule.js @@ -318,10 +318,23 @@ class Graticule extends VectorLayer { options.latLabelPosition; /** - * @type {Object.} + * @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.lonLabelStyleCache_[label] = new Style({ - 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]; + this.lonLabelStyleBase_.getText().setText(label); + return this.lonLabelStyleBase_; }.bind(this); /** - * @type {Object.} + * @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.latLabelStyleCache_[label] = new Style({ - 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]; + this.latLabelStyleBase_.getText().setText(label); + return this.latLabelStyleBase_; }.bind(this); this.meridiansLabels_ = []; diff --git a/test/spec/ol/graticule.test.js b/test/spec/ol/graticule.test.js index 9fddf760df..e6c78e3f14 100644 --- a/test/spec/ol/graticule.test.js +++ b/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); });