Add anchorXUnits and anchorYUnits options to ol.style.Icon

src/objectliterals.jsdoc

@@ -797,7 +797,16 @@
 
 /**
  * @typedef {Object} olx.style.IconOptions
- * @property {ol.Pixel|undefined} anchor Anchor.
+ * @property {ol.Pixel|undefined} anchor Anchor. Default value is [0.5, 0.5]
+ *     (icon center).
+ * @property {ol.style.IconAnchorUnits|undefined} anchorXUnits Units in which the anchor x value is specified.
+ *     A value of `'fraction'` indicates the x value is a fraction of the icon.
+ *     A value of `'pixels'` indicates the x value in pixels. Default is
+ *     `'fraction'`.
+ * @property {ol.style.IconAnchorUnits|undefined} anchorYUnits Units in which the anchor y value is specified.
+ *     A value of `'fraction'` indicates the y value is a fraction of the icon.
+ *     A value of `'pixels'` indicates the y value in pixels. Default is
+ *     `'fraction'`.
  * @property {null|string|undefined} crossOrigin crossOrigin setting for image.
  * @property {number|undefined} scale Scale.
  * @property {number|undefined} rotation Rotation.

src/ol/style/iconstyle.js

@@ -1,6 +1,7 @@
 // FIXME decide default value for snapToPixel
 
 goog.provide('ol.style.Icon');
+goog.provide('ol.style.IconAnchorUnits');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
@@ -12,6 +13,15 @@ goog.require('ol.style.Image');
 goog.require('ol.style.ImageState');
 
 
+/**
+ * @enum {string}
+ */
+ol.style.IconAnchorUnits = {
+  FRACTION: 'fraction',
+  PIXELS: 'pixels'
+};
+
+
 
 /**
  * @constructor
@@ -66,17 +76,24 @@ ol.style.Icon = function(opt_options) {
    */
   var size = goog.isDef(options.size) ? options.size : null;
 
+  /**
+   * @private
+   * @type {ol.style.IconAnchorUnits}
+   */
+  this.anchorXUnits_ = goog.isDef(options.anchorXUnits) ?
+      options.anchorXUnits : ol.style.IconAnchorUnits.FRACTION;
+
+  /**
+   * @private
+   * @type {ol.style.IconAnchorUnits}
+   */
+  this.anchorYUnits_ = goog.isDef(options.anchorYUnits) ?
+      options.anchorYUnits : ol.style.IconAnchorUnits.FRACTION;
+
   /**
    * @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;
-  }
+  var anchor = goog.isDef(options.anchor) ? options.anchor : [0.5, 0.5];
 
   /**
    * @type {number}
@@ -139,8 +156,11 @@ ol.style.Icon.prototype.handleImageLoad_ = function() {
   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];
+  if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION) {
+    this.anchor[0] = this.size[0] * this.anchor[0];
+  }
+  if (this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) {
+    this.anchor[1] = this.size[1] * this.anchor[1];
   }
   this.unlistenImage_();
   this.determineTainting_();