Write fill and outline in PolyStyle

Write styles based on style objects appropriate for geometry.
Write fill and outline in PolyStyle if false (i.e. non-default)
Handle MultiLineString, MultiPoint and MultiPolygon within heterogenous MultiGeometry when writing features

Add getGeometriesArrayRecursive method to ol/geom/GeometryCollection to allow for nested MultiGeometry

Enhanced write GeometryCollection geometries test

A more rigorous write GeometryCollection geometries test including nested collections (the output is simplified to a single MultiGeomtry)

Add writeFeatures to outline and fill tests, setting geometry for geometry specific tests

Add <fill>0</fill> and <outline>0</outline> to some existing tests

src/ol/format/KML.js

@@ -918,11 +918,7 @@ function createNameStyleFunction(foundStyle, name) {
 
   const nameStyle = new Style({
     image: imageStyle,
-    text: textStyle,
+    text: textStyle
-    // although nameStyle will be used only for Point geometries
-    // fill and stroke are included to assist writing of MultiGeometry styles
-    fill: foundStyle.getFill(),
-    stroke: foundStyle.getStroke()
   });
   return nameStyle;
 }
@@ -953,7 +949,7 @@ function createFeatureStyleFunction(style, styleUrl, defaultStyle, sharedStyles,
         if (geometry) {
           const type = geometry.getType();
           if (type === GeometryType.GEOMETRY_COLLECTION) {
-            multiGeometryPoints = geometry.getGeometriesArray().filter(function(geometry) {
+            multiGeometryPoints = geometry.getGeometriesArrayRecursive().filter(function(geometry) {
               const type = geometry.getType();
               return type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
             });
@@ -1806,7 +1802,7 @@ function readStyle(node, objectStack) {
           const type = geometry.getType();
           if (type === GeometryType.GEOMETRY_COLLECTION) {
             return new GeometryCollection(
-              geometry.getGeometriesArray().filter(function(geometry) {
+              geometry.getGeometriesArrayRecursive().filter(function(geometry) {
                 const type = geometry.getType();
                 return type !== GeometryType.POLYGON && type !== GeometryType.MULTI_POLYGON;
               })
@@ -1827,7 +1823,7 @@ function readStyle(node, objectStack) {
           const type = geometry.getType();
           if (type === GeometryType.GEOMETRY_COLLECTION) {
             return new GeometryCollection(
-              geometry.getGeometriesArray().filter(function(geometry) {
+              geometry.getGeometriesArrayRecursive().filter(function(geometry) {
                 const type = geometry.getType();
                 return type === GeometryType.POLYGON || type === GeometryType.MULTI_POLYGON;
               })
@@ -2703,20 +2699,35 @@ function writeMultiGeometry(node, geometry, objectStack) {
   const context = {node: node};
   const type = geometry.getType();
   /** @type {Array<import("../geom/Geometry.js").default>} */
-  let geometries;
+  let geometries = [];
   /** @type {function(*, Array<*>, string=): (Node|undefined)} */
   let factory;
-  if (type == GeometryType.GEOMETRY_COLLECTION) {
+  if (type === GeometryType.GEOMETRY_COLLECTION) {
-    geometries = /** @type {GeometryCollection} */ (geometry).getGeometries();
+    /** @type {GeometryCollection} */ (geometry).getGeometriesArrayRecursive().forEach(function(geometry) {
+      const type = geometry.getType();
+      if (type === GeometryType.MULTI_POINT) {
+        geometries = geometries.concat(/** @type {MultiPoint} */ (geometry).getPoints());
+      } else if (type === GeometryType.MULTI_LINE_STRING) {
+        geometries = geometries.concat(/** @type {MultiLineString} */ (geometry).getLineStrings());
+      } else if (type === GeometryType.MULTI_POLYGON) {
+        geometries = geometries.concat(/** @type {MultiPolygon} */ (geometry).getPolygons());
+      } else if (type === GeometryType.POINT
+          || type === GeometryType.LINE_STRING
+          || type === GeometryType.POLYGON) {
+        geometries.push(geometry);
+      } else {
+        assert(false, 39); // Unknown geometry type
+      }
+    });
     factory = GEOMETRY_NODE_FACTORY;
-  } else if (type == GeometryType.MULTI_POINT) {
+  } else if (type === GeometryType.MULTI_POINT) {
     geometries = /** @type {MultiPoint} */ (geometry).getPoints();
     factory = POINT_NODE_FACTORY;
-  } else if (type == GeometryType.MULTI_LINE_STRING) {
+  } else if (type === GeometryType.MULTI_LINE_STRING) {
     geometries =
         (/** @type {MultiLineString} */ (geometry)).getLineStrings();
     factory = LINE_STRING_NODE_FACTORY;
-  } else if (type == GeometryType.MULTI_POLYGON) {
+  } else if (type === GeometryType.MULTI_POLYGON) {
     geometries =
         (/** @type {MultiPolygon} */ (geometry)).getPolygons();
     factory = POLYGON_NODE_FACTORY;
@@ -2831,16 +2842,64 @@ function writePlacemark(node, feature, objectStack) {
     // resolution-independent here
     const styles = styleFunction(feature, 0);
     if (styles) {
-      const style = Array.isArray(styles) ? styles[0] : styles;
+      const styleArray = Array.isArray(styles) ? styles : [styles];
-      if (this.writeStyles_) {
+      let pointStyles = styleArray;
-        properties['Style'] = style;
+      if (feature.getGeometry()) {
+        pointStyles = styleArray.filter(function(style) {
+          const geometry = style.getGeometryFunction()(feature);
+          if (geometry) {
+            const type = geometry.getType();
+            if (type === GeometryType.GEOMETRY_COLLECTION) {
+              return /** @type {GeometryCollection} */ (geometry).getGeometriesArrayRecursive().filter(function(geometry) {
+                const type = geometry.getType();
+                return type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
+              }).length;
             }
-      const textStyle = style.getText();
+            return type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
+          }
+        });
+      }
+      if (this.writeStyles_) {
+        let lineStyles = styleArray;
+        let polyStyles = styleArray;
+        if (feature.getGeometry()) {
+          lineStyles = styleArray.filter(function(style) {
+            const geometry = style.getGeometryFunction()(feature);
+            if (geometry) {
+              const type = geometry.getType();
+              if (type === GeometryType.GEOMETRY_COLLECTION) {
+                return /** @type {GeometryCollection} */ (geometry).getGeometriesArrayRecursive().filter(function(geometry) {
+                  const type = geometry.getType();
+                  return type === GeometryType.LINE_STRING || type === GeometryType.MULTI_LINE_STRING;
+                }).length;
+              }
+              return type === GeometryType.LINE_STRING || type === GeometryType.MULTI_LINE_STRING;
+            }
+          });
+          polyStyles = styleArray.filter(function(style) {
+            const geometry = style.getGeometryFunction()(feature);
+            if (geometry) {
+              const type = geometry.getType();
+              if (type === GeometryType.GEOMETRY_COLLECTION) {
+                return /** @type {GeometryCollection} */ (geometry).getGeometriesArrayRecursive().filter(function(geometry) {
+                  const type = geometry.getType();
+                  return type === GeometryType.POLYGON || type === GeometryType.MULTI_POLYGON;
+                }).length;
+              }
+              return type === GeometryType.POLYGON || type === GeometryType.MULTI_POLYGON;
+            }
+          });
+        }
+        properties['Style'] = {pointStyles: pointStyles, lineStyles: lineStyles, polyStyles: polyStyles};
+      }
+      if (pointStyles.length && properties['name'] === undefined) {
+        const textStyle = pointStyles[0].getText();
         if (textStyle) {
           properties['name'] = textStyle.getText();
         }
       }
     }
+  }
   const parentNode = objectStack[objectStack.length - 1].node;
   const orderedKeys = PLACEMARK_SEQUENCE[parentNode.namespaceURI];
   const values = makeSequence(properties, orderedKeys);
@@ -2913,6 +2972,17 @@ function writePrimitiveGeometry(node, geometry, objectStack) {
 }
 
 
+/**
+ * @const
+ * @type {Object<string, Array<string>>}
+ */
+// @ts-ignore
+const POLY_STYLE_SEQUENCE = makeStructureNS(
+  NAMESPACE_URIS, [
+    'color', 'fill', 'outline'
+  ]);
+
+
 /**
  * @const
  * @type {Object<string, Object<string, import("../xml.js").Serializer>>}
@@ -2972,27 +3042,31 @@ function writePolygon(node, polygon, objectStack) {
 // @ts-ignore
 const POLY_STYLE_SERIALIZERS = makeStructureNS(
   NAMESPACE_URIS, {
-    'color': makeChildAppender(writeColorTextNode)
+    'color': makeChildAppender(writeColorTextNode),
+    'fill': makeChildAppender(writeBooleanTextNode),
+    'outline': makeChildAppender(writeBooleanTextNode)
   });
 
 
-/**
- * A factory for creating coordinates nodes.
- * @const
- * @type {function(*, Array<*>, string=): (Node|undefined)}
- */
-const COLOR_NODE_FACTORY = makeSimpleNodeFactory('color');
-
-
 /**
  * @param {Node} node Node.
- * @param {Fill} style Style.
+ * @param {Style} style Style.
  * @param {Array<*>} objectStack Object stack.
  */
 function writePolyStyle(node, style, objectStack) {
   const /** @type {import("../xml.js").NodeStackItem} */ context = {node: node};
+  const fill = style.getFill();
+  const stroke = style.getStroke();
+  const properties = {
+    'color': fill ? fill.getColor() : undefined,
+    'fill': fill ? undefined : false,
+    'outline': stroke ? undefined : false
+  };
+  const parentNode = objectStack[objectStack.length - 1].node;
+  const orderedKeys = POLY_STYLE_SEQUENCE[parentNode.namespaceURI];
+  const values = makeSequence(properties, orderedKeys);
   pushSerializeAndPop(context, POLY_STYLE_SERIALIZERS,
-    COLOR_NODE_FACTORY, [style.getColor()], objectStack);
+    OBJECT_PROPERTY_NODE_FACTORY, values, objectStack, orderedKeys);
 }
 
 
@@ -3034,27 +3108,34 @@ const STYLE_SERIALIZERS = makeStructureNS(
 
 /**
  * @param {Node} node Node.
- * @param {Style} style Style.
+ * @param {Object<string, Array<Style>>} styles Styles.
  * @param {Array<*>} objectStack Object stack.
  */
-function writeStyle(node, style, objectStack) {
+function writeStyle(node, styles, objectStack) {
   const /** @type {import("../xml.js").NodeStackItem} */ context = {node: node};
   const properties = {};
-  const fillStyle = style.getFill();
+  if (styles.pointStyles.length) {
-  const strokeStyle = style.getStroke();
+    const textStyle = styles.pointStyles[0].getText();
-  const imageStyle = style.getImage();
-  const textStyle = style.getText();
-  if (imageStyle && typeof /** @type {?} */ (imageStyle).getSrc === 'function') {
-    properties['IconStyle'] = imageStyle;
-  }
     if (textStyle) {
       properties['LabelStyle'] = textStyle;
     }
+    const imageStyle = styles.pointStyles[0].getImage();
+    if (imageStyle && typeof /** @type {?} */ (imageStyle).getSrc === 'function') {
+      properties['IconStyle'] = imageStyle;
+    }
+  }
+  if (styles.lineStyles.length) {
+    const strokeStyle = styles.lineStyles[0].getStroke();
     if (strokeStyle) {
       properties['LineStyle'] = strokeStyle;
     }
-  if (fillStyle) {
+  }
-    properties['PolyStyle'] = fillStyle;
+  if (styles.polyStyles.length) {
+    const strokeStyle = styles.polyStyles[0].getStroke();
+    if (strokeStyle && !properties['LineStyle']) {
+      properties['LineStyle'] = strokeStyle;
+    }
+    properties['PolyStyle'] = styles.polyStyles[0];
   }
   const parentNode = objectStack[objectStack.length - 1].node;
   const orderedKeys = STYLE_SEQUENCE[parentNode.namespaceURI];

src/ol/geom/GeometryCollection.js

@@ -126,6 +126,23 @@ class GeometryCollection extends Geometry {
     return this.geometries_;
   }
 
+  /**
+   * @return {Array<Geometry>} Geometries.
+   */
+  getGeometriesArrayRecursive() {
+    /** @type {Array<Geometry>} */
+    let geometriesArray = [];
+    const geometries = this.geometries_;
+    for (let i = 0, ii = geometries.length; i < ii; ++i) {
+      if (geometries[i].getType() === this.getType()) {
+        geometriesArray = geometriesArray.concat(/** @type {GeometryCollection} */ (geometries[i]).getGeometriesArrayRecursive());
+      } else {
+        geometriesArray.push(geometries[i]);
+      }
+    }
+    return geometriesArray;
+  }
+
   /**
    * @inheritDoc
    */

test/spec/ol/format/kml.test.js

@@ -1207,9 +1207,16 @@ describe('ol.format.KML', function() {
 
         it('can write GeometryCollection geometries', function() {
           const collection = new GeometryCollection([
+            new GeometryCollection([
               new Point([1, 2]),
               new LineString([[1, 2], [3, 4]]),
               new Polygon([[[1, 2], [3, 4], [3, 2], [1, 2]]])
+            ]),
+            new GeometryCollection([
+              new MultiPoint([[5, 6], [9, 10]]),
+              new MultiLineString([[[5, 6], [7, 8]], [[9, 10], [11, 12]]]),
+              new MultiPolygon([[[[5, 6], [7, 8], [7, 6], [5, 6]]], [[[9, 10], [11, 12], [11, 10], [9, 10]]]])
+            ])
           ]);
           const features = [new Feature(collection)];
           const node = format.writeFeaturesNode(features);
@@ -1234,6 +1241,32 @@ describe('ol.format.KML', function() {
               '          </LinearRing>' +
               '        </outerBoundaryIs>' +
               '      </Polygon>' +
+              '      <Point>' +
+              '        <coordinates>5,6</coordinates>' +
+              '      </Point>' +
+              '      <Point>' +
+              '        <coordinates>9,10</coordinates>' +
+              '      </Point>' +
+              '      <LineString>' +
+              '        <coordinates>5,6 7,8</coordinates>' +
+              '      </LineString>' +
+              '      <LineString>' +
+              '        <coordinates>9,10 11,12</coordinates>' +
+              '      </LineString>' +
+              '      <Polygon>' +
+              '        <outerBoundaryIs>' +
+              '          <LinearRing>' +
+              '            <coordinates>5,6 7,8 7,6 5,6</coordinates>' +
+              '          </LinearRing>' +
+              '        </outerBoundaryIs>' +
+              '      </Polygon>' +
+              '      <Polygon>' +
+              '        <outerBoundaryIs>' +
+              '          <LinearRing>' +
+              '            <coordinates>9,10 11,12 11,10 9,10</coordinates>' +
+              '          </LinearRing>' +
+              '        </outerBoundaryIs>' +
+              '      </Polygon>' +
               '    </MultiGeometry>' +
               '  </Placemark>' +
               '</kml>';
@@ -1621,6 +1654,9 @@ describe('ol.format.KML', function() {
               '        <color>ff332211</color>' +
               '        <width>2</width>' +
               '      </LineStyle>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '      </PolyStyle>' +
               '    </Style>' +
               '    <ExtendedData>' +
               '      <Data name="foo"/>' +
@@ -2164,6 +2200,43 @@ describe('ol.format.KML', function() {
           expect(strokeStyle.getWidth()).to.be(9);
           expect(style.getText()).to.be(getDefaultTextStyle());
           expect(style.getZIndex()).to.be(undefined);
+
+          const lineString = new LineString([[1, 2], [3, 4]]);
+          const polygon = new Polygon([[[0, 0], [0, 2], [2, 2], [2, 0], [0, 0]]]);
+          const collection = new GeometryCollection([lineString, polygon]);
+          f.setGeometry(collection);
+          const node = format.writeFeaturesNode(fs);
+          const text1 =
+              '<kml xmlns="http://www.opengis.net/kml/2.2"' +
+              ' xmlns:gx="http://www.google.com/kml/ext/2.2"' +
+              ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
+              ' xsi:schemaLocation="http://www.opengis.net/kml/2.2' +
+              ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
+              '  <Placemark>' +
+              '    <Style>' +
+              '      <LineStyle>' +
+              '        <color>12345678</color>' +
+              '        <width>9</width>' +
+              '      </LineStyle>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '      </PolyStyle>' +
+              '    </Style>' +
+              '    <MultiGeometry>' +
+              '      <LineString>' +
+              '        <coordinates>1,2 3,4</coordinates>' +
+              '      </LineString>' +
+              '      <Polygon>' +
+              '        <outerBoundaryIs>' +
+              '          <LinearRing>' +
+              '            <coordinates>0,0 0,2 2,2 2,0 0,0</coordinates>' +
+              '          </LinearRing>' +
+              '        </outerBoundaryIs>' +
+              '      </Polygon>' +
+              '    </MultiGeometry>' +
+              '  </Placemark>' +
+              '</kml>';
+          expect(node).to.xmleql(parse(text1));
         });
 
         it('disables the stroke when outline is \'0\'', function() {
@@ -2233,6 +2306,41 @@ describe('ol.format.KML', function() {
           expect(style1.getFill()).to.be(fillStyle);
           expect(style1.getStroke()).to.be(null);
           expect(style1.getZIndex()).to.be(undefined);
+
+          f.setGeometry(collectionFeature.getGeometry());
+          const node = format.writeFeaturesNode(fs);
+          const text1 =
+              '<kml xmlns="http://www.opengis.net/kml/2.2"' +
+              ' xmlns:gx="http://www.google.com/kml/ext/2.2"' +
+              ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
+              ' xsi:schemaLocation="http://www.opengis.net/kml/2.2' +
+              ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
+              '  <Placemark>' +
+              '    <Style>' +
+              '      <LineStyle>' +
+              '        <color>12345678</color>' +
+              '        <width>9</width>' +
+              '      </LineStyle>' +
+              '      <PolyStyle>' +
+              '        <color>12345678</color>' +
+              '        <outline>0</outline>' +
+              '      </PolyStyle>' +
+              '    </Style>' +
+              '    <MultiGeometry>' +
+              '      <LineString>' +
+              '        <coordinates>1,2 3,4</coordinates>' +
+              '      </LineString>' +
+              '      <Polygon>' +
+              '        <outerBoundaryIs>' +
+              '          <LinearRing>' +
+              '            <coordinates>0,0 0,2 2,2 2,0 0,0</coordinates>' +
+              '          </LinearRing>' +
+              '        </outerBoundaryIs>' +
+              '      </Polygon>' +
+              '    </MultiGeometry>' +
+              '  </Placemark>' +
+              '</kml>';
+          expect(node).to.xmleql(parse(text1));
         });
 
         it('disables both fill and stroke when fill and outline are \'0\'',
@@ -2302,6 +2410,41 @@ describe('ol.format.KML', function() {
             expect(style1.getFill()).to.be(null);
             expect(style1.getStroke()).to.be(null);
             expect(style1.getZIndex()).to.be(undefined);
+
+            f.setGeometry(collectionFeature.getGeometry());
+            const node = format.writeFeaturesNode(fs);
+            const text1 =
+                  '<kml xmlns="http://www.opengis.net/kml/2.2"' +
+                  ' xmlns:gx="http://www.google.com/kml/ext/2.2"' +
+                  ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
+                  ' xsi:schemaLocation="http://www.opengis.net/kml/2.2' +
+                  ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
+                  '  <Placemark>' +
+                  '    <Style>' +
+                  '      <LineStyle>' +
+                  '        <color>12345678</color>' +
+                  '        <width>9</width>' +
+                  '      </LineStyle>' +
+                  '      <PolyStyle>' +
+                  '        <fill>0</fill>' +
+                  '        <outline>0</outline>' +
+                  '      </PolyStyle>' +
+                  '    </Style>' +
+                  '    <MultiGeometry>' +
+                  '      <LineString>' +
+                  '        <coordinates>1,2 3,4</coordinates>' +
+                  '      </LineString>' +
+                  '      <Polygon>' +
+                  '        <outerBoundaryIs>' +
+                  '          <LinearRing>' +
+                  '            <coordinates>0,0 0,2 2,2 2,0 0,0</coordinates>' +
+                  '          </LinearRing>' +
+                  '        </outerBoundaryIs>' +
+                  '      </Polygon>' +
+                  '    </MultiGeometry>' +
+                  '  </Placemark>' +
+                  '</kml>';
+            expect(node).to.xmleql(parse(text1));
           });
 
         it('can create text style for named point placemarks (including html character codes)', function() {
@@ -2392,6 +2535,10 @@ describe('ol.format.KML', function() {
               '        <hotSpot x="12" y="12" xunits="pixels" ' +
               '                 yunits="pixels"/>' +
               '      </IconStyle>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '        <outline>0</outline>' +
+              '      </PolyStyle>' +
               '    </Style>' +
               '  </Placemark>' +
               '</kml>';
@@ -2440,6 +2587,10 @@ describe('ol.format.KML', function() {
               ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
               '  <Placemark>' +
               '    <Style>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '        <outline>0</outline>' +
+              '      </PolyStyle>' +
               '    </Style>' +
               '  </Placemark>' +
               '</kml>';
@@ -2472,13 +2623,17 @@ describe('ol.format.KML', function() {
               '        <color>ffdf220c</color>' +
               '        <scale>0.5</scale>' +
               '      </LabelStyle>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '        <outline>0</outline>' +
+              '      </PolyStyle>' +
               '    </Style>' +
               '  </Placemark>' +
               '</kml>';
           expect(node).to.xmleql(parse(text));
         });
 
-        it('can write an feature\'s stroke style', function() {
+        it('can write an feature\'s stroke style without fill', function() {
           const style = new Style({
             stroke: new Stroke({
               color: '#112233',
@@ -2500,13 +2655,16 @@ describe('ol.format.KML', function() {
               '        <color>ff332211</color>' +
               '        <width>2</width>' +
               '      </LineStyle>' +
+              '      <PolyStyle>' +
+              '        <fill>0</fill>' +
+              '      </PolyStyle>' +
               '    </Style>' +
               '  </Placemark>' +
               '</kml>';
           expect(node).to.xmleql(parse(text));
         });
 
-        it('can write an feature\'s fill style', function() {
+        it('can write an feature\'s fill style without outline', function() {
           const style = new Style({
             fill: new Fill({
               color: 'rgba(12, 34, 223, 0.7)'
@@ -2525,6 +2683,41 @@ describe('ol.format.KML', function() {
               '    <Style>' +
               '      <PolyStyle>' +
               '        <color>b2df220c</color>' +
+              '        <outline>0</outline>' +
+              '      </PolyStyle>' +
+              '    </Style>' +
+              '  </Placemark>' +
+              '</kml>';
+          expect(node).to.xmleql(parse(text));
+        });
+
+        it('can write an feature\'s fill style and outline', function() {
+          const style = new Style({
+            fill: new Fill({
+              color: 'rgba(12, 34, 223, 0.7)'
+            }),
+            stroke: new Stroke({
+              color: '#112233',
+              width: 2
+            })
+          });
+          const feature = new Feature();
+          feature.setStyle([style]);
+          const node = format.writeFeaturesNode([feature]);
+          const text =
+              '<kml xmlns="http://www.opengis.net/kml/2.2"' +
+              ' xmlns:gx="http://www.google.com/kml/ext/2.2"' +
+              ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
+              ' xsi:schemaLocation="http://www.opengis.net/kml/2.2' +
+              ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
+              '  <Placemark>' +
+              '    <Style>' +
+              '      <LineStyle>' +
+              '        <color>ff332211</color>' +
+              '        <width>2</width>' +
+              '      </LineStyle>' +
+              '      <PolyStyle>' +
+              '        <color>b2df220c</color>' +
               '      </PolyStyle>' +
               '    </Style>' +
               '  </Placemark>' +
@@ -2554,6 +2747,7 @@ describe('ol.format.KML', function() {
               '      <Style>' +
               '        <PolyStyle>' +
               '          <color>b2df220c</color>' +
+              '          <outline>0</outline>' +
               '        </PolyStyle>' +
               '      </Style>' +
               '    </Placemark>' +
@@ -2561,6 +2755,7 @@ describe('ol.format.KML', function() {
               '      <Style>' +
               '        <PolyStyle>' +
               '          <color>b2df220c</color>' +
+              '          <outline>0</outline>' +
               '        </PolyStyle>' +
               '      </Style>' +
               '    </Placemark>' +