diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 11f6a596df..2f8847a95c 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -947,6 +947,7 @@ * @typedef {Object} olx.style.IconOptions * @property {Array.|undefined} anchor Anchor. Default value is `[0.5, 0.5]` * (icon center). + * @property {ol.style.IconAnchorOrigin|undefined} anchorOrigin Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`. * @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 diff --git a/src/ol/format/kmlformat.js b/src/ol/format/kmlformat.js index 8351b856dc..e97b39e713 100644 --- a/src/ol/format/kmlformat.js +++ b/src/ol/format/kmlformat.js @@ -29,6 +29,7 @@ goog.require('ol.geom.Polygon'); goog.require('ol.proj'); goog.require('ol.style.Fill'); goog.require('ol.style.Icon'); +goog.require('ol.style.IconAnchorOrigin'); goog.require('ol.style.IconAnchorUnits'); goog.require('ol.style.Image'); goog.require('ol.style.Stroke'); @@ -473,7 +474,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) { anchorXUnits = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_X_UNITS_; anchorYUnits = ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_Y_UNITS_; } else if (/^http:\/\/maps\.(?:google|gstatic)\.com\//.test(src)) { - anchor = [0.5, 1]; + anchor = [0.5, 0]; anchorXUnits = ol.style.IconAnchorUnits.FRACTION; anchorYUnits = ol.style.IconAnchorUnits.FRACTION; } @@ -494,6 +495,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) { var imageStyle = new ol.style.Icon({ anchor: anchor, + anchorOrigin: ol.style.IconAnchorOrigin.BOTTOM_LEFT, anchorXUnits: anchorXUnits, anchorYUnits: anchorYUnits, crossOrigin: 'anonymous', // FIXME should this be configurable? diff --git a/src/ol/style/iconstyle.js b/src/ol/style/iconstyle.js index 6af27dd27a..d35e484adc 100644 --- a/src/ol/style/iconstyle.js +++ b/src/ol/style/iconstyle.js @@ -1,6 +1,7 @@ // FIXME decide default value for snapToPixel goog.provide('ol.style.Icon'); +goog.provide('ol.style.IconAnchorOrigin'); goog.provide('ol.style.IconAnchorUnits'); goog.provide('ol.style.IconImageCache'); @@ -15,6 +16,17 @@ goog.require('ol.style.Image'); goog.require('ol.style.ImageState'); +/** + * @enum {string} + */ +ol.style.IconAnchorOrigin = { + BOTTOM_LEFT: 'bottom-left', + BOTTOM_RIGHT: 'bottom-right', + TOP_LEFT: 'top-left', + TOP_RIGHT: 'top-right' +}; + + /** * @enum {string} */ @@ -40,6 +52,13 @@ ol.style.Icon = function(opt_options) { */ this.anchor_ = goog.isDef(options.anchor) ? options.anchor : [0.5, 0.5]; + /** + * @private + * @type {ol.style.IconAnchorOrigin} + */ + this.anchorOrigin_ = goog.isDef(options.anchorOrigin) ? + options.anchorOrigin : ol.style.IconAnchorOrigin.TOP_LEFT; + /** * @private * @type {ol.style.IconAnchorUnits} @@ -98,13 +117,13 @@ goog.inherits(ol.style.Icon, ol.style.Image); */ ol.style.Icon.prototype.getAnchor = function() { var anchor = this.anchor_; + var size = this.getSize(); if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION || this.anchorYUnits_ == ol.style.IconAnchorUnits.FRACTION) { - var size = this.getSize(); if (goog.isNull(size)) { return null; } - anchor = [this.anchor_[0], this.anchor_[1]]; + anchor = this.anchor_.slice(); if (this.anchorXUnits_ == ol.style.IconAnchorUnits.FRACTION) { anchor[0] *= size[0]; } @@ -112,6 +131,23 @@ ol.style.Icon.prototype.getAnchor = function() { anchor[1] *= size[1]; } } + + if (this.anchorOrigin_ != ol.style.IconAnchorOrigin.TOP_LEFT) { + if (goog.isNull(size)) { + return null; + } + if (anchor === this.anchor_) { + anchor = this.anchor_.slice(); + } + if (this.anchorOrigin_ == ol.style.IconAnchorOrigin.TOP_RIGHT || + this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_RIGHT) { + anchor[0] = -anchor[0] + size[0]; + } + if (this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_LEFT || + this.anchorOrigin_ == ol.style.IconAnchorOrigin.BOTTOM_RIGHT) { + anchor[1] += size[1]; + } + } return anchor; };