diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index d61cb12f3f..f8093a3745 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -692,6 +692,7 @@ * 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). + * @property {number|ol.expr.Expression|undefined} zIndex Stack order. */ /** diff --git a/src/ol/style/iconliteral.js b/src/ol/style/iconliteral.js index 63a55e6e8f..c84997e0af 100644 --- a/src/ol/style/iconliteral.js +++ b/src/ol/style/iconliteral.js @@ -10,7 +10,8 @@ goog.require('ol.style.PointLiteral'); * opacity: number, * rotation: number, * xOffset: number, - * yOffset: number}} + * yOffset: number, + * zIndex: (number|undefined)}} */ ol.style.IconLiteralOptions; @@ -44,6 +45,9 @@ ol.style.IconLiteral = function(options) { /** @type {number} */ this.yOffset = options.yOffset; + /** @type {number|undefined} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral); @@ -51,12 +55,13 @@ goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral); /** * @inheritDoc */ -ol.style.IconLiteral.prototype.equals = function(iconLiteral) { - return this.url == iconLiteral.url && - this.width == iconLiteral.width && - this.height == iconLiteral.height && - this.opacity == iconLiteral.opacity && - this.rotation == iconLiteral.rotation && - this.xOffset == iconLiteral.xOffset && - this.yOffset == iconLiteral.yOffset; +ol.style.IconLiteral.prototype.equals = function(other) { + return this.url == other.url && + this.width == other.width && + this.height == other.height && + this.opacity == other.opacity && + this.rotation == other.rotation && + this.xOffset == other.xOffset && + this.yOffset == other.yOffset && + this.zIndex == other.zIndex; }; diff --git a/src/ol/style/iconsymbolizer.js b/src/ol/style/iconsymbolizer.js index 321ca0b5a6..78f6e3eb89 100644 --- a/src/ol/style/iconsymbolizer.js +++ b/src/ol/style/iconsymbolizer.js @@ -81,6 +81,15 @@ ol.style.Icon = function(options) { (options.yOffset instanceof ol.expr.Expression) ? options.yOffset : new ol.expr.Literal(options.yOffset); + /** + * @type {ol.expr.Expression} + * @private + */ + this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ? + null : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; @@ -130,6 +139,12 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) { var yOffset = Number(ol.expr.evaluateFeature(this.yOffset_, feature)); goog.asserts.assert(!isNaN(yOffset), 'yOffset must be a number'); + var zIndex; + if (!goog.isNull(this.zIndex_)) { + zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature)); + goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number'); + } + literal = new ol.style.IconLiteral({ url: url, width: width, @@ -137,7 +152,8 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) { opacity: opacity, rotation: rotation, xOffset: xOffset, - yOffset: yOffset + yOffset: yOffset, + zIndex: zIndex }); } @@ -208,6 +224,15 @@ ol.style.Icon.prototype.getYOffset = function() { }; +/** + * Get the zIndex. + * @return {ol.expr.Expression} Icon zIndex. + */ +ol.style.Icon.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * Set the height. * @param {ol.expr.Expression} height Icon height. @@ -278,6 +303,16 @@ ol.style.Icon.prototype.setYOffset = function(yOffset) { }; +/** + * Set the zIndex. + * @param {ol.expr.Expression} zIndex Icon zIndex. + */ +ol.style.Icon.prototype.setZIndex = function(zIndex) { + goog.asserts.assertInstanceof(zIndex, ol.expr.Expression); + this.zIndex_ = zIndex; +}; + + /** * @typedef {{opacity: number, * rotation: number, diff --git a/test/spec/ol/style/iconliteral.test.js b/test/spec/ol/style/iconliteral.test.js index 8b7c4f9fef..eac009d4e2 100644 --- a/test/spec/ol/style/iconliteral.test.js +++ b/test/spec/ol/style/iconliteral.test.js @@ -54,12 +54,21 @@ describe('ol.style.IconLiteral', function() { rotation: 0.1, url: 'http://example.com/2.png' }); + var differentZIndex = new ol.style.IconLiteral({ + height: 10, + width: 20, + opacity: 1, + rotation: 0.1, + url: 'http://example.com/1.png', + zIndex: 20 + }); expect(literal.equals(equalLiteral)).to.be(true); expect(literal.equals(differentLiteral1)).to.be(false); expect(literal.equals(differentLiteral2)).to.be(false); expect(literal.equals(differentLiteral3)).to.be(false); expect(literal.equals(differentLiteral4)).to.be(false); expect(literal.equals(differentLiteral5)).to.be(false); + expect(literal.equals(differentZIndex)).to.be(false); }); }); diff --git a/test/spec/ol/style/iconsymbolizer.test.js b/test/spec/ol/style/iconsymbolizer.test.js index a7cee1486a..a0d712b79b 100644 --- a/test/spec/ol/style/iconsymbolizer.test.js +++ b/test/spec/ol/style/iconsymbolizer.test.js @@ -30,6 +30,18 @@ describe('ol.style.Icon', function() { expect(symbolizer).to.be.a(ol.style.Icon); }); + it('accepts zIndex', function() { + var symbolizer = new ol.style.Icon({ + height: ol.expr.parse('10'), + width: ol.expr.parse('20'), + opacity: ol.expr.parse('1'), + rotation: ol.expr.parse('0.1'), + url: ol.expr.parse('"http://example.com/1.png"'), + zIndex: 3 + }); + expect(symbolizer).to.be.a(ol.style.Icon); + }); + }); describe('#createLiteral()', function() { @@ -65,6 +77,7 @@ describe('ol.style.Icon', function() { expect(literal.xOffset).to.be(20); expect(literal.yOffset).to.be(30); expect(literal.url).to.be('http://example.com/1.png'); + expect(literal.zIndex).to.be(undefined); }); it('can be called without a feature', function() { @@ -223,6 +236,20 @@ describe('ol.style.Icon', function() { expect(literal.yOffset).to.be(42); }); + it('handles zIndex', function() { + var symbolizer = new ol.style.Icon({ + height: ol.expr.parse('10'), + width: ol.expr.parse('20'), + url: ol.expr.parse('"http://example.com/1.png"'), + zIndex: 4 + }); + + var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT); + expect(literal).to.be.a(ol.style.IconLiteral); + expect(literal.xOffset).to.be(0); + expect(literal.zIndex).to.be(4); + }); + }); describe('#getHeight()', function() {