diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index ff4209d03a..12999a4770 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -44,9 +44,9 @@ var style = new ol.style.Style({rules: [ new ol.style.Rule({ symbolizers: [ new ol.style.Polygon({ - fillColor: '#ffff33', strokeColor: '#ffffff', - opacity: ol.expr.parse('getOpacity()') + fillColor: '#ffff33', + fillOpacity: ol.expr.parse('getOpacity()') }) ] }) diff --git a/examples/style-rules.js b/examples/style-rules.js index 6e98f675ec..dfd822b6e4 100644 --- a/examples/style-rules.js +++ b/examples/style-rules.js @@ -21,7 +21,7 @@ var style = new ol.style.Style({rules: [ new ol.style.Line({ strokeColor: ol.expr.parse('color'), strokeWidth: 4, - opacity: 1 + strokeOpacity: 1 }) ] }), @@ -31,12 +31,12 @@ var style = new ol.style.Style({rules: [ new ol.style.Line({ strokeColor: '#013', strokeWidth: 4, - opacity: 1 + strokeOpacity: 1 }), new ol.style.Line({ strokeColor: ol.expr.parse('color'), strokeWidth: 2, - opacity: 1 + strokeOpacity: 1 }) ] }), diff --git a/examples/topojson.js b/examples/topojson.js index 59c1b0a7e9..d960151b43 100644 --- a/examples/topojson.js +++ b/examples/topojson.js @@ -26,10 +26,11 @@ var vector = new ol.layer.Vector({ new ol.style.Rule({ symbolizers: [ new ol.style.Polygon({ - strokeColor: '#FFF', fillColor: '#BADA55', - strokeWidth: 1.5, - opacity: 0.5 + fillOpacity: 0.5, + strokeColor: '#FFF', + strokeOpacity: 1, + strokeWidth: 1.5 }) ] }) diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 23b8f9e4ee..c799c64789 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -31,7 +31,10 @@ var vector = new ol.layer.Vector({ new ol.style.Rule({ symbolizers: [ new ol.style.Polygon({ - strokeColor: '#bada55' + strokeColor: '#319FD3', + strokeOpacity: 1, + fillColor: '#ffffff', + fillOpacity: 0.6 }) ] }), @@ -39,7 +42,7 @@ var vector = new ol.layer.Vector({ filter: 'resolution() < 5000', symbolizers: [ new ol.style.Text({ - color: '#bada55', + color: '#000000', text: ol.expr.parse('name'), fontFamily: 'Calibri,sans-serif', fontSize: 12 diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 497b911024..d2962adc37 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -580,9 +580,10 @@ * @typedef {Object} ol.style.LineOptions * @property {string|ol.expr.Expression|undefined} strokeColor Stroke * color as hex color code. + * @property {number|ol.expr.Expression|undefined} strokeOpacity Stroke + * opacity (0-1). * @property {number|ol.expr.Expression|undefined} strokeWidth Stroke * width in pixels. - * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1). */ /** @@ -608,11 +609,14 @@ * @property {number|ol.expr.Expression|undefined} size Size in pixels. * @property {string|ol.expr.Expression|undefined} fillColor Fill color as * hex color code. + * @property {number|ol.expr.Expression|undefined} fillOpacity Fill opacity + * (0-1). * @property {string|ol.expr.Expression|undefined} strokeColor Stroke * color as hex color code. + * @property {number|ol.expr.Expression|undefined} strokeOpacity Stroke opacity + * (0-1). * @property {number|ol.expr.Expression|undefined} strokeWidth Stroke * width in pixels. - * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1). */ /** diff --git a/src/ol/parser/kml.js b/src/ol/parser/kml.js index a1ed3996e4..7242762bea 100644 --- a/src/ol/parser/kml.js +++ b/src/ol/parser/kml.js @@ -342,7 +342,7 @@ ol.parser.KML = function(opt_options) { this.readChildNodes(node, symbolizer); if (symbolizer.color) { symbolizer.strokeColor = symbolizer.color.color; - symbolizer.opacity = symbolizer.color.opacity; + symbolizer.strokeOpacity = symbolizer.color.opacity; } if (symbolizer.width) { symbolizer.strokeWidth = parseFloat(symbolizer.width); @@ -353,30 +353,31 @@ ol.parser.KML = function(opt_options) { obj['symbolizers'].push(new ol.style.Line(symbolizer)); }, 'PolyStyle': function(node, obj) { - var symbolizer = {}; - this.readChildNodes(node, symbolizer); - if (symbolizer.color) { - symbolizer.fillColor = symbolizer.color.color; + var style = {}; // from KML + var symbolizer = {}; // for ol.style.Polygon + this.readChildNodes(node, style); + // check if poly has fill + if (!(style.fill === '0' || style.fill === 'false')) { + if (style.color) { + symbolizer.fillColor = style.color.color; + symbolizer.fillOpacity = style.color.opacity; + } else { + // KML defaults + symbolizer.fillColor = '#ffffff'; + symbolizer.fillOpacity = 1; + } } - if (symbolizer.fill === '0' || symbolizer.fill === 'false') { - // TODO we need a better way in the symbolizer to disable fill - // now we are using opacity for this, but it's a workaround - // see also: https://github.com/openlayers/ol3/issues/475 - symbolizer.opacity = 0; - } else { - symbolizer.opacity = symbolizer.color.opacity; + // check if poly has stroke + if (!(style.outline === '0' || style.outline === 'false')) { + if (style.color) { + symbolizer.strokeColor = style.color.color; + symbolizer.strokeOpacity = style.color.opacity; + } else { + // KML defaults + symbolizer.strokeColor = '#ffffff'; + symbolizer.strokeOpacity = 1; + } } - if (symbolizer.width) { - symbolizer.strokeWidth = parseFloat(symbolizer.width); - } - // outline disabled - if (symbolizer.outline === '0' || symbolizer.outline === 'false') { - symbolizer.strokeWidth = 0; - } - delete symbolizer.outline; - delete symbolizer.width; - delete symbolizer.color; - delete symbolizer.fill; obj['ids'].push(node.getAttribute('id')); obj['symbolizers'].push(new ol.style.Polygon(symbolizer)); }, @@ -623,6 +624,11 @@ ol.parser.KML = function(opt_options) { } }, 'PolyStyle': function(symbolizerObj) { + /** + * There is not a 1:1 mapping between KML PolyStyle and + * ol.style.Polygon. In KML, if a PolyStyle has 1 + * then the "current" LineStyle is used to stroke the polygon. + */ var node = this.createElementNS('PolyStyle'); if (symbolizerObj.id) { this.setAttributeNS(node, null, 'id', symbolizerObj.id); @@ -630,16 +636,27 @@ ol.parser.KML = function(opt_options) { var symbolizer = symbolizerObj.symbolizer; var literal = symbolizer instanceof ol.style.PolygonLiteral ? symbolizer : symbolizer.createLiteral(); - if (literal.opacity !== 0) { + var color, opacity; + if (literal.fillOpacity !== 0) { this.writeNode('fill', '1', null, node); + color = literal.fillColor; + opacity = literal.fillOpacity; } else { this.writeNode('fill', '0', null, node); } - this.writeNode('color', { - color: literal.fillColor.substring(1), - opacity: literal.opacity - }, null, node); - this.writeNode('width', literal.strokeWidth, null, node); + if (literal.strokeOpacity) { + this.writeNode('outline', '1', null, node); + color = color || literal.strokeColor; + opacity = opacity || literal.strokeOpacity; + } else { + this.writeNode('outline', '0', null, node); + } + if (color && opacity) { + this.writeNode('color', { + color: color.substring(1), + opacity: opacity + }, null, node); + } return node; }, 'fill': function(fill) { @@ -647,6 +664,11 @@ ol.parser.KML = function(opt_options) { node.appendChild(this.createTextNode(fill)); return node; }, + 'outline': function(outline) { + var node = this.createElementNS('outline'); + node.appendChild(this.createTextNode(outline)); + return node; + }, 'LineStyle': function(symbolizerObj) { var node = this.createElementNS('LineStyle'); if (symbolizerObj.id) { @@ -657,7 +679,7 @@ ol.parser.KML = function(opt_options) { symbolizer : symbolizer.createLiteral(); this.writeNode('color', { color: literal.strokeColor.substring(1), - opacity: literal.opacity + opacity: literal.strokeOpacity }, null, node); this.writeNode('width', literal.strokeWidth, null, node); return node; diff --git a/src/ol/renderer/canvas/canvasvectorrenderer.js b/src/ol/renderer/canvas/canvasvectorrenderer.js index 9bf610e33a..c2608eee82 100644 --- a/src/ol/renderer/canvas/canvasvectorrenderer.js +++ b/src/ol/renderer/canvas/canvasvectorrenderer.js @@ -153,7 +153,7 @@ ol.renderer.canvas.VectorRenderer.prototype.renderLineStringFeatures_ = i, ii, feature, id, currentSize, geometry, components, j, jj, line, dim, k, kk, vec, strokeSize; - context.globalAlpha = symbolizer.opacity; + context.globalAlpha = symbolizer.strokeOpacity; context.strokeStyle = symbolizer.strokeColor; context.lineWidth = symbolizer.strokeWidth; context.lineCap = 'round'; // TODO: accept this as a symbolizer property @@ -306,11 +306,13 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPolygonFeatures_ = var context = this.context_, strokeColor = symbolizer.strokeColor, strokeWidth = symbolizer.strokeWidth, + strokeOpacity = symbolizer.strokeOpacity, fillColor = symbolizer.fillColor, + fillOpacity = symbolizer.fillOpacity, + globalAlpha, i, ii, geometry, components, j, jj, poly, rings, numRings, ring, dim, k, kk, vec; - context.globalAlpha = symbolizer.opacity; if (strokeColor) { context.strokeStyle = strokeColor; if (strokeWidth) { @@ -359,7 +361,17 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPolygonFeatures_ = } if (fillColor && strokeColor) { // scenario 3 - fill and stroke each time + if (fillOpacity !== globalAlpha) { + goog.asserts.assertNumber(fillOpacity); + context.globalAlpha = fillOpacity; + globalAlpha = fillOpacity; + } context.fill(); + if (strokeOpacity !== globalAlpha) { + goog.asserts.assertNumber(strokeOpacity); + context.globalAlpha = strokeOpacity; + globalAlpha = strokeOpacity; + } context.stroke(); if (i < ii - 1 || j < jj - 1) { context.beginPath(); @@ -371,9 +383,19 @@ ol.renderer.canvas.VectorRenderer.prototype.renderPolygonFeatures_ = if (!(fillColor && strokeColor)) { if (fillColor) { // scenario 2 - fill all at once + if (fillOpacity !== globalAlpha) { + goog.asserts.assertNumber(fillOpacity); + context.globalAlpha = fillOpacity; + globalAlpha = fillOpacity; + } context.fill(); } else { // scenario 1 - stroke all at once + if (strokeOpacity !== globalAlpha) { + goog.asserts.assertNumber(strokeOpacity); + context.globalAlpha = strokeOpacity; + globalAlpha = strokeOpacity; + } context.stroke(); } } @@ -400,8 +422,6 @@ ol.renderer.canvas.VectorRenderer.renderCircle_ = function(circle) { canvas.height = size; canvas.width = size; - context.globalAlpha = circle.opacity; - if (fillColor) { context.fillStyle = fillColor; } @@ -416,9 +436,13 @@ ol.renderer.canvas.VectorRenderer.renderCircle_ = function(circle) { context.arc(mid, mid, circle.size / 2, 0, twoPi, true); if (fillColor) { + goog.asserts.assertNumber(circle.fillOpacity); + context.globalAlpha = circle.fillOpacity; context.fill(); } if (strokeColor) { + goog.asserts.assertNumber(circle.strokeOpacity); + context.globalAlpha = circle.strokeOpacity; context.stroke(); } return canvas; diff --git a/src/ol/style/line.js b/src/ol/style/line.js index 2c2a963ccb..2031804bf6 100644 --- a/src/ol/style/line.js +++ b/src/ol/style/line.js @@ -11,8 +11,8 @@ goog.require('ol.style.SymbolizerLiteral'); /** * @typedef {{strokeColor: (string), - * strokeWidth: (number), - * opacity: (number)}} + * strokeOpacity: (number), + * strokeWidth: (number)}} */ ol.style.LineLiteralOptions; @@ -31,15 +31,16 @@ ol.style.LineLiteral = function(options) { /** @type {string} */ this.strokeColor = options.strokeColor; + goog.asserts.assertNumber( + options.strokeOpacity, 'strokeOpacity must be a number'); + /** @type {number} */ + this.strokeOpacity = options.strokeOpacity; + goog.asserts.assertNumber( options.strokeWidth, 'strokeWidth must be a number'); /** @type {number} */ this.strokeWidth = options.strokeWidth; - goog.asserts.assertNumber(options.opacity, 'opacity must be a number'); - /** @type {number} */ - this.opacity = options.opacity; - }; goog.inherits(ol.style.LineLiteral, ol.style.SymbolizerLiteral); @@ -49,8 +50,8 @@ goog.inherits(ol.style.LineLiteral, ol.style.SymbolizerLiteral); */ ol.style.LineLiteral.prototype.equals = function(lineLiteral) { return this.strokeColor == lineLiteral.strokeColor && - this.strokeWidth == lineLiteral.strokeWidth && - this.opacity == lineLiteral.opacity; + this.strokeOpacity == lineLiteral.strokeOpacity && + this.strokeWidth == lineLiteral.strokeWidth; }; @@ -76,19 +77,19 @@ ol.style.Line = function(options) { * @type {ol.expr.Expression} * @private */ - this.strokeWidth_ = !goog.isDef(options.strokeWidth) ? - new ol.expr.Literal(ol.style.LineDefaults.strokeWidth) : - (options.strokeWidth instanceof ol.expr.Expression) ? - options.strokeWidth : new ol.expr.Literal(options.strokeWidth); + this.strokeOpacity_ = !goog.isDef(options.strokeOpacity) ? + new ol.expr.Literal(ol.style.LineDefaults.strokeOpacity) : + (options.strokeOpacity instanceof ol.expr.Expression) ? + options.strokeOpacity : new ol.expr.Literal(options.strokeOpacity); /** * @type {ol.expr.Expression} * @private */ - this.opacity_ = !goog.isDef(options.opacity) ? - new ol.expr.Literal(ol.style.LineDefaults.opacity) : - (options.opacity instanceof ol.expr.Expression) ? - options.opacity : new ol.expr.Literal(options.opacity); + this.strokeWidth_ = !goog.isDef(options.strokeWidth) ? + new ol.expr.Literal(ol.style.LineDefaults.strokeWidth) : + (options.strokeWidth instanceof ol.expr.Expression) ? + options.strokeWidth : new ol.expr.Literal(options.strokeWidth); }; goog.inherits(ol.style.Line, ol.style.Symbolizer); @@ -104,17 +105,19 @@ ol.style.Line.prototype.createLiteral = function(opt_feature) { this.strokeColor_, opt_feature); goog.asserts.assertString(strokeColor, 'strokeColor must be a string'); + var strokeOpacity = ol.expr.evaluateFeature( + this.strokeOpacity_, opt_feature); + goog.asserts.assertNumber(strokeOpacity, 'strokeOpacity must be a number'); + var strokeWidth = ol.expr.evaluateFeature( this.strokeWidth_, opt_feature); goog.asserts.assertNumber(strokeWidth, 'strokeWidth must be a number'); - var opacity = ol.expr.evaluateFeature(this.opacity_, opt_feature); - goog.asserts.assertNumber(opacity, 'opacity must be a number'); return new ol.style.LineLiteral({ strokeColor: strokeColor, - strokeWidth: strokeWidth, - opacity: opacity + strokeOpacity: strokeOpacity, + strokeWidth: strokeWidth }); }; @@ -128,6 +131,15 @@ ol.style.Line.prototype.getStrokeColor = function() { }; +/** + * Get the stroke opacity. + * @return {ol.expr.Expression} Stroke opacity. + */ +ol.style.Line.prototype.getStrokeOpacity = function() { + return this.strokeOpacity_; +}; + + /** * Get the stroke width. * @return {ol.expr.Expression} Stroke width. @@ -137,15 +149,6 @@ ol.style.Line.prototype.getStrokeWidth = function() { }; -/** - * Get the stroke opacity. - * @return {ol.expr.Expression} Stroke opacity. - */ -ol.style.Line.prototype.getOpacity = function() { - return this.opacity_; -}; - - /** * Set the stroke color. * @param {ol.expr.Expression} strokeColor Stroke color. @@ -156,6 +159,16 @@ ol.style.Line.prototype.setStrokeColor = function(strokeColor) { }; +/** + * Set the stroke opacity. + * @param {ol.expr.Expression} strokeOpacity Stroke opacity. + */ +ol.style.Line.prototype.setStrokeOpacity = function(strokeOpacity) { + goog.asserts.assertInstanceof(strokeOpacity, ol.expr.Expression); + this.strokeOpacity_ = strokeOpacity; +}; + + /** * Set the stroke width. * @param {ol.expr.Expression} strokeWidth Stroke width. @@ -166,21 +179,11 @@ ol.style.Line.prototype.setStrokeWidth = function(strokeWidth) { }; -/** - * Set the stroke opacity. - * @param {ol.expr.Expression} opacity Stroke opacity. - */ -ol.style.Line.prototype.setOpacity = function(opacity) { - goog.asserts.assertInstanceof(opacity, ol.expr.Expression); - this.opacity_ = opacity; -}; - - /** * @type {ol.style.LineLiteral} */ ol.style.LineDefaults = new ol.style.LineLiteral({ strokeColor: '#696969', - strokeWidth: 1.5, - opacity: 0.75 + strokeOpacity: 0.75, + strokeWidth: 1.5 }); diff --git a/src/ol/style/polygon.js b/src/ol/style/polygon.js index bcb5ac724f..258fa8775a 100644 --- a/src/ol/style/polygon.js +++ b/src/ol/style/polygon.js @@ -11,9 +11,10 @@ goog.require('ol.style.SymbolizerLiteral'); /** * @typedef {{fillColor: (string|undefined), + * fillOpacity: (number|undefined), * strokeColor: (string|undefined), - * strokeWidth: (number|undefined), - * opacity: (number)}} + * strokeOpacity: (number|undefined), + * strokeWidth: (number|undefined)}} */ ol.style.PolygonLiteralOptions; @@ -33,6 +34,13 @@ ol.style.PolygonLiteral = function(options) { goog.asserts.assertString(options.fillColor, 'fillColor must be a string'); } + /** @type {number|undefined} */ + this.fillOpacity = options.fillOpacity; + if (goog.isDef(options.fillOpacity)) { + goog.asserts.assertNumber( + options.fillOpacity, 'fillOpacity must be a number'); + } + /** @type {string|undefined} */ this.strokeColor = options.strokeColor; if (goog.isDef(this.strokeColor)) { @@ -40,6 +48,13 @@ ol.style.PolygonLiteral = function(options) { this.strokeColor, 'strokeColor must be a string'); } + /** @type {number|undefined} */ + this.strokeOpacity = options.strokeOpacity; + if (goog.isDef(this.strokeOpacity)) { + goog.asserts.assertNumber( + this.strokeOpacity, 'strokeOpacity must be a number'); + } + /** @type {number|undefined} */ this.strokeWidth = options.strokeWidth; if (goog.isDef(this.strokeWidth)) { @@ -47,14 +62,14 @@ ol.style.PolygonLiteral = function(options) { this.strokeWidth, 'strokeWidth must be a number'); } - goog.asserts.assert( - goog.isDef(this.fillColor) || - (goog.isDef(this.strokeColor) && goog.isDef(this.strokeWidth)), - 'Either fillColor or strokeColor and strokeWidth must be set'); - - goog.asserts.assertNumber(options.opacity, 'opacity must be a number'); - /** @type {number} */ - this.opacity = options.opacity; + // fill and/or stroke properties must be defined + var fillDef = goog.isDef(this.fillColor) && goog.isDef(this.fillOpacity); + var strokeDef = goog.isDef(this.strokeColor) && + goog.isDef(this.strokeOpacity) && + goog.isDef(this.strokeWidth); + goog.asserts.assert(fillDef || strokeDef, + 'Either fillColor and fillOpacity or ' + + 'strokeColor and strokeOpacity and strokeWidth must be set'); }; goog.inherits(ol.style.PolygonLiteral, ol.style.SymbolizerLiteral); @@ -65,9 +80,10 @@ goog.inherits(ol.style.PolygonLiteral, ol.style.SymbolizerLiteral); */ ol.style.PolygonLiteral.prototype.equals = function(polygonLiteral) { return this.fillColor == polygonLiteral.fillColor && + this.fillOpacity == polygonLiteral.fillOpacity && this.strokeColor == polygonLiteral.strokeColor && - this.strokeWidth == polygonLiteral.strokeWidth && - this.opacity == polygonLiteral.opacity; + this.strokeOpacity == polygonLiteral.strokeOpacity && + this.strokeWidth == polygonLiteral.strokeWidth; }; @@ -80,20 +96,54 @@ ol.style.PolygonLiteral.prototype.equals = function(polygonLiteral) { ol.style.Polygon = function(options) { goog.base(this); + + // fill handling - if any fill property is supplied, use all defaults + var fillColor = null, + fillOpacity = null; + + if (goog.isDefAndNotNull(options.fillColor) || + goog.isDefAndNotNull(options.fillOpacity)) { + + if (goog.isDefAndNotNull(options.fillColor)) { + fillColor = (options.fillColor instanceof ol.expr.Expression) ? + options.fillColor : + new ol.expr.Literal(options.fillColor); + } else { + fillColor = new ol.expr.Literal( + /** @type {string} */ (ol.style.PolygonDefaults.fillColor)); + } + + if (goog.isDefAndNotNull(options.fillOpacity)) { + fillOpacity = (options.fillOpacity instanceof ol.expr.Expression) ? + options.fillOpacity : + new ol.expr.Literal(options.fillOpacity); + } else { + fillOpacity = new ol.expr.Literal( + /** @type {number} */ (ol.style.PolygonDefaults.fillOpacity)); + } + + } + /** * @type {ol.expr.Expression} * @private */ - this.fillColor_ = !goog.isDefAndNotNull(options.fillColor) ? - null : - (options.fillColor instanceof ol.expr.Expression) ? - options.fillColor : new ol.expr.Literal(options.fillColor); + this.fillColor_ = fillColor; + + /** + * @type {ol.expr.Expression} + * @private + */ + this.fillOpacity_ = fillOpacity; + // stroke handling - if any stroke property is supplied, use defaults var strokeColor = null, + strokeOpacity = null, strokeWidth = null; if (goog.isDefAndNotNull(options.strokeColor) || + goog.isDefAndNotNull(options.strokeOpacity) || goog.isDefAndNotNull(options.strokeWidth)) { if (goog.isDefAndNotNull(options.strokeColor)) { @@ -105,6 +155,15 @@ ol.style.Polygon = function(options) { /** @type {string} */ (ol.style.PolygonDefaults.strokeColor)); } + if (goog.isDefAndNotNull(options.strokeOpacity)) { + strokeOpacity = (options.strokeOpacity instanceof ol.expr.Expression) ? + options.strokeOpacity : + new ol.expr.Literal(options.strokeOpacity); + } else { + strokeOpacity = new ol.expr.Literal( + /** @type {number} */ (ol.style.PolygonDefaults.strokeOpacity)); + } + if (goog.isDefAndNotNull(options.strokeWidth)) { strokeWidth = (options.strokeWidth instanceof ol.expr.Expression) ? options.strokeWidth : @@ -113,6 +172,7 @@ ol.style.Polygon = function(options) { strokeWidth = new ol.expr.Literal( /** @type {number} */ (ol.style.PolygonDefaults.strokeWidth)); } + } /** @@ -125,21 +185,21 @@ ol.style.Polygon = function(options) { * @type {ol.expr.Expression} * @private */ - this.strokeWidth_ = strokeWidth; - - // one of stroke or fill can be null, both null is user error - goog.asserts.assert(!goog.isNull(this.fillColor_) || - !(goog.isNull(this.strokeColor_) && goog.isNull(this.strokeWidth_)), - 'Stroke or fill properties must be provided'); + this.strokeOpacity_ = strokeOpacity; /** * @type {ol.expr.Expression} * @private */ - this.opacity_ = !goog.isDef(options.opacity) ? - new ol.expr.Literal(ol.style.PolygonDefaults.opacity) : - (options.opacity instanceof ol.expr.Expression) ? - options.opacity : new ol.expr.Literal(options.opacity); + this.strokeWidth_ = strokeWidth; + + // one of stroke or fill can be null, both null is user error + var fill = !goog.isNull(this.fillColor_) && !goog.isNull(this.fillOpacity_); + var stroke = !goog.isNull(this.strokeColor_) && + !goog.isNull(this.strokeOpacity_) && + !goog.isNull(this.strokeWidth_); + goog.asserts.assert(fill || stroke, + 'Stroke or fill properties must be provided'); }; goog.inherits(ol.style.Polygon, ol.style.Symbolizer); @@ -157,31 +217,43 @@ ol.style.Polygon.prototype.createLiteral = function(opt_feature) { goog.asserts.assertString(fillColor, 'fillColor must be a string'); } + var fillOpacity; + if (!goog.isNull(this.fillOpacity_)) { + fillOpacity = ol.expr.evaluateFeature(this.fillOpacity_, opt_feature); + goog.asserts.assertNumber(fillOpacity, 'fillOpacity must be a number'); + } + var strokeColor; if (!goog.isNull(this.strokeColor_)) { strokeColor = ol.expr.evaluateFeature(this.strokeColor_, opt_feature); goog.asserts.assertString(strokeColor, 'strokeColor must be a string'); } + var strokeOpacity; + if (!goog.isNull(this.strokeOpacity_)) { + strokeOpacity = ol.expr.evaluateFeature(this.strokeOpacity_, opt_feature); + goog.asserts.assertNumber(strokeOpacity, 'strokeOpacity must be a number'); + } + var strokeWidth; if (!goog.isNull(this.strokeWidth_)) { strokeWidth = ol.expr.evaluateFeature(this.strokeWidth_, opt_feature); goog.asserts.assertNumber(strokeWidth, 'strokeWidth must be a number'); } - goog.asserts.assert( - goog.isDef(fillColor) || - (goog.isDef(strokeColor) && goog.isDef(strokeWidth)), - 'either fillColor or strokeColor and strokeWidth must be defined'); + var fill = goog.isDef(fillColor) && goog.isDef(fillOpacity); + var stroke = goog.isDef(strokeColor) && goog.isDef(strokeOpacity) && + goog.isDef(strokeWidth); - var opacity = ol.expr.evaluateFeature(this.opacity_, opt_feature); - goog.asserts.assertNumber(opacity, 'opacity must be a number'); + goog.asserts.assert(fill || stroke, + 'either fill or stroke properties must be defined'); return new ol.style.PolygonLiteral({ fillColor: fillColor, + fillOpacity: fillOpacity, strokeColor: strokeColor, - strokeWidth: strokeWidth, - opacity: opacity + strokeOpacity: strokeOpacity, + strokeWidth: strokeWidth }); }; @@ -196,11 +268,11 @@ ol.style.Polygon.prototype.getFillColor = function() { /** - * Get the opacity. - * @return {ol.expr.Expression} Opacity. + * Get the fill opacity. + * @return {ol.expr.Expression} Fill opacity. */ -ol.style.Polygon.prototype.getOpacity = function() { - return this.opacity_; +ol.style.Polygon.prototype.getFillOpacity = function() { + return this.fillOpacity_; }; @@ -213,6 +285,15 @@ ol.style.Polygon.prototype.getStrokeColor = function() { }; +/** + * Get the stroke opacity. + * @return {ol.expr.Expression} Stroke opacity. + */ +ol.style.Polygon.prototype.getStrokeOpacity = function() { + return this.strokeOpacity_; +}; + + /** * Get the stroke width. * @return {ol.expr.Expression} Stroke width. @@ -233,12 +314,12 @@ ol.style.Polygon.prototype.setFillColor = function(fillColor) { /** - * Set the opacity. - * @param {ol.expr.Expression} opacity Opacity. + * Set the fill opacity. + * @param {ol.expr.Expression} fillOpacity Fill opacity. */ -ol.style.Polygon.prototype.setOpacity = function(opacity) { - goog.asserts.assertInstanceof(opacity, ol.expr.Expression); - this.opacity_ = opacity; +ol.style.Polygon.prototype.setFillOpacity = function(fillOpacity) { + goog.asserts.assertInstanceof(fillOpacity, ol.expr.Expression); + this.fillOpacity_ = fillOpacity; }; @@ -252,6 +333,16 @@ ol.style.Polygon.prototype.setStrokeColor = function(strokeColor) { }; +/** + * Set the stroke opacity. + * @param {ol.expr.Expression} strokeOpacity Stroke opacity. + */ +ol.style.Polygon.prototype.setStrokeOpacity = function(strokeOpacity) { + goog.asserts.assertInstanceof(strokeOpacity, ol.expr.Expression); + this.strokeOpacity_ = strokeOpacity; +}; + + /** * Set the stroke width. * @param {ol.expr.Expression} strokeWidth Stroke width. @@ -267,7 +358,8 @@ ol.style.Polygon.prototype.setStrokeWidth = function(strokeWidth) { */ ol.style.PolygonDefaults = new ol.style.PolygonLiteral({ fillColor: '#ffffff', + fillOpacity: 0.4, strokeColor: '#696969', - strokeWidth: 1.5, - opacity: 0.75 + strokeOpacity: 0.8, + strokeWidth: 1.5 }); diff --git a/src/ol/style/shape.js b/src/ol/style/shape.js index 4df16825d6..dc9b1ead07 100644 --- a/src/ol/style/shape.js +++ b/src/ol/style/shape.js @@ -22,9 +22,10 @@ ol.style.ShapeType = { * @typedef {{type: (ol.style.ShapeType), * size: (number), * fillColor: (string|undefined), + * fillOpacity: (number|undefined), * strokeColor: (string|undefined), - * strokeWidth: (number|undefined), - * opacity: (number)}} + * strokeOpacity: (number|undefined), + * strokeWidth: (number|undefined)}} */ ol.style.ShapeLiteralOptions; @@ -51,6 +52,13 @@ ol.style.ShapeLiteral = function(options) { goog.asserts.assertString(options.fillColor, 'fillColor must be a string'); } + /** @type {number|undefined} */ + this.fillOpacity = options.fillOpacity; + if (goog.isDef(options.fillOpacity)) { + goog.asserts.assertNumber( + options.fillOpacity, 'fillOpacity must be a number'); + } + /** @type {string|undefined} */ this.strokeColor = options.strokeColor; if (goog.isDef(this.strokeColor)) { @@ -58,6 +66,13 @@ ol.style.ShapeLiteral = function(options) { this.strokeColor, 'strokeColor must be a string'); } + /** @type {number|undefined} */ + this.strokeOpacity = options.strokeOpacity; + if (goog.isDef(this.strokeOpacity)) { + goog.asserts.assertNumber( + this.strokeOpacity, 'strokeOpacity must be a number'); + } + /** @type {number|undefined} */ this.strokeWidth = options.strokeWidth; if (goog.isDef(this.strokeWidth)) { @@ -65,14 +80,14 @@ ol.style.ShapeLiteral = function(options) { this.strokeWidth, 'strokeWidth must be a number'); } - goog.asserts.assert( - goog.isDef(this.fillColor) || - (goog.isDef(this.strokeColor) && goog.isDef(this.strokeWidth)), - 'Either fillColor or strokeColor and strokeWidth must be set'); - - goog.asserts.assertNumber(options.opacity, 'opacity must be a number'); - /** @type {number} */ - this.opacity = options.opacity; + // fill and/or stroke properties must be defined + var fillDef = goog.isDef(this.fillColor) && goog.isDef(this.fillOpacity); + var strokeDef = goog.isDef(this.strokeColor) && + goog.isDef(this.strokeOpacity) && + goog.isDef(this.strokeWidth); + goog.asserts.assert(fillDef || strokeDef, + 'Either fillColor and fillOpacity or ' + + 'strokeColor and strokeOpacity and strokeWidth must be set'); }; goog.inherits(ol.style.ShapeLiteral, ol.style.PointLiteral); @@ -85,9 +100,10 @@ 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.strokeWidth == shapeLiteral.strokeWidth && - this.opacity == shapeLiteral.opacity; + this.strokeOpacity == shapeLiteral.strokeOpacity && + this.strokeWidth == shapeLiteral.strokeWidth; }; @@ -110,25 +126,58 @@ ol.style.Shape = function(options) { * @type {ol.expr.Expression} * @private */ - this.size_ = !goog.isDef(options.size) ? + this.size_ = !goog.isDefAndNotNull(options.size) ? new ol.expr.Literal(ol.style.ShapeDefaults.size) : (options.size instanceof ol.expr.Expression) ? options.size : new ol.expr.Literal(options.size); + // fill handling - if any fill property is supplied, use all defaults + var fillColor = null, + fillOpacity = null; + + if (goog.isDefAndNotNull(options.fillColor) || + goog.isDefAndNotNull(options.fillOpacity)) { + + if (goog.isDefAndNotNull(options.fillColor)) { + fillColor = (options.fillColor instanceof ol.expr.Expression) ? + options.fillColor : + new ol.expr.Literal(options.fillColor); + } else { + fillColor = new ol.expr.Literal( + /** @type {string} */ (ol.style.ShapeDefaults.fillColor)); + } + + if (goog.isDefAndNotNull(options.fillOpacity)) { + fillOpacity = (options.fillOpacity instanceof ol.expr.Expression) ? + options.fillOpacity : + new ol.expr.Literal(options.fillOpacity); + } else { + fillOpacity = new ol.expr.Literal( + /** @type {number} */ (ol.style.ShapeDefaults.fillOpacity)); + } + + } + /** * @type {ol.expr.Expression} * @private */ - this.fillColor_ = !goog.isDefAndNotNull(options.fillColor) ? - null : - (options.fillColor instanceof ol.expr.Expression) ? - options.fillColor : new ol.expr.Literal(options.fillColor); + this.fillColor_ = fillColor; + + /** + * @type {ol.expr.Expression} + * @private + */ + this.fillOpacity_ = fillOpacity; + // stroke handling - if any stroke property is supplied, use defaults var strokeColor = null, + strokeOpacity = null, strokeWidth = null; if (goog.isDefAndNotNull(options.strokeColor) || + goog.isDefAndNotNull(options.strokeOpacity) || goog.isDefAndNotNull(options.strokeWidth)) { if (goog.isDefAndNotNull(options.strokeColor)) { @@ -140,6 +189,15 @@ ol.style.Shape = function(options) { /** @type {string} */ (ol.style.ShapeDefaults.strokeColor)); } + if (goog.isDefAndNotNull(options.strokeOpacity)) { + strokeOpacity = (options.strokeOpacity instanceof ol.expr.Expression) ? + options.strokeOpacity : + new ol.expr.Literal(options.strokeOpacity); + } else { + strokeOpacity = new ol.expr.Literal( + /** @type {number} */ (ol.style.ShapeDefaults.strokeOpacity)); + } + if (goog.isDefAndNotNull(options.strokeWidth)) { strokeWidth = (options.strokeWidth instanceof ol.expr.Expression) ? options.strokeWidth : @@ -161,21 +219,21 @@ ol.style.Shape = function(options) { * @type {ol.expr.Expression} * @private */ - this.strokeWidth_ = strokeWidth; - - // one of stroke or fill can be null, both null is user error - goog.asserts.assert(!goog.isNull(this.fillColor_) || - !(goog.isNull(this.strokeColor_) && goog.isNull(this.strokeWidth_)), - 'Stroke or fill properties must be provided'); + this.strokeOpacity_ = strokeOpacity; /** * @type {ol.expr.Expression} * @private */ - this.opacity_ = !goog.isDef(options.opacity) ? - new ol.expr.Literal(ol.style.ShapeDefaults.opacity) : - (options.opacity instanceof ol.expr.Expression) ? - options.opacity : new ol.expr.Literal(options.opacity); + this.strokeWidth_ = strokeWidth; + + // one of stroke or fill can be null, both null is user error + var fill = !goog.isNull(this.fillColor_) && !goog.isNull(this.fillOpacity_); + var stroke = !goog.isNull(this.strokeColor_) && + !goog.isNull(this.strokeOpacity_) && + !goog.isNull(this.strokeWidth_); + goog.asserts.assert(fill || stroke, + 'Stroke or fill properties must be provided'); }; @@ -195,33 +253,45 @@ ol.style.Shape.prototype.createLiteral = function(opt_feature) { goog.asserts.assertString(fillColor, 'fillColor must be a string'); } + var fillOpacity; + if (!goog.isNull(this.fillOpacity_)) { + fillOpacity = ol.expr.evaluateFeature(this.fillOpacity_, opt_feature); + goog.asserts.assertNumber(fillOpacity, 'fillOpacity must be a number'); + } + var strokeColor; if (!goog.isNull(this.strokeColor_)) { strokeColor = ol.expr.evaluateFeature(this.strokeColor_, opt_feature); goog.asserts.assertString(strokeColor, 'strokeColor must be a string'); } + var strokeOpacity; + if (!goog.isNull(this.strokeOpacity_)) { + strokeOpacity = ol.expr.evaluateFeature(this.strokeOpacity_, opt_feature); + goog.asserts.assertNumber(strokeOpacity, 'strokeOpacity must be a number'); + } + var strokeWidth; if (!goog.isNull(this.strokeWidth_)) { strokeWidth = ol.expr.evaluateFeature(this.strokeWidth_, opt_feature); goog.asserts.assertNumber(strokeWidth, 'strokeWidth must be a number'); } - goog.asserts.assert( - goog.isDef(fillColor) || - (goog.isDef(strokeColor) && goog.isDef(strokeWidth)), - 'either fillColor or strokeColor and strokeWidth must be defined'); + var fill = goog.isDef(fillColor) && goog.isDef(fillOpacity); + var stroke = goog.isDef(strokeColor) && goog.isDef(strokeOpacity) && + goog.isDef(strokeWidth); - var opacity = ol.expr.evaluateFeature(this.opacity_, opt_feature); - goog.asserts.assertNumber(opacity, 'opacity must be a number'); + goog.asserts.assert(fill || stroke, + 'either fill or stroke properties must be defined'); return new ol.style.ShapeLiteral({ type: this.type_, size: size, fillColor: fillColor, + fillOpacity: fillOpacity, strokeColor: strokeColor, - strokeWidth: strokeWidth, - opacity: opacity + strokeOpacity: strokeOpacity, + strokeWidth: strokeWidth }); }; @@ -236,11 +306,11 @@ ol.style.Shape.prototype.getFillColor = function() { /** - * Get the opacity. - * @return {ol.expr.Expression} Opacity. + * Get the fill opacity. + * @return {ol.expr.Expression} Fill opacity. */ -ol.style.Shape.prototype.getOpacity = function() { - return this.opacity_; +ol.style.Shape.prototype.getFillOpacity = function() { + return this.fillOpacity_; }; @@ -262,6 +332,15 @@ ol.style.Shape.prototype.getStrokeColor = function() { }; +/** + * Get the stroke opacity. + * @return {ol.expr.Expression} Stroke opacity. + */ +ol.style.Shape.prototype.getStrokeOpacity = function() { + return this.strokeOpacity_; +}; + + /** * Get the stroke width. * @return {ol.expr.Expression} Stroke width. @@ -291,12 +370,12 @@ ol.style.Shape.prototype.setFillColor = function(fillColor) { /** - * Set the opacity. - * @param {ol.expr.Expression} opacity Opacity. + * Set the fill opacity. + * @param {ol.expr.Expression} fillOpacity Fill opacity. */ -ol.style.Shape.prototype.setOpacity = function(opacity) { - goog.asserts.assertInstanceof(opacity, ol.expr.Expression); - this.opacity_ = opacity; +ol.style.Shape.prototype.setFillOpacity = function(fillOpacity) { + goog.asserts.assertInstanceof(fillOpacity, ol.expr.Expression); + this.fillOpacity_ = fillOpacity; }; @@ -320,6 +399,16 @@ ol.style.Shape.prototype.setStrokeColor = function(strokeColor) { }; +/** + * Set the stroke opacity. + * @param {ol.expr.Expression} strokeOpacity Stroke opacity. + */ +ol.style.Shape.prototype.setStrokeOpacity = function(strokeOpacity) { + goog.asserts.assertInstanceof(strokeOpacity, ol.expr.Expression); + this.strokeOpacity_ = strokeOpacity; +}; + + /** * Set the stroke width. * @param {ol.expr.Expression} strokeWidth Stroke width. @@ -346,7 +435,8 @@ ol.style.ShapeDefaults = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, size: 5, fillColor: '#ffffff', + fillOpacity: 0.4, strokeColor: '#696969', - strokeWidth: 1.5, - opacity: 0.75 + strokeOpacity: 0.8, + strokeWidth: 1.5 }); diff --git a/test/spec/ol/parser/kml.test.js b/test/spec/ol/parser/kml.test.js index 3193d7eb37..694e222a86 100644 --- a/test/spec/ol/parser/kml.test.js +++ b/test/spec/ol/parser/kml.test.js @@ -182,45 +182,49 @@ describe('ol.parser.kml', function() { var symbolizer = obj.features[0].getSymbolizerLiterals()[0]; expect(symbolizer instanceof ol.style.LineLiteral).to.be.ok(); expect(symbolizer.strokeColor).to.eql('#ff0000'); - expect(symbolizer.opacity).to.eql(0.5294117647058824); + expect(symbolizer.strokeOpacity).to.eql(0.5294117647058824); expect(symbolizer.strokeWidth).to.eql(10); }); - it('Test style fill (read / write)', function() { - var test_style_fill = '' + + it('reads PolyStyle fill', function() { + var kml = '' + ' ' + + '870000ff ' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ' ' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ''; - var style_fill_write = ' ' + - ' ' + + '' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ''; var p = new ol.parser.KML({extractStyles: true}); - var obj = p.read(test_style_fill); - var output = p.write(p.read(style_fill_write)); - expect(goog.dom.xml.loadXml(style_fill_write)).to.xmleql( + var output = p.write(p.read(kml)); + expect(goog.dom.xml.loadXml(kml)).to.xmleql( goog.dom.xml.loadXml(output)); - var symbolizer1 = obj.features[0].getSymbolizerLiterals()[0]; - var symbolizer2 = obj.features[1].getSymbolizerLiterals()[0]; - expect(symbolizer1.fillColor).to.eql('#ff0000'); - expect(symbolizer2.opacity).to.eql(0); }); it('Test iconStyle (read / write)', function(done) { var url = 'spec/ol/parser/kml/iconstyle.kml'; diff --git a/test/spec/ol/style/line.test.js b/test/spec/ol/style/line.test.js index dae4962301..f5b7a1fb4b 100644 --- a/test/spec/ol/style/line.test.js +++ b/test/spec/ol/style/line.test.js @@ -8,17 +8,17 @@ describe('ol.style.LineLiteral', function() { var literal = new ol.style.LineLiteral({ strokeWidth: 3, strokeColor: '#BADA55', - opacity: 1 + strokeOpacity: 1 }); var equalLiteral = new ol.style.LineLiteral({ strokeColor: '#BADA55', strokeWidth: 3, - opacity: 1 + strokeOpacity: 1 }); var differentLiteral = new ol.style.LineLiteral({ strokeColor: '#013', strokeWidth: 3, - opacity: 1 + strokeOpacity: 1 }); expect(literal.equals(equalLiteral)).to.be(true); expect(literal.equals(differentLiteral)).to.be(false); @@ -42,7 +42,7 @@ describe('ol.style.Line', function() { it('accepts expressions', function() { var symbolizer = new ol.style.Line({ - opacity: ol.expr.parse('value / 100'), + strokeOpacity: ol.expr.parse('value / 100'), strokeWidth: ol.expr.parse('widthAttr') }); expect(symbolizer).to.be.a(ol.style.Line); @@ -54,7 +54,7 @@ describe('ol.style.Line', function() { it('evaluates expressions with the given feature', function() { var symbolizer = new ol.style.Line({ - opacity: ol.expr.parse('value / 100'), + strokeOpacity: ol.expr.parse('value / 100'), strokeWidth: ol.expr.parse('widthAttr') }); @@ -65,7 +65,7 @@ describe('ol.style.Line', function() { var literal = symbolizer.createLiteral(feature); expect(literal).to.be.a(ol.style.LineLiteral); - expect(literal.opacity).to.be(42 / 100); + expect(literal.strokeOpacity).to.be(42 / 100); expect(literal.strokeWidth).to.be(1.5); }); @@ -99,14 +99,14 @@ describe('ol.style.Line', function() { }); - describe('#getOpacity()', function() { + describe('#getStrokeOpacity()', function() { it('returns the stroke opacity', function() { var symbolizer = new ol.style.Line({ - opacity: 0.123 + strokeOpacity: 0.123 }); - var opacity = symbolizer.getOpacity(); + var opacity = symbolizer.getStrokeOpacity(); expect(opacity).to.be.a(ol.expr.Literal); expect(opacity.getValue()).to.be(0.123); }); @@ -168,26 +168,26 @@ describe('ol.style.Line', function() { }); - describe('#setOpacity()', function() { + describe('#setStrokeOpacity()', function() { it('sets the stroke opacity', function() { var symbolizer = new ol.style.Line({ - opacity: 0.123 + strokeOpacity: 0.123 }); - symbolizer.setOpacity(new ol.expr.Literal(0.321)); + symbolizer.setStrokeOpacity(new ol.expr.Literal(0.321)); - var opacity = symbolizer.getOpacity(); + var opacity = symbolizer.getStrokeOpacity(); expect(opacity).to.be.a(ol.expr.Literal); expect(opacity.getValue()).to.be(0.321); }); it('throws when not provided an expression', function() { var symbolizer = new ol.style.Line({ - opacity: 1 + strokeOpacity: 1 }); expect(function() { - symbolizer.setOpacity(0.5); + symbolizer.setStrokeOpacity(0.5); }).throwException(function(err) { expect(err).to.be.a(goog.asserts.AssertionError); }); diff --git a/test/spec/ol/style/polygon.test.js b/test/spec/ol/style/polygon.test.js index d5136b7690..f8cf968929 100644 --- a/test/spec/ol/style/polygon.test.js +++ b/test/spec/ol/style/polygon.test.js @@ -8,23 +8,58 @@ describe('ol.style.PolygonLiteral', function() { var literal = new ol.style.PolygonLiteral({ strokeWidth: 3, strokeColor: '#013', + strokeOpacity: 0.4, fillColor: '#BADA55', - opacity: 1 + fillOpacity: 0.3 }); var equalLiteral = new ol.style.PolygonLiteral({ + strokeWidth: 3, + strokeColor: '#013', + strokeOpacity: 0.4, fillColor: '#BADA55', - strokeColor: '#013', - strokeWidth: 3, - opacity: 1 + fillOpacity: 0.3 }); - var differentLiteral = new ol.style.PolygonLiteral({ - fillColor: '#013', + var differentStrokeWidth = new ol.style.PolygonLiteral({ + strokeWidth: 5, strokeColor: '#013', + strokeOpacity: 0.4, + fillColor: '#BADA55', + fillOpacity: 0.3 + }); + var differentStrokeColor = new ol.style.PolygonLiteral({ strokeWidth: 3, - opacity: 1 + strokeColor: '#ffff00', + strokeOpacity: 0.4, + fillColor: '#BADA55', + fillOpacity: 0.3 + }); + var differentStrokeOpacity = new ol.style.PolygonLiteral({ + strokeWidth: 3, + strokeColor: '#013', + strokeOpacity: 0.41, + fillColor: '#BADA55', + fillOpacity: 0.3 + }); + var differentFillColor = new ol.style.PolygonLiteral({ + strokeWidth: 3, + strokeColor: '#013', + strokeOpacity: 0.4, + fillColor: '#00ffff', + fillOpacity: 0.3 + }); + var differentFillOpacity = new ol.style.PolygonLiteral({ + strokeWidth: 3, + strokeColor: '#013', + strokeOpacity: 0.4, + fillColor: '#BADA55', + fillOpacity: 0.31 }); expect(literal.equals(equalLiteral)).to.be(true); - expect(literal.equals(differentLiteral)).to.be(false); + expect(literal.equals(differentStrokeWidth)).to.be(false); + expect(literal.equals(differentStrokeColor)).to.be(false); + expect(literal.equals(differentStrokeOpacity)).to.be(false); + expect(literal.equals(differentFillColor)).to.be(false); + expect(literal.equals(differentFillOpacity)).to.be(false); }); }); @@ -45,7 +80,7 @@ describe('ol.style.Polygon', function() { it('accepts expressions', function() { var symbolizer = new ol.style.Polygon({ - opacity: ol.expr.parse('value / 100'), + fillOpacity: ol.expr.parse('value / 100'), fillColor: ol.expr.parse('fillAttr') }); expect(symbolizer).to.be.a(ol.style.Polygon); @@ -57,7 +92,7 @@ describe('ol.style.Polygon', function() { it('evaluates expressions with the given feature', function() { var symbolizer = new ol.style.Polygon({ - opacity: ol.expr.parse('value / 100'), + fillOpacity: ol.expr.parse('value / 100'), fillColor: ol.expr.parse('fillAttr') }); @@ -68,7 +103,7 @@ describe('ol.style.Polygon', function() { var literal = symbolizer.createLiteral(feature); expect(literal).to.be.a(ol.style.PolygonLiteral); - expect(literal.opacity).to.be(42 / 100); + expect(literal.fillOpacity).to.be(42 / 100); expect(literal.fillColor).to.be('#ff0000'); expect(literal.strokeColor).to.be(undefined); }); @@ -101,6 +136,20 @@ describe('ol.style.Polygon', function() { }); + describe('#getFillOpacity()', function() { + + it('returns the fill opacity', function() { + var symbolizer = new ol.style.Polygon({ + fillColor: '#ffffff', + fillOpacity: 0.123 + }); + + var opacity = symbolizer.getFillOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.123); + }); + + }); describe('#getStrokeColor()', function() { @@ -130,15 +179,15 @@ describe('ol.style.Polygon', function() { }); - describe('#getOpacity()', function() { + describe('#getStrokeOpacity()', function() { it('returns the stroke opacity', function() { var symbolizer = new ol.style.Polygon({ strokeWidth: 1, - opacity: 0.123 + strokeOpacity: 0.123 }); - var opacity = symbolizer.getOpacity(); + var opacity = symbolizer.getStrokeOpacity(); expect(opacity).to.be.a(ol.expr.Literal); expect(opacity.getValue()).to.be(0.123); }); @@ -228,16 +277,16 @@ describe('ol.style.Polygon', function() { }); - describe('#setOpacity()', function() { + describe('#setStrokeOpacity()', function() { it('sets the stroke opacity', function() { var symbolizer = new ol.style.Polygon({ strokeWidth: 1, - opacity: 0.123 + strokeOpacity: 0.123 }); - symbolizer.setOpacity(new ol.expr.Literal(0.321)); + symbolizer.setStrokeOpacity(new ol.expr.Literal(0.321)); - var opacity = symbolizer.getOpacity(); + var opacity = symbolizer.getStrokeOpacity(); expect(opacity).to.be.a(ol.expr.Literal); expect(opacity.getValue()).to.be(0.321); }); @@ -245,11 +294,11 @@ describe('ol.style.Polygon', function() { it('throws when not provided an expression', function() { var symbolizer = new ol.style.Polygon({ strokeWidth: 1, - opacity: 1 + strokeOpacity: 1 }); expect(function() { - symbolizer.setOpacity(0.5); + symbolizer.setStrokeOpacity(0.5); }).throwException(function(err) { expect(err).to.be.a(goog.asserts.AssertionError); }); diff --git a/test/spec/ol/style/shape.test.js b/test/spec/ol/style/shape.test.js index be1fd83e8a..8c0c396e1c 100644 --- a/test/spec/ol/style/shape.test.js +++ b/test/spec/ol/style/shape.test.js @@ -9,28 +9,81 @@ describe('ol.style.ShapeLiteral', function() { type: ol.style.ShapeType.CIRCLE, size: 4, fillColor: '#BADA55', + fillOpacity: 0.9, strokeColor: '#013', - strokeWidth: 3, - opacity: 1 + strokeOpacity: 0.8, + strokeWidth: 3 }); var equalLiteral = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, size: 4, fillColor: '#BADA55', + fillOpacity: 0.9, strokeColor: '#013', - strokeWidth: 3, - opacity: 1 + strokeOpacity: 0.8, + strokeWidth: 3 }); - var differentLiteral = new ol.style.ShapeLiteral({ + var differentSize = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 5, + fillColor: '#BADA55', + fillOpacity: 0.9, + strokeColor: '#013', + strokeOpacity: 0.8, + strokeWidth: 3 + }); + var differentFillColor = new ol.style.ShapeLiteral({ type: ol.style.ShapeType.CIRCLE, size: 4, - fillColor: '#013', + fillColor: '#ffffff', + fillOpacity: 0.9, strokeColor: '#013', - strokeWidth: 3, - opacity: 1 + strokeOpacity: 0.8, + strokeWidth: 3 + }); + var differentFillOpacity = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 4, + fillColor: '#BADA55', + fillOpacity: 0.8, + strokeColor: '#013', + strokeOpacity: 0.8, + strokeWidth: 3 + }); + var differentStrokeColor = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 4, + fillColor: '#BADA55', + fillOpacity: 0.9, + strokeColor: '#ffffff', + strokeOpacity: 0.8, + strokeWidth: 3 + }); + var differentStrokeOpacity = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 4, + fillColor: '#BADA55', + fillOpacity: 0.9, + strokeColor: '#013', + strokeOpacity: 0.7, + strokeWidth: 3 + }); + var differentStrokeWidth = new ol.style.ShapeLiteral({ + type: ol.style.ShapeType.CIRCLE, + size: 4, + fillColor: '#BADA55', + fillOpacity: 0.9, + strokeColor: '#013', + strokeOpacity: 0.8, + strokeWidth: 4 }); expect(literal.equals(equalLiteral)).to.be(true); - expect(literal.equals(differentLiteral)).to.be(false); + expect(literal.equals(differentSize)).to.be(false); + expect(literal.equals(differentFillColor)).to.be(false); + expect(literal.equals(differentFillOpacity)).to.be(false); + expect(literal.equals(differentStrokeColor)).to.be(false); + expect(literal.equals(differentStrokeOpacity)).to.be(false); + expect(literal.equals(differentStrokeWidth)).to.be(false); }); }); @@ -64,7 +117,7 @@ describe('ol.style.Shape', function() { it('evaluates expressions with the given feature', function() { var symbolizer = new ol.style.Shape({ size: ol.expr.parse('sizeAttr'), - opacity: ol.expr.parse('opacityAttr'), + fillOpacity: ol.expr.parse('opacityAttr'), fillColor: '#BADA55' }); @@ -76,45 +129,27 @@ describe('ol.style.Shape', function() { var literal = symbolizer.createLiteral(feature); expect(literal).to.be.a(ol.style.ShapeLiteral); expect(literal.size).to.be(42); - expect(literal.opacity).to.be(0.4); + expect(literal.fillOpacity).to.be(0.4); }); it('can be called without a feature', function() { var symbolizer = new ol.style.Shape({ size: 10, - opacity: 1, fillColor: '#BADA55', strokeColor: '#013', + strokeOpacity: 1, strokeWidth: 2 }); var literal = symbolizer.createLiteral(); expect(literal).to.be.a(ol.style.ShapeLiteral); expect(literal.size).to.be(10); - expect(literal.opacity).to.be(1); expect(literal.fillColor).to.be('#BADA55'); expect(literal.strokeColor).to.be('#013'); + expect(literal.strokeOpacity).to.be(1); expect(literal.strokeWidth).to.be(2); }); - it('applies default type if none provided', function() { - var symbolizer = new ol.style.Shape({ - size: ol.expr.parse('sizeAttr'), - opacity: ol.expr.parse('opacityAttr'), - fillColor: '#BADA55' - }); - - var feature = new ol.Feature({ - sizeAttr: 42, - opacityAttr: 0.4 - }); - - var literal = symbolizer.createLiteral(feature); - expect(literal).to.be.a(ol.style.ShapeLiteral); - expect(literal.size).to.be(42); - expect(literal.opacity).to.be(0.4); - }); - }); describe('#getFillColor()', function() { @@ -131,6 +166,30 @@ describe('ol.style.Shape', function() { }); + describe('#getFillOpacity()', function() { + + it('returns the fill opacity', function() { + var symbolizer = new ol.style.Shape({ + fillOpacity: 0.123 + }); + + var opacity = symbolizer.getFillOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.123); + }); + + it('returns the default if none provided', function() { + var symbolizer = new ol.style.Shape({ + fillColor: '#ffffff' + }); + + var opacity = symbolizer.getFillOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.4); + }); + + }); + describe('#getStrokeColor()', function() { it('returns the stroke color', function() { @@ -145,6 +204,31 @@ describe('ol.style.Shape', function() { }); + describe('#getStrokeOpacity()', function() { + + it('returns the stroke opacity', function() { + var symbolizer = new ol.style.Shape({ + strokeWidth: 1, + strokeOpacity: 0.123 + }); + + var opacity = symbolizer.getStrokeOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.123); + }); + + it('returns the default if none provided', function() { + var symbolizer = new ol.style.Shape({ + strokeWidth: 1 + }); + + var opacity = symbolizer.getStrokeOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.8); + }); + + }); + describe('#getStrokeWidth()', function() { it('returns the stroke width', function() { @@ -159,21 +243,6 @@ describe('ol.style.Shape', function() { }); - describe('#getOpacity()', function() { - - it('returns the stroke opacity', function() { - var symbolizer = new ol.style.Shape({ - strokeWidth: 1, - opacity: 0.123 - }); - - var opacity = symbolizer.getOpacity(); - expect(opacity).to.be.a(ol.expr.Literal); - expect(opacity.getValue()).to.be(0.123); - }); - - }); - describe('#getType()', function() { it('returns the shape type', function() { @@ -216,6 +285,34 @@ describe('ol.style.Shape', function() { }); + describe('#setFillOpacity()', function() { + + it('sets the fill opacity', function() { + var symbolizer = new ol.style.Shape({ + fillOpacity: 0.5 + }); + + symbolizer.setFillOpacity(new ol.expr.Literal(0.6)); + + var fillOpacity = symbolizer.getFillOpacity(); + expect(fillOpacity).to.be.a(ol.expr.Literal); + expect(fillOpacity.getValue()).to.be(0.6); + }); + + it('throws when not provided an expression', function() { + var symbolizer = new ol.style.Shape({ + fillOpacity: 0.5 + }); + + expect(function() { + symbolizer.setFillOpacity(0.4); + }).throwException(function(err) { + expect(err).to.be.a(goog.asserts.AssertionError); + }); + }); + + }); + describe('#setStrokeColor()', function() { it('sets the stroke color', function() { @@ -244,6 +341,35 @@ describe('ol.style.Shape', function() { }); + describe('#setStrokeOpacity()', function() { + + it('sets the stroke opacity', function() { + var symbolizer = new ol.style.Shape({ + strokeWidth: 1, + strokeOpacity: 0.123 + }); + symbolizer.setStrokeOpacity(new ol.expr.Literal(0.321)); + + var opacity = symbolizer.getStrokeOpacity(); + expect(opacity).to.be.a(ol.expr.Literal); + expect(opacity.getValue()).to.be(0.321); + }); + + it('throws when not provided an expression', function() { + var symbolizer = new ol.style.Shape({ + strokeWidth: 1, + strokeOpacity: 1 + }); + + expect(function() { + symbolizer.setStrokeOpacity(0.5); + }).throwException(function(err) { + expect(err).to.be.a(goog.asserts.AssertionError); + }); + }); + + }); + describe('#setStrokeWidth()', function() { it('sets the stroke width', function() { @@ -286,34 +412,6 @@ describe('ol.style.Shape', function() { }); - describe('#setOpacity()', function() { - - it('sets the stroke opacity', function() { - var symbolizer = new ol.style.Shape({ - strokeWidth: 1, - opacity: 0.123 - }); - symbolizer.setOpacity(new ol.expr.Literal(0.321)); - - var opacity = symbolizer.getOpacity(); - expect(opacity).to.be.a(ol.expr.Literal); - expect(opacity.getValue()).to.be(0.321); - }); - - it('throws when not provided an expression', function() { - var symbolizer = new ol.style.Shape({ - strokeWidth: 1, - opacity: 1 - }); - - expect(function() { - symbolizer.setOpacity(0.5); - }).throwException(function(err) { - expect(err).to.be.a(goog.asserts.AssertionError); - }); - }); - - }); }); goog.require('goog.asserts.AssertionError');