Optionally stroke and fill polygons (closes #475)

This also removes the unsupported width property from PolyStyle (closes #891).

src/ol/parser/kml.js

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

test/spec/ol/parser/kml.test.js

@@ -185,42 +185,46 @@ describe('ol.parser.kml', function() {
       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';