Merge pull request #892 from tschaub/symbolizer-opacity

Separate fill and stroke opacity.

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()')
       })
     ]
   })

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
       })
     ]
   }),

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,
+          fillOpacity: 0.5,
-          opacity: 0.5
+          strokeColor: '#FFF',
+          strokeOpacity: 1,
+          strokeWidth: 1.5
         })
       ]
     })

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

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).
  */
 
 /**

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 = {};
+        var style = {}; // from KML
-        this.readChildNodes(node, symbolizer);
+        var symbolizer = {}; // for ol.style.Polygon
-        if (symbolizer.color) {
+        this.readChildNodes(node, style);
-          symbolizer.fillColor = symbolizer.color.color;
+        // 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') {
+        // check if poly has stroke
-          // TODO we need a better way in the symbolizer to disable fill
+        if (!(style.outline === '0' || style.outline === 'false')) {
-          // now we are using opacity for this, but it's a workaround
+          if (style.color) {
-          // see also: https://github.com/openlayers/ol3/issues/475
+            symbolizer.strokeColor = style.color.color;
-          symbolizer.opacity = 0;
+            symbolizer.strokeOpacity = style.color.opacity;
-        } else {
+          } else {
-          symbolizer.opacity = symbolizer.color.opacity;
+            // 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 <outline>1</outline>
+         * 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', {
+        if (literal.strokeOpacity) {
-          color: literal.fillColor.substring(1),
+          this.writeNode('outline', '1', null, node);
-          opacity: literal.opacity
+          color = color || literal.strokeColor;
-        }, null, node);
+          opacity = opacity || literal.strokeOpacity;
-        this.writeNode('width', literal.strokeWidth, null, node);
+        } 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;

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;

src/ol/style/line.js

@@ -11,8 +11,8 @@ goog.require('ol.style.SymbolizerLiteral');
 
 /**
  * @typedef {{strokeColor: (string),
- *            strokeWidth: (number),
+ *            strokeOpacity: (number),
- *            opacity: (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.strokeOpacity == lineLiteral.strokeOpacity &&
-      this.opacity == lineLiteral.opacity;
+      this.strokeWidth == lineLiteral.strokeWidth;
 };
 
 
@@ -76,19 +77,19 @@ ol.style.Line = function(options) {
    * @type {ol.expr.Expression}
    * @private
    */
-  this.strokeWidth_ = !goog.isDef(options.strokeWidth) ?
+  this.strokeOpacity_ = !goog.isDef(options.strokeOpacity) ?
-      new ol.expr.Literal(ol.style.LineDefaults.strokeWidth) :
+      new ol.expr.Literal(ol.style.LineDefaults.strokeOpacity) :
-      (options.strokeWidth instanceof ol.expr.Expression) ?
+      (options.strokeOpacity instanceof ol.expr.Expression) ?
-          options.strokeWidth : new ol.expr.Literal(options.strokeWidth);
+          options.strokeOpacity : new ol.expr.Literal(options.strokeOpacity);
 
   /**
    * @type {ol.expr.Expression}
    * @private
    */
-  this.opacity_ = !goog.isDef(options.opacity) ?
+  this.strokeWidth_ = !goog.isDef(options.strokeWidth) ?
-      new ol.expr.Literal(ol.style.LineDefaults.opacity) :
+      new ol.expr.Literal(ol.style.LineDefaults.strokeWidth) :
-      (options.opacity instanceof ol.expr.Expression) ?
+      (options.strokeWidth instanceof ol.expr.Expression) ?
-          options.opacity : new ol.expr.Literal(options.opacity);
+          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,
+    strokeOpacity: strokeOpacity,
-    opacity: opacity
+    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,
+  strokeOpacity: 0.75,
-  opacity: 0.75
+  strokeWidth: 1.5
 });

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),
+ *            strokeOpacity: (number|undefined),
- *            opacity: (number)}}
+ *            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(
+  // fill and/or stroke properties must be defined
-      goog.isDef(this.fillColor) ||
+  var fillDef = goog.isDef(this.fillColor) && goog.isDef(this.fillOpacity);
-      (goog.isDef(this.strokeColor) && goog.isDef(this.strokeWidth)),
+  var strokeDef = goog.isDef(this.strokeColor) &&
-      'Either fillColor or strokeColor and strokeWidth must be set');
+      goog.isDef(this.strokeOpacity) &&
-
+      goog.isDef(this.strokeWidth);
-  goog.asserts.assertNumber(options.opacity, 'opacity must be a number');
+  goog.asserts.assert(fillDef || strokeDef,
-  /** @type {number} */
+      'Either fillColor and fillOpacity or ' +
-  this.opacity = options.opacity;
+      '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.strokeOpacity == polygonLiteral.strokeOpacity &&
-      this.opacity == polygonLiteral.opacity;
+      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) ?
+  this.fillColor_ = fillColor;
-      null :
+
-      (options.fillColor instanceof ol.expr.Expression) ?
+  /**
-          options.fillColor : new ol.expr.Literal(options.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;
+  this.strokeOpacity_ = strokeOpacity;
-
-  // 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');
 
   /**
    * @type {ol.expr.Expression}
    * @private
    */
-  this.opacity_ = !goog.isDef(options.opacity) ?
+  this.strokeWidth_ = strokeWidth;
-      new ol.expr.Literal(ol.style.PolygonDefaults.opacity) :
+
-      (options.opacity instanceof ol.expr.Expression) ?
+  // one of stroke or fill can be null, both null is user error
-          options.opacity : new ol.expr.Literal(options.opacity);
+  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(
+  var fill = goog.isDef(fillColor) && goog.isDef(fillOpacity);
-      goog.isDef(fillColor) ||
+  var stroke = goog.isDef(strokeColor) && goog.isDef(strokeOpacity) &&
-      (goog.isDef(strokeColor) && goog.isDef(strokeWidth)),
+      goog.isDef(strokeWidth);
-      'either fillColor or strokeColor and strokeWidth must be defined');
 
-  var opacity = ol.expr.evaluateFeature(this.opacity_, opt_feature);
+  goog.asserts.assert(fill || stroke,
-  goog.asserts.assertNumber(opacity, 'opacity must be a number');
+      'either fill or stroke properties must be defined');
 
   return new ol.style.PolygonLiteral({
     fillColor: fillColor,
+    fillOpacity: fillOpacity,
     strokeColor: strokeColor,
-    strokeWidth: strokeWidth,
+    strokeOpacity: strokeOpacity,
-    opacity: opacity
+    strokeWidth: strokeWidth
   });
 };
 
@@ -196,11 +268,11 @@ ol.style.Polygon.prototype.getFillColor = function() {
 
 
 /**
- * Get the opacity.
+ * Get the fill opacity.
- * @return {ol.expr.Expression} Opacity.
+ * @return {ol.expr.Expression} Fill opacity.
  */
-ol.style.Polygon.prototype.getOpacity = function() {
+ol.style.Polygon.prototype.getFillOpacity = function() {
-  return this.opacity_;
+  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.
+ * Set the fill opacity.
- * @param {ol.expr.Expression} opacity Opacity.
+ * @param {ol.expr.Expression} fillOpacity Fill opacity.
  */
-ol.style.Polygon.prototype.setOpacity = function(opacity) {
+ol.style.Polygon.prototype.setFillOpacity = function(fillOpacity) {
-  goog.asserts.assertInstanceof(opacity, ol.expr.Expression);
+  goog.asserts.assertInstanceof(fillOpacity, ol.expr.Expression);
-  this.opacity_ = opacity;
+  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,
+  strokeOpacity: 0.8,
-  opacity: 0.75
+  strokeWidth: 1.5
 });

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),
+ *            strokeOpacity: (number|undefined),
- *            opacity: (number)}}
+ *            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(
+  // fill and/or stroke properties must be defined
-      goog.isDef(this.fillColor) ||
+  var fillDef = goog.isDef(this.fillColor) && goog.isDef(this.fillOpacity);
-      (goog.isDef(this.strokeColor) && goog.isDef(this.strokeWidth)),
+  var strokeDef = goog.isDef(this.strokeColor) &&
-      'Either fillColor or strokeColor and strokeWidth must be set');
+      goog.isDef(this.strokeOpacity) &&
-
+      goog.isDef(this.strokeWidth);
-  goog.asserts.assertNumber(options.opacity, 'opacity must be a number');
+  goog.asserts.assert(fillDef || strokeDef,
-  /** @type {number} */
+      'Either fillColor and fillOpacity or ' +
-  this.opacity = options.opacity;
+      '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.strokeOpacity == shapeLiteral.strokeOpacity &&
-      this.opacity == shapeLiteral.opacity;
+      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) ?
+  this.fillColor_ = fillColor;
-      null :
+
-      (options.fillColor instanceof ol.expr.Expression) ?
+  /**
-          options.fillColor : new ol.expr.Literal(options.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;
+  this.strokeOpacity_ = strokeOpacity;
-
-  // 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');
 
   /**
    * @type {ol.expr.Expression}
    * @private
    */
-  this.opacity_ = !goog.isDef(options.opacity) ?
+  this.strokeWidth_ = strokeWidth;
-      new ol.expr.Literal(ol.style.ShapeDefaults.opacity) :
+
-      (options.opacity instanceof ol.expr.Expression) ?
+  // one of stroke or fill can be null, both null is user error
-          options.opacity : new ol.expr.Literal(options.opacity);
+  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(
+  var fill = goog.isDef(fillColor) && goog.isDef(fillOpacity);
-      goog.isDef(fillColor) ||
+  var stroke = goog.isDef(strokeColor) && goog.isDef(strokeOpacity) &&
-      (goog.isDef(strokeColor) && goog.isDef(strokeWidth)),
+      goog.isDef(strokeWidth);
-      'either fillColor or strokeColor and strokeWidth must be defined');
 
-  var opacity = ol.expr.evaluateFeature(this.opacity_, opt_feature);
+  goog.asserts.assert(fill || stroke,
-  goog.asserts.assertNumber(opacity, 'opacity must be a number');
+      '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,
+    strokeOpacity: strokeOpacity,
-    opacity: opacity
+    strokeWidth: strokeWidth
   });
 };
 
@@ -236,11 +306,11 @@ ol.style.Shape.prototype.getFillColor = function() {
 
 
 /**
- * Get the opacity.
+ * Get the fill opacity.
- * @return {ol.expr.Expression} Opacity.
+ * @return {ol.expr.Expression} Fill opacity.
  */
-ol.style.Shape.prototype.getOpacity = function() {
+ol.style.Shape.prototype.getFillOpacity = function() {
-  return this.opacity_;
+  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.
+ * Set the fill opacity.
- * @param {ol.expr.Expression} opacity Opacity.
+ * @param {ol.expr.Expression} fillOpacity Fill opacity.
  */
-ol.style.Shape.prototype.setOpacity = function(opacity) {
+ol.style.Shape.prototype.setFillOpacity = function(fillOpacity) {
-  goog.asserts.assertInstanceof(opacity, ol.expr.Expression);
+  goog.asserts.assertInstanceof(fillOpacity, ol.expr.Expression);
-  this.opacity_ = opacity;
+  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,
+  strokeOpacity: 0.8,
-  opacity: 0.75
+  strokeWidth: 1.5
 });

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() {
+    it('reads PolyStyle fill', function() {
-      var test_style_fill = '<kml xmlns="http://www.opengis.net/kml/2.2">' +
+      var kml = '<kml xmlns="http://www.opengis.net/kml/2.2">' +
           '<Document><Placemark>    <Style> <PolyStyle> <fill>1</fill> ' +
-          '<color>870000ff</color> <width>10</width> </PolyStyle> </Style>' +
+          '<color>870000ff</color></PolyStyle> </Style>' +
           '<Polygon><outerBoundaryIs><LinearRing><coordinates>' +
           '5.001370157823406,49.26855713824488 8.214706453896161,' +
           '49.630662409673505 8.397385910100951,48.45172350357396 ' +
           '5.001370157823406,49.26855713824488</coordinates></LinearRing>' +
           '</outerBoundaryIs></Polygon></Placemark><Placemark>    <Style> ' +
-          '<PolyStyle><fill>0</fill><color>870000ff</color><width>10</width> ' +
+          '<PolyStyle><fill>0</fill><color>870000ff</color>' +
           '</PolyStyle> </Style>' +
           '<Polygon><outerBoundaryIs><LinearRing><coordinates>' +
           '5.001370157823406,49.26855713824488 8.214706453896161,' +
           '49.630662409673505 8.397385910100951,48.45172350357396 ' +
           '5.001370157823406,49.26855713824488</coordinates></LinearRing>' +
           '</outerBoundaryIs></Polygon></Placemark></Document></kml>';
-      var style_fill_write = '<kml xmlns="http://www.opengis.net/kml/2.2" ' +
+      var p = new ol.parser.KML({extractStyles: true});
+      var obj = p.read(kml);
+      var symbolizer1 = obj.features[0].getSymbolizerLiterals()[0];
+      var symbolizer2 = obj.features[1].getSymbolizerLiterals()[0];
+      expect(symbolizer1.strokeColor).to.be('#ff0000');
+      expect(symbolizer2.fillOpacity).to.be(undefined);
+    });
+    it('writes PolyStyle fill and outline', function() {
+      var kml = '<kml xmlns="http://www.opengis.net/kml/2.2" ' +
           'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
           'xsi:schemaLocation="http://www.opengis.net/kml/2.2 ' +
           'http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd"> ' +
-          '<Document><Placemark>    <Style> <PolyStyle> <fill>1</fill> ' +
+          '<Document><Placemark><Style><PolyStyle>' +
-          '<color>870000ff</color> <width>10</width> </PolyStyle> </Style>' +
+          '<fill>1</fill><outline>0</outline>' +
+          '<color>870000ff</color></PolyStyle> </Style>' +
           '<Polygon><outerBoundaryIs><LinearRing><coordinates>' +
           '5.001370157823406,49.26855713824488 8.214706453896161,' +
           '49.630662409673505 8.397385910100951,48.45172350357396 ' +
           '5.001370157823406,49.26855713824488</coordinates></LinearRing>' +
           '</outerBoundaryIs></Polygon></Placemark></Document></kml>';
       var p = new ol.parser.KML({extractStyles: true});
-      var obj = p.read(test_style_fill);
+      var output = p.write(p.read(kml));
-      var output = p.write(p.read(style_fill_write));
+      expect(goog.dom.xml.loadXml(kml)).to.xmleql(
-      expect(goog.dom.xml.loadXml(style_fill_write)).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';

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

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',
+        fillOpacity: 0.3
-        strokeWidth: 3,
-        opacity: 1
       });
-      var differentLiteral = new ol.style.PolygonLiteral({
+      var differentStrokeWidth = new ol.style.PolygonLiteral({
-        fillColor: '#013',
+        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);
       });

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,
+        strokeOpacity: 0.8,
-        opacity: 1
+        strokeWidth: 3
       });
       var equalLiteral = new ol.style.ShapeLiteral({
         type: ol.style.ShapeType.CIRCLE,
         size: 4,
         fillColor: '#BADA55',
+        fillOpacity: 0.9,
         strokeColor: '#013',
-        strokeWidth: 3,
+        strokeOpacity: 0.8,
-        opacity: 1
+        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,
+        strokeOpacity: 0.8,
-        opacity: 1
+        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');