Add rotateWithView option to ol.style.Text

src/ol/render/canvas/immediate.js

@@ -189,6 +189,12 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi
    */
   this.textOffsetY_ = 0;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.textRotateWithView_ = false;
+
   /**
    * @private
    * @type {number}
@@ -318,14 +324,18 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse
       flatCoordinates, offset, end, stride, this.transform_,
       this.pixelCoordinates_);
   var context = this.context_;
+  var rotation = this.textRotation_;
+  if (this.textRotateWithView_) {
+    rotation += this.viewRotation_;
+  }
   for (; offset < end; offset += stride) {
     var x = pixelCoordinates[offset] + this.textOffsetX_;
     var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
-    if (this.textRotation_ !== 0 || this.textScale_ != 1) {
+    if (rotation !== 0 || this.textScale_ != 1) {
       var localTransform = ol.transform.compose(this.tmpLocalTransform_,
           x, y,
           this.textScale_, this.textScale_,
-          this.textRotation_,
+          rotation,
           -x, -y);
       context.setTransform.apply(context, localTransform);
     }
@@ -336,7 +346,7 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse
       context.fillText(this.text_, x, y);
     }
   }
-  if (this.textRotation_ !== 0 || this.textScale_ != 1) {
+  if (rotation !== 0 || this.textScale_ != 1) {
     context.setTransform(1, 0, 0, 1, 0, 0);
   }
 };
@@ -918,6 +928,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
     var textFont = textStyle.getFont();
     var textOffsetX = textStyle.getOffsetX();
     var textOffsetY = textStyle.getOffsetY();
+    var textRotateWithView = textStyle.getRotateWithView();
     var textRotation = textStyle.getRotation();
     var textScale = textStyle.getScale();
     var textText = textStyle.getText();
@@ -936,6 +947,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
         textOffsetX !== undefined ? (this.pixelRatio_ * textOffsetX) : 0;
     this.textOffsetY_ =
         textOffsetY !== undefined ? (this.pixelRatio_ * textOffsetY) : 0;
+    this.textRotateWithView_ = textRotateWithView !== undefined ? textRotateWithView : false;
     this.textRotation_ = textRotation !== undefined ? textRotation : 0;
     this.textScale_ = this.pixelRatio_ * (textScale !== undefined ?
         textScale : 1);

src/ol/render/canvas/replay.js

@@ -384,6 +384,10 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         goog.DEBUG && console.assert(typeof instruction[9] === 'boolean',
             '10th instruction should be a boolean');
         stroke = /** @type {boolean} */ (instruction[9]);
+        rotateWithView = /** @type {boolean} */ (instruction[10]);
+        if (rotateWithView) {
+          rotation += viewRotation;
+        }
         for (; d < dd; d += 2) {
           x = pixelCoordinates[d] + offsetX;
           y = pixelCoordinates[d + 1] + offsetY;
@@ -1545,6 +1549,12 @@ ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution) {
    */
   this.textOffsetY_ = 0;
 
+  /**
+   * @private
+   * @type {boolean|undefined}
+   */
+  this.textRotateWithView_ = undefined;
+
   /**
    * @private
    * @type {number}
@@ -1603,7 +1613,7 @@ ol.render.canvas.TextReplay.prototype.drawText = function(flatCoordinates, offse
   var drawTextInstruction = [
     ol.render.canvas.Instruction.DRAW_TEXT, myBegin, myEnd, this.text_,
     this.textOffsetX_, this.textOffsetY_, this.textRotation_, this.textScale_,
-    fill, stroke];
+    fill, stroke, this.textRotateWithView_];
   this.instructions.push(drawTextInstruction);
   this.hitDetectionInstructions.push(drawTextInstruction);
   this.endGeometry(geometry, feature);
@@ -1773,6 +1783,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
     var textFont = textStyle.getFont();
     var textOffsetX = textStyle.getOffsetX();
     var textOffsetY = textStyle.getOffsetY();
+    var textRotateWithView = textStyle.getRotateWithView();
     var textRotation = textStyle.getRotation();
     var textScale = textStyle.getScale();
     var textText = textStyle.getText();
@@ -1799,6 +1810,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
     this.text_ = textText !== undefined ? textText : '';
     this.textOffsetX_ = textOffsetX !== undefined ? textOffsetX : 0;
     this.textOffsetY_ = textOffsetY !== undefined ? textOffsetY : 0;
+    this.textRotateWithView_ = textRotateWithView !== undefined ? textRotateWithView : false;
     this.textRotation_ = textRotation !== undefined ? textRotation : 0;
     this.textScale_ = textScale !== undefined ? textScale : 1;
   }

src/ol/style/text.js

@@ -28,6 +28,12 @@ ol.style.Text = function(opt_options) {
    */
   this.rotation_ = options.rotation;
 
+  /**
+   * @private
+   * @type {boolean|undefined}
+   */
+  this.rotateWithView_ = options.rotateWithView;
+
   /**
    * @private
    * @type {number|undefined}
@@ -129,6 +135,16 @@ ol.style.Text.prototype.getFill = function() {
 };
 
 
+/**
+ * Determine whether the text rotates with the map.
+ * @return {boolean|undefined} Rotate with map.
+ * @api
+ */
+ol.style.Text.prototype.getRotateWithView = function() {
+  return this.rotateWithView_;
+};
+
+
 /**
  * Get the text rotation.
  * @return {number|undefined} Rotation.