Merge pull request #1586 from twpayne/text

Add text rendering

examples/vector-layer.js

@@ -9,24 +9,39 @@ goog.require('ol.source.MapQuest');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
-var styleArray = [new ol.style.Style({
+var styleCache = {};
-  fill: new ol.style.Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#319FD3',
-    width: 1
-  })
-})];
-
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.GeoJSON({
     url: 'data/geojson/countries.geojson'
   }),
   styleFunction: function(feature, resolution) {
-    return styleArray;
+    var text = resolution < 5000 ? feature.get('name') : '';
+    if (!styleCache[text]) {
+      styleCache[text] = [new ol.style.Style({
+        fill: new ol.style.Fill({
+          color: 'rgba(255, 255, 255, 0.6)'
+        }),
+        stroke: new ol.style.Stroke({
+          color: '#319FD3',
+          width: 1
+        }),
+        text: new ol.style.Text({
+          font: '12px Calibri,sans-serif',
+          text: text,
+          fill: new ol.style.Fill({
+            color: '#000'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#fff',
+            width: 3
+          })
+        })
+      })];
+    }
+    return styleCache[text];
   }
 });
 
@@ -45,20 +60,35 @@ var map = new ol.Map({
   })
 });
 
-var highlightStyleArray = [new ol.style.Style({
+var highlightStyleCache = {};
-  stroke: new ol.style.Stroke({
-    color: '#f00',
-    width: 1
-  }),
-  fill: new ol.style.Fill({
-    color: 'rgba(255,0,0,0.1)'
-  })
-})];
 
 var featuresOverlay = new ol.render.FeaturesOverlay({
   map: map,
   styleFunction: function(feature, resolution) {
-    return highlightStyleArray;
+    var text = resolution < 5000 ? feature.get('name') : '';
+    if (!highlightStyleCache[text]) {
+      highlightStyleCache[text] = [new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: '#f00',
+          width: 1
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(255,0,0,0.1)'
+        }),
+        text: new ol.style.Text({
+          font: '12px Calibri,sans-serif',
+          text: text,
+          fill: new ol.style.Fill({
+            color: '#000'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#f00',
+            width: 3
+          })
+        })
+      })];
+    }
+    return highlightStyleCache[text];
   }
 });
 

src/objectliterals.jsdoc

@@ -943,6 +943,7 @@
 /**
  * @typedef {Object} olx.style.TextOptions
  * @property {string|undefined} font Font.
+ * @property {number|undefined} scale Scale.
  * @property {number|undefined} rotation Rotation.
  * @property {string|undefined} text Text.
  * @property {string|undefined} textAlign Text alignment.

src/ol/extent.js

@@ -216,14 +216,17 @@ ol.extent.createOrUpdateFromCoordinates = function(coordinates, opt_extent) {
 
 /**
  * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
  * @param {number} stride Stride.
  * @param {ol.Extent=} opt_extent Extent.
  * @return {ol.Extent} Extent.
  */
 ol.extent.createOrUpdateFromFlatCoordinates =
-    function(flatCoordinates, stride, opt_extent) {
+    function(flatCoordinates, offset, end, stride, opt_extent) {
   var extent = ol.extent.createOrUpdateEmpty(opt_extent);
-  return ol.extent.extendFlatCoordinates(extent, flatCoordinates, stride);
+  return ol.extent.extendFlatCoordinates(
+      extent, flatCoordinates, offset, end, stride);
 };
 
 
@@ -324,13 +327,16 @@ ol.extent.extendCoordinates = function(extent, coordinates) {
 /**
  * @param {ol.Extent} extent Extent.
  * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
  * @param {number} stride Stride.
  * @return {ol.Extent} Extent.
  */
-ol.extent.extendFlatCoordinates = function(extent, flatCoordinates, stride) {
+ol.extent.extendFlatCoordinates =
-  var i, ii;
+    function(extent, flatCoordinates, offset, end, stride) {
-  for (i = 0, ii = flatCoordinates.length; i < ii; i += stride) {
+  for (; offset < end; offset += stride) {
-    ol.extent.extendXY(extent, flatCoordinates[i], flatCoordinates[i + 1]);
+    ol.extent.extendXY(
+        extent, flatCoordinates[offset], flatCoordinates[offset + 1]);
   }
   return extent;
 };

src/ol/geom/flatgeom.js

@@ -4,6 +4,7 @@ goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.math');
 goog.require('goog.vec.Mat4');
+goog.require('ol.extent');
 
 
 /**
@@ -247,23 +248,25 @@ ol.geom.flat.inflateCoordinatesss =
  * @param {number} end End.
  * @param {number} stride Stride.
  * @param {number} fraction Fraction.
- * @param {ol.Coordinate=} opt_point Point.
+ * @param {Array.<number>=} opt_dest Destination.
- * @return {ol.Coordinate} Point at fraction along the line string.
+ * @return {Array.<number>} Destination.
  */
 ol.geom.flat.lineStringInterpolate =
-    function(flatCoordinates, offset, end, stride, fraction, opt_point) {
+    function(flatCoordinates, offset, end, stride, fraction, opt_dest) {
+  // FIXME interpolate extra dimensions
   goog.asserts.assert(0 <= fraction && fraction <= 1);
-  var point = goog.isDef(opt_point) ? opt_point : [NaN, NaN];
+  var pointX = NaN;
+  var pointY = NaN;
   var n = (end - offset) / stride;
   if (n === 0) {
     goog.asserts.fail();
   } else if (n == 1) {
-    point[0] = flatCoordinates[offset];
+    pointX = flatCoordinates[offset];
-    point[1] = flatCoordinates[offset + 1];
+    pointY = flatCoordinates[offset + 1];
   } else if (n == 2) {
-    point[0] = (1 - fraction) * flatCoordinates[offset] +
+    pointX = (1 - fraction) * flatCoordinates[offset] +
         fraction * flatCoordinates[offset + stride];
-    point[1] = (1 - fraction) * flatCoordinates[offset + 1] +
+    pointY = (1 - fraction) * flatCoordinates[offset + 1] +
         fraction * flatCoordinates[offset + stride + 1];
   } else {
     var x1 = flatCoordinates[offset];
@@ -285,15 +288,20 @@ ol.geom.flat.lineStringInterpolate =
       var t = (target - cumulativeLengths[-index - 2]) /
           (cumulativeLengths[-index - 1] - cumulativeLengths[-index - 2]);
       var o = offset + (-index - 2) * stride;
-      point[0] = (1 - t) * flatCoordinates[o] + t * flatCoordinates[o + stride];
+      pointX = (1 - t) * flatCoordinates[o] + t * flatCoordinates[o + stride];
-      point[1] = (1 - t) * flatCoordinates[o + 1] +
+      pointY = (1 - t) * flatCoordinates[o + 1] +
           t * flatCoordinates[o + stride + 1];
     } else {
-      point[0] = flatCoordinates[offset + index * stride];
+      pointX = flatCoordinates[offset + index * stride];
-      point[1] = flatCoordinates[offset + index * stride + 1];
+      pointY = flatCoordinates[offset + index * stride + 1];
     }
   }
-  return point;
+  if (goog.isDefAndNotNull(opt_dest)) {
+    opt_dest.push(pointX, pointY);
+    return opt_dest;
+  } else {
+    return [pointX, pointY];
+  }
 };
 
 
@@ -397,25 +405,6 @@ ol.geom.flat.linearRingIsClockwise =
 };
 
 
-/**
- * @param {Array.<number>} flatCoordinates Flat coordinates.
- * @param {number} offset Offset.
- * @param {number} end End.
- * @param {number} stride Stride.
- * @return {number} Mid Y.
- */
-ol.geom.flat.linearRingMidY = function(flatCoordinates, offset, end, stride) {
-  var minY = Infinity;
-  var maxY = -Infinity;
-  for (; offset < end; offset += stride) {
-    var y = flatCoordinates[offset + 1];
-    minY = Math.min(minY, y);
-    maxY = Math.max(maxY, y);
-  }
-  return (minY + maxY) / 2;
-};
-
-
 /**
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
@@ -484,21 +473,21 @@ ol.geom.flat.linearRingsContainsXY =
 
 
 /**
- * Calculates a point that is guaranteed to lie in the interior of the linear
+ * Calculates a point that is likely to lie in the interior of the linear rings.
- * rings.
  * Inspired by JTS's com.vividsolutions.jts.geom.Geometry#getInteriorPoint.
  * @param {Array.<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {Array.<number>} ends Ends.
  * @param {number} stride Stride.
- * @param {number} y Y.
+ * @param {Array.<number>} flatCenters Flat centers.
- * @param {Array.<number>=} opt_point Point.
+ * @param {number} flatCentersOffset Flat center offset.
- * @return {Array.<number>} A point which is in the interior of the linear
+ * @param {Array.<number>=} opt_dest Destination.
- *     rings.
+ * @return {Array.<number>} Destination.
  */
-ol.geom.flat.linearRingsGetInteriorPoint =
+ol.geom.flat.linearRingsGetInteriorPoint = function(flatCoordinates, offset,
-    function(flatCoordinates, offset, ends, stride, y, opt_point) {
+    ends, stride, flatCenters, flatCentersOffset, opt_dest) {
   var i, ii, x, x1, x2, y1, y2;
+  var y = flatCenters[flatCentersOffset + 1];
   /** @type {Array.<number>} */
   var intersections = [];
   // Calculate intersections with the horizontal line
@@ -516,15 +505,8 @@ ol.geom.flat.linearRingsGetInteriorPoint =
     y1 = y2;
   }
   // Find the longest segment of the horizontal line that has its center point
-  // inside the polygon
+  // inside the linear ring.
-  var point;
+  var pointX = NaN;
-  if (goog.isDef(opt_point)) {
-    point = opt_point;
-    point[0] = NaN;
-    point[1] = y;
-  } else {
-    point = [NaN, y];
-  }
   var maxSegmentLength = -Infinity;
   intersections.sort();
   x1 = intersections[0];
@@ -535,14 +517,23 @@ ol.geom.flat.linearRingsGetInteriorPoint =
       x = (x1 + x2) / 2;
       if (ol.geom.flat.linearRingsContainsXY(
           flatCoordinates, offset, ends, stride, x, y)) {
-        point[0] = x;
+        pointX = x;
         maxSegmentLength = segmentLength;
       }
     }
     x1 = x2;
   }
-  goog.asserts.assert(!isNaN(point[0]));
+  if (isNaN(pointX)) {
-  return point;
+    // There is no horizontal line that has its center point inside the linear
+    // ring.  Use the center of the the linear ring's extent.
+    pointX = flatCenters[flatCentersOffset];
+  }
+  if (goog.isDef(opt_dest)) {
+    opt_dest.push(pointX, y);
+    return opt_dest;
+  } else {
+    return [pointX, y];
+  }
 };
 
 
@@ -644,21 +635,21 @@ ol.geom.flat.linearRingssContainsXY =
  * @param {number} offset Offset.
  * @param {Array.<Array.<number>>} endss Endss.
  * @param {number} stride Stride.
- * @param {Array.<number>} ys Ys.
+ * @param {Array.<number>} flatCenters Flat centers.
- * @return {Array.<ol.Coordinate>} Mid Ys.
+ * @return {Array.<number>} Interior points.
  */
 ol.geom.flat.linearRingssGetInteriorPoints =
-    function(flatCoordinates, offset, endss, stride, ys) {
+    function(flatCoordinates, offset, endss, stride, flatCenters) {
-  goog.asserts.assert(endss.length == ys.length);
+  goog.asserts.assert(2 * endss.length == flatCenters.length);
-  var points = [];
+  var interiorPoints = [];
   var i, ii;
   for (i = 0, ii = endss.length; i < ii; ++i) {
     var ends = endss[i];
-    points.push(ol.geom.flat.linearRingsGetInteriorPoint(
+    interiorPoints = ol.geom.flat.linearRingsGetInteriorPoint(flatCoordinates,
-        flatCoordinates, offset, ends, stride, ys[i]));
+        offset, ends, stride, flatCenters, 2 * i, interiorPoints);
     offset = ends[ends.length - 1];
   }
-  return points;
+  return interiorPoints;
 };
 
 
@@ -667,19 +658,21 @@ ol.geom.flat.linearRingssGetInteriorPoints =
  * @param {number} offset Offset.
  * @param {Array.<Array.<number>>} endss Endss.
  * @param {number} stride Stride.
- * @return {Array.<number>} Mid Ys.
+ * @return {Array.<number>} Flat centers.
  */
-ol.geom.flat.linearRingssMidYs =
+ol.geom.flat.linearRingssGetFlatCenters =
     function(flatCoordinates, offset, endss, stride) {
-  var midYs = [];
+  var flatCenters = [];
   var i, ii;
+  var extent = ol.extent.createEmpty();
   for (i = 0, ii = endss.length; i < ii; ++i) {
     var ends = endss[i];
-    midYs.push(
+    extent = ol.extent.createOrUpdateFromFlatCoordinates(
-        ol.geom.flat.linearRingMidY(flatCoordinates, offset, ends[0], stride));
+        flatCoordinates, offset, ends[0], stride);
+    flatCenters.push((extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2);
     offset = ends[ends.length - 1];
   }
-  return midYs;
+  return flatCenters;
 };
 
 

src/ol/geom/linestring.js

@@ -20,6 +20,18 @@ ol.geom.LineString = function(coordinates, opt_layout) {
 
   goog.base(this);
 
+  /**
+   * @private
+   * @type {ol.Coordinate}
+   */
+  this.flatMidpoint_ = null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.flatMidpointRevision_ = -1;
+
   /**
    * @private
    * @type {number}
@@ -88,6 +100,20 @@ ol.geom.LineString.prototype.getLength = function() {
 };
 
 
+/**
+ * @return {Array.<number>} Flat midpoint.
+ */
+ol.geom.LineString.prototype.getFlatMidpoint = function() {
+  if (this.flatMidpointRevision_ != this.getRevision()) {
+    this.flatMidpoint_ = ol.geom.flat.lineStringInterpolate(
+        this.flatCoordinates, 0, this.flatCoordinates.length, this.stride,
+        0.5, this.flatMidpoint_);
+    this.flatMidpointRevision_ = this.getRevision();
+  }
+  return this.flatMidpoint_;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/geom/multilinestring.js

@@ -112,6 +112,27 @@ ol.geom.MultiLineString.prototype.getLineStrings = function() {
 };
 
 
+/**
+ * @return {Array.<number>} Flat midpoints.
+ */
+ol.geom.MultiLineString.prototype.getFlatMidpoints = function() {
+  var midpoints = [];
+  var flatCoordinates = this.flatCoordinates;
+  var offset = 0;
+  var ends = this.ends_;
+  var stride = this.stride;
+  var i, ii;
+  for (i = 0, ii = ends.length; i < ii; ++i) {
+    var end = ends[i];
+    var midpoint = ol.geom.flat.lineStringInterpolate(
+        flatCoordinates, offset, end, stride, 0.5);
+    goog.array.extend(midpoints, midpoint);
+    offset = end;
+  }
+  return midpoints;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/geom/multipolygon.js

@@ -31,13 +31,13 @@ ol.geom.MultiPolygon = function(coordinates, opt_layout) {
    * @private
    * @type {number}
    */
-  this.interiorPointsRevision_ = -1;
+  this.flatInteriorPointsRevision_ = -1;
 
   /**
    * @private
-   * @type {Array.<ol.Coordinate>}
+   * @type {Array.<number>}
    */
-  this.interiorPoints_ = null;
+  this.flatInteriorPoints_ = null;
 
   /**
    * @private
@@ -138,17 +138,18 @@ ol.geom.MultiPolygon.prototype.getEndss = function() {
 
 
 /**
- * @return {Array.<ol.Coordinate>} Interior points.
+ * @return {Array.<number>} Flat interior points.
  */
-ol.geom.MultiPolygon.prototype.getInteriorPoints = function() {
+ol.geom.MultiPolygon.prototype.getFlatInteriorPoints = function() {
-  if (this.interiorPointsRevision_ != this.getRevision()) {
+  if (this.flatInteriorPointsRevision_ != this.getRevision()) {
-    var ys = ol.geom.flat.linearRingssMidYs(
+    var flatCenters = ol.geom.flat.linearRingssGetFlatCenters(
         this.flatCoordinates, 0, this.endss_, this.stride);
-    this.interiorPoints_ = ol.geom.flat.linearRingssGetInteriorPoints(
+    this.flatInteriorPoints_ = ol.geom.flat.linearRingssGetInteriorPoints(
-        this.getOrientedFlatCoordinates(), 0, this.endss_, this.stride, ys);
+        this.getOrientedFlatCoordinates(), 0, this.endss_, this.stride,
-    this.interiorPointsRevision_ = this.getRevision();
+        flatCenters);
+    this.flatInteriorPointsRevision_ = this.getRevision();
   }
-  return this.interiorPoints_;
+  return this.flatInteriorPoints_;
 };
 
 

src/ol/geom/polygon.js

@@ -31,13 +31,13 @@ ol.geom.Polygon = function(coordinates, opt_layout) {
    * @private
    * @type {number}
    */
-  this.interiorPointRevision_ = -1;
+  this.flatInteriorPointRevision_ = -1;
 
   /**
    * @private
    * @type {ol.Coordinate}
    */
-  this.interiorPoint_ = null;
+  this.flatInteriorPoint_ = null;
 
   /**
    * @private
@@ -138,17 +138,17 @@ ol.geom.Polygon.prototype.getEnds = function() {
 
 
 /**
- * @return {ol.Coordinate} Interior point.
+ * @return {Array.<number>} Interior point.
  */
-ol.geom.Polygon.prototype.getInteriorPoint = function() {
+ol.geom.Polygon.prototype.getFlatInteriorPoint = function() {
-  if (this.interiorPointRevision_ != this.getRevision()) {
+  if (this.flatInteriorPointRevision_ != this.getRevision()) {
-    var extent = this.getExtent();
+    var flatCenter = ol.extent.getCenter(this.getExtent());
-    var y = (extent[1] + extent[3]) / 2;
+    this.flatInteriorPoint_ = ol.geom.flat.linearRingsGetInteriorPoint(
-    this.interiorPoint_ = ol.geom.flat.linearRingsGetInteriorPoint(
+        this.getOrientedFlatCoordinates(), 0, this.ends_, this.stride,
-        this.getOrientedFlatCoordinates(), 0, this.ends_, this.stride, y);
+        flatCenter, 0);
-    this.interiorPointRevision_ = this.getRevision();
+    this.flatInteriorPointRevision_ = this.getRevision();
   }
-  return this.interiorPoint_;
+  return this.flatInteriorPoint_;
 };
 
 

src/ol/geom/simplegeometry.js

@@ -90,7 +90,8 @@ ol.geom.SimpleGeometry.prototype.containsXY = goog.functions.FALSE;
 ol.geom.SimpleGeometry.prototype.getExtent = function(opt_extent) {
   if (this.extentRevision != this.getRevision()) {
     this.extent = ol.extent.createOrUpdateFromFlatCoordinates(
-        this.flatCoordinates, this.stride, this.extent);
+        this.flatCoordinates, 0, this.flatCoordinates.length, this.stride,
+        this.extent);
     this.extentRevision = this.getRevision();
   }
   goog.asserts.assert(goog.isDef(this.extent));

src/ol/render/canvas/canvas.js

@@ -3,6 +3,31 @@ goog.provide('ol.render.canvas');
 goog.require('ol.color');
 
 
+/**
+ * @typedef {{fillStyle: string}}
+ */
+ol.render.canvas.FillState;
+
+
+/**
+ * @typedef {{lineCap: string,
+ *            lineDash: Array.<number>,
+ *            lineJoin: string,
+ *            lineWidth: number,
+ *            miterLimit: number,
+ *            strokeStyle: string}}
+ */
+ol.render.canvas.StrokeState;
+
+
+/**
+ * @typedef {{font: string,
+ *            textAlign: string,
+ *            textBaseline: string}}
+ */
+ol.render.canvas.TextState;
+
+
 /**
  * @const
  * @type {string}
@@ -49,21 +74,21 @@ ol.render.canvas.defaultMiterLimit = 10;
  * @const
  * @type {ol.Color}
  */
-ol.render.canvas.defaultStrokeStyle = ol.color.fromString('black');
+ol.render.canvas.defaultStrokeStyle = [0, 0, 0, 1];
 
 
 /**
  * @const
  * @type {string}
  */
-ol.render.canvas.defaultTextAlign = 'start';
+ol.render.canvas.defaultTextAlign = 'center';
 
 
 /**
  * @const
  * @type {string}
  */
-ol.render.canvas.defaultTextBaseline = 'alphabetic';
+ol.render.canvas.defaultTextBaseline = 'middle';
 
 
 /**

src/ol/render/canvas/canvasimmediate.js

@@ -1,6 +1,6 @@
 // FIXME test, especially polygons with holes and multipolygons
 // FIXME need to handle large thick features (where pixel size matters)
-// FIXME store raw style values for text
+// FIXME add offset and end to ol.geom.flat.transform2D?
 
 goog.provide('ol.render.canvas.Immediate');
 
@@ -10,9 +10,9 @@ goog.require('goog.object');
 goog.require('goog.vec.Mat4');
 goog.require('ol.color');
 goog.require('ol.extent');
+goog.require('ol.geom.flat');
 goog.require('ol.render.IRender');
 goog.require('ol.render.canvas');
-goog.require('ol.style.Text');
 goog.require('ol.vec.Mat4');
 
 
@@ -61,55 +61,117 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform) {
 
   /**
    * @private
-   * @type {{currentFillStyle: (string|undefined),
+   * @type {?ol.render.canvas.FillState}
-   *         currentStrokeStyle: (string|undefined),
-   *         currentLineCap: (string|undefined),
-   *         currentLineDash: Array.<number>,
-   *         currentLineJoin: (string|undefined),
-   *         currentLineWidth: (number|undefined),
-   *         currentMiterLimit: (number|undefined),
-   *         fillStyle: (string|undefined),
-   *         strokeStyle: (string|undefined),
-   *         lineWidth: (number|undefined),
-   *         image: (HTMLCanvasElement|HTMLVideoElement|Image),
-   *         anchorX: (number|undefined),
-   *         anchorY: (number|undefined),
-   *         height: (number|undefined),
-   *         width: (number|undefined),
-   *         scale: number,
-   *         rotation: number,
-   *         lineCap: (string|undefined),
-   *         lineDash: Array.<number>,
-   *         lineJoin: (string|undefined),
-   *         miterLimit: (number|undefined),
-   *         snapToPixel: (boolean|undefined),
-   *         textStyle: ol.style.Text}}
    */
-  this.state_ = {
+  this.contextFillState_ = null;
-    currentFillStyle: undefined,
+
-    currentStrokeStyle: undefined,
+  /**
-    currentLineCap: undefined,
+   * @private
-    currentLineDash: null,
+   * @type {?ol.render.canvas.StrokeState}
-    currentLineJoin: undefined,
+   */
-    currentLineWidth: undefined,
+  this.contextStrokeState_ = null;
-    currentMiterLimit: undefined,
+
-    fillStyle: undefined,
+  /**
-    strokeStyle: undefined,
+   * @private
-    lineWidth: undefined,
+   * @type {?ol.render.canvas.TextState}
-    image: null,
+   */
-    anchorX: undefined,
+  this.contextTextState_ = null;
-    anchorY: undefined,
+
-    height: undefined,
+  /**
-    rotation: 0,
+   * @private
-    scale: 1,
+   * @type {?ol.render.canvas.FillState}
-    width: undefined,
+   */
-    lineCap: undefined,
+  this.fillState_ = null;
-    lineDash: null,
+
-    lineJoin: undefined,
+  /**
-    miterLimit: undefined,
+   * @private
-    snapToPixel: undefined,
+   * @type {?ol.render.canvas.StrokeState}
-    textStyle: null
+   */
-  };
+  this.strokeState_ = null;
+
+  /**
+   * @private
+   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
+   */
+  this.image_ = null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageAnchorX_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageAnchorY_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageHeight_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageRotation_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageScale_ = 0;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.imageSnapToPixel_ = false;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageWidth_ = 0;
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.text_ = '';
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textRotation_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textScale_ = 0;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.FillState}
+   */
+  this.textFillState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.StrokeState}
+   */
+  this.textStrokeState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.TextState}
+   */
+  this.textState_ = null;
 
   /**
    * @private
@@ -127,37 +189,37 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform) {
 
 
 /**
- * @param {ol.geom.Point|ol.geom.MultiPoint} geometry Geometry.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
  * @private
  */
-ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) {
+ol.render.canvas.Immediate.prototype.drawImages_ =
-  var state = this.state_;
+    function(flatCoordinates, offset, end, stride) {
-  var context = this.context_;
+  if (goog.isNull(this.image_)) {
-  if (!ol.extent.intersects(this.extent_, geometry.getExtent()) ||
-      goog.isNull(state.image)) {
     return;
   }
-  goog.asserts.assert(goog.isDef(state.anchorX));
+  goog.asserts.assert(offset === 0);
-  goog.asserts.assert(goog.isDef(state.anchorY));
+  goog.asserts.assert(end == flatCoordinates.length);
-  goog.asserts.assert(goog.isDef(state.height));
+  var pixelCoordinates = ol.geom.flat.transform2D(
-  goog.asserts.assert(goog.isDef(state.width));
+      flatCoordinates, 2, this.transform_, this.pixelCoordinates_);
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+  var context = this.context_;
-      geometry, this.transform_, this.pixelCoordinates_);
   var localTransform = this.tmpLocalTransform_;
   var i, ii;
   for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) {
-    var x = pixelCoordinates[i] - state.anchorX;
+    var x = pixelCoordinates[i] - this.imageAnchorX_;
-    var y = pixelCoordinates[i + 1] - state.anchorY;
+    var y = pixelCoordinates[i + 1] - this.imageAnchorY_;
-    if (state.snapToPixel) {
+    if (this.imageSnapToPixel_) {
       x = (x + 0.5) | 0;
       y = (y + 0.5) | 0;
     }
-    if (state.scale != 1 || state.rotation !== 0) {
+    if (this.imageRotation_ !== 0 || this.imageScale_ != 1) {
-      var centerX = x + state.anchorX;
+      var centerX = x + this.imageAnchorX_;
-      var centerY = y + state.anchorY;
+      var centerY = y + this.imageAnchorY_;
       ol.vec.Mat4.makeTransform2D(localTransform,
-          centerX, centerY, state.scale, state.scale,
+          centerX, centerY, this.imageScale_, this.imageScale_,
-          state.rotation, -centerX, -centerY);
+          this.imageRotation_, -centerX, -centerY);
       context.setTransform(
           goog.vec.Mat4.getElement(localTransform, 0, 0),
           goog.vec.Mat4.getElement(localTransform, 1, 0),
@@ -166,43 +228,60 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(geometry) {
           goog.vec.Mat4.getElement(localTransform, 0, 3),
           goog.vec.Mat4.getElement(localTransform, 1, 3));
     }
-    context.drawImage(state.image, x, y, state.width, state.height);
+    context.drawImage(this.image_, x, y, this.imageWidth_, this.imageHeight_);
   }
-  if (state.scale != 1 || state.rotation !== 0) {
+  if (this.imageRotation_ !== 0 || this.imageScale_ != 1) {
     context.setTransform(1, 0, 0, 1, 0, 0);
   }
 };
 
 
 /**
- * @param {ol.geom.Point|ol.geom.MultiPoint} geometry Geometry.
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
  * @private
  */
-ol.render.canvas.Immediate.prototype.drawText_ = function(geometry) {
+ol.render.canvas.Immediate.prototype.drawText_ =
-  var context = this.context_;
+    function(flatCoordinates, offset, end, stride) {
-  var state = this.state_;
+  if (goog.isNull(this.textState_) || this.text_ === '') {
-  var fillStyle = state.fillStyle;
-  var strokeStyle = state.strokeStyle;
-  var textStyle = state.textStyle;
-  if (!ol.extent.intersects(this.extent_, geometry.getExtent()) ||
-      !goog.isDefAndNotNull(textStyle) || !goog.isDef(textStyle.text) ||
-      (!goog.isDef(fillStyle) && !goog.isDef(strokeStyle))) {
     return;
   }
-  this.setFillStrokeStyles_();
+  if (!goog.isNull(this.textFillState_)) {
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+    this.setContextFillState_(this.textFillState_);
-      geometry, this.transform_, this.pixelCoordinates_);
+  }
-  var i, ii;
+  if (!goog.isNull(this.textStrokeState_)) {
-  for (i = 0, ii = pixelCoordinates.length; i < ii; i += 2) {
+    this.setContextStrokeState_(this.textStrokeState_);
-    var x = pixelCoordinates[i];
+  }
-    var y = pixelCoordinates[i + 1];
+  goog.asserts.assert(offset === 0);
-    // FIXME stroke before fill or fill before stroke?
+  goog.asserts.assert(end == flatCoordinates.length);
-    if (goog.isDef(strokeStyle)) {
+  var pixelCoordinates = ol.geom.flat.transform2D(
-      context.strokeText(textStyle.text, x, y);
+      flatCoordinates, stride, this.transform_, this.pixelCoordinates_);
+  var context = this.context_;
+  for (; offset < end; offset += stride) {
+    var x = pixelCoordinates[offset];
+    var y = pixelCoordinates[offset + 1];
+    if (this.textRotation_ !== 0 || this.textScale_ != 1) {
+      var localTransform = ol.vec.Mat4.makeTransform2D(this.tmpLocalTransform_,
+          x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y);
+      context.setTransform(
+          goog.vec.Mat4.getElement(localTransform, 0, 0),
+          goog.vec.Mat4.getElement(localTransform, 1, 0),
+          goog.vec.Mat4.getElement(localTransform, 0, 1),
+          goog.vec.Mat4.getElement(localTransform, 1, 1),
+          goog.vec.Mat4.getElement(localTransform, 0, 3),
+          goog.vec.Mat4.getElement(localTransform, 1, 3));
     }
-    if (goog.isDef(fillStyle)) {
+    if (!goog.isNull(this.textStrokeState_)) {
-      context.fillText(textStyle.text, x, y);
+      context.strokeText(this.text_, x, y);
     }
+    if (!goog.isNull(this.textFillState_)) {
+      context.fillText(this.text_, x, y);
+    }
+  }
+  if (this.textRotation_ !== 0 || this.textScale_ != 1) {
+    context.setTransform(1, 0, 0, 1, 0, 0);
   }
 };
 
@@ -271,25 +350,31 @@ ol.render.canvas.Immediate.prototype.drawCircleGeometry =
   if (!ol.extent.intersects(this.extent_, circleGeometry.getExtent())) {
     return;
   }
-  var state = this.state_;
+  if (!goog.isNull(this.fillState_) || !goog.isNull(this.strokeState_)) {
-  if (!goog.isDef(state.fillStyle) && !goog.isDef(state.strokeStyle)) {
+    if (!goog.isNull(this.fillState_)) {
-    return;
+      this.setContextFillState_(this.fillState_);
+    }
+    if (!goog.isNull(this.strokeState_)) {
+      this.setContextStrokeState_(this.strokeState_);
+    }
+    var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+        circleGeometry, this.transform_, this.pixelCoordinates_);
+    var dx = pixelCoordinates[2] - pixelCoordinates[0];
+    var dy = pixelCoordinates[3] - pixelCoordinates[1];
+    var radius = Math.sqrt(dx * dx + dy * dy);
+    var context = this.context_;
+    context.beginPath();
+    context.arc(
+        pixelCoordinates[0], pixelCoordinates[1], radius, 0, 2 * Math.PI);
+    if (!goog.isNull(this.fillState_)) {
+      context.fill();
+    }
+    if (!goog.isNull(this.strokeState_)) {
+      context.stroke();
+    }
   }
-  this.setFillStrokeStyles_();
+  if (this.text_ !== '') {
-  var context = this.context_;
+    this.drawText_(circleGeometry.getCenter(), 0, 2, 2);
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-      circleGeometry, this.transform_, this.pixelCoordinates_);
-  var dx = pixelCoordinates[2] - pixelCoordinates[0];
-  var dy = pixelCoordinates[3] - pixelCoordinates[1];
-  var radius = Math.sqrt(dx * dx + dy * dy);
-  context.beginPath();
-  context.arc(pixelCoordinates[0], pixelCoordinates[1], radius, 0, 2 * Math.PI);
-  if (goog.isDef(state.fillStyle)) {
-    context.fill();
-  }
-  if (goog.isDef(state.strokeStyle)) {
-    goog.asserts.assert(goog.isDef(state.lineWidth));
-    context.stroke();
   }
 };
 
@@ -310,6 +395,7 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) {
   this.drawAsync(zIndex, function(render) {
     render.setFillStrokeStyle(style.getFill(), style.getStroke());
     render.setImageStyle(style.getImage());
+    render.setTextStyle(style.getText());
     var renderGeometry =
         ol.render.canvas.Immediate.GEOMETRY_RENDERES_[geometry.getType()];
     goog.asserts.assert(goog.isDef(renderGeometry));
@@ -340,8 +426,14 @@ ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry =
  */
 ol.render.canvas.Immediate.prototype.drawPointGeometry =
     function(pointGeometry, data) {
-  this.drawImages_(pointGeometry);
+  var flatCoordinates = pointGeometry.getFlatCoordinates();
-  this.drawText_(pointGeometry);
+  var stride = pointGeometry.getStride();
+  if (!goog.isNull(this.image_)) {
+    this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
+  }
+  if (this.text_ !== '') {
+    this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
+  }
 };
 
 
@@ -350,8 +442,14 @@ ol.render.canvas.Immediate.prototype.drawPointGeometry =
  */
 ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
     function(multiPointGeometry, data) {
-  this.drawImages_(multiPointGeometry);
+  var flatCoordinates = multiPointGeometry.getFlatCoordinates();
-  this.drawText_(multiPointGeometry);
+  var stride = multiPointGeometry.getStride();
+  if (!goog.isNull(this.image_)) {
+    this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
+  }
+  if (this.text_ !== '') {
+    this.drawText_(flatCoordinates, 0, flatCoordinates.length, stride);
+  }
 };
 
 
@@ -360,17 +458,22 @@ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
  */
 ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
     function(lineStringGeometry, data) {
-  if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent()) ||
+  if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent())) {
-      !goog.isDef(this.state_.strokeStyle)) {
     return;
   }
-  this.setFillStrokeStyles_();
+  if (!goog.isNull(this.strokeState_)) {
-  var context = this.context_;
+    this.setContextStrokeState_(this.strokeState_);
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+    var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-      lineStringGeometry, this.transform_, this.pixelCoordinates_);
+        lineStringGeometry, this.transform_, this.pixelCoordinates_);
-  context.beginPath();
+    var context = this.context_;
-  this.moveToLineTo_(pixelCoordinates, 0, pixelCoordinates.length, false);
+    context.beginPath();
-  context.stroke();
+    this.moveToLineTo_(pixelCoordinates, 0, pixelCoordinates.length, false);
+    context.stroke();
+  }
+  if (this.text_ !== '') {
+    var flatMidpoint = lineStringGeometry.getFlatMidpoint();
+    this.drawText_(flatMidpoint, 0, 2, 2);
+  }
 };
 
 
@@ -380,22 +483,28 @@ ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
 ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
     function(multiLineStringGeometry, data) {
   var geometryExtent = multiLineStringGeometry.getExtent();
-  if (!ol.extent.intersects(this.extent_, geometryExtent) ||
+  if (!ol.extent.intersects(this.extent_, geometryExtent)) {
-      !goog.isDef(this.state_.strokeStyle)) {
     return;
   }
-  this.setFillStrokeStyles_();
+  var pixelCoordinates;
-  var context = this.context_;
+  if (!goog.isNull(this.strokeState_)) {
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+    this.setContextStrokeState_(this.strokeState_);
-      multiLineStringGeometry, this.transform_, this.pixelCoordinates_);
+    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
-  context.beginPath();
+        multiLineStringGeometry, this.transform_, this.pixelCoordinates_);
-  var ends = multiLineStringGeometry.getEnds();
+    var context = this.context_;
-  var offset = 0;
+    context.beginPath();
-  var i, ii;
+    var ends = multiLineStringGeometry.getEnds();
-  for (i = 0, ii = ends.length; i < ii; ++i) {
+    var offset = 0;
-    offset = this.moveToLineTo_(pixelCoordinates, offset, ends[i], false);
+    var i, ii;
+    for (i = 0, ii = ends.length; i < ii; ++i) {
+      offset = this.moveToLineTo_(pixelCoordinates, offset, ends[i], false);
+    }
+    context.stroke();
+  }
+  if (this.text_ !== '') {
+    var flatMidpoints = multiLineStringGeometry.getFlatMidpoints();
+    this.drawText_(flatMidpoints, 0, flatMidpoints.length, 2);
   }
-  context.stroke();
 };
 
 
@@ -407,23 +516,29 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
   if (!ol.extent.intersects(this.extent_, polygonGeometry.getExtent())) {
     return;
   }
-  var state = this.state_;
+  var pixelCoordinates;
-  if (!goog.isDef(state.fillStyle) && !goog.isDef(state.strokeStyle)) {
+  if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) {
-    return;
+    if (!goog.isNull(this.fillState_)) {
+      this.setContextFillState_(this.fillState_);
+    }
+    if (!goog.isNull(this.strokeState_)) {
+      this.setContextStrokeState_(this.strokeState_);
+    }
+    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+        polygonGeometry, this.transform_, this.pixelCoordinates_);
+    var context = this.context_;
+    context.beginPath();
+    this.drawRings_(pixelCoordinates, 0, polygonGeometry.getEnds());
+    if (!goog.isNull(this.fillState_)) {
+      context.fill();
+    }
+    if (!goog.isNull(this.strokeState_)) {
+      context.stroke();
+    }
   }
-  this.setFillStrokeStyles_();
+  if (this.text_ !== '') {
-  var context = this.context_;
+    var flatInteriorPoint = polygonGeometry.getFlatInteriorPoint();
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+    this.drawText_(flatInteriorPoint, 0, 2, 2);
-      polygonGeometry, this.transform_, this.pixelCoordinates_);
-  var ends = polygonGeometry.getEnds();
-  context.beginPath();
-  this.drawRings_(pixelCoordinates, 0, ends);
-  if (goog.isDef(state.fillStyle)) {
-    context.fill();
-  }
-  if (goog.isDef(state.strokeStyle)) {
-    goog.asserts.assert(goog.isDef(state.lineWidth));
-    context.stroke();
   }
 };
 
@@ -436,32 +551,45 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry =
   if (!ol.extent.intersects(this.extent_, multiPolygonGeometry.getExtent())) {
     return;
   }
-  var state = this.state_;
+  var pixelCoordinates;
-  if (!goog.isDef(state.fillStyle) && !goog.isDef(state.strokeStyle)) {
+  if (!goog.isNull(this.strokeState_) || !goog.isNull(this.fillState_)) {
-    return;
+    if (!goog.isNull(this.fillState_)) {
+      this.setContextFillState_(this.fillState_);
+    }
+    if (!goog.isNull(this.strokeState_)) {
+      this.setContextStrokeState_(this.strokeState_);
+    }
+    pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+        multiPolygonGeometry, this.transform_, this.pixelCoordinates_);
+    var context = this.context_;
+    var endss = multiPolygonGeometry.getEndss();
+    var offset = 0;
+    var i, ii;
+    for (i = 0, ii = endss.length; i < ii; ++i) {
+      var ends = endss[i];
+      context.beginPath();
+      offset = this.drawRings_(pixelCoordinates, offset, ends);
+      if (!goog.isNull(this.fillState_)) {
+        context.fill();
+      }
+      if (!goog.isNull(this.strokeState_)) {
+        context.stroke();
+      }
+    }
   }
-  this.setFillStrokeStyles_();
+  if (this.text_ !== '') {
-  var context = this.context_;
+    var flatInteriorPoints = multiPolygonGeometry.getFlatInteriorPoints();
-  var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
+    this.drawText_(flatInteriorPoints, 0, flatInteriorPoints.length, 2);
-      multiPolygonGeometry, this.transform_, this.pixelCoordinates_);
-  var endss = multiPolygonGeometry.getEndss();
-  var offset = 0;
-  var i, ii;
-  for (i = 0, ii = endss.length; i < ii; ++i) {
-    var ends = endss[i];
-    context.beginPath();
-    offset = this.drawRings_(pixelCoordinates, offset, ends);
-    if (goog.isDef(state.fillStyle)) {
-      context.fill();
-    }
-    if (goog.isDef(state.strokeStyle)) {
-      goog.asserts.assert(goog.isDef(state.lineWidth));
-      context.stroke();
-    }
   }
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Immediate.prototype.drawText = goog.abstractMethod;
+
+
 /**
  * FIXME: empty description for jsdoc
  */
@@ -480,86 +608,143 @@ ol.render.canvas.Immediate.prototype.flush = function() {
 
 
 /**
- * @inheritDoc
+ * @param {ol.render.canvas.FillState} fillState Fill state.
+ * @private
  */
-ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
+ol.render.canvas.Immediate.prototype.setContextFillState_ =
-    function(fillStyle, strokeStyle) {
+    function(fillState) {
-  var state = this.state_;
+  var context = this.context_;
-  if (!goog.isNull(fillStyle)) {
+  var contextFillState = this.contextFillState_;
-    var fillStyleColor = fillStyle.getColor();
+  if (goog.isNull(contextFillState)) {
-    state.fillStyle = ol.color.asString(!goog.isNull(fillStyleColor) ?
+    context.fillStyle = fillState.fillStyle;
-        fillStyleColor : ol.render.canvas.defaultFillStyle);
+    this.contextFillState_ = {
+      fillStyle: fillState.fillStyle
+    };
   } else {
-    state.fillStyle = undefined;
+    if (contextFillState.fillStyle != fillState.fillStyle) {
-  }
+      contextFillState.fillStyle = context.fillStyle = fillState.fillStyle;
-  if (!goog.isNull(strokeStyle)) {
+    }
-    var strokeStyleColor = strokeStyle.getColor();
-    state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ?
-        strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-    var strokeStyleLineCap = strokeStyle.getLineCap();
-    state.lineCap = goog.isDef(strokeStyleLineCap) ?
-        strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-    var strokeStyleLineDash = strokeStyle.getLineDash();
-    state.lineDash = !goog.isNull(strokeStyleLineDash) ?
-        strokeStyleLineDash : ol.render.canvas.defaultLineDash;
-    var strokeStyleLineJoin = strokeStyle.getLineJoin();
-    state.lineJoin = goog.isDef(strokeStyleLineJoin) ?
-        strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
-    var strokeStyleWidth = strokeStyle.getWidth();
-    state.lineWidth = this.pixelRatio_ * (goog.isDef(strokeStyleWidth) ?
-        strokeStyleWidth : ol.render.canvas.defaultLineWidth);
-    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
-    state.miterLimit = goog.isDef(strokeStyleMiterLimit) ?
-        strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
-  } else {
-    state.strokeStyle = undefined;
-    state.lineCap = undefined;
-    state.lineDash = null;
-    state.lineJoin = undefined;
-    state.lineWidth = undefined;
-    state.miterLimit = undefined;
   }
 };
 
 
 /**
+ * @param {ol.render.canvas.StrokeState} strokeState Stroke state.
  * @private
  */
-ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() {
+ol.render.canvas.Immediate.prototype.setContextStrokeState_ =
-  var state = this.state_;
+    function(strokeState) {
   var context = this.context_;
-  var fillStyle = state.fillStyle;
+  var contextStrokeState = this.contextStrokeState_;
-  var strokeStyle = state.strokeStyle;
+  if (goog.isNull(contextStrokeState)) {
-  var lineCap = state.lineCap;
+    context.lineCap = strokeState.lineCap;
-  var lineDash = state.lineDash;
+    context.lineDash = strokeState.lineDash;
-  var lineJoin = state.lineJoin;
+    context.lineJoin = strokeState.lineJoin;
-  var lineWidth = state.lineWidth;
+    context.lineWidth = strokeState.lineWidth;
-  var miterLimit = state.miterLimit;
+    context.miterLimit = strokeState.miterLimit;
-  if (goog.isDef(fillStyle) && state.currentFillStyle != fillStyle) {
+    context.strokeStyle = strokeState.strokeStyle;
-    context.fillStyle = fillStyle;
+    this.contextStrokeState_ = {
-    state.currentFillStyle = fillStyle;
+      lineCap: strokeState.lineCap,
-  }
+      lineDash: strokeState.lineDash,
-  if (goog.isDef(strokeStyle)) {
+      lineJoin: strokeState.lineJoin,
-    goog.asserts.assert(goog.isDef(lineWidth));
+      lineWidth: strokeState.lineWidth,
-    goog.asserts.assert(goog.isDef(lineCap));
+      miterLimit: strokeState.miterLimit,
-    goog.asserts.assert(!goog.isNull(lineDash));
+      strokeStyle: strokeState.strokeStyle
-    goog.asserts.assert(goog.isDef(lineJoin));
+    };
-    goog.asserts.assert(goog.isDef(miterLimit));
+  } else {
-    if (state.currentStrokeStyle != strokeStyle ||
+    if (contextStrokeState.lineCap != strokeState.lineCap) {
-        state.currentLineCap != lineCap ||
+      contextStrokeState.lineCap = context.lineCap = strokeState.lineCap;
-        state.currentLineDash != lineDash ||
-        state.currentLineJoin != lineJoin ||
-        state.currentMiterLimit != miterLimit ||
-        state.currentLineWidth != lineWidth) {
-      context.strokeStyle = strokeStyle;
-      context.lineCap = lineCap;
-      if (goog.isDef(context.setLineDash)) {
-        context.setLineDash(lineDash);
-      }
-      context.lineJoin = lineJoin;
-      context.miterLimit = miterLimit;
-      context.lineWidth = lineWidth;
     }
+    if (contextStrokeState.lineDash != strokeState.lineDash) {
+      contextStrokeState.lineDash = context.lineDash = strokeState.lineDash;
+    }
+    if (contextStrokeState.lineJoin != strokeState.lineJoin) {
+      contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin;
+    }
+    if (contextStrokeState.lineWidth != strokeState.lineWidth) {
+      contextStrokeState.lineWidth = context.lineWidth = strokeState.lineWidth;
+    }
+    if (contextStrokeState.miterLimit != strokeState.miterLimit) {
+      contextStrokeState.miterLimit = context.miterLimit =
+          strokeState.miterLimit;
+    }
+    if (contextStrokeState.strokeStyle != strokeState.strokeStyle) {
+      contextStrokeState.strokeStyle = context.strokeStyle =
+          strokeState.strokeStyle;
+    }
+  }
+};
+
+
+/**
+ * @param {ol.render.canvas.TextState} textState Text state.
+ * @private
+ */
+ol.render.canvas.Immediate.prototype.setContextTextState_ =
+    function(textState) {
+  var context = this.context_;
+  var contextTextState = this.contextTextState_;
+  if (goog.isNull(contextTextState)) {
+    context.font = textState.font;
+    context.textAlign = textState.textAlign;
+    context.textBaseline = textState.textBaseline;
+    this.contextTextState_ = {
+      font: textState.font,
+      textAlign: textState.textAlign,
+      textBaseline: textState.textBaseline
+    };
+  } else {
+    if (contextTextState.font != textState.font) {
+      contextTextState.font = context.font = textState.font;
+    }
+    if (contextTextState.textAlign != textState.textAlign) {
+      contextTextState.textAlign = context.textAlign = textState.textAlign;
+    }
+    if (contextTextState.textBaseline != textState.textBaseline) {
+      contextTextState.textBaseline = context.textBaseline =
+          textState.textBaseline;
+    }
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
+    function(fillStyle, strokeStyle) {
+  if (goog.isNull(fillStyle)) {
+    this.fillState_ = null;
+  } else {
+    var fillStyleColor = fillStyle.getColor();
+    this.fillState_ = {
+      fillStyle: ol.color.asString(!goog.isNull(fillStyleColor) ?
+          fillStyleColor : ol.render.canvas.defaultFillStyle)
+    };
+  }
+  if (goog.isNull(strokeStyle)) {
+    this.strokeState_ = null;
+  } else {
+    var strokeStyleColor = strokeStyle.getColor();
+    var strokeStyleLineCap = strokeStyle.getLineCap();
+    var strokeStyleLineDash = strokeStyle.getLineDash();
+    var strokeStyleLineJoin = strokeStyle.getLineJoin();
+    var strokeStyleWidth = strokeStyle.getWidth();
+    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+    this.strokeState_ = {
+      lineCap: goog.isDef(strokeStyleLineCap) ?
+          strokeStyleLineCap : ol.render.canvas.defaultLineCap,
+      lineDash: goog.isDef(strokeStyleLineDash) ?
+          strokeStyleLineDash : ol.render.canvas.defaultLineDash,
+      lineJoin: goog.isDef(strokeStyleLineJoin) ?
+          strokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
+      lineWidth: this.pixelRatio_ * (goog.isDef(strokeStyleWidth) ?
+          strokeStyleWidth : ol.render.canvas.defaultLineWidth),
+      miterLimit: goog.isDef(strokeStyleMiterLimit) ?
+          strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit,
+      strokeStyle: ol.color.asString(!goog.isNull(strokeStyleColor) ?
+          strokeStyleColor : ol.render.canvas.defaultStrokeStyle)
+    };
   }
 };
 
@@ -568,23 +753,28 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() {
  * @inheritDoc
  */
 ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
-  if (!goog.isNull(imageStyle)) {
+  if (goog.isNull(imageStyle)) {
-    var anchor = imageStyle.getAnchor();
+    this.image_ = null;
-    goog.asserts.assert(!goog.isNull(anchor));
+  } else {
-    var size = imageStyle.getSize();
+    var imageAnchor = imageStyle.getAnchor();
-    goog.asserts.assert(!goog.isNull(size));
     // FIXME pixel ratio
-    var image = imageStyle.getImage(1);
+    var imageImage = imageStyle.getImage(1);
-    goog.asserts.assert(!goog.isNull(image));
+    var imageRotation = imageStyle.getRotation();
-    var state = this.state_;
+    var imageScale = imageStyle.getScale();
-    state.image = image;
+    var imageSize = imageStyle.getSize();
-    state.anchorX = anchor[0];
+    var imageSnapToPixel = imageStyle.getSnapToPixel();
-    state.anchorY = anchor[1];
+    goog.asserts.assert(!goog.isNull(imageAnchor));
-    state.height = size[1];
+    goog.asserts.assert(!goog.isNull(imageImage));
-    state.rotation = imageStyle.getRotation();
+    goog.asserts.assert(!goog.isNull(imageSize));
-    state.scale = imageStyle.getScale();
+    this.imageAnchorX_ = imageAnchor[0];
-    state.snapToPixel = imageStyle.getSnapToPixel();
+    this.imageAnchorY_ = imageAnchor[1];
-    state.width = size[0];
+    this.imageHeight_ = imageSize[1];
+    this.image_ = imageImage;
+    this.imageRotation_ = goog.isDef(imageRotation) ? imageRotation : 0;
+    this.imageScale_ = goog.isDef(imageScale) ? imageScale : 1;
+    this.imageSnapToPixel_ = goog.isDef(imageSnapToPixel) ?
+        imageSnapToPixel : false;
+    this.imageWidth_ = imageSize[0];
   }
 };
 
@@ -593,21 +783,62 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
  * @inheritDoc
  */
 ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
-  var context = this.context_;
+  if (goog.isNull(textStyle)) {
-  var state = this.state_;
+    this.text_ = '';
-  if (!ol.style.Text.equals(state.textStyle, textStyle)) {
+  } else {
-    if (goog.isDefAndNotNull(textStyle)) {
+    var textFillStyle = textStyle.getFill();
-      var textStyleFont = textStyle.getFont();
+    if (goog.isNull(textFillStyle)) {
-      context.font = goog.isDef(textStyleFont) ?
+      this.textFillState_ = null;
-          textStyleFont : ol.render.canvas.defaultFont;
+    } else {
-      var textStyleTextAlign = textStyle.getTextAlign();
+      var textFillStyleColor = textFillStyle.getColor();
-      context.textAlign = goog.isDef(textStyleTextAlign) ?
+      this.textFillState_ = {
-          textStyleTextAlign : ol.render.canvas.defaultTextAlign;
+        fillStyle: ol.color.asString(!goog.isNull(textFillStyleColor) ?
-      var textStyleTextBaseline = textStyle.getTextBaseline();
+            textFillStyleColor : ol.render.canvas.defaultFillStyle)
-      context.textBaseline = goog.isDef(textStyleTextBaseline) ?
+      };
-          textStyleTextBaseline : ol.render.canvas.defaultTextBaseline;
     }
-    state.textStyle = textStyle;
+    var textStrokeStyle = textStyle.getStroke();
+    if (goog.isNull(textStrokeStyle)) {
+      this.textStrokeState_ = null;
+    } else {
+      var textStrokeStyleColor = textStrokeStyle.getColor();
+      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
+      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
+      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
+      var textStrokeStyleWidth = textStrokeStyle.getWidth();
+      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
+      this.textStrokeState_ = {
+        lineCap: goog.isDef(textStrokeStyleLineCap) ?
+            textStrokeStyleLineCap : ol.render.canvas.defaultLineCap,
+        lineDash: goog.isDef(textStrokeStyleLineDash) ?
+            textStrokeStyleLineDash : ol.render.canvas.defaultLineDash,
+        lineJoin: goog.isDef(textStrokeStyleLineJoin) ?
+            textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
+        lineWidth: this.pixelRatio_ * (goog.isDef(textStrokeStyleWidth) ?
+            textStrokeStyleWidth : ol.render.canvas.defaultLineWidth),
+        miterLimit: goog.isDef(textStrokeStyleMiterLimit) ?
+            textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit,
+        strokeStyle: ol.color.asString(!goog.isNull(textStrokeStyleColor) ?
+            textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle)
+      };
+    }
+    var textFont = textStyle.getFont();
+    var textRotation = textStyle.getRotation();
+    var textScale = textStyle.getScale();
+    var textText = textStyle.getText();
+    var textTextAlign = textStyle.getTextAlign();
+    var textTextBaseline = textStyle.getTextBaseline();
+    this.textState_ = {
+      font: goog.isDef(textFont) ?
+          textFont : ol.render.canvas.defaultFont,
+      textAlign: goog.isDef(textTextAlign) ?
+          textTextAlign : ol.render.canvas.defaultTextAlign,
+      textBaseline: goog.isDef(textTextBaseline) ?
+          textTextBaseline : ol.render.canvas.defaultTextBaseline
+    };
+    this.text_ = goog.isDef(textText) ? textText : '';
+    this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0;
+    this.textScale_ = this.pixelRatio_ * (goog.isDef(textScale) ?
+        textScale : 1);
   }
 };
 

src/ol/render/canvas/canvasreplay.js

@@ -30,12 +30,14 @@ ol.render.canvas.Instruction = {
   CIRCLE: 2,
   CLOSE_PATH: 3,
   DRAW_IMAGE: 4,
-  END_GEOMETRY: 5,
+  DRAW_TEXT: 5,
-  FILL: 6,
+  END_GEOMETRY: 6,
-  MOVE_TO_LINE_TO: 7,
+  FILL: 7,
-  SET_FILL_STYLE: 8,
+  MOVE_TO_LINE_TO: 8,
-  SET_STROKE_STYLE: 9,
+  SET_FILL_STYLE: 9,
-  STROKE: 10
+  SET_STROKE_STYLE: 10,
+  SET_TEXT_STYLE: 11,
+  STROKE: 12
 };
 
 
@@ -185,7 +187,7 @@ ol.render.canvas.Replay.prototype.replay_ =
   while (i < ii) {
     var instruction = instructions[i];
     var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var geometry;
+    var fill, geometry, stroke, text, x, y;
     switch (type) {
       case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
         geometry = /** @type {ol.geom.Geometry} */ (instruction[1]);
@@ -231,8 +233,8 @@ ol.render.canvas.Replay.prototype.replay_ =
         var snapToPixel = /** @type {boolean|undefined} */ (instruction[9]);
         var width = /** @type {number} */ (instruction[10]) * pixelRatio;
         for (; d < dd; d += 2) {
-          var x = pixelCoordinates[d] - anchorX;
+          x = pixelCoordinates[d] - anchorX;
-          var y = pixelCoordinates[d + 1] - anchorY;
+          y = pixelCoordinates[d + 1] - anchorY;
           if (snapToPixel) {
             x = (x + 0.5) | 0;
             y = (y + 0.5) | 0;
@@ -258,6 +260,47 @@ ol.render.canvas.Replay.prototype.replay_ =
         }
         ++i;
         break;
+      case ol.render.canvas.Instruction.DRAW_TEXT:
+        goog.asserts.assert(goog.isNumber(instruction[1]));
+        d = /** @type {number} */ (instruction[1]);
+        goog.asserts.assert(goog.isNumber(instruction[2]));
+        dd = /** @type {number} */ (instruction[2]);
+        goog.asserts.assert(goog.isString(instruction[3]));
+        text = /** @type {string} */ (instruction[3]);
+        goog.asserts.assert(goog.isNumber(instruction[4]));
+        rotation = /** @type {number} */ (instruction[4]);
+        goog.asserts.assert(goog.isNumber(instruction[5]));
+        scale = /** @type {number} */ (instruction[5]) * pixelRatio;
+        goog.asserts.assert(goog.isBoolean(instruction[6]));
+        fill = /** @type {boolean} */ (instruction[6]);
+        goog.asserts.assert(goog.isBoolean(instruction[7]));
+        stroke = /** @type {boolean} */ (instruction[7]);
+        for (; d < dd; d += 2) {
+          x = pixelCoordinates[d];
+          y = pixelCoordinates[d + 1];
+          if (scale != 1 || rotation !== 0) {
+            ol.vec.Mat4.makeTransform2D(
+                localTransform, x, y, scale, scale, rotation, -x, -y);
+            context.setTransform(
+                goog.vec.Mat4.getElement(localTransform, 0, 0),
+                goog.vec.Mat4.getElement(localTransform, 1, 0),
+                goog.vec.Mat4.getElement(localTransform, 0, 1),
+                goog.vec.Mat4.getElement(localTransform, 1, 1),
+                goog.vec.Mat4.getElement(localTransform, 0, 3),
+                goog.vec.Mat4.getElement(localTransform, 1, 3));
+          }
+          if (stroke) {
+            context.strokeText(text, x, y);
+          }
+          if (fill) {
+            context.fillText(text, x, y);
+          }
+          if (scale != 1 || rotation !== 0) {
+            context.setTransform(1, 0, 0, 1, 0, 0);
+          }
+        }
+        ++i;
+        break;
       case ol.render.canvas.Instruction.END_GEOMETRY:
         if (goog.isDef(geometryCallback)) {
           geometry = /** @type {ol.geom.Geometry} */ (instruction[1]);
@@ -306,6 +349,15 @@ ol.render.canvas.Replay.prototype.replay_ =
         }
         ++i;
         break;
+      case ol.render.canvas.Instruction.SET_TEXT_STYLE:
+        goog.asserts.assert(goog.isString(instruction[1]));
+        goog.asserts.assert(goog.isString(instruction[2]));
+        goog.asserts.assert(goog.isString(instruction[3]));
+        context.font = /** @type {string} */ (instruction[1]);
+        context.textAlign = /** @type {string} */ (instruction[2]);
+        context.textBaseline = /** @type {string} */ (instruction[3]);
+        ++i;
+        break;
       case ol.render.canvas.Instruction.STROKE:
         context.stroke();
         ++i;
@@ -449,6 +501,12 @@ ol.render.canvas.Replay.prototype.drawMultiPolygonGeometry =
     goog.abstractMethod;
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.Replay.prototype.drawText = goog.abstractMethod;
+
+
 /**
  * @param {ol.geom.Geometry} geometry Geometry.
  * @param {Object} data Opaque data object.
@@ -1255,6 +1313,305 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() {
 
 
 
+/**
+ * @constructor
+ * @extends {ol.render.canvas.Replay}
+ * @param {number} tolerance Tolerance.
+ * @protected
+ * @struct
+ */
+ol.render.canvas.TextReplay = function(tolerance) {
+
+  goog.base(this, tolerance);
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.FillState}
+   */
+  this.replayFillState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.StrokeState}
+   */
+  this.replayStrokeState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.TextState}
+   */
+  this.replayTextState_ = null;
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.text_ = '';
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textRotation_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.textScale_ = 0;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.FillState}
+   */
+  this.textFillState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.StrokeState}
+   */
+  this.textStrokeState_ = null;
+
+  /**
+   * @private
+   * @type {?ol.render.canvas.TextState}
+   */
+  this.textState_ = null;
+
+};
+goog.inherits(ol.render.canvas.TextReplay, ol.render.canvas.Replay);
+
+
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.TextReplay.prototype.drawText =
+    function(flatCoordinates, offset, end, stride, geometry, data) {
+  if (this.text_ === '' ||
+      goog.isNull(this.textState_) ||
+      (goog.isNull(this.textFillState_) &&
+       goog.isNull(this.textStrokeState_))) {
+    return;
+  }
+  ol.extent.extendFlatCoordinates(
+      this.extent_, flatCoordinates, offset, end, stride);
+  if (!goog.isNull(this.textFillState_)) {
+    this.setReplayFillState_(this.textFillState_);
+  }
+  if (!goog.isNull(this.textStrokeState_)) {
+    this.setReplayStrokeState_(this.textStrokeState_);
+  }
+  this.setReplayTextState_(this.textState_);
+  this.beginGeometry(geometry);
+  var myBegin = this.coordinates.length;
+  var myEnd =
+      this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false);
+  var fill = !goog.isNull(this.textFillState_);
+  var stroke = !goog.isNull(this.textStrokeState_);
+  var drawTextInstruction = [
+    ol.render.canvas.Instruction.DRAW_TEXT, myBegin, myEnd, this.text_,
+    this.textRotation_, this.textScale_, fill, stroke];
+  this.instructions.push(drawTextInstruction);
+  this.hitDetectionInstructions.push(drawTextInstruction);
+  this.endGeometry(geometry, data);
+};
+
+
+/**
+ * @param {ol.render.canvas.FillState} fillState Fill state.
+ * @private
+ */
+ol.render.canvas.TextReplay.prototype.setReplayFillState_ =
+    function(fillState) {
+  var replayFillState = this.replayFillState_;
+  if (!goog.isNull(replayFillState) &&
+      replayFillState.fillStyle == fillState.fillStyle) {
+    return;
+  }
+  var setFillStyleInstruction =
+      [ol.render.canvas.Instruction.SET_FILL_STYLE, fillState.fillStyle];
+  this.instructions.push(setFillStyleInstruction);
+  this.hitDetectionInstructions.push(setFillStyleInstruction);
+  if (goog.isNull(replayFillState)) {
+    this.replayFillState_ = {
+      fillStyle: fillState.fillStyle
+    };
+  } else {
+    replayFillState.fillStyle = fillState.fillStyle;
+  }
+};
+
+
+/**
+ * @param {ol.render.canvas.StrokeState} strokeState Stroke state.
+ * @private
+ */
+ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ =
+    function(strokeState) {
+  var replayStrokeState = this.replayStrokeState_;
+  if (!goog.isNull(replayStrokeState) &&
+      replayStrokeState.lineCap == strokeState.lineCap &&
+      replayStrokeState.lineDash == strokeState.lineDash &&
+      replayStrokeState.lineJoin == strokeState.lineJoin &&
+      replayStrokeState.lineWidth == strokeState.lineWidth &&
+      replayStrokeState.miterLimit == strokeState.miterLimit &&
+      replayStrokeState.strokeStyle == strokeState.strokeStyle) {
+    return;
+  }
+  var setStrokeStyleInstruction = [
+    ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeState.strokeStyle,
+    strokeState.lineWidth, strokeState.lineCap, strokeState.lineJoin,
+    strokeState.miterLimit, strokeState.lineDash
+  ];
+  this.instructions.push(setStrokeStyleInstruction);
+  this.hitDetectionInstructions.push(setStrokeStyleInstruction);
+  if (goog.isNull(replayStrokeState)) {
+    this.replayStrokeState_ = {
+      lineCap: strokeState.lineCap,
+      lineDash: strokeState.lineDash,
+      lineJoin: strokeState.lineJoin,
+      lineWidth: strokeState.lineWidth,
+      miterLimit: strokeState.miterLimit,
+      strokeStyle: strokeState.strokeStyle
+    };
+  } else {
+    replayStrokeState.lineCap = strokeState.lineCap;
+    replayStrokeState.lineDash = strokeState.lineDash;
+    replayStrokeState.lineJoin = strokeState.lineJoin;
+    replayStrokeState.lineWidth = strokeState.lineWidth;
+    replayStrokeState.miterLimit = strokeState.miterLimit;
+    replayStrokeState.strokeStyle = strokeState.strokeStyle;
+  }
+};
+
+
+/**
+ * @param {ol.render.canvas.TextState} textState Text state.
+ * @private
+ */
+ol.render.canvas.TextReplay.prototype.setReplayTextState_ =
+    function(textState) {
+  var replayTextState = this.replayTextState_;
+  if (!goog.isNull(replayTextState) &&
+      replayTextState.font == textState.font &&
+      replayTextState.textAlign == textState.textAlign &&
+      replayTextState.textBaseline == textState.textBaseline) {
+    return;
+  }
+  var setTextStyleInstruction = [ol.render.canvas.Instruction.SET_TEXT_STYLE,
+    textState.font, textState.textAlign, textState.textBaseline];
+  this.instructions.push(setTextStyleInstruction);
+  this.hitDetectionInstructions.push(setTextStyleInstruction);
+  if (goog.isNull(replayTextState)) {
+    this.replayTextState_ = {
+      font: textState.font,
+      textAlign: textState.textAlign,
+      textBaseline: textState.textBaseline
+    };
+  } else {
+    replayTextState.font = textState.font;
+    replayTextState.textAlign = textState.textAlign;
+    replayTextState.textBaseline = textState.textBaseline;
+  }
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
+  if (goog.isNull(textStyle)) {
+    this.text_ = '';
+  } else {
+    var textFillStyle = textStyle.getFill();
+    if (goog.isNull(textFillStyle)) {
+      this.textFillState_ = null;
+    } else {
+      var textFillStyleColor = textFillStyle.getColor();
+      var fillStyle = ol.color.asString(!goog.isNull(textFillStyleColor) ?
+          textFillStyleColor : ol.render.canvas.defaultFillStyle);
+      if (goog.isNull(this.textFillState_)) {
+        this.textFillState_ = {
+          fillStyle: fillStyle
+        };
+      } else {
+        var textFillState = this.textFillState_;
+        textFillState.fillStyle = fillStyle;
+      }
+    }
+    var textStrokeStyle = textStyle.getStroke();
+    if (goog.isNull(textStrokeStyle)) {
+      this.textStrokeState_ = null;
+    } else {
+      var textStrokeStyleColor = textStrokeStyle.getColor();
+      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
+      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
+      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
+      var textStrokeStyleWidth = textStrokeStyle.getWidth();
+      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
+      var lineCap = goog.isDef(textStrokeStyleLineCap) ?
+          textStrokeStyleLineCap : ol.render.canvas.defaultLineCap;
+      var lineDash = goog.isDefAndNotNull(textStrokeStyleLineDash) ?
+          textStrokeStyleLineDash : ol.render.canvas.defaultLineDash;
+      var lineJoin = goog.isDef(textStrokeStyleLineJoin) ?
+          textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
+      var lineWidth = goog.isDef(textStrokeStyleWidth) ?
+          textStrokeStyleWidth : ol.render.canvas.defaultLineWidth;
+      var miterLimit = goog.isDef(textStrokeStyleMiterLimit) ?
+          textStrokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
+      var strokeStyle = ol.color.asString(!goog.isNull(textStrokeStyleColor) ?
+          textStrokeStyleColor : ol.render.canvas.defaultStrokeStyle);
+      if (goog.isNull(this.textStrokeState_)) {
+        this.textStrokeState_ = {
+          lineCap: lineCap,
+          lineDash: lineDash,
+          lineJoin: lineJoin,
+          lineWidth: lineWidth,
+          miterLimit: miterLimit,
+          strokeStyle: strokeStyle
+        };
+      } else {
+        var textStrokeState = this.textStrokeState_;
+        textStrokeState.lineCap = lineCap;
+        textStrokeState.lineDash = lineDash;
+        textStrokeState.lineJoin = lineJoin;
+        textStrokeState.lineWidth = lineWidth;
+        textStrokeState.miterLimit = miterLimit;
+        textStrokeState.strokeStyle = strokeStyle;
+      }
+    }
+    var textFont = textStyle.getFont();
+    var textRotation = textStyle.getRotation();
+    var textScale = textStyle.getScale();
+    var textText = textStyle.getText();
+    var textTextAlign = textStyle.getTextAlign();
+    var textTextBaseline = textStyle.getTextBaseline();
+    var font = goog.isDef(textFont) ?
+        textFont : ol.render.canvas.defaultFont;
+    var textAlign = goog.isDef(textTextAlign) ?
+        textTextAlign : ol.render.canvas.defaultTextAlign;
+    var textBaseline = goog.isDef(textTextBaseline) ?
+        textTextBaseline : ol.render.canvas.defaultTextBaseline;
+    if (goog.isNull(this.textState_)) {
+      this.textState_ = {
+        font: font,
+        textAlign: textAlign,
+        textBaseline: textBaseline
+      };
+    } else {
+      var textState = this.textState_;
+      textState.font = font;
+      textState.textAlign = textAlign;
+      textState.textBaseline = textBaseline;
+    }
+    this.text_ = goog.isDef(textText) ? textText : '';
+    this.textRotation_ = goog.isDef(textRotation) ? textRotation : 0;
+    this.textScale_ = goog.isDef(textScale) ? textScale : 1;
+  }
+};
+
+
+
 /**
  * @constructor
  * @implements {ol.render.IReplayGroup}
@@ -1489,5 +1846,6 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() {
 ol.render.canvas.BATCH_CONSTRUCTORS_ = {
   'Image': ol.render.canvas.ImageReplay,
   'LineString': ol.render.canvas.LineStringReplay,
-  'Polygon': ol.render.canvas.PolygonReplay
+  'Polygon': ol.render.canvas.PolygonReplay,
+  'Text': ol.render.canvas.TextReplay
 };

src/ol/render/irender.js

@@ -100,6 +100,19 @@ ol.render.IRender.prototype.drawPolygonGeometry =
 };
 
 
+/**
+ * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {number} offset Offset.
+ * @param {number} end End.
+ * @param {number} stride Stride.
+ * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {Object} data Opaque data object.
+ */
+ol.render.IRender.prototype.drawText =
+    function(flatCoordinates, offset, end, stride, geometry, data) {
+};
+
+
 /**
  * @param {ol.style.Fill} fillStyle Fill style.
  * @param {ol.style.Stroke} strokeStyle Stroke style.

src/ol/render/ireplay.js

@@ -10,7 +10,8 @@ goog.require('ol.render.IRender');
 ol.render.ReplayType = {
   IMAGE: 'Image',
   LINE_STRING: 'LineString',
-  POLYGON: 'Polygon'
+  POLYGON: 'Polygon',
+  TEXT: 'Text'
 };
 
 
@@ -21,7 +22,8 @@ ol.render.ReplayType = {
 ol.render.REPLAY_ORDER = [
   ol.render.ReplayType.POLYGON,
   ol.render.ReplayType.LINE_STRING,
-  ol.render.ReplayType.IMAGE
+  ol.render.ReplayType.IMAGE,
+  ol.render.ReplayType.TEXT
 ];
 
 

src/ol/render/vector.js

@@ -22,17 +22,22 @@ goog.require('ol.style.Style');
  */
 ol.renderer.vector.renderCircleGeometry_ =
     function(replayGroup, geometry, style, data) {
+  goog.asserts.assertInstanceof(geometry, ol.geom.Circle);
   var fillStyle = style.getFill();
   var strokeStyle = style.getStroke();
-  if (goog.isNull(fillStyle) && goog.isNull(strokeStyle)) {
+  if (!goog.isNull(fillStyle) || !goog.isNull(strokeStyle)) {
-    return;
+    var polygonReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.POLYGON);
+    polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
+    polygonReplay.drawCircleGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    textReplay.drawText(geometry.getCenter(), 0, 2, 2, geometry, data);
   }
-  goog.asserts.assertInstanceof(geometry, ol.geom.Circle);
-  var circleGeometry = /** @type {ol.geom.Circle} */ (geometry);
-  var replay = replayGroup.getReplay(
-      style.getZIndex(), ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(fillStyle, strokeStyle);
-  replay.drawCircleGeometry(circleGeometry, data);
 };
 
 
@@ -87,15 +92,21 @@ ol.renderer.vector.renderGeometryCollectionGeometry_ =
  */
 ol.renderer.vector.renderLineStringGeometry_ =
     function(replayGroup, geometry, style, data) {
-  var strokeStyle = style.getStroke();
-  if (goog.isNull(strokeStyle)) {
-    return;
-  }
   goog.asserts.assertInstanceof(geometry, ol.geom.LineString);
-  var replay = replayGroup.getReplay(
+  var strokeStyle = style.getStroke();
-      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+  if (!goog.isNull(strokeStyle)) {
-  replay.setFillStrokeStyle(null, strokeStyle);
+    var lineStringReplay = replayGroup.getReplay(
-  replay.drawLineStringGeometry(geometry, data);
+        style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+    lineStringReplay.setFillStrokeStyle(null, strokeStyle);
+    lineStringReplay.drawLineStringGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    textReplay.drawText(geometry.getFlatMidpoint(), 0, 2, 2, geometry, data);
+  }
 };
 
 
@@ -108,15 +119,23 @@ ol.renderer.vector.renderLineStringGeometry_ =
  */
 ol.renderer.vector.renderMultiLineStringGeometry_ =
     function(replayGroup, geometry, style, data) {
-  var strokeStyle = style.getStroke();
-  if (goog.isNull(strokeStyle)) {
-    return;
-  }
   goog.asserts.assertInstanceof(geometry, ol.geom.MultiLineString);
-  var replay = replayGroup.getReplay(
+  var strokeStyle = style.getStroke();
-      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+  if (!goog.isNull(strokeStyle)) {
-  replay.setFillStrokeStyle(null, strokeStyle);
+    var lineStringReplay = replayGroup.getReplay(
-  replay.drawMultiLineStringGeometry(geometry, data);
+        style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+    lineStringReplay.setFillStrokeStyle(null, strokeStyle);
+    lineStringReplay.drawMultiLineStringGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    var flatMidpointCoordinates = geometry.getFlatMidpoints();
+    textReplay.drawText(flatMidpointCoordinates, 0,
+        flatMidpointCoordinates.length, 2, geometry, data);
+  }
 };
 
 
@@ -129,16 +148,24 @@ ol.renderer.vector.renderMultiLineStringGeometry_ =
  */
 ol.renderer.vector.renderMultiPolygonGeometry_ =
     function(replayGroup, geometry, style, data) {
+  goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon);
   var fillStyle = style.getFill();
   var strokeStyle = style.getStroke();
-  if (goog.isNull(strokeStyle) && goog.isNull(fillStyle)) {
+  if (!goog.isNull(strokeStyle) && !goog.isNull(fillStyle)) {
-    return;
+    var polygonReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.POLYGON);
+    polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
+    polygonReplay.drawMultiPolygonGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    var flatInteriorPointCoordinates = geometry.getFlatInteriorPoints();
+    textReplay.drawText(flatInteriorPointCoordinates, 0,
+        flatInteriorPointCoordinates.length, 2, geometry, data);
   }
-  goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon);
-  var replay = replayGroup.getReplay(
-      style.getZIndex(), ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(fillStyle, strokeStyle);
-  replay.drawMultiPolygonGeometry(geometry, data);
 };
 
 
@@ -151,15 +178,21 @@ ol.renderer.vector.renderMultiPolygonGeometry_ =
  */
 ol.renderer.vector.renderPointGeometry_ =
     function(replayGroup, geometry, style, data) {
-  var imageStyle = style.getImage();
-  if (goog.isNull(imageStyle)) {
-    return;
-  }
   goog.asserts.assertInstanceof(geometry, ol.geom.Point);
-  var replay = replayGroup.getReplay(
+  var imageStyle = style.getImage();
-      style.getZIndex(), ol.render.ReplayType.IMAGE);
+  if (!goog.isNull(imageStyle)) {
-  replay.setImageStyle(imageStyle);
+    var imageReplay = replayGroup.getReplay(
-  replay.drawPointGeometry(geometry, data);
+        style.getZIndex(), ol.render.ReplayType.IMAGE);
+    imageReplay.setImageStyle(imageStyle);
+    imageReplay.drawPointGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    textReplay.drawText(geometry.getCoordinates(), 0, 2, 2, geometry, data);
+  }
 };
 
 
@@ -172,15 +205,23 @@ ol.renderer.vector.renderPointGeometry_ =
  */
 ol.renderer.vector.renderMultiPointGeometry_ =
     function(replayGroup, geometry, style, data) {
-  var imageStyle = style.getImage();
-  if (goog.isNull(imageStyle)) {
-    return;
-  }
   goog.asserts.assertInstanceof(geometry, ol.geom.MultiPoint);
-  var replay = replayGroup.getReplay(
+  var imageStyle = style.getImage();
-      style.getZIndex(), ol.render.ReplayType.IMAGE);
+  if (!goog.isNull(imageStyle)) {
-  replay.setImageStyle(imageStyle);
+    var imageReplay = replayGroup.getReplay(
-  replay.drawMultiPointGeometry(geometry, data);
+        style.getZIndex(), ol.render.ReplayType.IMAGE);
+    imageReplay.setImageStyle(imageStyle);
+    imageReplay.drawMultiPointGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    var flatCoordinates = geometry.getFlatCoordinates();
+    textReplay.drawText(flatCoordinates, 0, flatCoordinates.length,
+        geometry.getStride(), geometry, data);
+  }
 };
 
 
@@ -193,16 +234,23 @@ ol.renderer.vector.renderMultiPointGeometry_ =
  */
 ol.renderer.vector.renderPolygonGeometry_ =
     function(replayGroup, geometry, style, data) {
+  goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
   var fillStyle = style.getFill();
   var strokeStyle = style.getStroke();
-  if (goog.isNull(fillStyle) && goog.isNull(strokeStyle)) {
+  if (!goog.isNull(fillStyle) || !goog.isNull(strokeStyle)) {
-    return;
+    var polygonReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.POLYGON);
+    polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
+    polygonReplay.drawPolygonGeometry(geometry, data);
+  }
+  var textStyle = style.getText();
+  if (!goog.isNull(textStyle)) {
+    var textReplay = replayGroup.getReplay(
+        style.getZIndex(), ol.render.ReplayType.TEXT);
+    textReplay.setTextStyle(textStyle);
+    textReplay.drawText(
+        geometry.getFlatInteriorPoint(), 0, 2, 2, geometry, data);
   }
-  goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
-  var replay = replayGroup.getReplay(
-      style.getZIndex(), ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(fillStyle, strokeStyle);
-  replay.drawPolygonGeometry(geometry, data);
 };
 
 

src/ol/render/webgl/webglimmediate.js

@@ -91,6 +91,14 @@ ol.render.webgl.Immediate.prototype.drawPolygonGeometry =
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.render.webgl.Immediate.prototype.drawText =
+    function(flatCoordinates, offset, end, stride, geometry, data) {
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/style/textstyle.js

@@ -22,6 +22,12 @@ ol.style.Text = function(opt_options) {
    */
   this.rotation_ = options.rotation;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.scale_ = options.scale;
+
   /**
    * @private
    * @type {string|undefined}
@@ -54,32 +60,6 @@ ol.style.Text = function(opt_options) {
 };
 
 
-/**
- * @param {ol.style.Text} textStyle1 Text style 1.
- * @param {ol.style.Text} textStyle2 Text style 2.
- * @return {boolean} Equals.
- */
-ol.style.Text.equals = function(textStyle1, textStyle2) {
-  if (!goog.isNull(textStyle1)) {
-    if (!goog.isNull(textStyle2)) {
-      return textStyle1 === textStyle2 || (
-          textStyle1.getFont() == textStyle2.getFont() &&
-          textStyle1.getText() == textStyle2.getText() &&
-          textStyle1.getTextAlign() == textStyle2.getTextAlign() &&
-          textStyle1.getTextBaseline() == textStyle2.getTextBaseline());
-    } else {
-      return false;
-    }
-  } else {
-    if (!goog.isNull(textStyle2)) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-};
-
-
 /**
  * @return {string|undefined} Font.
  */
@@ -104,6 +84,14 @@ ol.style.Text.prototype.getRotation = function() {
 };
 
 
+/**
+ * @return {number|undefined} Scale.
+ */
+ol.style.Text.prototype.getScale = function() {
+  return this.scale_;
+};
+
+
 /**
  * @return {ol.style.Stroke} Stroke style.
  */

test/spec/ol/geom/linestring.test.js

@@ -164,6 +164,18 @@ describe('ol.geom.LineString', function() {
           [[0, 0], [1.5, 1], [3, 3], [5, 1], [6, 3.5], [7, 5]]);
     });
 
+    describe('#getFlatMidpoint', function() {
+
+      it('returns the expected result', function() {
+        var midpoint = lineString.getFlatMidpoint();
+        expect(midpoint).to.be.an(Array);
+        expect(midpoint).to.have.length(2);
+        expect(midpoint[0]).to.roughlyEqual(4, 1e-1);
+        expect(midpoint[1]).to.roughlyEqual(2, 1e-1);
+      });
+
+    });
+
     describe('#getSimplifiedGeometry', function() {
 
       it('returns the expectedResult', function() {

test/spec/ol/geom/multilinestring.test.js

@@ -69,6 +69,14 @@ describe('ol.geom.MultiLineString', function() {
       expect(multiLineString.getStride()).to.be(2);
     });
 
+    describe('#getFlatMidpoints', function() {
+
+      it('returns the expected result', function() {
+        expect(multiLineString.getFlatMidpoints()).to.eql([2, 3, 6, 7]);
+      });
+
+    });
+
   });
 
   describe('construct with 3D coordinates', function() {