Merge pull request #10822 from lysek/master

parsing color from IconStyle in KML files

src/ol/format/KML.js

@@ -1171,6 +1171,7 @@ function readStyleMapValue(node, objectStack) {
 const ICON_STYLE_PARSERS = makeStructureNS(
   NAMESPACE_URIS, {
     'Icon': makeObjectPropertySetter(readIcon),
+    'color': makeObjectPropertySetter(readColor),
     'heading': makeObjectPropertySetter(readDecimal),
     'hotSpot': makeObjectPropertySetter(readVec2),
     'scale': makeObjectPropertySetter(readScale)
@@ -1252,6 +1253,9 @@ function iconStyleParser(node, objectStack) {
   let scale = /** @type {number|undefined} */
       (object['scale']);
 
+  const color = /** @type {Array<number>|undefined} */
+      (object['color']);
+
   if (drawIcon) {
     if (src == DEFAULT_IMAGE_STYLE_SRC) {
       size = DEFAULT_IMAGE_STYLE_SIZE;
@@ -1271,7 +1275,8 @@ function iconStyleParser(node, objectStack) {
       rotation: rotation,
       scale: scale,
       size: size,
-      src: src
+      src: src,
+      color: color
     });
     styleObject['imageStyle'] = imageStyle;
   } else {
@@ -2447,7 +2452,7 @@ function writeIcon(node, icon, objectStack) {
 // @ts-ignore
 const ICON_STYLE_SEQUENCE = makeStructureNS(
   NAMESPACE_URIS, [
-    'scale', 'heading', 'Icon', 'hotSpot'
+    'scale', 'heading', 'Icon', 'color', 'hotSpot'
   ]);
 
 
@@ -2459,6 +2464,7 @@ const ICON_STYLE_SEQUENCE = makeStructureNS(
 const ICON_STYLE_SERIALIZERS = makeStructureNS(
   NAMESPACE_URIS, {
     'Icon': makeChildAppender(writeIcon),
+    'color': makeChildAppender(writeColorTextNode),
     'heading': makeChildAppender(writeDecimalTextNode),
     'hotSpot': makeChildAppender(writeVec2),
     'scale': makeChildAppender(writeScaleTextNode)
@@ -2514,6 +2520,11 @@ function writeIconStyle(node, style, objectStack) {
     properties['heading'] = rotation; // 0-360
   }
 
+  const color = style.getColor();
+  if (color) {
+    properties['color'] = color;
+  }
+
   const parentNode = objectStack[objectStack.length - 1].node;
   const orderedKeys = ICON_STYLE_SEQUENCE[parentNode.namespaceURI];
   const values = makeSequence(properties, orderedKeys);

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

@@ -1992,6 +1992,37 @@ describe('ol.format.KML', function() {
           expect(style.getZIndex()).to.be(undefined);
         });
 
+        it('can read a feature\'s IconStyle and set color of image', () => {
+          const text =
+            '<kml xmlns="http://earth.google.com/kml/2.2"' +
+            '     xmlns:gx="http://www.google.com/kml/ext/2.2">' +
+            '  <Placemark>' +
+            '    <Style>' +
+            '      <IconStyle>' +
+            '        <color>FF0000FF</color>' +
+            '        <Icon>' +
+            '          <href>http://foo.png</href>' +
+            '        </Icon>' +
+            '      </IconStyle>' +
+            '    </Style>' +
+            '  </Placemark>' +
+            '</kml>';
+          const fs = format.readFeatures(text);
+          expect(fs).to.have.length(1);
+          const f = fs[0];
+          expect(f).to.be.an(Feature);
+          const styleFunction = f.getStyleFunction();
+          const styleArray = styleFunction(f, 0);
+          expect(styleArray).to.be.an(Array);
+          expect(styleArray).to.have.length(1);
+          const style = styleArray[0];
+          expect(style).to.be.an(Style);
+          expect(style.getFill()).to.be(getDefaultFillStyle());
+          expect(style.getStroke()).to.be(getDefaultStrokeStyle());
+          const imageStyle = style.getImage();
+          expect(imageStyle.getColor()).to.eql([0xFF, 0, 0, 0xFF / 255]);
+        });
+
         it('can read a feature\'s LabelStyle', function() {
           const text =
               '<kml xmlns="http://earth.google.com/kml/2.2">' +
@@ -2363,7 +2394,8 @@ describe('ol.format.KML', function() {
               rotation: 45,
               scale: 0.5,
               size: [48, 48],
-              src: 'http://foo.png'
+              src: 'http://foo.png',
+              color: 'rgba(255,0,0,1)'
             })
           });
           const imageStyle = style.getImage();
@@ -2389,6 +2421,7 @@ describe('ol.format.KML', function() {
               '          <gx:w>48</gx:w>' +
               '          <gx:h>48</gx:h>' +
               '        </Icon>' +
+              '        <color>ff0000ff</color>' +
               '        <hotSpot x="12" y="12" xunits="pixels" ' +
               '                 yunits="pixels"/>' +
               '      </IconStyle>' +