Merge pull request #1416 from elemoine/vector-api-icon-shape

[vector-api] Icon/shape API and cross-origin hit detection
2013-12-19 05:45:35 -08:00
parent fead554a39 84e98b4422
commit 511f79ebee
29 changed files with 875 additions and 334 deletions
--- a/examples/dynamic-data.js
+++ b/examples/dynamic-data.js
@@ -3,8 +3,8 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.geom.MultiPoint');
 goog.require('ol.layer.Tile');
-goog.require('ol.shape');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');

@@ -23,9 +23,11 @@ var map = new ol.Map({
  })
 });

-var imageStyle = ol.shape.renderCircle(5,
-    new ol.style.Fill({color: 'yellow'}),
-    new ol.style.Stroke({color: 'red', width: 1}));
+var imageStyle = new ol.style.Circle({
+  radius: 5,
+  fill: new ol.style.Fill({color: 'yellow'}),
+  stroke: new ol.style.Stroke({color: 'red', width: 1})
+});

 var n = 200;
 var omegaTheta = 30000; // Rotation period in ms
--- a/examples/geojson.js
+++ b/examples/geojson.js
@@ -4,16 +4,19 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.shape');
 goog.require('ol.source.GeoJSON');
 goog.require('ol.source.OSM');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');


-var image = ol.shape.renderCircle(5, null,
-    new ol.style.Stroke({color: 'red', width: 1}));
+var image = new ol.style.Circle({
+  radius: 5,
+  fill: null,
+  stroke: new ol.style.Stroke({color: 'red', width: 1})
+});

 var styles = {
  'Point': [new ol.style.Style({
@@ -61,9 +64,13 @@ var styles = {
    fill: new ol.style.Fill({
      color: 'magenta'
    }),
-    image: ol.shape.renderCircle(10, null, new ol.style.Stroke({
+    image: new ol.style.Circle({
+      radius: 10,
+      fill: null,
+      stroke: new ol.style.Stroke({
        color: 'magenta'
-    }))
+      })
+    })
  })]
 };

--- a/examples/icon.js
+++ b/examples/icon.js
@@ -3,11 +3,11 @@ goog.require('ol.Overlay');
 goog.require('ol.OverlayPositioning');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
-goog.require('ol.icon');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.GeoJSON');
 goog.require('ol.source.TileJSON');
+goog.require('ol.style.Icon');
 goog.require('ol.style.Style');


@@ -18,7 +18,9 @@ var raster = new ol.layer.Tile({
 });

 var styleArray = [new ol.style.Style({
-  image: ol.icon.renderIcon('data/icon.png')
+  image: new ol.style.Icon({
+    src: 'data/icon.png'
+  })
 })];

 var vector = new ol.layer.Vector({
--- a/examples/igc.js
+++ b/examples/igc.js
@@ -8,9 +8,9 @@ goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.proj');
-goog.require('ol.shape');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');

@@ -128,10 +128,14 @@ map.on('singleclick', function(evt) {
  displaySnap(coordinate);
 });

-var imageStyle = ol.shape.renderCircle(5, null, new ol.style.Stroke({
+var imageStyle = new ol.style.Circle({
+  radius: 5,
+  fill: null,
+  stroke: new ol.style.Stroke({
    color: 'rgba(255,0,0,0.9)',
    width: 1
-}));
+  })
+});
 var strokeStyle = new ol.style.Stroke({
  color: 'rgba(255,0,0,0.9)',
  width: 1
--- a/examples/rtree.js
+++ b/examples/rtree.js
@@ -8,8 +8,8 @@ goog.require('ol.extent');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
 goog.require('ol.layer.Vector');
-goog.require('ol.shape');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');

@@ -30,8 +30,11 @@ var vectorSource = new ol.source.Vector({
 });

 var styleArray = [new ol.style.Style({
-  image: ol.shape.renderCircle(3, null,
-      new ol.style.Stroke({color: 'red', width: 1}))
+  image: new ol.style.Circle({
+    radius: 3,
+    fill: null,
+    stroke: new ol.style.Stroke({color: 'red', width: 1})
+  })
 })];

 var colors = ['red', 'orange', 'yellow', 'blue', 'green', 'indigo', 'violet'];
--- a/examples/synthetic-points.js
+++ b/examples/synthetic-points.js
@@ -6,8 +6,8 @@ goog.require('ol.View2D');
 goog.require('ol.geom.LineString');
 goog.require('ol.geom.Point');
 goog.require('ol.layer.Vector');
-goog.require('ol.shape');
 goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
@@ -27,14 +27,18 @@ for (var i = 0; i < count; ++i) {

 var styles = {
  '10': [new ol.style.Style({
-    image: ol.shape.renderCircle(5,
-        new ol.style.Fill({color: '#666666'}),
-        new ol.style.Stroke({color: '#bada55', width: 1}))
+    image: new ol.style.Circle({
+      radius: 5,
+      fill: new ol.style.Fill({color: '#666666'}),
+      stroke: new ol.style.Stroke({color: '#bada55', width: 1})
+    })
  })],
  '20': [new ol.style.Style({
-    image: ol.shape.renderCircle(10,
-        new ol.style.Fill({color: '#666666'}),
-        new ol.style.Stroke({color: '#bada55', width: 1}))
+    image: new ol.style.Circle({
+      radius: 10,
+      fill: new ol.style.Fill({color: '#666666'}),
+      stroke: new ol.style.Stroke({color: '#bada55', width: 1})
+    })
  })]
 };

@@ -97,10 +101,14 @@ map.on('singleclick', function(evt) {
  displaySnap(coordinate);
 });

-var imageStyle = ol.shape.renderCircle(10, null, new ol.style.Stroke({
+var imageStyle = new ol.style.Circle({
+  radius: 10,
+  fill: null,
+  stroke: new ol.style.Stroke({
    color: 'rgba(255,255,0,0.9)',
    width: 3
-}));
+  })
+});
 var strokeStyle = new ol.style.Stroke({
  color: 'rgba(255,255,0,0.9)',
  width: 3
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -718,6 +718,13 @@
 * @todo stability experimental
 */

+/**
+ * @typedef {Object} olx.style.CircleOptions
+ * @property {ol.style.Fill|undefined} fill Fill style.
+ * @property {number} radius Circle radius.
+ * @property {ol.style.Stroke|undefined} stroke Stroke style.
+ */
+
 /**
 * @typedef {Object} olx.style.FillOptions
 * @property {ol.Color|string|undefined} color Color.
@@ -725,18 +732,12 @@
 */

 /**
- * @typedef {Object} olx.style.ImageOptions
- * @property {ol.Pixel} anchor Anchor.
+ * @typedef {Object} olx.style.IconOptions
+ * @property {ol.Pixel|undefined} anchor Anchor.
 * @property {null|string|undefined} crossOrigin crossOrigin setting for image.
- * @property {HTMLCanvasElement|HTMLVideoElement|Image|undefined} image Image.
- * @property {ol.style.ImageState|undefined} imageState Image state.
 * @property {number|undefined} rotation Rotation.
- * @property {ol.Size} size Image size in pixel.
- * @property {boolean|undefined} snapToPixel Whether the image should be
- *     snapped to the closed pixel at rendering time.
- * @property {boolean|undefined} subtractViewRotation Whether the image should be
- *     rotated with the view or not.
- * @property {string|undefined} src Image source URI.
+ * @property {ol.Size|undefined} size Icon size in pixel.
+ * @property {string} src Image source URI.
 */

 /**
--- a/src/ol/icon.exports
+++ b/src/ol/icon.exports
@@ -1 +0,0 @@
-@exportSymbol ol.icon.renderIcon
--- a/src/ol/icon.js
+++ b/src/ol/icon.js
@@ -1,31 +0,0 @@
-goog.provide('ol.icon');
-
-goog.require('ol.style.Image');
-
-
-/**
- * @param {string} src Image source URI.
- * @param {ol.Size=} opt_size Image size.
- * @return {ol.style.Image} Image.
- */
-ol.icon.renderIcon = function(src, opt_size) {
-
-  /**
-   * @type {ol.Size}
-   */
-  var size = goog.isDef(opt_size) ? opt_size : null;
-
-  /**
-   * @type {ol.Pixel}
-   */
-  var anchor = !goog.isNull(size) ? [size[0] / 2, size[1] / 2] : null;
-
-  return new ol.style.Image({
-    anchor: anchor,
-    size: size,
-    src: src,
-    rotation: 0,
-    snapToPixel: undefined,
-    subtractViewRotation: false
-  });
-};
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -218,8 +218,8 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) {
  if (!ol.extent.intersects(this.extent_, geometry.getExtent())) {
    return;
  }
-  this.setFillStrokeStyle(style.fill, style.stroke);
-  this.setImageStyle(style.image);
+  this.setFillStrokeStyle(style.getFill(), style.getStroke());
+  this.setImageStyle(style.getImage());
  var renderGeometry =
      ol.render.canvas.Immediate.GEOMETRY_RENDERES_[geometry.getType()];
  goog.asserts.assert(goog.isDef(renderGeometry));
@@ -378,24 +378,31 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
    function(fillStyle, strokeStyle) {
  var state = this.state_;
  if (!goog.isNull(fillStyle)) {
-    state.fillStyle = ol.color.asString(!goog.isNull(fillStyle.color) ?
-        fillStyle.color : ol.render.canvas.defaultFillStyle);
+    var fillStyleColor = fillStyle.getColor();
+    state.fillStyle = ol.color.asString(!goog.isNull(fillStyleColor) ?
+        fillStyleColor : ol.render.canvas.defaultFillStyle);
  } else {
    state.fillStyle = undefined;
  }
  if (!goog.isNull(strokeStyle)) {
-    state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ?
-        strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
-    state.lineCap = goog.isDef(strokeStyle.lineCap) ?
-        strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
-    state.lineDash = !goog.isNull(strokeStyle.lineDash) ?
-        strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
-    state.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
-        strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
-    state.lineWidth = this.pixelRatio_ * (goog.isDef(strokeStyle.width) ?
-        strokeStyle.width : ol.render.canvas.defaultLineWidth);
-    state.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
-        strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+    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;
@@ -454,16 +461,20 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() {
 */
 ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
  if (!goog.isNull(imageStyle)) {
-    goog.asserts.assert(!goog.isNull(imageStyle.anchor));
-    goog.asserts.assert(goog.isDef(imageStyle.size));
-    goog.asserts.assert(!goog.isNull(imageStyle.image));
+    var anchor = imageStyle.getAnchor();
+    goog.asserts.assert(!goog.isNull(anchor));
+    var size = imageStyle.getSize();
+    goog.asserts.assert(!goog.isNull(size));
+    // FIXME pixel ratio
+    var image = imageStyle.getImage(1);
+    goog.asserts.assert(!goog.isNull(image));
    var state = this.state_;
-    state.anchorX = imageStyle.anchor[0];
-    state.anchorY = imageStyle.anchor[1];
-    state.image = imageStyle.image;
-    state.width = imageStyle.size[0];
-    state.height = imageStyle.size[1];
-    state.snapToPixel = imageStyle.snapToPixel;
+    state.anchorX = anchor[0];
+    state.anchorY = anchor[1];
+    state.image = image;
+    state.width = size[0];
+    state.height = size[1];
+    state.snapToPixel = imageStyle.getSnapToPixel();
  }
 };

@@ -476,12 +487,15 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
  var state = this.state_;
  if (!ol.style.Text.equals(state.textStyle, textStyle)) {
    if (goog.isDefAndNotNull(textStyle)) {
-      context.font = goog.isDef(textStyle.font) ?
-          textStyle.font : ol.render.canvas.defaultFont;
-      context.textAlign = goog.isDef(textStyle.textAlign) ?
-          textStyle.textAlign : ol.render.canvas.defaultTextAlign;
-      context.textBaseline = goog.isDef(textStyle.textBaseline) ?
-          textStyle.textBaseline : ol.render.canvas.defaultTextBaseline;
+      var textStyleFont = textStyle.getFont();
+      context.font = goog.isDef(textStyleFont) ?
+          textStyleFont : ol.render.canvas.defaultFont;
+      var textStyleTextAlign = textStyle.getTextAlign();
+      context.textAlign = goog.isDef(textStyleTextAlign) ?
+          textStyleTextAlign : ol.render.canvas.defaultTextAlign;
+      var textStyleTextBaseline = textStyle.getTextBaseline();
+      context.textBaseline = goog.isDef(textStyleTextBaseline) ?
+          textStyleTextBaseline : ol.render.canvas.defaultTextBaseline;
    }
    state.textStyle = textStyle;
  }
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -466,6 +466,12 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) {
   */
  this.anchorY_ = undefined;

+  /**
+   * @private
+   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
+   */
+  this.hitDetectionImage_ = null;
+
  /**
   * @private
   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
@@ -528,13 +534,16 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
  var myBegin = this.coordinates.length;
  var myEnd = this.drawCoordinates_(
      flatCoordinates, 0, flatCoordinates.length, stride);
-  var drawImageInstruction = [
+  this.instructions.push([
    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
    this.anchorX_, this.anchorY_, this.width_, this.height_,
    this.image_, this.snapToPixel_
-  ];
-  this.instructions.push(drawImageInstruction);
-  this.hitDetectionInstructions.push(drawImageInstruction);
+  ]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
+    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    this.hitDetectionImage_, this.snapToPixel_
+  ]);
  this.endGeometry(pointGeometry, data);
 };

@@ -558,13 +567,16 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
  var myBegin = this.coordinates.length;
  var myEnd = this.drawCoordinates_(
      flatCoordinates, 0, flatCoordinates.length, stride);
-  var drawImageInstruction = [
+  this.instructions.push([
    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
    this.anchorX_, this.anchorY_, this.width_, this.height_,
    this.image_, this.snapToPixel_
-  ];
-  this.instructions.push(drawImageInstruction);
-  this.hitDetectionInstructions.push(drawImageInstruction);
+  ]);
+  this.hitDetectionInstructions.push([
+    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
+    this.anchorX_, this.anchorY_, this.width_, this.height_,
+    this.hitDetectionImage_, this.snapToPixel_
+  ]);
  this.endGeometry(multiPointGeometry, data);
 };

@@ -577,6 +589,7 @@ ol.render.canvas.ImageReplay.prototype.finish = function() {
  // FIXME this doesn't really protect us against further calls to draw*Geometry
  this.anchorX_ = undefined;
  this.anchorY_ = undefined;
+  this.hitDetectionImage_ = null;
  this.image_ = null;
  this.height_ = undefined;
  this.width_ = undefined;
@@ -589,15 +602,22 @@ ol.render.canvas.ImageReplay.prototype.finish = function() {
 */
 ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) {
  goog.asserts.assert(!goog.isNull(imageStyle));
-  goog.asserts.assert(!goog.isNull(imageStyle.anchor));
-  goog.asserts.assert(goog.isDef(imageStyle.size));
-  goog.asserts.assert(!goog.isNull(imageStyle.image));
-  this.anchorX_ = imageStyle.anchor[0];
-  this.anchorY_ = imageStyle.anchor[1];
-  this.image_ = imageStyle.image;
-  this.width_ = imageStyle.size[0];
-  this.height_ = imageStyle.size[1];
-  this.snapToPixel_ = imageStyle.snapToPixel;
+  var anchor = imageStyle.getAnchor();
+  goog.asserts.assert(!goog.isNull(anchor));
+  var size = imageStyle.getSize();
+  goog.asserts.assert(!goog.isNull(size));
+  // FIXME pixel ratio
+  var hitDetectionImage = imageStyle.getHitDetectionImage(1);
+  goog.asserts.assert(!goog.isNull(hitDetectionImage));
+  var image = imageStyle.getImage(1);
+  goog.asserts.assert(!goog.isNull(image));
+  this.anchorX_ = anchor[0];
+  this.anchorY_ = anchor[1];
+  this.hitDetectionImage_ = hitDetectionImage;
+  this.image_ = image;
+  this.width_ = size[0];
+  this.height_ = size[1];
+  this.snapToPixel_ = imageStyle.getSnapToPixel();
 };


@@ -790,18 +810,24 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle =
  goog.asserts.assert(!goog.isNull(this.state_));
  goog.asserts.assert(goog.isNull(fillStyle));
  goog.asserts.assert(!goog.isNull(strokeStyle));
-  this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ?
-      strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
-  this.state_.lineCap = goog.isDef(strokeStyle.lineCap) ?
-      strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
-  this.state_.lineDash = !goog.isNull(strokeStyle.lineDash) ?
-      strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
-  this.state_.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
-      strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
-  this.state_.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ?
-      strokeStyle.width : ol.render.canvas.defaultLineWidth);
-  this.state_.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
-      strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+  var strokeStyleColor = strokeStyle.getColor();
+  this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ?
+      strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
+  var strokeStyleLineCap = strokeStyle.getLineCap();
+  this.state_.lineCap = goog.isDef(strokeStyleLineCap) ?
+      strokeStyleLineCap : ol.render.canvas.defaultLineCap;
+  var strokeStyleLineDash = strokeStyle.getLineDash();
+  this.state_.lineDash = !goog.isNull(strokeStyleLineDash) ?
+      strokeStyleLineDash : ol.render.canvas.defaultLineDash;
+  var strokeStyleLineJoin = strokeStyle.getLineJoin();
+  this.state_.lineJoin = goog.isDef(strokeStyleLineJoin) ?
+      strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
+  var strokeStyleWidth = strokeStyle.getWidth();
+  this.state_.lineWidth = this.pixelRatio * (goog.isDef(strokeStyleWidth) ?
+      strokeStyleWidth : ol.render.canvas.defaultLineWidth);
+  var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
+  this.state_.miterLimit = goog.isDef(strokeStyleMiterLimit) ?
+      strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit;
 };


@@ -1009,24 +1035,31 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle =
  goog.asserts.assert(!goog.isNull(fillStyle) || !goog.isNull(strokeStyle));
  var state = this.state_;
  if (!goog.isNull(fillStyle)) {
-    state.fillStyle = ol.color.asString(!goog.isNull(fillStyle.color) ?
-        fillStyle.color : ol.render.canvas.defaultFillStyle);
+    var fillStyleColor = fillStyle.getColor();
+    state.fillStyle = ol.color.asString(!goog.isNull(fillStyleColor) ?
+        fillStyleColor : ol.render.canvas.defaultFillStyle);
  } else {
    state.fillStyle = undefined;
  }
  if (!goog.isNull(strokeStyle)) {
-    state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ?
-        strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
-    state.lineCap = goog.isDef(strokeStyle.lineCap) ?
-        strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
-    state.lineDash = !goog.isNull(strokeStyle.lineDash) ?
-        strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
-    state.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
-        strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
-    state.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ?
-        strokeStyle.width : ol.render.canvas.defaultLineWidth);
-    state.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
-        strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+    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;
--- a/src/ol/render/dragbox.js
+++ b/src/ol/render/dragbox.js
@@ -96,7 +96,7 @@ ol.render.DragBox.prototype.handleMapPostCompose_ = function(event) {
  ];
  var geometry = new ol.geom.Polygon(coordinates);
  var style = this.style_;
-  render.setFillStrokeStyle(style.fill, style.stroke);
+  render.setFillStrokeStyle(style.getFill(), style.getStroke());
  render.drawPolygonGeometry(geometry, null);
 };

--- a/src/ol/render/vector.js
+++ b/src/ol/render/vector.js
@@ -61,14 +61,15 @@ ol.renderer.vector.renderGeometryCollectionGeometry_ =
 */
 ol.renderer.vector.renderLineStringGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.stroke)) {
+  var strokeStyle = style.getStroke();
+  if (goog.isNull(strokeStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.LineString);
  var lineStringGeometry = /** @type {ol.geom.LineString} */ (geometry);
  var replay = replayGroup.getReplay(
-      style.zIndex, ol.render.ReplayType.LINE_STRING);
-  replay.setFillStrokeStyle(null, style.stroke);
+      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+  replay.setFillStrokeStyle(null, strokeStyle);
  replay.drawLineStringGeometry(lineStringGeometry, data);
 };

@@ -82,15 +83,16 @@ ol.renderer.vector.renderLineStringGeometry_ =
 */
 ol.renderer.vector.renderMultiLineStringGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.stroke)) {
+  var strokeStyle = style.getStroke();
+  if (goog.isNull(strokeStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.MultiLineString);
  var multiLineStringGeometry = /** @type {ol.geom.MultiLineString} */
      (geometry);
  var replay = replayGroup.getReplay(
-      style.zIndex, ol.render.ReplayType.LINE_STRING);
-  replay.setFillStrokeStyle(null, style.stroke);
+      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
+  replay.setFillStrokeStyle(null, strokeStyle);
  replay.drawMultiLineStringGeometry(multiLineStringGeometry, data);
 };

@@ -104,15 +106,17 @@ ol.renderer.vector.renderMultiLineStringGeometry_ =
 */
 ol.renderer.vector.renderMultiPolygonGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.stroke) && goog.isNull(style.fill)) {
+  var fillStyle = style.getFill();
+  var strokeStyle = style.getStroke();
+  if (goog.isNull(strokeStyle) && goog.isNull(fillStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon);
  var multiPolygonGeometry = /** @type {ol.geom.MultiPolygon} */
      (geometry);
  var replay = replayGroup.getReplay(
-      style.zIndex, ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(style.fill, style.stroke);
+      style.getZIndex(), ol.render.ReplayType.POLYGON);
+  replay.setFillStrokeStyle(fillStyle, strokeStyle);
  replay.drawMultiPolygonGeometry(multiPolygonGeometry, data);
 };

@@ -126,13 +130,15 @@ ol.renderer.vector.renderMultiPolygonGeometry_ =
 */
 ol.renderer.vector.renderPointGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.image)) {
+  var imageStyle = style.getImage();
+  if (goog.isNull(imageStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.Point);
  var pointGeometry = /** @type {ol.geom.Point} */ (geometry);
-  var replay = replayGroup.getReplay(style.zIndex, ol.render.ReplayType.IMAGE);
-  replay.setImageStyle(style.image);
+  var replay = replayGroup.getReplay(
+      style.getZIndex(), ol.render.ReplayType.IMAGE);
+  replay.setImageStyle(imageStyle);
  replay.drawPointGeometry(pointGeometry, data);
 };

@@ -146,13 +152,15 @@ ol.renderer.vector.renderPointGeometry_ =
 */
 ol.renderer.vector.renderMultiPointGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.image)) {
+  var imageStyle = style.getImage();
+  if (goog.isNull(imageStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.MultiPoint);
  var multiPointGeometry = /** @type {ol.geom.MultiPoint} */ (geometry);
-  var replay = replayGroup.getReplay(style.zIndex, ol.render.ReplayType.IMAGE);
-  replay.setImageStyle(style.image);
+  var replay = replayGroup.getReplay(
+      style.getZIndex(), ol.render.ReplayType.IMAGE);
+  replay.setImageStyle(imageStyle);
  replay.drawMultiPointGeometry(multiPointGeometry, data);
 };

@@ -166,14 +174,16 @@ ol.renderer.vector.renderMultiPointGeometry_ =
 */
 ol.renderer.vector.renderPolygonGeometry_ =
    function(replayGroup, geometry, style, data) {
-  if (goog.isNull(style.fill) && goog.isNull(style.stroke)) {
+  var fillStyle = style.getFill();
+  var strokeStyle = style.getStroke();
+  if (goog.isNull(fillStyle) && goog.isNull(strokeStyle)) {
    return;
  }
  goog.asserts.assertInstanceof(geometry, ol.geom.Polygon);
  var polygonGeometry = /** @type {ol.geom.Polygon} */ (geometry);
  var replay = replayGroup.getReplay(
-      style.zIndex, ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(style.fill, style.stroke);
+      style.getZIndex(), ol.render.ReplayType.POLYGON);
+  replay.setFillStrokeStyle(fillStyle, strokeStyle);
  replay.drawPolygonGeometry(polygonGeometry, data);
 };

--- a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js
@@ -151,7 +151,7 @@ ol.renderer.canvas.VectorLayer.prototype.getVectorLayer = function() {
 ol.renderer.canvas.VectorLayer.prototype.handleImageStyleChange_ =
    function(event) {
  var imageStyle = /** @type {ol.style.Image} */ (event.target);
-  if (imageStyle.imageState == ol.style.ImageState.LOADED) {
+  if (imageStyle.getImageState() == ol.style.ImageState.LOADED) {
    this.renderIfReadyAndVisible();
  }
 };
@@ -244,18 +244,19 @@ ol.renderer.canvas.VectorLayer.prototype.renderFeature =
  var i, ii, style, imageStyle, imageState;
  for (i = 0, ii = styles.length; i < ii; ++i) {
    style = styles[i];
-    imageStyle = style.image;
+    imageStyle = style.getImage();
    if (!goog.isNull(imageStyle)) {
-      if (imageStyle.imageState == ol.style.ImageState.IDLE) {
+      if (imageStyle.getImageState() == ol.style.ImageState.IDLE) {
        goog.events.listenOnce(imageStyle, goog.events.EventType.CHANGE,
            this.handleImageStyleChange_, false, this);
        imageStyle.load();
-      } else if (imageStyle.imageState == ol.style.ImageState.LOADED) {
+      } else if (imageStyle.getImageState() == ol.style.ImageState.LOADED) {
        ol.renderer.vector.renderFeature(
            replayGroup, feature, style, squaredTolerance, feature);
      }
-      goog.asserts.assert(imageStyle.imageState != ol.style.ImageState.IDLE);
-      loading = imageStyle.imageState == ol.style.ImageState.LOADING;
+      goog.asserts.assert(
+          imageStyle.getImageState() != ol.style.ImageState.IDLE);
+      loading = imageStyle.getImageState() == ol.style.ImageState.LOADING;
    } else {
      ol.renderer.vector.renderFeature(
          replayGroup, feature, style, squaredTolerance, feature);
--- a/src/ol/shape.exports
+++ b/src/ol/shape.exports
@@ -1 +0,0 @@
-@exportSymbol ol.shape.renderCircle
--- a/src/ol/shape.js
+++ b/src/ol/shape.js
@@ -1,57 +0,0 @@
-// FIXME check size when stroked
-// FIXME move to ol.render?
-// FIXME find a sensible caching strategy
-
-goog.provide('ol.shape');
-
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
-goog.require('ol.color');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Image');
-goog.require('ol.style.ImageState');
-goog.require('ol.style.Stroke');
-
-
-/**
- * @param {number} radius Radius.
- * @param {ol.style.Fill} fillStyle Fill style.
- * @param {ol.style.Stroke} strokeStyle Stroke style.
- * @return {ol.style.Image} Image.
- */
-ol.shape.renderCircle = function(radius, fillStyle, strokeStyle) {
-
-  var canvas = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-  var size = 2 * radius + 1;
-  if (!goog.isNull(strokeStyle) && goog.isDef(strokeStyle.width)) {
-    size += strokeStyle.width;
-  }
-  canvas.height = size;
-  canvas.width = size;
-
-  var context = /** @type {CanvasRenderingContext2D} */
-      (canvas.getContext('2d'));
-  context.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, true);
-
-  if (goog.isDefAndNotNull(fillStyle)) {
-    context.fillStyle = ol.color.asString(fillStyle.color);
-    context.fill();
-  }
-  if (goog.isDefAndNotNull(strokeStyle)) {
-    context.strokeStyle = ol.color.asString(strokeStyle.color);
-    context.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : 1;
-    context.stroke();
-  }
-
-  return new ol.style.Image({
-    anchor: [size / 2, size / 2],
-    size: [size, size],
-    image: canvas,
-    imageState: ol.style.ImageState.LOADED,
-    rotation: 0,
-    snapToPixel: undefined,
-    subtractViewRotation: false
-  });
-
-};
--- a/src/ol/style/circlestyle.exports
+++ b/src/ol/style/circlestyle.exports
@@ -0,0 +1,5 @@
+@exportSymbol ol.style.Circle
+@exportProperty ol.style.Circle.prototype.getFill
+@exportProperty ol.style.Circle.prototype.getImage
+@exportProperty ol.style.Circle.prototype.getRadius
+@exportProperty ol.style.Circle.prototype.getStroke
--- a/src/ol/style/circlestyle.js
+++ b/src/ol/style/circlestyle.js
@@ -0,0 +1,142 @@
+// FIXME decide default value for snapToPixel
+
+goog.provide('ol.style.Circle');
+
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('ol.color');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Image');
+goog.require('ol.style.ImageState');
+goog.require('ol.style.Stroke');
+
+
+
+/**
+ * @constructor
+ * @param {olx.style.CircleOptions=} opt_options Options.
+ * @extends {ol.style.Image}
+ */
+ol.style.Circle = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.canvas_ = /** @type {HTMLCanvasElement} */
+      (goog.dom.createElement(goog.dom.TagName.CANVAS));
+
+  /**
+   * @private
+   * @type {ol.style.Fill}
+   */
+  this.fill_ = goog.isDef(options.fill) ? options.fill : null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.radius_ = options.radius;
+
+  /**
+   * @private
+   * @type {ol.style.Stroke}
+   */
+  this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null;
+
+  var size = this.render_();
+
+  goog.base(this, {
+    anchor: [size / 2, size / 2],
+    imageState: ol.style.ImageState.LOADED,
+    rotation: 0,
+    size: [size, size],
+    snapToPixel: undefined,
+    subtractViewRotation: false
+  });
+
+};
+goog.inherits(ol.style.Circle, ol.style.Image);
+
+
+/**
+ * @return {ol.style.Fill} Fill style.
+ */
+ol.style.Circle.prototype.getFill = function() {
+  return this.fill_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Circle.prototype.getHitDetectionImage = function(pixelRatio) {
+  return this.canvas_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Circle.prototype.getImage = function(pixelRatio) {
+  return this.canvas_;
+};
+
+
+/**
+ * @return {number} Radius.
+ */
+ol.style.Circle.prototype.getRadius = function() {
+  return this.radius_;
+};
+
+
+/**
+ * @return {ol.style.Stroke} Stroke style.
+ */
+ol.style.Circle.prototype.getStroke = function() {
+  return this.stroke_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Circle.prototype.load = goog.nullFunction;
+
+
+/**
+ * @private
+ * @return {number} Size.
+ */
+ol.style.Circle.prototype.render_ = function() {
+  var canvas = this.canvas_;
+  var size = 2 * this.radius_ + 1;
+
+  if (!goog.isNull(this.stroke_) && goog.isDef(this.stroke_.width)) {
+    size += this.stroke_.width;
+  }
+
+  canvas.height = size;
+  canvas.width = size;
+
+  var context = /** @type {CanvasRenderingContext2D} */
+      (canvas.getContext('2d'));
+  context.arc(size / 2, size / 2, this.radius_, 0, 2 * Math.PI, true);
+
+  if (!goog.isNull(this.fill_)) {
+    context.fillStyle = ol.color.asString(this.fill_.getColor());
+    context.fill();
+  }
+  if (!goog.isNull(this.stroke_)) {
+    var strokeColor = this.stroke_.getColor();
+    context.strokeStyle = ol.color.asString(strokeColor);
+    var strokeWidth = this.stroke_.getWidth();
+    context.lineWidth = goog.isDef(strokeWidth) ? strokeWidth : 1;
+    context.stroke();
+  }
+
+  return size;
+};
--- a/src/ol/style/fillstyle.exports
+++ b/src/ol/style/fillstyle.exports
@@ -1 +1,2 @@
@exportSymbol ol.style.Fill
+@exportProperty ol.style.Fill.prototype.getColor
--- a/src/ol/style/fillstyle.js
+++ b/src/ol/style/fillstyle.js
@@ -13,7 +13,16 @@ ol.style.Fill = function(opt_options) {
  var options = goog.isDef(opt_options) ? opt_options : {};

  /**
+   * @private
   * @type {ol.Color|string}
   */
-  this.color = goog.isDef(options.color) ? options.color : null;
+  this.color_ = goog.isDef(options.color) ? options.color : null;
+};
+
+
+/**
+ * @return {ol.Color|string} Color.
+ */
+ol.style.Fill.prototype.getColor = function() {
+  return this.color_;
 };
--- a/src/ol/style/iconstyle.exports
+++ b/src/ol/style/iconstyle.exports
@@ -0,0 +1,3 @@
+@exportSymbol ol.style.Icon
+@exportProperty ol.style.Icon.prototype.getImage
+@exportProperty ol.style.Icon.prototype.getSrc
--- a/src/ol/style/iconstyle.js
+++ b/src/ol/style/iconstyle.js
@@ -0,0 +1,213 @@
+// FIXME decide default value for snapToPixel
+
+goog.provide('ol.style.Icon');
+
+goog.require('goog.array');
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.style.Image');
+goog.require('ol.style.ImageState');
+
+
+
+/**
+ * @constructor
+ * @param {olx.style.IconOptions=} opt_options Options.
+ * @extends {ol.style.Image}
+ */
+ol.style.Icon = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  /**
+   * @private
+   * @type {Image|HTMLCanvasElement}
+   */
+  this.hitDetectionImage_ = null;
+
+  /**
+   * @private
+   * @type {Image}
+   */
+  this.image_ = new Image();
+
+  /**
+   * @type {?string}
+   */
+  var crossOrigin =
+      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
+  if (!goog.isNull(crossOrigin)) {
+    this.image_.crossOrigin = crossOrigin;
+  }
+
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.imageListenerKeys_ = null;
+
+  /**
+   * @private
+   * @type {string|undefined}
+   */
+  this.src_ = options.src;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.tainting_ = false;
+
+  /**
+   * @type {ol.Size}
+   */
+  var size = goog.isDef(options.size) ? options.size : null;
+
+  /**
+   * @type {ol.Pixel}
+   */
+  var anchor;
+  if (goog.isDef(options.anchor)) {
+    anchor = options.anchor;
+  } else if (!goog.isNull(size)) {
+    anchor = [size[0] / 2, size[1] / 2];
+  } else {
+    anchor = null;
+  }
+
+  /**
+   * @type {number}
+   */
+  var rotation = goog.isDef(options.rotation) ? options.rotation : 0;
+
+  goog.base(this, {
+    anchor: anchor,
+    imageState: ol.style.ImageState.IDLE,
+    rotation: rotation,
+    size: size,
+    snapToPixel: undefined,
+    subtractViewRotation: false
+  });
+
+};
+goog.inherits(ol.style.Icon, ol.style.Image);
+
+
+/**
+ * @private
+ */
+ol.style.Icon.prototype.determineTainting_ = function() {
+  var canvas = /** @type {HTMLCanvasElement} */
+      (goog.dom.createElement(goog.dom.TagName.CANVAS));
+  canvas.width = 1;
+  canvas.height = 1;
+  var context = /** @type {CanvasRenderingContext2D} */
+      (canvas.getContext('2d'));
+  context.drawImage(this.image_, 0, 0);
+  try {
+    context.getImageData(0, 0, 1, 1);
+  } catch (e) {
+    this.tainting_ = true;
+  }
+};
+
+
+/**
+ * @private
+ */
+ol.style.Icon.prototype.handleImageError_ = function() {
+  this.imageState = ol.style.ImageState.ERROR;
+  this.unlistenImage_();
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @private
+ */
+ol.style.Icon.prototype.handleImageLoad_ = function() {
+  this.imageState = ol.style.ImageState.LOADED;
+  if (goog.isNull(this.size)) {
+    this.size = [this.image_.width, this.image_.height];
+  }
+  if (goog.isNull(this.anchor)) {
+    this.anchor = [this.size[0] / 2, this.size[1] / 2];
+  }
+  this.unlistenImage_();
+  this.determineTainting_();
+  this.dispatchChangeEvent();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getImage = function(pixelRatio) {
+  return this.image_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) {
+  if (goog.isNull(this.hitDetectionImage_)) {
+    if (this.tainting_) {
+      var canvas = /** @type {HTMLCanvasElement} */
+          (goog.dom.createElement(goog.dom.TagName.CANVAS));
+      var width = this.size[0];
+      var height = this.size[1];
+      canvas.width = width;
+      canvas.height = height;
+      var context = /** @type {CanvasRenderingContext2D} */
+          (canvas.getContext('2d'));
+      context.fillRect(0, 0, width, height);
+      this.hitDetectionImage_ = canvas;
+    } else {
+      this.hitDetectionImage_ = this.image_;
+    }
+  }
+  return this.hitDetectionImage_;
+};
+
+
+/**
+ * @return {string|undefined} Image src.
+ */
+ol.style.Icon.prototype.getSrc = function() {
+  return this.src_;
+};
+
+
+/**
+ * Load not yet loaded URI.
+ */
+ol.style.Icon.prototype.load = function() {
+  if (this.imageState == ol.style.ImageState.IDLE) {
+    goog.asserts.assert(goog.isDef(this.src_));
+    goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
+    this.imageState = ol.style.ImageState.LOADING;
+    this.imageListenerKeys_ = [
+      goog.events.listenOnce(this.image_, goog.events.EventType.ERROR,
+          this.handleImageError_, false, this),
+      goog.events.listenOnce(this.image_, goog.events.EventType.LOAD,
+          this.handleImageLoad_, false, this)
+    ];
+    this.image_.src = this.src_;
+  }
+};
+
+
+/**
+ * Discards event handlers which listen for load completion or errors.
+ *
+ * @private
+ */
+ol.style.Icon.prototype.unlistenImage_ = function() {
+  goog.asserts.assert(!goog.isNull(this.imageListenerKeys_));
+  goog.array.forEach(this.imageListenerKeys_, goog.events.unlistenByKey);
+  this.imageListenerKeys_ = null;
+};
--- a/src/ol/style/imagestyle.exports
+++ b/src/ol/style/imagestyle.exports
@@ -1 +1,4 @@
@exportSymbol ol.style.Image
+@exportProperty ol.style.Image.prototype.getAnchor
+@exportProperty ol.style.Image.prototype.getRotation
+@exportProperty ol.style.Image.prototype.getSize
--- a/src/ol/style/imagestyle.js
+++ b/src/ol/style/imagestyle.js
@@ -1,10 +1,7 @@
-// FIXME decide default value for snapToPixel
-
 goog.provide('ol.style.Image');
 goog.provide('ol.style.ImageState');

 goog.require('goog.array');
-goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
@@ -21,138 +18,138 @@ ol.style.ImageState = {
 };


+/**
+ * @typedef {{anchor: ol.Pixel,
+ *            imageState: ol.style.ImageState,
+ *            rotation: number,
+ *            size: ol.Size,
+ *            snapToPixel: (boolean|undefined),
+ *            subtractViewRotation: boolean}}
+ */
+ol.style.ImageOptions;
+
+

 /**
 * @constructor
- * @param {olx.style.ImageOptions=} opt_options Options.
+ * @param {ol.style.ImageOptions} options Options.
 * @extends {goog.events.EventTarget}
 */
-ol.style.Image = function(opt_options) {
-
-  var options = goog.isDef(opt_options) ? opt_options : {};
+ol.style.Image = function(options) {

  goog.base(this);

  /**
+   * @protected
   * @type {ol.Pixel}
   */
  this.anchor = options.anchor;

  /**
-   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
-   */
-  this.image = goog.isDefAndNotNull(options.image) ?
-      options.image : new Image();
-  if (!goog.isNull(options.crossOrigin)) {
-    this.image.crossOrigin = options.crossOrigin;
-  }
-
-  /**
+   * @protected
   * @type {ol.style.ImageState}
   */
-  this.imageState = goog.isDef(options.imageState) ?
-      options.imageState : ol.style.ImageState.IDLE;
+  this.imageState = options.imageState;

  /**
+   * @private
   * @type {number|undefined}
   */
-  this.rotation = options.rotation;
+  this.rotation_ = options.rotation;

  /**
+   * @protected
   * @type {ol.Size}
   */
  this.size = options.size;

  /**
+   * @private
   * @type {boolean|undefined}
   */
-  this.snapToPixel = options.snapToPixel;
-
-  /**
-   * @type {boolean|undefined}
-   */
-  this.subtractViewRotation = options.subtractViewRotation;
+  this.snapToPixel_ = options.snapToPixel;

  /**
   * @private
-   * @type {Array.<number>}
+   * @type {boolean|undefined}
   */
-  this.imageListenerKeys_ = null;
-
-  /**
-   * @private
-   * @type {string|undefined}
-   */
-  this.src_ = options.src;
+  this.subtractViewRotation_ = options.subtractViewRotation;

 };
 goog.inherits(ol.style.Image, goog.events.EventTarget);


 /**
- * @private
+ * @protected
 */
-ol.style.Image.prototype.dispatchChangeEvent_ = function() {
+ol.style.Image.prototype.dispatchChangeEvent = function() {
  this.dispatchEvent(goog.events.EventType.CHANGE);
 };


 /**
- * Tracks loading or read errors.
- *
- * @private
+ * @return {ol.Pixel} Anchor.
 */
-ol.style.Image.prototype.handleImageError_ = function() {
-  this.imageState = ol.style.ImageState.ERROR;
-  this.unlistenImage_();
-  this.dispatchChangeEvent_();
+ol.style.Image.prototype.getAnchor = function() {
+  return this.anchor;
 };


 /**
- * Tracks successful image load.
- *
- * @private
+ * @return {ol.style.ImageState} Image state.
 */
-ol.style.Image.prototype.handleImageLoad_ = function() {
-  this.imageState = ol.style.ImageState.LOADED;
-  if (goog.isNull(this.size)) {
-    this.size = [this.image.width, this.image.height];
-  }
-  if (goog.isNull(this.anchor)) {
-    this.anchor = [this.size[0] / 2, this.size[1] / 2];
-  }
-  this.unlistenImage_();
-  this.dispatchChangeEvent_();
+ol.style.Image.prototype.getImageState = function() {
+  return this.imageState;
 };


+/**
+ * @return {number|undefined} Rotation.
+ */
+ol.style.Image.prototype.getRotation = function() {
+  return this.rotation_;
+};
+
+
+/**
+ * @return {ol.Size} Size.
+ */
+ol.style.Image.prototype.getSize = function() {
+  return this.size;
+};
+
+
+/**
+ * @return {boolean|undefined} Snap to pixel?
+ */
+ol.style.Image.prototype.getSnapToPixel = function() {
+  return this.snapToPixel_;
+};
+
+
+/**
+ * @return {boolean|undefined} Subtract view rotation?
+ */
+ol.style.Image.prototype.getSubtractViewRotation = function() {
+  return this.subtractViewRotation_;
+};
+
+
+/**
+ * @param {number} pixelRatio Pixel ratio.
+ * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element.
+ */
+ol.style.Image.prototype.getImage = goog.abstractMethod;
+
+
+/**
+ * @param {number} pixelRatio Pixel ratio.
+ * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element.
+ */
+ol.style.Image.prototype.getHitDetectionImage = goog.abstractMethod;
+
+
 /**
 * Load not yet loaded URI.
 */
-ol.style.Image.prototype.load = function() {
-  if (this.imageState == ol.style.ImageState.IDLE) {
-    goog.asserts.assert(goog.isDef(this.src_));
-    goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
-    this.imageState = ol.style.ImageState.LOADING;
-    this.imageListenerKeys_ = [
-      goog.events.listenOnce(this.image, goog.events.EventType.ERROR,
-          this.handleImageError_, false, this),
-      goog.events.listenOnce(this.image, goog.events.EventType.LOAD,
-          this.handleImageLoad_, false, this)
-    ];
-    this.image.src = this.src_;
-  }
-};
-
-
-/**
- * Discards event handlers which listen for load completion or errors.
- *
- * @private
- */
-ol.style.Image.prototype.unlistenImage_ = function() {
-  goog.asserts.assert(!goog.isNull(this.imageListenerKeys_));
-  goog.array.forEach(this.imageListenerKeys_, goog.events.unlistenByKey);
-  this.imageListenerKeys_ = null;
-};
+ol.style.Image.prototype.load = goog.abstractMethod;
--- a/src/ol/style/strokestyle.exports
+++ b/src/ol/style/strokestyle.exports
@@ -1 +1,7 @@
@exportSymbol ol.style.Stroke
+@exportProperty ol.style.Stroke.prototype.getColor
+@exportProperty ol.style.Stroke.prototype.getLineCap
+@exportProperty ol.style.Stroke.prototype.getLineDash
+@exportProperty ol.style.Stroke.prototype.getLineJoin
+@exportProperty ol.style.Stroke.prototype.getMiterLimit
+@exportProperty ol.style.Stroke.prototype.getWidth
--- a/src/ol/style/strokestyle.js
+++ b/src/ol/style/strokestyle.js
@@ -13,32 +13,86 @@ ol.style.Stroke = function(opt_options) {
  var options = goog.isDef(opt_options) ? opt_options : {};

  /**
+   * @private
   * @type {ol.Color|string}
   */
-  this.color = goog.isDef(options.color) ? options.color : null;
+  this.color_ = goog.isDef(options.color) ? options.color : null;

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.lineCap = options.lineCap;
+  this.lineCap_ = options.lineCap;

  /**
+   * @private
   * @type {Array.<number>}
   */
-  this.lineDash = goog.isDef(options.lineDash) ? options.lineDash : null;
+  this.lineDash_ = goog.isDef(options.lineDash) ? options.lineDash : null;

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.lineJoin = options.lineJoin;
+  this.lineJoin_ = options.lineJoin;

  /**
+   * @private
   * @type {number|undefined}
   */
-  this.miterLimit = options.miterLimit;
+  this.miterLimit_ = options.miterLimit;

  /**
+   * @private
   * @type {number|undefined}
   */
-  this.width = options.width;
+  this.width_ = options.width;
+};
+
+
+/**
+ * @return {ol.Color|string} Color.
+ */
+ol.style.Stroke.prototype.getColor = function() {
+  return this.color_;
+};
+
+
+/**
+ * @return {string|undefined} Line cap.
+ */
+ol.style.Stroke.prototype.getLineCap = function() {
+  return this.lineCap_;
+};
+
+
+/**
+ * @return {Array.<number>} Line dash.
+ */
+ol.style.Stroke.prototype.getLineDash = function() {
+  return this.lineDash_;
+};
+
+
+/**
+ * @return {string|undefined} Line join.
+ */
+ol.style.Stroke.prototype.getLineJoin = function() {
+  return this.lineJoin_;
+};
+
+
+/**
+ * @return {number|undefined} Miter limit.
+ */
+ol.style.Stroke.prototype.getMiterLimit = function() {
+  return this.miterLimit_;
+};
+
+
+/**
+ * @return {number|undefined} Width.
+ */
+ol.style.Stroke.prototype.getWidth = function() {
+  return this.width_;
 };
--- a/src/ol/style/style.exports
+++ b/src/ol/style/style.exports
@@ -1 +1,6 @@
@exportSymbol ol.style.Style
+@exportProperty ol.style.Style.prototype.getFill
+@exportProperty ol.style.Style.prototype.getImage
+@exportProperty ol.style.Style.prototype.getStroke
+@exportProperty ol.style.Style.prototype.getText
+@exportProperty ol.style.Style.prototype.getZIndex
--- a/src/ol/style/style.js
+++ b/src/ol/style/style.js
@@ -16,33 +16,78 @@ ol.style.Style = function(opt_options) {
  var options = goog.isDef(opt_options) ? opt_options : {};

  /**
+   * @private
   * @type {ol.style.Fill}
   */
-  this.fill = goog.isDef(options.fill) ? options.fill : null;
+  this.fill_ = goog.isDef(options.fill) ? options.fill : null;

  /**
+   * @private
   * @type {ol.style.Image}
   */
-  this.image = goog.isDef(options.image) ? options.image : null;
+  this.image_ = goog.isDef(options.image) ? options.image : null;

  /**
+   * @private
   * @type {ol.style.Stroke}
   */
-  this.stroke = goog.isDef(options.stroke) ? options.stroke : null;
+  this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null;

  /**
+   * @private
   * @type {ol.style.Text}
   */
-  this.text = goog.isDef(options.text) ? options.text : null;
+  this.text_ = goog.isDef(options.text) ? options.text : null;

  /**
+   * @private
   * @type {number|undefined}
   */
-  this.zIndex = options.zIndex;
+  this.zIndex_ = options.zIndex;

 };


+/**
+ * @return {ol.style.Fill} Fill style.
+ */
+ol.style.Style.prototype.getFill = function() {
+  return this.fill_;
+};
+
+
+/**
+ * @return {ol.style.Image} Image style.
+ */
+ol.style.Style.prototype.getImage = function() {
+  return this.image_;
+};
+
+
+/**
+ * @return {ol.style.Stroke} Stroke style.
+ */
+ol.style.Style.prototype.getStroke = function() {
+  return this.stroke_;
+};
+
+
+/**
+ * @return {ol.style.Text} Text style.
+ */
+ol.style.Style.prototype.getText = function() {
+  return this.text_;
+};
+
+
+/**
+ * @return {number|undefined} ZIndex.
+ */
+ol.style.Style.prototype.getZIndex = function() {
+  return this.zIndex_;
+};
+
+
 /**
 * @typedef {function(ol.Feature, number): Array.<ol.style.Style>}
 */
--- a/src/ol/style/textstyle.js
+++ b/src/ol/style/textstyle.js
@@ -11,39 +11,46 @@ ol.style.Text = function(opt_options) {
  var options = goog.isDef(opt_options) ? opt_options : {};

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.font = options.font;
+  this.font_ = options.font;

  /**
+   * @private
   * @type {number|undefined}
   */
-  this.rotation = options.rotation;
+  this.rotation_ = options.rotation;

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.text = options.text;
+  this.text_ = options.text;

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.textAlign = options.textAlign;
+  this.textAlign_ = options.textAlign;

  /**
+   * @private
   * @type {string|undefined}
   */
-  this.textBaseline = options.textBaseline;
+  this.textBaseline_ = options.textBaseline;

  /**
+   * @private
   * @type {ol.style.Fill}
   */
-  this.fill = goog.isDef(options.fill) ? options.fill : null;
+  this.fill_ = goog.isDef(options.fill) ? options.fill : null;

  /**
+   * @private
   * @type {ol.style.Stroke}
   */
-  this.stroke = goog.isDef(options.stroke) ? options.stroke : null;
+  this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null;
 };


@@ -56,10 +63,10 @@ ol.style.Text.equals = function(textStyle1, textStyle2) {
  if (!goog.isNull(textStyle1)) {
    if (!goog.isNull(textStyle2)) {
      return textStyle1 === textStyle2 || (
-          textStyle1.font == textStyle2.font &&
-          textStyle1.text == textStyle2.text &&
-          textStyle1.textAlign == textStyle2.textAlign &&
-          textStyle1.textBaseline == textStyle2.textBaseline);
+          textStyle1.getFont() == textStyle2.getFont() &&
+          textStyle1.getText() == textStyle2.getText() &&
+          textStyle1.getTextAlign() == textStyle2.getTextAlign() &&
+          textStyle1.getTextBaseline() == textStyle2.getTextBaseline());
    } else {
      return false;
    }
@@ -71,3 +78,59 @@ ol.style.Text.equals = function(textStyle1, textStyle2) {
    }
  }
 };
+
+
+/**
+ * @return {string|undefined} Font.
+ */
+ol.style.Text.prototype.getFont = function() {
+  return this.font_;
+};
+
+
+/**
+ * @return {ol.style.Fill} Fill style.
+ */
+ol.style.Text.prototype.getFill = function() {
+  return this.fill_;
+};
+
+
+/**
+ * @return {number|undefined} Rotation.
+ */
+ol.style.Text.prototype.getRotation = function() {
+  return this.rotation_;
+};
+
+
+/**
+ * @return {ol.style.Stroke} Stroke style.
+ */
+ol.style.Text.prototype.getStroke = function() {
+  return this.stroke_;
+};
+
+
+/**
+ * @return {string|undefined} Text.
+ */
+ol.style.Text.prototype.getText = function() {
+  return this.text_;
+};
+
+
+/**
+ * @return {string|undefined} Text align.
+ */
+ol.style.Text.prototype.getTextAlign = function() {
+  return this.textAlign_;
+};
+
+
+/**
+ * @return {string|undefined} Text baseline.
+ */
+ol.style.Text.prototype.getTextBaseline = function() {
+  return this.textBaseline_;
+};