Add clone methods to styles

src/ol/style/circle.js

@@ -89,7 +89,13 @@ ol.style.Circle = function(opt_options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -109,6 +115,25 @@ ol.style.Circle = function(opt_options) {
 ol.inherits(ol.style.Circle, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Image} The cloned style.
+ * @api
+ */
+ol.style.Circle.prototype.clone = function() {
+  var style = new ol.style.Circle({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    radius: this.getRadius(),
+    snapToPixel: this.getSnapToPixel(),
+    atlasManager: this.atlasManager_
+  });
+  style.setOpacity(this.getOpacity());
+  style.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/style/fill.js

@@ -30,6 +30,18 @@ ol.style.Fill = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Fill} The cloned style.
+ * @api
+ */
+ol.style.Fill.prototype.clone = function() {
+  return new ol.style.Fill({
+    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor()
+  });
+};
+
+
 /**
  * Get the fill color.
  * @return {ol.Color|ol.ColorLike} Color.

src/ol/style/icon.js

@@ -57,9 +57,10 @@ ol.style.Icon = function(opt_options) {
       options.anchorYUnits : ol.style.Icon.AnchorUnits.FRACTION;
 
   /**
+   * @private
    * @type {?string}
    */
-  var crossOrigin =
+  this.crossOrigin_ =
       options.crossOrigin !== undefined ? options.crossOrigin : null;
 
   /**
@@ -95,9 +96,10 @@ ol.style.Icon = function(opt_options) {
       ol.Image.State.IDLE : ol.Image.State.LOADED;
 
   /**
+   * @private
    * @type {ol.Color}
    */
-  var color = options.color !== undefined ? ol.color.asArray(options.color) :
+  this.color_ = options.color !== undefined ? ol.color.asArray(options.color) :
       null;
 
   /**
@@ -105,7 +107,7 @@ ol.style.Icon = function(opt_options) {
    * @type {ol.style.IconImage}
    */
   this.iconImage_ = ol.style.IconImage.get(
-      image, /** @type {string} */ (src), imgSize, crossOrigin, imageState, color);
+      image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
 
   /**
    * @private
@@ -171,6 +173,35 @@ ol.style.Icon = function(opt_options) {
 ol.inherits(ol.style.Icon, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Icon} The cloned style.
+ * @api
+ */
+ol.style.Icon.prototype.clone = function() {
+  var useImg = (this.iconImage_.getImageState() === ol.Image.State.LOADED);
+  return new ol.style.Icon({
+    anchor: this.getAnchor().slice(0),
+    anchorOrigin: this.anchorOrigin_.slice(0),
+    anchorXUnits: this.anchorXUnits_,
+    anchorYUnits: this.anchorYUnits_,
+    crossOrigin: this.crossOrigin_,
+    color: this.color_.slice(0),
+    img: useImg ? this.getImage(1) : undefined,
+    imgSize: useImg ? this.iconImage_.getSize().slice(0) : undefined,
+    src: useImg ? undefined : this.getSrc(),
+    offset: this.offset_.slice(0),
+    offsetOrigin: this.offsetOrigin_,
+    size: this.getSize().slice(0),
+    opacity: this.getOpacity(),
+    scale: this.getScale(),
+    snapToPixel: this.getSnapToPixel(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView()
+  });
+};
+
+
 /**
  * @inheritDoc
  * @api

src/ol/style/regularshape.js

@@ -113,7 +113,13 @@ ol.style.RegularShape = function(options) {
    */
   this.hitDetectionImageSize_ = null;
 
-  this.render_(options.atlasManager);
+  /**
+   * @private
+   * @type {ol.style.AtlasManager|undefined}
+   */
+  this.atlasManager_ = options.atlasManager;
+
+  this.render_(this.atlasManager_);
 
   /**
    * @type {boolean}
@@ -139,6 +145,31 @@ ol.style.RegularShape = function(options) {
 ol.inherits(ol.style.RegularShape, ol.style.Image);
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.RegularShape} The cloned style.
+ * @api
+ */
+ol.style.RegularShape.prototype.clone = function() {
+  var style = new ol.style.RegularShape({
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    points: this.getPoints(),
+    radius: this.getRadius(),
+    radius2: this.getRadius2(),
+    angle: this.getAngle(),
+    snapToPixel: this.getSnapToPixel(),
+    stroke: this.getStroke() ?  this.getStroke().clone() : undefined,
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    atlasManager: this.atlasManager_
+  });
+
+  this.setOpacity(this.getOpacity());
+  this.setScale(this.getScale());
+  return style;
+};
+
+
 /**
  * @inheritDoc
  * @api

src/ol/style/stroke.js

@@ -62,6 +62,23 @@ ol.style.Stroke = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Stroke} The cloned style.
+ * @api
+ */
+ol.style.Stroke.prototype.clone = function() {
+  return new ol.style.Stroke({
+    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor(),
+    lineCap: this.getLineCap(),
+    lineDash: this.getLineDash() ? this.getLineDash().slice(0) : undefined,
+    lineJoin: this.getLineJoin(),
+    miterLimit: this.getMiterLimit(),
+    width: this.getWidth()
+  });
+};
+
+
 /**
  * Get the stroke color.
  * @return {ol.Color|string} Color.

src/ol/style/style.js

@@ -71,6 +71,26 @@ ol.style.Style = function(opt_options) {
 };
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Style} The cloned style.
+ * @api
+ */
+ol.style.Style.prototype.clone = function() {
+  var geometry = this.getGeometry();
+  if (geometry && geometry.clone) {
+    geometry = geometry.clone();
+  }
+  return new ol.style.Style({
+    geometry: geometry,
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    text: this.getText() ? this.getText().clone() : undefined,
+    zIndex: this.getZIndex()
+  });
+};
+
+
 /**
  * Get the geometry to be rendered.
  * @return {string|ol.geom.Geometry|ol.StyleGeometryFunction}

src/ol/style/text.js

@@ -95,6 +95,28 @@ ol.style.Text = function(opt_options) {
 ol.style.Text.DEFAULT_FILL_COLOR_ = '#333';
 
 
+/**
+ * Clones the style.
+ * @return {ol.style.Text} The cloned style.
+ * @api
+ */
+ol.style.Text.prototype.clone = function() {
+  return new ol.style.Text({
+    font: this.getFont(),
+    rotation: this.getRotation(),
+    rotateWithView: this.getRotateWithView(),
+    scale: this.getScale(),
+    text: this.getText(),
+    textAlign: this.getTextAlign(),
+    textBaseline: this.getTextBaseline(),
+    fill: this.getFill() ? this.getFill().clone() : undefined,
+    stroke: this.getStroke() ? this.getStroke().clone() : undefined,
+    offsetX: this.getOffsetX(),
+    offsetY: this.getOffsetY()
+  });
+};
+
+
 /**
  * Get the font name.
  * @return {string|undefined} Font.