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

[vector-api] Icon/shape API and cross-origin hit detection

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,
+var imageStyle = new ol.style.Circle({
-    new ol.style.Fill({color: 'yellow'}),
+  radius: 5,
-    new ol.style.Stroke({color: 'red', width: 1}));
+  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

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,
+var image = new ol.style.Circle({
-    new ol.style.Stroke({color: 'red', width: 1}));
+  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'
-    }))
+      })
+    })
   })]
 };
 

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({

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

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,
+  image: new ol.style.Circle({
-      new ol.style.Stroke({color: 'red', width: 1}))
+    radius: 3,
+    fill: null,
+    stroke: new ol.style.Stroke({color: 'red', width: 1})
+  })
 })];
 
 var colors = ['red', 'orange', 'yellow', 'blue', 'green', 'indigo', 'violet'];

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,
+    image: new ol.style.Circle({
-        new ol.style.Fill({color: '#666666'}),
+      radius: 5,
-        new ol.style.Stroke({color: '#bada55', width: 1}))
+      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,
+    image: new ol.style.Circle({
-        new ol.style.Fill({color: '#666666'}),
+      radius: 10,
-        new ol.style.Stroke({color: '#bada55', width: 1}))
+      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

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
+ * @typedef {Object} olx.style.IconOptions
- * @property {ol.Pixel} anchor Anchor.
+ * @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 {ol.Size|undefined} size Icon size in pixel.
- * @property {boolean|undefined} snapToPixel Whether the image should be
+ * @property {string} src Image source URI.
- *     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.
  */
 
 /**

src/ol/icon.exports

@@ -1 +0,0 @@
-@exportSymbol ol.icon.renderIcon

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
-  });
-};

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.setFillStrokeStyle(style.getFill(), style.getStroke());
-  this.setImageStyle(style.image);
+  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) ?
+    var fillStyleColor = fillStyle.getColor();
-        fillStyle.color : ol.render.canvas.defaultFillStyle);
+    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) ?
+    var strokeStyleColor = strokeStyle.getColor();
-        strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
+    state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ?
-    state.lineCap = goog.isDef(strokeStyle.lineCap) ?
+        strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-        strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
+    var strokeStyleLineCap = strokeStyle.getLineCap();
-    state.lineDash = !goog.isNull(strokeStyle.lineDash) ?
+    state.lineCap = goog.isDef(strokeStyleLineCap) ?
-        strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
+        strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-    state.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
+    var strokeStyleLineDash = strokeStyle.getLineDash();
-        strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
+    state.lineDash = !goog.isNull(strokeStyleLineDash) ?
-    state.lineWidth = this.pixelRatio_ * (goog.isDef(strokeStyle.width) ?
+        strokeStyleLineDash : ol.render.canvas.defaultLineDash;
-        strokeStyle.width : ol.render.canvas.defaultLineWidth);
+    var strokeStyleLineJoin = strokeStyle.getLineJoin();
-    state.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
+    state.lineJoin = goog.isDef(strokeStyleLineJoin) ?
-        strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+        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));
+    var anchor = imageStyle.getAnchor();
-    goog.asserts.assert(goog.isDef(imageStyle.size));
+    goog.asserts.assert(!goog.isNull(anchor));
-    goog.asserts.assert(!goog.isNull(imageStyle.image));
+    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.anchorX = anchor[0];
-    state.anchorY = imageStyle.anchor[1];
+    state.anchorY = anchor[1];
-    state.image = imageStyle.image;
+    state.image = image;
-    state.width = imageStyle.size[0];
+    state.width = size[0];
-    state.height = imageStyle.size[1];
+    state.height = size[1];
-    state.snapToPixel = imageStyle.snapToPixel;
+    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) ?
+      var textStyleFont = textStyle.getFont();
-          textStyle.font : ol.render.canvas.defaultFont;
+      context.font = goog.isDef(textStyleFont) ?
-      context.textAlign = goog.isDef(textStyle.textAlign) ?
+          textStyleFont : ol.render.canvas.defaultFont;
-          textStyle.textAlign : ol.render.canvas.defaultTextAlign;
+      var textStyleTextAlign = textStyle.getTextAlign();
-      context.textBaseline = goog.isDef(textStyle.textBaseline) ?
+      context.textAlign = goog.isDef(textStyleTextAlign) ?
-          textStyle.textBaseline : ol.render.canvas.defaultTextBaseline;
+          textStyleTextAlign : ol.render.canvas.defaultTextAlign;
+      var textStyleTextBaseline = textStyle.getTextBaseline();
+      context.textBaseline = goog.isDef(textStyleTextBaseline) ?
+          textStyleTextBaseline : ol.render.canvas.defaultTextBaseline;
     }
     state.textStyle = textStyle;
   }

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([
-  this.hitDetectionInstructions.push(drawImageInstruction);
+    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([
-  this.hitDetectionInstructions.push(drawImageInstruction);
+    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));
+  var anchor = imageStyle.getAnchor();
-  goog.asserts.assert(goog.isDef(imageStyle.size));
+  goog.asserts.assert(!goog.isNull(anchor));
-  goog.asserts.assert(!goog.isNull(imageStyle.image));
+  var size = imageStyle.getSize();
-  this.anchorX_ = imageStyle.anchor[0];
+  goog.asserts.assert(!goog.isNull(size));
-  this.anchorY_ = imageStyle.anchor[1];
+  // FIXME pixel ratio
-  this.image_ = imageStyle.image;
+  var hitDetectionImage = imageStyle.getHitDetectionImage(1);
-  this.width_ = imageStyle.size[0];
+  goog.asserts.assert(!goog.isNull(hitDetectionImage));
-  this.height_ = imageStyle.size[1];
+  var image = imageStyle.getImage(1);
-  this.snapToPixel_ = imageStyle.snapToPixel;
+  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) ?
+  var strokeStyleColor = strokeStyle.getColor();
-      strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
+  this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ?
-  this.state_.lineCap = goog.isDef(strokeStyle.lineCap) ?
+      strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-      strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
+  var strokeStyleLineCap = strokeStyle.getLineCap();
-  this.state_.lineDash = !goog.isNull(strokeStyle.lineDash) ?
+  this.state_.lineCap = goog.isDef(strokeStyleLineCap) ?
-      strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
+      strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-  this.state_.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
+  var strokeStyleLineDash = strokeStyle.getLineDash();
-      strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
+  this.state_.lineDash = !goog.isNull(strokeStyleLineDash) ?
-  this.state_.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ?
+      strokeStyleLineDash : ol.render.canvas.defaultLineDash;
-      strokeStyle.width : ol.render.canvas.defaultLineWidth);
+  var strokeStyleLineJoin = strokeStyle.getLineJoin();
-  this.state_.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
+  this.state_.lineJoin = goog.isDef(strokeStyleLineJoin) ?
-      strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+      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) ?
+    var fillStyleColor = fillStyle.getColor();
-        fillStyle.color : ol.render.canvas.defaultFillStyle);
+    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) ?
+    var strokeStyleColor = strokeStyle.getColor();
-        strokeStyle.color : ol.render.canvas.defaultStrokeStyle);
+    state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ?
-    state.lineCap = goog.isDef(strokeStyle.lineCap) ?
+        strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
-        strokeStyle.lineCap : ol.render.canvas.defaultLineCap;
+    var strokeStyleLineCap = strokeStyle.getLineCap();
-    state.lineDash = !goog.isNull(strokeStyle.lineDash) ?
+    state.lineCap = goog.isDef(strokeStyleLineCap) ?
-        strokeStyle.lineDash : ol.render.canvas.defaultLineDash;
+        strokeStyleLineCap : ol.render.canvas.defaultLineCap;
-    state.lineJoin = goog.isDef(strokeStyle.lineJoin) ?
+    var strokeStyleLineDash = strokeStyle.getLineDash();
-        strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin;
+    state.lineDash = !goog.isNull(strokeStyleLineDash) ?
-    state.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ?
+        strokeStyleLineDash : ol.render.canvas.defaultLineDash;
-        strokeStyle.width : ol.render.canvas.defaultLineWidth);
+    var strokeStyleLineJoin = strokeStyle.getLineJoin();
-    state.miterLimit = goog.isDef(strokeStyle.miterLimit) ?
+    state.lineJoin = goog.isDef(strokeStyleLineJoin) ?
-        strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit;
+        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;

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);
 };
 

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);
+      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
-  replay.setFillStrokeStyle(null, style.stroke);
+  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);
+      style.getZIndex(), ol.render.ReplayType.LINE_STRING);
-  replay.setFillStrokeStyle(null, style.stroke);
+  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);
+      style.getZIndex(), ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(style.fill, style.stroke);
+  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);
+  var replay = replayGroup.getReplay(
-  replay.setImageStyle(style.image);
+      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);
+  var replay = replayGroup.getReplay(
-  replay.setImageStyle(style.image);
+      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);
+      style.getZIndex(), ol.render.ReplayType.POLYGON);
-  replay.setFillStrokeStyle(style.fill, style.stroke);
+  replay.setFillStrokeStyle(fillStyle, strokeStyle);
   replay.drawPolygonGeometry(polygonGeometry, data);
 };
 

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);
+      goog.asserts.assert(
-      loading = imageStyle.imageState == ol.style.ImageState.LOADING;
+          imageStyle.getImageState() != ol.style.ImageState.IDLE);
+      loading = imageStyle.getImageState() == ol.style.ImageState.LOADING;
     } else {
       ol.renderer.vector.renderFeature(
           replayGroup, feature, style, squaredTolerance, feature);

src/ol/shape.exports

@@ -1 +0,0 @@
-@exportSymbol ol.shape.renderCircle

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
-  });
-
-};

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

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;
+};

src/ol/style/fillstyle.exports

@@ -1 +1,2 @@
 @exportSymbol ol.style.Fill
+@exportProperty ol.style.Fill.prototype.getColor

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_;
 };

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

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;
+};

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

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) {
+ol.style.Image = function(options) {
-
-  var options = goog.isDef(opt_options) ? opt_options : {};
 
   goog.base(this);
 
   /**
+   * @protected
    * @type {ol.Pixel}
    */
   this.anchor = options.anchor;
 
   /**
-   * @type {HTMLCanvasElement|HTMLVideoElement|Image}
+   * @protected
-   */
-  this.image = goog.isDefAndNotNull(options.image) ?
-      options.image : new Image();
-  if (!goog.isNull(options.crossOrigin)) {
-    this.image.crossOrigin = options.crossOrigin;
-  }
-
-  /**
    * @type {ol.style.ImageState}
    */
-  this.imageState = goog.isDef(options.imageState) ?
+  this.imageState = options.imageState;
-      options.imageState : ol.style.ImageState.IDLE;
 
   /**
+   * @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;
+  this.snapToPixel_ = options.snapToPixel;
-
-  /**
-   * @type {boolean|undefined}
-   */
-  this.subtractViewRotation = options.subtractViewRotation;
 
   /**
    * @private
-   * @type {Array.<number>}
+   * @type {boolean|undefined}
    */
-  this.imageListenerKeys_ = null;
+  this.subtractViewRotation_ = options.subtractViewRotation;
-
-  /**
-   * @private
-   * @type {string|undefined}
-   */
-  this.src_ = options.src;
 
 };
 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.
+ * @return {ol.Pixel} Anchor.
- *
- * @private
  */
-ol.style.Image.prototype.handleImageError_ = function() {
+ol.style.Image.prototype.getAnchor = function() {
-  this.imageState = ol.style.ImageState.ERROR;
+  return this.anchor;
-  this.unlistenImage_();
-  this.dispatchChangeEvent_();
 };
 
 
 /**
- * Tracks successful image load.
+ * @return {ol.style.ImageState} Image state.
- *
- * @private
  */
-ol.style.Image.prototype.handleImageLoad_ = function() {
+ol.style.Image.prototype.getImageState = function() {
-  this.imageState = ol.style.ImageState.LOADED;
+  return this.imageState;
-  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_();
 };
 
 
+/**
+ * @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() {
+ol.style.Image.prototype.load = goog.abstractMethod;
-  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;
-};

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

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_;
 };

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

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>}
  */

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.getFont() == textStyle2.getFont() &&
-          textStyle1.text == textStyle2.text &&
+          textStyle1.getText() == textStyle2.getText() &&
-          textStyle1.textAlign == textStyle2.textAlign &&
+          textStyle1.getTextAlign() == textStyle2.getTextAlign() &&
-          textStyle1.textBaseline == textStyle2.textBaseline);
+          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_;
+};