Add x/y offset for icon symbolizers

src/objectliterals.jsdoc

@@ -608,7 +608,11 @@
  * @property {number|ol.expr.Expression|undefined} opacity Icon opacity
  *     (0-1).
  * @property {number|ol.expr.Expression|undefined} rotation Rotation in
- *     degrees (0-360).
+ *     radians (positive rotation clockwise).
+ * @property {number|ol.expr.Expression|undefined} xOffset Pixel offset from the
+ *     point to the center of the icon (positive values shift image left).
+ * @property {number|ol.expr.Expression|undefined} yOffset Pixel offset from the
+ *     point to the center of the icon (positive values shift image down).
  */
 
 /**

src/ol/renderer/canvas/canvasvectorrenderer.js

@@ -209,6 +209,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
       content, alpha, i, ii, feature, id, size, geometry, components, j, jj,
       point, vec;
 
+  var xOffset = 0;
+  var yOffset = 0;
   if (symbolizer instanceof ol.style.ShapeLiteral) {
     content = ol.renderer.canvas.VectorRenderer.renderShape(symbolizer);
     alpha = 1;
@@ -216,6 +218,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
     content = ol.renderer.canvas.VectorRenderer.renderIcon(
         symbolizer, this.iconLoadedCallback_);
     alpha = symbolizer.opacity;
+    xOffset = symbolizer.xOffset;
+    yOffset = symbolizer.yOffset;
   } else {
     throw new Error('Unsupported symbolizer: ' + symbolizer);
   }
@@ -253,7 +257,8 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPointFeatures_ =
       point = components[j];
       vec = [point.get(0), point.get(1), 0];
       goog.vec.Mat4.multVec3(this.transform_, vec, vec);
-      context.drawImage(content, vec[0], vec[1], content.width, content.height);
+      context.drawImage(content, vec[0] + xOffset, vec[1] + yOffset,
+          content.width, content.height);
     }
   }
   context.restore();

src/ol/style/iconliteral.js

@@ -4,11 +4,13 @@ goog.require('ol.style.PointLiteral');
 
 
 /**
- * @typedef {{url: (string),
+ * @typedef {{url: string,
  *            width: (number|undefined),
  *            height: (number|undefined),
- *            opacity: (number),
- *            rotation: (number)}}
+ *            opacity: number,
+ *            rotation: number,
+ *            xOffset: number,
+ *            yOffset: number}}
  */
 ol.style.IconLiteralOptions;
 
@@ -36,6 +38,12 @@ ol.style.IconLiteral = function(options) {
   /** @type {number} */
   this.rotation = options.rotation;
 
+  /** @type {number} */
+  this.xOffset = options.xOffset;
+
+  /** @type {number} */
+  this.yOffset = options.yOffset;
+
 };
 goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral);
 
@@ -48,5 +56,7 @@ ol.style.IconLiteral.prototype.equals = function(iconLiteral) {
       this.width == iconLiteral.width &&
       this.height == iconLiteral.height &&
       this.opacity == iconLiteral.opacity &&
-      this.rotation == iconLiteral.rotation;
+      this.rotation == iconLiteral.rotation &&
+      this.xOffset == iconLiteral.xOffset &&
+      this.yOffset == iconLiteral.yOffset;
 };

src/ol/style/iconsymbolizer.js

@@ -63,6 +63,24 @@ ol.style.Icon = function(options) {
       (options.rotation instanceof ol.expr.Expression) ?
           options.rotation : new ol.expr.Literal(options.rotation);
 
+  /**
+   * @type {ol.expr.Expression}
+   * @private
+   */
+  this.xOffset_ = !goog.isDef(options.xOffset) ?
+      new ol.expr.Literal(ol.style.IconDefaults.xOffset) :
+      (options.xOffset instanceof ol.expr.Expression) ?
+          options.xOffset : new ol.expr.Literal(options.xOffset);
+
+  /**
+   * @type {ol.expr.Expression}
+   * @private
+   */
+  this.yOffset_ = !goog.isDef(options.yOffset) ?
+      new ol.expr.Literal(ol.style.IconDefaults.yOffset) :
+      (options.yOffset instanceof ol.expr.Expression) ?
+          options.yOffset : new ol.expr.Literal(options.yOffset);
+
 };
 
 
@@ -106,12 +124,20 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) {
     var rotation = Number(ol.expr.evaluateFeature(this.rotation_, feature));
     goog.asserts.assert(!isNaN(rotation), 'rotation must be a number');
 
+    var xOffset = Number(ol.expr.evaluateFeature(this.xOffset_, feature));
+    goog.asserts.assert(!isNaN(xOffset), 'xOffset must be a number');
+
+    var yOffset = Number(ol.expr.evaluateFeature(this.yOffset_, feature));
+    goog.asserts.assert(!isNaN(yOffset), 'yOffset must be a number');
+
     literal = new ol.style.IconLiteral({
       url: url,
       width: width,
       height: height,
       opacity: opacity,
-      rotation: rotation
+      rotation: rotation,
+      xOffset: xOffset,
+      yOffset: yOffset
     });
   }
 
@@ -164,6 +190,24 @@ ol.style.Icon.prototype.getWidth = function() {
 };
 
 
+/**
+ * Get the xOffset.
+ * @return {ol.expr.Expression} Icon xOffset.
+ */
+ol.style.Icon.prototype.getXOffset = function() {
+  return this.xOffset_;
+};
+
+
+/**
+ * Get the yOffset.
+ * @return {ol.expr.Expression} Icon yOffset.
+ */
+ol.style.Icon.prototype.getYOffset = function() {
+  return this.yOffset_;
+};
+
+
 /**
  * Set the height.
  * @param {ol.expr.Expression} height Icon height.
@@ -215,10 +259,34 @@ ol.style.Icon.prototype.setWidth = function(width) {
 
 
 /**
- * @typedef {{opacity: (number),
- *            rotation: (number)}}
+ * Set the xOffset.
+ * @param {ol.expr.Expression} xOffset Icon xOffset.
+ */
+ol.style.Icon.prototype.setXOffset = function(xOffset) {
+  goog.asserts.assertInstanceof(xOffset, ol.expr.Expression);
+  this.xOffset_ = xOffset;
+};
+
+
+/**
+ * Set the yOffset.
+ * @param {ol.expr.Expression} yOffset Icon yOffset.
+ */
+ol.style.Icon.prototype.setYOffset = function(yOffset) {
+  goog.asserts.assertInstanceof(yOffset, ol.expr.Expression);
+  this.yOffset_ = yOffset;
+};
+
+
+/**
+ * @typedef {{opacity: number,
+ *            rotation: number,
+ *            xOffset: number,
+ *            yOffset: number}}
  */
 ol.style.IconDefaults = {
   opacity: 1,
-  rotation: 0
+  rotation: 0,
+  xOffset: 0,
+  yOffset: 0
 };