Merge pull request #2040 from elemoine/iconsprite

Ability to use sprites as Icon src

externs/olx.js

@@ -4365,6 +4365,7 @@ olx.style.FillOptions.prototype.color;
  *     anchorXUnits: (ol.style.IconAnchorUnits|undefined),
  *     anchorYUnits: (ol.style.IconAnchorUnits|undefined),
  *     crossOrigin: (null|string|undefined),
+ *     origin: (Array.<number>|undefined),
  *     scale: (number|undefined),
  *     rotateWithView: (boolean|undefined),
  *     rotation: (number|undefined),
@@ -4415,6 +4416,15 @@ olx.style.IconOptions.prototype.anchorYUnits;
 olx.style.IconOptions.prototype.crossOrigin;
 
 
+/**
+ * The top left corner, which, together with the size, define the
+ * sub-rectangle to use from the original icon image. Default value
+ * is `[0, 0]`.
+ * @type {Array.<number>|undefined}
+ */
+olx.style.IconOptions.prototype.origin;
+
+
 /**
  * Scale.
  * @type {number|undefined}

src/ol/render/canvas/canvasimmediate.js

@@ -128,6 +128,18 @@ ol.render.canvas.Immediate =
    */
   this.imageOpacity_ = 0;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageOriginX_ = 0;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.imageOriginY_ = 0;
+
   /**
    * @private
    * @type {boolean}
@@ -269,7 +281,9 @@ ol.render.canvas.Immediate.prototype.drawImages_ =
           goog.vec.Mat4.getElement(localTransform, 0, 3),
           goog.vec.Mat4.getElement(localTransform, 1, 3));
     }
-    context.drawImage(this.image_, x, y, this.imageWidth_, this.imageHeight_);
+    context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_,
+        this.imageWidth_, this.imageHeight_, x, y,
+        this.imageWidth_, this.imageHeight_);
   }
   if (rotation !== 0 || this.imageScale_ != 1) {
     context.setTransform(1, 0, 0, 1, 0, 0);
@@ -873,6 +887,7 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
     // FIXME pixel ratio
     var imageImage = imageStyle.getImage(1);
     var imageOpacity = imageStyle.getOpacity();
+    var imageOrigin = imageStyle.getOrigin();
     var imageRotateWithView = imageStyle.getRotateWithView();
     var imageRotation = imageStyle.getRotation();
     var imageScale = imageStyle.getScale();
@@ -880,12 +895,15 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
     var imageSnapToPixel = imageStyle.getSnapToPixel();
     goog.asserts.assert(!goog.isNull(imageAnchor));
     goog.asserts.assert(!goog.isNull(imageImage));
+    goog.asserts.assert(!goog.isNull(imageOrigin));
     goog.asserts.assert(!goog.isNull(imageSize));
     this.imageAnchorX_ = imageAnchor[0];
     this.imageAnchorY_ = imageAnchor[1];
     this.imageHeight_ = imageSize[1];
     this.image_ = imageImage;
     this.imageOpacity_ = goog.isDef(imageOpacity) ? imageOpacity : 1;
+    this.imageOriginX_ = imageOrigin[0];
+    this.imageOriginY_ = imageOrigin[1];
     this.imageRotateWithView_ = goog.isDef(imageRotateWithView) ?
         imageRotateWithView : false;
     this.imageRotation_ = goog.isDef(imageRotation) ? imageRotation : 0;

src/ol/render/canvas/canvasreplay.js

@@ -286,11 +286,13 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         var anchorY = /** @type {number} */ (instruction[5]) * pixelRatio;
         var height = /** @type {number} */ (instruction[6]) * pixelRatio;
         var opacity = /** @type {number} */ (instruction[7]);
-        var rotateWithView = /** @type {boolean} */ (instruction[8]);
+        var originX = /** @type {number} */ (instruction[8]);
-        var rotation = /** @type {number} */ (instruction[9]);
+        var originY = /** @type {number} */ (instruction[9]);
-        var scale = /** @type {number} */ (instruction[10]);
+        var rotateWithView = /** @type {boolean} */ (instruction[10]);
-        var snapToPixel = /** @type {boolean|undefined} */ (instruction[11]);
+        var rotation = /** @type {number} */ (instruction[11]);
-        var width = /** @type {number} */ (instruction[12]) * pixelRatio;
+        var scale = /** @type {number} */ (instruction[12]);
+        var snapToPixel = /** @type {boolean|undefined} */ (instruction[13]);
+        var width = /** @type {number} */ (instruction[14]) * pixelRatio;
         if (rotateWithView) {
           rotation += viewRotation;
         }
@@ -320,7 +322,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
             context.globalAlpha = alpha * opacity;
           }
 
-          context.drawImage(image, x, y, width, height);
+          context.drawImage(image, originX, originY, width, height,
+              x, y, width, height);
 
           if (opacity != 1) {
             context.globalAlpha = alpha;
@@ -697,6 +700,18 @@ ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution) {
    */
   this.opacity_ = undefined;
 
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.originX_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.originY_ = undefined;
+
   /**
    * @private
    * @type {boolean|undefined}
@@ -758,6 +773,8 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorY_));
   goog.asserts.assert(goog.isDef(this.height_));
   goog.asserts.assert(goog.isDef(this.opacity_));
+  goog.asserts.assert(goog.isDef(this.originX_));
+  goog.asserts.assert(goog.isDef(this.originY_));
   goog.asserts.assert(goog.isDef(this.rotateWithView_));
   goog.asserts.assert(goog.isDef(this.rotation_));
   goog.asserts.assert(goog.isDef(this.scale_));
@@ -773,16 +790,16 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry =
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
     this.anchorX_, this.anchorY_, this.height_, this.opacity_,
-    this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_,
+    this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
-    this.width_
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
     this.hitDetectionImage_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
     this.anchorX_, this.anchorY_, this.height_, this.opacity_,
-    this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_,
+    this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
-    this.width_
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.endGeometry(pointGeometry, data);
 };
@@ -800,6 +817,8 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
   goog.asserts.assert(goog.isDef(this.anchorY_));
   goog.asserts.assert(goog.isDef(this.height_));
   goog.asserts.assert(goog.isDef(this.opacity_));
+  goog.asserts.assert(goog.isDef(this.originX_));
+  goog.asserts.assert(goog.isDef(this.originY_));
   goog.asserts.assert(goog.isDef(this.rotateWithView_));
   goog.asserts.assert(goog.isDef(this.rotation_));
   goog.asserts.assert(goog.isDef(this.scale_));
@@ -815,16 +834,16 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry =
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.image_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
     this.anchorX_, this.anchorY_, this.height_, this.opacity_,
-    this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_,
+    this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
-    this.width_
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.hitDetectionInstructions.push([
     ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd,
     this.hitDetectionImage_,
     // Remaining arguments to DRAW_IMAGE are in alphabetical order
     this.anchorX_, this.anchorY_, this.height_, this.opacity_,
-    this.rotateWithView_, this.rotation_, this.scale_, this.snapToPixel_,
+    this.originX_, this.originY_, this.rotateWithView_, this.rotation_,
-    this.width_
+    this.scale_, this.snapToPixel_, this.width_
   ]);
   this.endGeometry(multiPointGeometry, data);
 };
@@ -843,6 +862,8 @@ ol.render.canvas.ImageReplay.prototype.finish = function() {
   this.height_ = undefined;
   this.scale_ = undefined;
   this.opacity_ = undefined;
+  this.originX_ = undefined;
+  this.originY_ = undefined;
   this.rotateWithView_ = undefined;
   this.rotation_ = undefined;
   this.snapToPixel_ = undefined;
@@ -863,12 +884,16 @@ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) {
   goog.asserts.assert(!goog.isNull(hitDetectionImage));
   var image = imageStyle.getImage(1);
   goog.asserts.assert(!goog.isNull(image));
+  var origin = imageStyle.getOrigin();
+  goog.asserts.assert(!goog.isNull(origin));
   this.anchorX_ = anchor[0];
   this.anchorY_ = anchor[1];
   this.hitDetectionImage_ = hitDetectionImage;
   this.image_ = image;
   this.height_ = size[1];
   this.opacity_ = imageStyle.getOpacity();
+  this.originX_ = origin[0];
+  this.originY_ = origin[1];
   this.rotateWithView_ = imageStyle.getRotateWithView();
   this.rotation_ = imageStyle.getRotation();
   this.scale_ = imageStyle.getScale();

src/ol/style/circlestyle.js

@@ -70,6 +70,7 @@ ol.style.Circle = function(opt_options) {
 
   goog.base(this, {
     opacity: 1,
+    origin: [0, 0],
     rotateWithView: false,
     rotation: 0,
     scale: 1,

src/ol/style/iconstyle.js

@@ -102,6 +102,12 @@ ol.style.Icon = function(opt_options) {
    */
   var opacity = goog.isDef(options.opacity) ? options.opacity : 1;
 
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  var origin = goog.isDef(options.origin) ? options.origin : [0, 0];
+
   /**
    * @type {boolean}
    */
@@ -120,6 +126,7 @@ ol.style.Icon = function(opt_options) {
 
   goog.base(this, {
     opacity: opacity,
+    origin: origin,
     rotation: rotation,
     scale: scale,
     snapToPixel: undefined,

src/ol/style/imagestyle.js

@@ -17,6 +17,7 @@ ol.style.ImageState = {
 
 /**
  * @typedef {{opacity: number,
+ *            origin: Array.<number>,
  *            rotateWithView: boolean,
  *            rotation: number,
  *            scale: number,
@@ -39,6 +40,12 @@ ol.style.Image = function(options) {
    */
   this.opacity_ = options.opacity;
 
+  /**
+   * @private
+   * @type {Array.<number>}
+   */
+  this.origin_ = options.origin;
+
   /**
    * @private
    * @type {boolean}
@@ -74,6 +81,14 @@ ol.style.Image.prototype.getOpacity = function() {
 };
 
 
+/**
+ * @return {Array.<number>} Origin.
+ */
+ol.style.Image.prototype.getOrigin = function() {
+  return this.origin_;
+};
+
+
 /**
  * @return {boolean} Rotate with map.
  */