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');