diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index b058b7ad1a..8bd45c0487 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. */ /** @@ -699,6 +700,7 @@ * @property {string|ol.expr.Expression|undefined} color Fill color as hex color * code. * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1). + * @property {number|ol.expr.Expression|undefined} zIndex Stack order. */ /** @@ -719,6 +721,7 @@ * @property {number|ol.expr.Expression|undefined} size Size in pixels. * @property {ol.style.Fill|undefined} fill Fill symbolizer for shape. * @property {ol.style.Stroke|undefined} stroke Stroke symbolizer for shape. + * @property {number|ol.expr.Expression|undefined} zIndex Stack order. */ /** @@ -727,6 +730,7 @@ * color code. * @property {number|ol.expr.Expression|undefined} opacity Stroke opacity (0-1). * @property {number|ol.expr.Expression|undefined} width Stroke width in pixels. + * @property {number|ol.expr.Expression|undefined} zIndex Stack order. */ /** @@ -744,6 +748,7 @@ * @property {number|ol.expr.Expression|undefined} fontSize Font size in pixels. * @property {string|ol.expr.Expression} text Text for the label. * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1). + * @property {number|ol.expr.Expression|undefined} zIndex Stack order. */ /** diff --git a/src/ol/style/fillsymbolizer.js b/src/ol/style/fillsymbolizer.js index 02fef99d99..0ef25c967a 100644 --- a/src/ol/style/fillsymbolizer.js +++ b/src/ol/style/fillsymbolizer.js @@ -38,6 +38,15 @@ ol.style.Fill = function(opt_options) { (options.opacity instanceof ol.expr.Expression) ? options.opacity : new ol.expr.Literal(options.opacity); + /** + * @type {ol.expr.Expression} + * @private + */ + this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ? + new ol.expr.Literal(ol.style.FillDefaults.zIndex) : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; goog.inherits(ol.style.Fill, ol.style.Symbolizer); @@ -67,9 +76,13 @@ ol.style.Fill.prototype.createLiteral = function(featureOrType) { var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature)); goog.asserts.assert(!isNaN(opacity), 'opacity must be a number'); + var zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature)); + goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number'); + literal = new ol.style.PolygonLiteral({ fillColor: color, - fillOpacity: opacity + fillOpacity: opacity, + zIndex: zIndex }); } @@ -95,6 +108,15 @@ ol.style.Fill.prototype.getOpacity = function() { }; +/** + * Get the fill zIndex. + * @return {ol.expr.Expression} Fill zIndex. + */ +ol.style.Fill.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * Set the fill color. * @param {ol.expr.Expression} color Fill color. @@ -116,10 +138,22 @@ ol.style.Fill.prototype.setOpacity = function(opacity) { /** - * @typedef {{color: (string), - * opacity: (number)}} + * Set the fill zIndex. + * @param {ol.expr.Expression} zIndex Fill zIndex. + */ +ol.style.Fill.prototype.setZIndex = function(zIndex) { + goog.asserts.assertInstanceof(zIndex, ol.expr.Expression); + this.zIndex_ = zIndex; +}; + + +/** + * @typedef {{fillColor: string, + * fillOpacity: number, + * zIndex: number}} */ ol.style.FillDefaults = { color: '#ffffff', - opacity: 0.4 + opacity: 0.4, + zIndex: 0 }; diff --git a/src/ol/style/iconliteral.js b/src/ol/style/iconliteral.js index 63a55e6e8f..81ee54f326 100644 --- a/src/ol/style/iconliteral.js +++ b/src/ol/style/iconliteral.js @@ -1,5 +1,6 @@ goog.provide('ol.style.IconLiteral'); +goog.require('goog.asserts'); goog.require('ol.style.PointLiteral'); @@ -10,7 +11,8 @@ goog.require('ol.style.PointLiteral'); * opacity: number, * rotation: number, * xOffset: number, - * yOffset: number}} + * yOffset: number, + * zIndex: number}} */ ol.style.IconLiteralOptions; @@ -44,6 +46,11 @@ ol.style.IconLiteral = function(options) { /** @type {number} */ this.yOffset = options.yOffset; + goog.asserts.assertNumber( + options.zIndex, 'zIndex must be a number'); + /** @type {number} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.IconLiteral, ol.style.PointLiteral); @@ -51,12 +58,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..284dce51fe 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) ? + new ol.expr.Literal(ol.style.IconDefaults.zIndex) : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; @@ -130,6 +139,9 @@ 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 = 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 +149,8 @@ ol.style.Icon.prototype.createLiteral = function(featureOrType) { opacity: opacity, rotation: rotation, xOffset: xOffset, - yOffset: yOffset + yOffset: yOffset, + zIndex: zIndex }); } @@ -208,6 +221,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,15 +300,27 @@ 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, * xOffset: number, - * yOffset: number}} + * yOffset: number, + * zIndex: number}} */ ol.style.IconDefaults = { opacity: 1, rotation: 0, xOffset: 0, - yOffset: 0 + yOffset: 0, + zIndex: 0 }; diff --git a/src/ol/style/lineliteral.js b/src/ol/style/lineliteral.js index 9b1282ffcf..c13198c630 100644 --- a/src/ol/style/lineliteral.js +++ b/src/ol/style/lineliteral.js @@ -5,9 +5,10 @@ goog.require('ol.style.Literal'); /** - * @typedef {{color: (string), - * opacity: (number), - * width: (number)}} + * @typedef {{color: string, + * opacity: number, + * width: number, + * zIndex: number}} */ ol.style.LineLiteralOptions; @@ -36,6 +37,11 @@ ol.style.LineLiteral = function(options) { /** @type {number} */ this.width = options.width; + goog.asserts.assertNumber( + options.zIndex, 'zIndex must be a number'); + /** @type {number} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.LineLiteral, ol.style.Literal); @@ -43,8 +49,9 @@ goog.inherits(ol.style.LineLiteral, ol.style.Literal); /** * @inheritDoc */ -ol.style.LineLiteral.prototype.equals = function(lineLiteral) { - return this.color == lineLiteral.color && - this.opacity == lineLiteral.opacity && - this.width == lineLiteral.width; +ol.style.LineLiteral.prototype.equals = function(other) { + return this.color == other.color && + this.opacity == other.opacity && + this.width == other.width && + this.zIndex == other.zIndex; }; diff --git a/src/ol/style/polygonliteral.js b/src/ol/style/polygonliteral.js index 88e7149421..e16c482860 100644 --- a/src/ol/style/polygonliteral.js +++ b/src/ol/style/polygonliteral.js @@ -9,7 +9,8 @@ goog.require('ol.style.Literal'); * fillOpacity: (number|undefined), * strokeColor: (string|undefined), * strokeOpacity: (number|undefined), - * strokeWidth: (number|undefined)}} + * strokeWidth: (number|undefined), + * zIndex: number}} */ ol.style.PolygonLiteralOptions; @@ -66,6 +67,11 @@ ol.style.PolygonLiteral = function(options) { 'Either fillColor and fillOpacity or ' + 'strokeColor and strokeOpacity and strokeWidth must be set'); + goog.asserts.assertNumber( + options.zIndex, 'zIndex must be a number'); + /** @type {number} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.PolygonLiteral, ol.style.Literal); @@ -73,10 +79,11 @@ goog.inherits(ol.style.PolygonLiteral, ol.style.Literal); /** * @inheritDoc */ -ol.style.PolygonLiteral.prototype.equals = function(polygonLiteral) { - return this.fillColor == polygonLiteral.fillColor && - this.fillOpacity == polygonLiteral.fillOpacity && - this.strokeColor == polygonLiteral.strokeColor && - this.strokeOpacity == polygonLiteral.strokeOpacity && - this.strokeWidth == polygonLiteral.strokeWidth; +ol.style.PolygonLiteral.prototype.equals = function(other) { + return this.fillColor == other.fillColor && + this.fillOpacity == other.fillOpacity && + this.strokeColor == other.strokeColor && + this.strokeOpacity == other.strokeOpacity && + this.strokeWidth == other.strokeWidth && + this.zIndex == other.zIndex; }; diff --git a/src/ol/style/shapeliteral.js b/src/ol/style/shapeliteral.js index 953f9d89f9..602c58c28b 100644 --- a/src/ol/style/shapeliteral.js +++ b/src/ol/style/shapeliteral.js @@ -20,7 +20,8 @@ ol.style.ShapeType = { * fillOpacity: (number|undefined), * strokeColor: (string|undefined), * strokeOpacity: (number|undefined), - * strokeWidth: (number|undefined)}} + * strokeWidth: (number|undefined), + * zIndex: number}} */ ol.style.ShapeLiteralOptions; @@ -84,6 +85,11 @@ ol.style.ShapeLiteral = function(options) { 'Either fillColor and fillOpacity or ' + 'strokeColor and strokeOpacity and strokeWidth must be set'); + goog.asserts.assertNumber( + options.zIndex, 'zIndex must be a number'); + /** @type {number} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.ShapeLiteral, ol.style.PointLiteral); @@ -91,12 +97,13 @@ goog.inherits(ol.style.ShapeLiteral, ol.style.PointLiteral); /** * @inheritDoc */ -ol.style.ShapeLiteral.prototype.equals = function(shapeLiteral) { - return this.type == shapeLiteral.type && - this.size == shapeLiteral.size && - this.fillColor == shapeLiteral.fillColor && - this.fillOpacity == shapeLiteral.fillOpacity && - this.strokeColor == shapeLiteral.strokeColor && - this.strokeOpacity == shapeLiteral.strokeOpacity && - this.strokeWidth == shapeLiteral.strokeWidth; +ol.style.ShapeLiteral.prototype.equals = function(other) { + return this.type == other.type && + this.size == other.size && + this.fillColor == other.fillColor && + this.fillOpacity == other.fillOpacity && + this.strokeColor == other.strokeColor && + this.strokeOpacity == other.strokeOpacity && + this.strokeWidth == other.strokeWidth && + this.zIndex == other.zIndex; }; diff --git a/src/ol/style/shapesymbolizer.js b/src/ol/style/shapesymbolizer.js index 2e7b00fd1c..6c4ffde4f8 100644 --- a/src/ol/style/shapesymbolizer.js +++ b/src/ol/style/shapesymbolizer.js @@ -53,6 +53,15 @@ ol.style.Shape = function(options) { goog.asserts.assert(this.fill_ || this.stroke_, 'Stroke or fill must be provided'); + /** + * @type {ol.expr.Expression} + * @private + */ + this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ? + new ol.expr.Literal(ol.style.ShapeDefaults.zIndex) : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; @@ -100,6 +109,9 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) { goog.asserts.assert(!isNaN(strokeWidth), 'strokeWidth must be a number'); } + var zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature)); + goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number'); + literal = new ol.style.ShapeLiteral({ type: this.type_, size: size, @@ -107,7 +119,8 @@ ol.style.Shape.prototype.createLiteral = function(featureOrType) { fillOpacity: fillOpacity, strokeColor: strokeColor, strokeOpacity: strokeOpacity, - strokeWidth: strokeWidth + strokeWidth: strokeWidth, + zIndex: zIndex }); } @@ -151,6 +164,15 @@ ol.style.Shape.prototype.getType = function() { }; +/** + * Get the shape zIndex. + * @return {ol.expr.Expression} Shape zIndex. + */ +ol.style.Shape.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * Set the fill. * @param {ol.style.Fill} fill Shape fill. @@ -195,10 +217,22 @@ ol.style.Shape.prototype.setType = function(type) { /** - * @typedef {{type: (ol.style.ShapeType), - * size: (number)}} + * Set the shape zIndex. + * @param {ol.expr.Expression} zIndex Shape zIndex. + */ +ol.style.Shape.prototype.setZIndex = function(zIndex) { + goog.asserts.assertInstanceof(zIndex, ol.expr.Expression); + this.zIndex_ = zIndex; +}; + + +/** + * @typedef {{type: ol.style.ShapeType, + * size: number, + * zIndex: number}} */ ol.style.ShapeDefaults = { type: ol.style.ShapeType.CIRCLE, - size: 5 + size: 5, + zIndex: 0 }; diff --git a/src/ol/style/strokesymbolizer.js b/src/ol/style/strokesymbolizer.js index 339bae811b..1c3c5605b1 100644 --- a/src/ol/style/strokesymbolizer.js +++ b/src/ol/style/strokesymbolizer.js @@ -49,6 +49,15 @@ ol.style.Stroke = function(opt_options) { (options.width instanceof ol.expr.Expression) ? options.width : new ol.expr.Literal(options.width); + /** + * @type {ol.expr.Expression} + * @private + */ + this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ? + new ol.expr.Literal(ol.style.StrokeDefaults.zIndex) : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; goog.inherits(ol.style.Stroke, ol.style.Symbolizer); @@ -79,20 +88,25 @@ ol.style.Stroke.prototype.createLiteral = function(featureOrType) { this.width_, feature)); goog.asserts.assert(!isNaN(width), 'width must be a number'); + var zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature)); + goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number'); + var literal = null; if (type === ol.geom.GeometryType.LINESTRING || type === ol.geom.GeometryType.MULTILINESTRING) { literal = new ol.style.LineLiteral({ color: color, opacity: opacity, - width: width + width: width, + zIndex: zIndex }); } else if (type === ol.geom.GeometryType.POLYGON || type === ol.geom.GeometryType.MULTIPOLYGON) { literal = new ol.style.PolygonLiteral({ strokeColor: color, strokeOpacity: opacity, - strokeWidth: width + strokeWidth: width, + zIndex: zIndex }); } @@ -127,6 +141,15 @@ ol.style.Stroke.prototype.getWidth = function() { }; +/** + * Get the stroke zIndex. + * @return {ol.expr.Expression} Stroke zIndex. + */ +ol.style.Stroke.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * Set the stroke color. * @param {ol.expr.Expression} color Stroke color. @@ -158,24 +181,24 @@ ol.style.Stroke.prototype.setWidth = function(width) { /** - * @typedef {{color: (string), - * opacity: (number), - * width: (number)}} + * Set the stroke zIndex. + * @param {ol.expr.Expression} zIndex Stroke zIndex. */ -ol.style.StrokeDefaults = { - color: '#696969', - opacity: 0.75, - width: 1.5 +ol.style.Stroke.prototype.setZIndex = function(zIndex) { + goog.asserts.assertInstanceof(zIndex, ol.expr.Expression); + this.zIndex_ = zIndex; }; /** - * @typedef {{color: (string), - * opacity: (number), - * width: (number)}} + * @typedef {{strokeColor: string, + * strokeOpacity: number, + * strokeWidth: number, + * zIndex: number}} */ -ol.style.StrokeDefaultsSelect = { +ol.style.StrokeDefaults = { color: '#696969', - opacity: 0.9, - width: 2.0 + opacity: 0.75, + width: 1.5, + zIndex: 0 }; diff --git a/src/ol/style/textliteral.js b/src/ol/style/textliteral.js index f61e06576b..ec3036bed3 100644 --- a/src/ol/style/textliteral.js +++ b/src/ol/style/textliteral.js @@ -9,7 +9,8 @@ goog.require('ol.style.Literal'); * fontFamily: string, * fontSize: number, * text: string, - * opacity: number}} + * opacity: number, + * zIndex: number}} */ ol.style.TextLiteralOptions; @@ -42,6 +43,10 @@ ol.style.TextLiteral = function(options) { /** @type {number} */ this.opacity = options.opacity; + goog.asserts.assertNumber(options.zIndex, 'zIndex must be a number'); + /** @type {number} */ + this.zIndex = options.zIndex; + }; goog.inherits(ol.style.TextLiteral, ol.style.Literal); @@ -49,9 +54,10 @@ goog.inherits(ol.style.TextLiteral, ol.style.Literal); /** * @inheritDoc */ -ol.style.TextLiteral.prototype.equals = function(textLiteral) { - return this.color == textLiteral.color && - this.fontFamily == textLiteral.fontFamily && - this.fontSize == textLiteral.fontSize && - this.opacity == textLiteral.opacity; +ol.style.TextLiteral.prototype.equals = function(other) { + return this.color == other.color && + this.fontFamily == other.fontFamily && + this.fontSize == other.fontSize && + this.opacity == other.opacity && + this.zIndex == other.zIndex; }; diff --git a/src/ol/style/textsymbolizer.js b/src/ol/style/textsymbolizer.js index 39230ed944..95e00864f0 100644 --- a/src/ol/style/textsymbolizer.js +++ b/src/ol/style/textsymbolizer.js @@ -60,6 +60,15 @@ ol.style.Text = function(options) { (options.opacity instanceof ol.expr.Expression) ? options.opacity : new ol.expr.Literal(options.opacity); + /** + * @type {ol.expr.Expression} + * @private + */ + this.zIndex_ = !goog.isDefAndNotNull(options.zIndex) ? + new ol.expr.Literal(ol.style.TextDefaults.zIndex) : + (options.zIndex instanceof ol.expr.Expression) ? + options.zIndex : new ol.expr.Literal(options.zIndex); + }; goog.inherits(ol.style.Text, ol.style.Symbolizer); @@ -93,12 +102,16 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) { var opacity = Number(ol.expr.evaluateFeature(this.opacity_, feature)); goog.asserts.assert(!isNaN(opacity), 'opacity must be a number'); + var zIndex = Number(ol.expr.evaluateFeature(this.zIndex_, feature)); + goog.asserts.assert(!isNaN(zIndex), 'zIndex must be a number'); + return new ol.style.TextLiteral({ color: color, fontFamily: fontFamily, fontSize: fontSize, text: text, - opacity: opacity + opacity: opacity, + zIndex: zIndex }); }; @@ -148,6 +161,15 @@ ol.style.Text.prototype.getText = function() { }; +/** + * Get the zIndex. + * @return {ol.expr.Expression} Text. + */ +ol.style.Text.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * Set the font color. * @param {ol.expr.Expression} color Font color. @@ -198,15 +220,27 @@ ol.style.Text.prototype.setText = function(text) { }; +/** + * Set the zIndex. + * @param {ol.expr.Expression} zIndex Text. + */ +ol.style.Text.prototype.setZIndex = function(zIndex) { + goog.asserts.assertInstanceof(zIndex, ol.expr.Expression); + this.zIndex_ = zIndex; +}; + + /** * @typedef {{color: string, * fontFamily: string, * fontSize: number, - * opacity: number}} + * opacity: number, + * zIndex: number}} */ ol.style.TextDefaults = { color: '#000', fontFamily: 'sans-serif', fontSize: 10, - opacity: 1 + opacity: 1, + zIndex: 0 }; diff --git a/test/spec/ol/style/fillsymbolizer.test.js b/test/spec/ol/style/fillsymbolizer.test.js index b83d2064ca..d3b58223c7 100644 --- a/test/spec/ol/style/fillsymbolizer.test.js +++ b/test/spec/ol/style/fillsymbolizer.test.js @@ -19,6 +19,15 @@ describe('ol.style.Fill', function() { expect(symbolizer).to.be.a(ol.style.Fill); }); + it('accepts zIndex', function() { + var symbolizer = new ol.style.Fill({ + opacity: ol.expr.parse('value / 100'), + color: ol.expr.parse('fillAttr'), + zIndex: 3 + }); + expect(symbolizer).to.be.a(ol.style.Fill); + }); + }); describe('#createLiteral()', function() { @@ -40,6 +49,7 @@ describe('ol.style.Fill', function() { expect(literal).to.be.a(ol.style.PolygonLiteral); expect(literal.fillOpacity).to.be(42 / 100); expect(literal.fillColor).to.be('#ff0000'); + expect(literal.zIndex).to.be(0); }); it('applies default opacity', function() { @@ -81,6 +91,46 @@ describe('ol.style.Fill', function() { expect(literal.fillOpacity).to.be(0.55); }); + it('handles zIndex', function() { + var symbolizer = new ol.style.Fill({ + opacity: 0.8, + zIndex: 2 + }); + + var literal = symbolizer.createLiteral(ol.geom.GeometryType.POLYGON); + expect(literal).to.be.a(ol.style.PolygonLiteral); + expect(literal.fillColor).to.be('#ffffff'); + expect(literal.fillOpacity).to.be(0.8); + expect(literal.zIndex).to.be(2); + }); + + it('applies default zIndex', function() { + var symbolizer = new ol.style.Fill({ + opacity: 0.8 + }); + + var literal = symbolizer.createLiteral(ol.geom.GeometryType.POLYGON); + expect(literal).to.be.a(ol.style.PolygonLiteral); + expect(literal.zIndex).to.be(0); + }); + + it('casts zIndex to number', function() { + var symbolizer = new ol.style.Fill({ + zIndex: ol.expr.parse('zIndex'), + color: '#ff00ff' + }); + + var feature = new ol.Feature({ + zIndex: '11', + geometry: new ol.geom.Polygon( + [[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]]) + }); + + var literal = symbolizer.createLiteral(feature); + expect(literal).to.be.a(ol.style.PolygonLiteral); + expect(literal.zIndex).to.be(11); + }); + }); describe('#getColor()', function() { @@ -112,6 +162,21 @@ describe('ol.style.Fill', function() { }); + describe('#getZIndex()', function() { + + it('returns the zIndex', function() { + var symbolizer = new ol.style.Fill({ + color: '#ffffff', + zIndex: 11 + }); + + var zIndex = symbolizer.getZIndex(); + expect(zIndex).to.be.a(ol.expr.Literal); + expect(zIndex.getValue()).to.be(11); + }); + + }); + describe('#setColor()', function() { it('sets the fill color', function() { diff --git a/test/spec/ol/style/iconliteral.test.js b/test/spec/ol/style/iconliteral.test.js index 8b7c4f9fef..4f5aed80f1 100644 --- a/test/spec/ol/style/iconliteral.test.js +++ b/test/spec/ol/style/iconliteral.test.js @@ -10,56 +10,72 @@ describe('ol.style.IconLiteral', function() { width: 20, opacity: 1, rotation: 0.1, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); var equalLiteral = new ol.style.IconLiteral({ height: 10, width: 20, opacity: 1, rotation: 0.1, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); - var differentLiteral1 = new ol.style.IconLiteral({ + var differentHeight = new ol.style.IconLiteral({ height: 11, width: 20, opacity: 1, rotation: 0.1, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); - var differentLiteral2 = new ol.style.IconLiteral({ + var differentWidth = new ol.style.IconLiteral({ height: 10, width: 2, opacity: 1, rotation: 0.1, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); - var differentLiteral3 = new ol.style.IconLiteral({ + var differentOpacity = new ol.style.IconLiteral({ height: 10, width: 20, opacity: 0.5, rotation: 0.1, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); - var differentLiteral4 = new ol.style.IconLiteral({ + var differentRotation = new ol.style.IconLiteral({ height: 10, width: 20, opacity: 1, rotation: 0.2, - url: 'http://example.com/1.png' + url: 'http://example.com/1.png', + zIndex: 0 }); - var differentLiteral5 = new ol.style.IconLiteral({ + var differentUrl = new ol.style.IconLiteral({ height: 10, width: 20, opacity: 1, rotation: 0.1, - url: 'http://example.com/2.png' + url: 'http://example.com/2.png', + zIndex: 0 + }); + 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(differentHeight)).to.be(false); + expect(literal.equals(differentWidth)).to.be(false); + expect(literal.equals(differentOpacity)).to.be(false); + expect(literal.equals(differentRotation)).to.be(false); + expect(literal.equals(differentUrl)).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..0f0a736f7d 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(0); }); it('can be called without a feature', function() { @@ -223,6 +236,49 @@ 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); + }); + + it('applies default zIndex if none', function() { + var symbolizer = new ol.style.Icon({ + height: 10, + width: 20, + url: 'http://example.com/1.png' + }); + + var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT); + expect(literal).to.be.a(ol.style.IconLiteral); + expect(literal.zIndex).to.be(0); + }); + + it('casts zIndex to number', function() { + var symbolizer = new ol.style.Icon({ + zIndex: ol.expr.parse('zIndex'), + width: 10, + url: 'http://example.com/1.png' + }); + + var feature = new ol.Feature({ + zIndex: '42', + geometry: new ol.geom.Point([1, 2]) + }); + + var literal = symbolizer.createLiteral(feature); + expect(literal).to.be.a(ol.style.IconLiteral); + expect(literal.zIndex).to.be(42); + }); + }); describe('#getHeight()', function() { diff --git a/test/spec/ol/style/lineliteral.test.js b/test/spec/ol/style/lineliteral.test.js index 94be24dc43..323c5e17af 100644 --- a/test/spec/ol/style/lineliteral.test.js +++ b/test/spec/ol/style/lineliteral.test.js @@ -8,32 +8,44 @@ describe('ol.style.LineLiteral', function() { var literal = new ol.style.LineLiteral({ width: 3, color: '#BADA55', - opacity: 1 + opacity: 1, + zIndex: 0 }); var equalLiteral = new ol.style.LineLiteral({ color: '#BADA55', width: 3, - opacity: 1 + opacity: 1, + zIndex: 0 }); var differentColor = new ol.style.LineLiteral({ width: 3, color: '#ff0000', - opacity: 1 + opacity: 1, + zIndex: 0 }); var differentWidth = new ol.style.LineLiteral({ width: 3.5, color: '#BADA55', - opacity: 1 + opacity: 1, + zIndex: 0 }); var differentOpacity = new ol.style.LineLiteral({ width: 3, color: '#BADA55', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 + }); + var differentZIndex = new ol.style.LineLiteral({ + width: 3, + color: '#BADA55', + opacity: 1, + zIndex: 3 }); expect(literal.equals(equalLiteral)).to.be(true); expect(literal.equals(differentColor)).to.be(false); expect(literal.equals(differentWidth)).to.be(false); expect(literal.equals(differentOpacity)).to.be(false); + expect(literal.equals(differentZIndex)).to.be(false); }); }); diff --git a/test/spec/ol/style/polygonliteral.test.js b/test/spec/ol/style/polygonliteral.test.js index 78805610ac..642af45f48 100644 --- a/test/spec/ol/style/polygonliteral.test.js +++ b/test/spec/ol/style/polygonliteral.test.js @@ -10,49 +10,64 @@ describe('ol.style.PolygonLiteral', function() { strokeColor: '#013', strokeOpacity: 0.4, fillColor: '#BADA55', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var equalLiteral = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#013', strokeOpacity: 0.4, fillColor: '#BADA55', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var differentStrokeWidth = new ol.style.PolygonLiteral({ strokeWidth: 5, strokeColor: '#013', strokeOpacity: 0.4, fillColor: '#BADA55', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var differentStrokeColor = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#ffff00', strokeOpacity: 0.4, fillColor: '#BADA55', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var differentStrokeOpacity = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#013', strokeOpacity: 0.41, fillColor: '#BADA55', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var differentFillColor = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#013', strokeOpacity: 0.4, fillColor: '#00ffff', - fillOpacity: 0.3 + fillOpacity: 0.3, + zIndex: 0 }); var differentFillOpacity = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#013', strokeOpacity: 0.4, fillColor: '#BADA55', - fillOpacity: 0.31 + fillOpacity: 0.31, + zIndex: 0 + }); + var differentZIndex = new ol.style.PolygonLiteral({ + strokeWidth: 3, + strokeColor: '#013', + strokeOpacity: 0.4, + fillColor: '#BADA55', + fillOpacity: 0.3, + zIndex: 2 }); expect(literal.equals(equalLiteral)).to.be(true); expect(literal.equals(differentStrokeWidth)).to.be(false); @@ -60,6 +75,7 @@ describe('ol.style.PolygonLiteral', function() { expect(literal.equals(differentStrokeOpacity)).to.be(false); expect(literal.equals(differentFillColor)).to.be(false); expect(literal.equals(differentFillOpacity)).to.be(false); + expect(literal.equals(differentZIndex)).to.be(false); }); }); diff --git a/test/spec/ol/style/shapeliteral.test.js b/test/spec/ol/style/shapeliteral.test.js index b1e4804280..f5af82b807 100644 --- a/test/spec/ol/style/shapeliteral.test.js +++ b/test/spec/ol/style/shapeliteral.test.js @@ -12,7 +12,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var equalLiteral = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -21,7 +22,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentSize = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -30,7 +32,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentFillColor = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -39,7 +42,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentFillOpacity = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -48,7 +52,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.8, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentStrokeColor = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -57,7 +62,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#ffffff', strokeOpacity: 0.8, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentStrokeOpacity = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -66,7 +72,8 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.7, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }); var differentStrokeWidth = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, @@ -75,7 +82,18 @@ describe('ol.style.ShapeLiteral', function() { fillOpacity: 0.9, strokeColor: '#013', strokeOpacity: 0.8, - strokeWidth: 4 + strokeWidth: 4, + zIndex: 0 + }); + var differentZIndex = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 4, + fillColor: '#BADA55', + fillOpacity: 0.9, + strokeColor: '#013', + strokeOpacity: 0.8, + strokeWidth: 3, + zIndex: -1 }); expect(literal.equals(equalLiteral)).to.be(true); expect(literal.equals(differentSize)).to.be(false); @@ -84,6 +102,7 @@ describe('ol.style.ShapeLiteral', function() { expect(literal.equals(differentStrokeColor)).to.be(false); expect(literal.equals(differentStrokeOpacity)).to.be(false); expect(literal.equals(differentStrokeWidth)).to.be(false); + expect(literal.equals(differentZIndex)).to.be(false); }); }); diff --git a/test/spec/ol/style/shapesymbolizer.test.js b/test/spec/ol/style/shapesymbolizer.test.js index b20cfb7303..d6c1b56450 100644 --- a/test/spec/ol/style/shapesymbolizer.test.js +++ b/test/spec/ol/style/shapesymbolizer.test.js @@ -24,6 +24,17 @@ describe('ol.style.Shape', function() { expect(symbolizer).to.be.a(ol.style.Shape); }); + it('accepts zIndex', function() { + var symbolizer = new ol.style.Shape({ + size: 4, + fill: new ol.style.Fill({ + color: '#ff0000' + }), + zIndex: -1 + }); + expect(symbolizer).to.be.a(ol.style.Shape); + }); + }); describe('#createLiteral()', function() { @@ -47,6 +58,7 @@ describe('ol.style.Shape', function() { expect(literal).to.be.a(ol.style.ShapeLiteral); expect(literal.size).to.be(42); expect(literal.fillOpacity).to.be(0.4); + expect(literal.zIndex).to.be(0); }); it('can be called without a feature', function() { @@ -160,6 +172,37 @@ describe('ol.style.Shape', function() { expect(literal.fillOpacity).to.be(0.42); }); + it('handles zIndex', function() { + var symbolizer = new ol.style.Shape({ + stroke: new ol.style.Stroke({ + color: '#ff0000' + }), + zIndex: -2 + }); + + var literal = symbolizer.createLiteral(ol.geom.GeometryType.POINT); + expect(literal).to.be.a(ol.style.ShapeLiteral); + expect(literal.zIndex).to.be(-2); + }); + + it('casts zIndex to number', function() { + var symbolizer = new ol.style.Shape({ + fill: new ol.style.Fill({ + color: '#BADA55' + }), + zIndex: ol.expr.parse('zIndex') + }); + + var feature = new ol.Feature({ + zIndex: '42', + geometry: new ol.geom.Point([1, 2]) + }); + + var literal = symbolizer.createLiteral(feature); + expect(literal).to.be.a(ol.style.ShapeLiteral); + expect(literal.zIndex).to.be(42); + }); + }); describe('#getFill()', function() { diff --git a/test/spec/ol/style/strokesymbolizer.test.js b/test/spec/ol/style/strokesymbolizer.test.js index 1ea72c8e93..bd4890fe8c 100644 --- a/test/spec/ol/style/strokesymbolizer.test.js +++ b/test/spec/ol/style/strokesymbolizer.test.js @@ -20,6 +20,15 @@ describe('ol.style.Stroke', function() { expect(symbolizer).to.be.a(ol.style.Stroke); }); + it('accepts zIndex', function() { + var symbolizer = new ol.style.Stroke({ + opacity: ol.expr.parse('value / 100'), + width: ol.expr.parse('widthAttr'), + zIndex: 5 + }); + expect(symbolizer).to.be.a(ol.style.Stroke); + }); + }); describe('#createLiteral()', function() { @@ -40,6 +49,7 @@ describe('ol.style.Stroke', function() { expect(literal).to.be.a(ol.style.LineLiteral); expect(literal.opacity).to.be(42 / 100); expect(literal.width).to.be(1.5); + expect(literal.zIndex).to.be(0); }); it('applies the default values', function() { @@ -50,6 +60,7 @@ describe('ol.style.Stroke', function() { expect(literal.color).to.be('#696969'); expect(literal.opacity).to.be(0.75); expect(literal.width).to.be(1.5); + expect(literal.zIndex).to.be(0); }); }); diff --git a/test/spec/ol/style/style.test.js b/test/spec/ol/style/style.test.js index 18fdb5e8c8..5bc1314f36 100644 --- a/test/spec/ol/style/style.test.js +++ b/test/spec/ol/style/style.test.js @@ -194,12 +194,14 @@ describe('ol.style.Style', function() { var literals = [ new ol.style.PolygonLiteral({ fillColor: '#ff0000', - fillOpacity: 0.5 + fillOpacity: 0.5, + zIndex: 0 }), new ol.style.PolygonLiteral({ strokeColor: '#00ff00', strokeOpacity: 0.6, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }) ]; @@ -221,12 +223,14 @@ describe('ol.style.Style', function() { fillOpacity: 0.5, strokeColor: '#00ff00', strokeOpacity: 0.6, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }), new ol.style.PolygonLiteral({ strokeColor: '#0000ff', strokeOpacity: 0.7, - strokeWidth: 1 + strokeWidth: 1, + zIndex: 0 }) ]; @@ -253,18 +257,21 @@ describe('ol.style.Style', function() { new ol.style.PolygonLiteral({ strokeColor: '#00ff00', strokeOpacity: 0.6, - strokeWidth: 3 + strokeWidth: 3, + zIndex: 0 }), new ol.style.PolygonLiteral({ fillColor: '#ff0000', - fillOpacity: 0.5 + fillOpacity: 0.5, + zIndex: 0 }), new ol.style.TextLiteral({ color: '#ffffff', fontFamily: 'Arial', fontSize: 11, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }) ]; diff --git a/test/spec/ol/style/textliteral.test.js b/test/spec/ol/style/textliteral.test.js index e06320e46d..b3b945675a 100644 --- a/test/spec/ol/style/textliteral.test.js +++ b/test/spec/ol/style/textliteral.test.js @@ -10,56 +10,72 @@ describe('ol.style.TextLiteral', function() { fontFamily: 'Arial', fontSize: 11, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }); var equalLiteral = new ol.style.TextLiteral({ color: '#ff0000', fontFamily: 'Arial', fontSize: 11, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }); - var differentLiteral1 = new ol.style.TextLiteral({ + var differentColor = new ol.style.TextLiteral({ color: '#0000ff', fontFamily: 'Arial', fontSize: 11, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }); - var differentLiteral2 = new ol.style.TextLiteral({ + var differentFontFamily = new ol.style.TextLiteral({ color: '#ff0000', fontFamily: 'Dingbats', fontSize: 11, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }); - var differentLiteral3 = new ol.style.TextLiteral({ + var differentFontSize = new ol.style.TextLiteral({ color: '#ff0000', fontFamily: 'Arial', fontSize: 12, text: 'Test', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 }); - var differentLiteral4 = new ol.style.TextLiteral({ + var differentOpacity = new ol.style.TextLiteral({ color: '#ff0000', fontFamily: 'Arial', fontSize: 11, text: 'Test', - opacity: 0.6 + opacity: 0.6, + zIndex: 0 }); var equalLiteral2 = new ol.style.TextLiteral({ color: '#ff0000', fontFamily: 'Arial', fontSize: 11, text: 'Text is not compared for equality', - opacity: 0.5 + opacity: 0.5, + zIndex: 0 + }); + var differentZIndex = new ol.style.TextLiteral({ + color: '#ff0000', + fontFamily: 'Arial', + fontSize: 11, + text: 'Test', + opacity: 0.5, + zIndex: 3 }); 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(differentColor)).to.be(false); + expect(literal.equals(differentFontFamily)).to.be(false); + expect(literal.equals(differentFontSize)).to.be(false); + expect(literal.equals(differentOpacity)).to.be(false); expect(literal.equals(equalLiteral2)).to.be(true); + expect(literal.equals(differentZIndex)).to.be(false); }); }); diff --git a/test/spec/ol/style/textsymbolizer.test.js b/test/spec/ol/style/textsymbolizer.test.js index 8319a85782..0be628317a 100644 --- a/test/spec/ol/style/textsymbolizer.test.js +++ b/test/spec/ol/style/textsymbolizer.test.js @@ -26,6 +26,18 @@ describe('ol.style.Text', function() { expect(symbolizer).to.be.a(ol.style.Text); }); + it('accepts zIndex', function() { + var symbolizer = new ol.style.Text({ + color: '#ff0000', + fontFamily: 'Arial', + fontSize: 11, + text: 'Test', + opacity: 0.6, + zIndex: 3 + }); + expect(symbolizer).to.be.a(ol.style.Text); + }); + }); describe('#createLiteral()', function() {