diff --git a/src/ol/parser/kml.js b/src/ol/parser/kml.js index ba2025e3fc..7242762bea 100644 --- a/src/ol/parser/kml.js +++ b/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 = {}; - this.readChildNodes(node, symbolizer); - if (symbolizer.color) { - symbolizer.fillColor = symbolizer.color.color; + var style = {}; // from KML + var symbolizer = {}; // for ol.style.Polygon + this.readChildNodes(node, style); + // check if poly has fill + if (!(style.fill === '0' || style.fill === 'false')) { + if (style.color) { + symbolizer.fillColor = style.color.color; + symbolizer.fillOpacity = style.color.opacity; + } else { + // KML defaults + symbolizer.fillColor = '#ffffff'; + symbolizer.fillOpacity = 1; + } } - if (symbolizer.fill === '0' || symbolizer.fill === 'false') { - // TODO we need a better way in the symbolizer to disable fill - // now we are using opacity for this, but it's a workaround - // see also: https://github.com/openlayers/ol3/issues/475 - symbolizer.opacity = 0; - } else { - symbolizer.opacity = symbolizer.color.opacity; + // check if poly has stroke + if (!(style.outline === '0' || style.outline === 'false')) { + if (style.color) { + symbolizer.strokeColor = style.color.color; + symbolizer.strokeOpacity = style.color.opacity; + } else { + // KML defaults + symbolizer.strokeColor = '#ffffff'; + symbolizer.strokeOpacity = 1; + } } - if (symbolizer.width) { - symbolizer.strokeWidth = parseFloat(symbolizer.width); - } - // outline disabled - if (symbolizer.outline === '0' || symbolizer.outline === 'false') { - symbolizer.strokeWidth = 0; - } - delete symbolizer.outline; - delete symbolizer.width; - delete symbolizer.color; - delete symbolizer.fill; obj['ids'].push(node.getAttribute('id')); obj['symbolizers'].push(new ol.style.Polygon(symbolizer)); }, @@ -623,6 +624,11 @@ ol.parser.KML = function(opt_options) { } }, 'PolyStyle': function(symbolizerObj) { + /** + * There is not a 1:1 mapping between KML PolyStyle and + * ol.style.Polygon. In KML, if a PolyStyle has 1 + * then the "current" LineStyle is used to stroke the polygon. + */ var node = this.createElementNS('PolyStyle'); if (symbolizerObj.id) { this.setAttributeNS(node, null, 'id', symbolizerObj.id); @@ -630,16 +636,27 @@ ol.parser.KML = function(opt_options) { var symbolizer = symbolizerObj.symbolizer; var literal = symbolizer instanceof ol.style.PolygonLiteral ? symbolizer : symbolizer.createLiteral(); - if (literal.opacity !== 0) { + var color, opacity; + if (literal.fillOpacity !== 0) { this.writeNode('fill', '1', null, node); + color = literal.fillColor; + opacity = literal.fillOpacity; } else { this.writeNode('fill', '0', null, node); } - this.writeNode('color', { - color: literal.fillColor.substring(1), - opacity: literal.opacity - }, null, node); - this.writeNode('width', literal.strokeWidth, null, node); + if (literal.strokeOpacity) { + this.writeNode('outline', '1', null, node); + color = color || literal.strokeColor; + opacity = opacity || literal.strokeOpacity; + } else { + this.writeNode('outline', '0', null, node); + } + if (color && opacity) { + this.writeNode('color', { + color: color.substring(1), + opacity: opacity + }, null, node); + } return node; }, 'fill': function(fill) { @@ -647,6 +664,11 @@ ol.parser.KML = function(opt_options) { node.appendChild(this.createTextNode(fill)); return node; }, + 'outline': function(outline) { + var node = this.createElementNS('outline'); + node.appendChild(this.createTextNode(outline)); + return node; + }, 'LineStyle': function(symbolizerObj) { var node = this.createElementNS('LineStyle'); if (symbolizerObj.id) { diff --git a/test/spec/ol/parser/kml.test.js b/test/spec/ol/parser/kml.test.js index d4d310c741..694e222a86 100644 --- a/test/spec/ol/parser/kml.test.js +++ b/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() { - var test_style_fill = '' + + it('reads PolyStyle fill', function() { + var kml = '' + ' ' + + '870000ff ' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ' ' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ''; - var style_fill_write = ' ' + - ' ' + + '' + '' + '5.001370157823406,49.26855713824488 8.214706453896161,' + '49.630662409673505 8.397385910100951,48.45172350357396 ' + '5.001370157823406,49.26855713824488' + ''; var p = new ol.parser.KML({extractStyles: true}); - var obj = p.read(test_style_fill); - var output = p.write(p.read(style_fill_write)); - expect(goog.dom.xml.loadXml(style_fill_write)).to.xmleql( + var output = p.write(p.read(kml)); + expect(goog.dom.xml.loadXml(kml)).to.xmleql( goog.dom.xml.loadXml(output)); - var symbolizer1 = obj.features[0].getSymbolizerLiterals()[0]; - var symbolizer2 = obj.features[1].getSymbolizerLiterals()[0]; - expect(symbolizer1.fillColor).to.eql('#ff0000'); - expect(symbolizer2.opacity).to.eql(0); }); it('Test iconStyle (read / write)', function(done) { var url = 'spec/ol/parser/kml/iconstyle.kml';