Add stroke support for text symbolizers

examples/vector-layer.js

@@ -27,7 +27,7 @@ var vector = new ol.layer.Vector({
     new ol.style.Rule({
       symbolizers: [
         new ol.style.Fill({
-          color: '#ffffff',
+          color: 'white',
           opacity: 0.6
         }),
         new ol.style.Stroke({
@@ -40,10 +40,14 @@ var vector = new ol.layer.Vector({
       maxResolution: 5000,
       symbolizers: [
         new ol.style.Text({
-          color: '#000000',
+          color: 'black',
           text: ol.expr.parse('name'),
           fontFamily: 'Calibri,sans-serif',
-          fontSize: 12
+          fontSize: 12,
+          stroke: new ol.style.Stroke({
+            color: 'white',
+            width: 3
+          })
         })
       ]
     })

src/objectliterals.jsdoc

@@ -748,6 +748,7 @@
  * @property {number|ol.expr.Expression|undefined} fontSize Font size in pixels.
  * @property {string|ol.expr.Expression} text Text for the label.
  * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
+ * @property {ol.style.Stroke|undefined} stroke Stroke symbolizer for text.
  * @property {number|ol.expr.Expression|undefined} zIndex Stack order.
  */
 

src/ol/renderer/canvas/canvasvectorrenderer.js

@@ -293,6 +293,15 @@ ol.renderer.canvas.Vector.prototype.renderText_ =
   context.textAlign = 'center';
   context.textBaseline = 'middle';
 
+  var stroke = false;
+  if (goog.isDef(text.strokeColor)) {
+    stroke = true;
+    goog.asserts.assertString(text.strokeColor);
+    context.strokeStyle = text.strokeColor;
+    goog.asserts.assertNumber(text.strokeWidth);
+    context.lineWidth = text.strokeWidth;
+  }
+
   for (var i = 0, ii = features.length; i < ii; ++i) {
     feature = features[i];
     if (feature.renderIntent === ol.layer.VectorLayerRenderIntent.HIDDEN) {
@@ -303,6 +312,16 @@ ol.renderer.canvas.Vector.prototype.renderText_ =
     for (var j = 0, jj = vecs.length; j < jj; ++j) {
       vec = vecs[j];
       goog.vec.Mat4.multVec3(this.transform_, vec, vec);
+      if (stroke) {
+        if (text.strokeOpacity !== text.opacity) {
+          goog.asserts.assertNumber(text.strokeOpacity);
+          context.globalAlpha = text.strokeOpacity;
+        }
+        context.strokeText(texts[i], vec[0], vec[1]);
+        if (text.strokeOpacity !== text.opacity) {
+          context.globalAlpha = text.opacity;
+        }
+      }
       context.fillText(texts[i], vec[0], vec[1]);
     }
   }

src/ol/style/textsymbolizer.js

@@ -60,6 +60,12 @@ ol.style.Text = function(options) {
       (options.opacity instanceof ol.expr.Expression) ?
           options.opacity : new ol.expr.Literal(options.opacity);
 
+  /**
+   * @type {ol.style.Stroke}
+   * @private
+   */
+  this.stroke_ = goog.isDefAndNotNull(options.stroke) ? options.stroke : null;
+
   /**
    * @type {ol.expr.Expression}
    * @private
@@ -102,6 +108,20 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) {
   var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature));
   goog.asserts.assert(!isNaN(opacity), 'opacity must be a number');
 
+  var strokeColor, strokeOpacity, strokeWidth;
+  if (!goog.isNull(this.stroke_)) {
+    strokeColor = ol.expr.evaluateFeature(this.stroke_.getColor(), feature);
+    goog.asserts.assertString(
+        strokeColor, 'strokeColor must be a string');
+    strokeOpacity = Number(ol.expr.evaluateFeature(
+        this.stroke_.getOpacity(), feature));
+    goog.asserts.assert(!isNaN(strokeOpacity),
+        'strokeOpacity must be a number');
+    strokeWidth = Number(ol.expr.evaluateFeature(
+        this.stroke_.getWidth(), feature));
+    goog.asserts.assert(!isNaN(strokeWidth), 'strokeWidth must be a number');
+  }
+
   var zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature));
   goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number');
 
@@ -111,6 +131,9 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) {
     fontSize: fontSize,
     text: text,
     opacity: opacity,
+    strokeColor: strokeColor,
+    strokeOpacity: strokeOpacity,
+    strokeWidth: strokeWidth,
     zIndex: zIndex
   });
 };

test/spec/ol/style/textsymbolizer.test.js

@@ -38,6 +38,19 @@ describe('ol.style.Text', function() {
       expect(symbolizer).to.be.a(ol.style.Text);
     });
 
+    it('accepts stroke', function() {
+      var symbolizer = new ol.style.Text({
+        color: '#000000',
+        text: 'Test',
+        stroke: new ol.style.Stroke({
+          color: '#ff0000',
+          width: 2,
+          opacity: 0.5
+        })
+      });
+      expect(symbolizer).to.be.a(ol.style.Text);
+    });
+
   });
 
   describe('#createLiteral()', function() {
@@ -128,6 +141,36 @@ describe('ol.style.Text', function() {
       expect(literal.opacity).to.be(0.42);
     });
 
+    it('evaluates stroke expressions', function() {
+      var symbolizer = new ol.style.Text({
+        text: 'test',
+        stroke: new ol.style.Stroke({
+          width: ol.expr.parse('strokeWidth')
+        })
+      });
+
+      var feature = new ol.Feature({
+        strokeWidth: '4.2'
+      });
+
+      var literal = symbolizer.createLiteral(feature);
+      expect(literal.strokeWidth).to.be(4.2);
+    });
+
+    it('applies stroke defaults', function() {
+      var symbolizer = new ol.style.Text({
+        text: 'test',
+        stroke: new ol.style.Stroke({
+          width: 2
+        })
+      });
+
+      var literal = symbolizer.createLiteral();
+      expect(literal.strokeWidth).to.be(2);
+      expect(literal.strokeColor).to.be('#696969');
+      expect(literal.strokeOpacity).to.be(0.75);
+    });
+
   });
 
   describe('#getColor()', function() {
@@ -338,5 +381,6 @@ goog.require('ol.expr');
 goog.require('ol.expr.Literal');
 goog.require('ol.expr.Literal');
 goog.require('ol.geom.GeometryType');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Text');
 goog.require('ol.style.TextLiteral');