Merge pull request #10613 from mike-000/patch-1

Show KML name labels for Points in MultiGeometry

src/ol/format/KML.js

@@ -918,7 +918,11 @@ 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;
 }
@@ -943,10 +947,20 @@ function createFeatureStyleFunction(style, styleUrl, defaultStyle, sharedStyles,
     function(feature, resolution) {
       let drawName = showPointNames;
       let name = '';
+      let multiGeometryPoints = [];
       if (drawName) {
         const geometry = feature.getGeometry();
         if (geometry) {
-          drawName = geometry.getType() === GeometryType.POINT;
+          const type = geometry.getType();
+          if (type === GeometryType.GEOMETRY_COLLECTION) {
+            multiGeometryPoints = geometry.getGeometriesArray().filter(function(geometry) {
+              const type = geometry.getType();
+              return type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
+            });
+            drawName = multiGeometryPoints.length > 0;
+          } else {
+            drawName = type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
+          }
         }
       }
 
@@ -963,23 +977,31 @@ function createFeatureStyleFunction(style, styleUrl, defaultStyle, sharedStyles,
         }
       }
 
+      let featureStyle = defaultStyle;
       if (style) {
-        if (drawName) {
-          return createNameStyleFunction(style[0], name);
-        }
-        return style;
-      }
-      if (styleUrl) {
-        const foundStyle = findStyle(styleUrl, defaultStyle, sharedStyles);
-        if (drawName) {
-          return createNameStyleFunction(foundStyle[0], name);
-        }
-        return foundStyle;
+        featureStyle = style;
+      } else if (styleUrl) {
+        featureStyle = findStyle(styleUrl, defaultStyle, sharedStyles);
       }
       if (drawName) {
-        return createNameStyleFunction(defaultStyle[0], name);
+        const nameStyle = createNameStyleFunction(featureStyle[0], name);
+        if (multiGeometryPoints.length > 0) {
+          // in multigeometries restrict the name style to points and create a
+          // style without image or text for geometries requiring fill or stroke
+          // including any polygon specific style if there is one
+          nameStyle.setGeometry(new GeometryCollection(multiGeometryPoints));
+          const baseStyle = new Style({
+            geometry: featureStyle[0].getGeometry(),
+            image: null,
+            fill: featureStyle[0].getFill(),
+            stroke: featureStyle[0].getStroke(),
+            text: null
+          });
+          return [nameStyle, baseStyle].concat(featureStyle.slice(1));
+        }
+        return nameStyle;
       }
-      return defaultStyle;
+      return featureStyle;
     }
   );
 }

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

@@ -3476,11 +3476,38 @@ describe('ol.format.KML', function() {
         expect(styleFunction).not.to.be(undefined);
         const styleArray = styleFunction(f, 0);
         expect(styleArray).to.be.an(Array);
+        expect(styleArray).to.have.length(2);
+
         const style = styleArray[0];
         expect(style).to.be.an(Style);
+        const gc = style.getGeometryFunction()(f);
+        expect(gc).to.be.an(GeometryCollection);
+        const gs = gc.getGeometries();
+        expect(gs).to.be.an(Array);
+        expect(gs).to.have.length(1);
+        expect(gs[0]).to.be.an(Point);
+        expect(gs[0].getCoordinates()).to.eql(f.getGeometry().getGeometries()[0].getCoordinates());
         const imageStyle = style.getImage();
         expect(imageStyle).to.be.an(Icon);
+        expect(imageStyle.getScale()).to.eql(0.4);
         expect(imageStyle.getSrc()).to.eql('http://maps.google.com/mapfiles/kml/shapes/star.png');
+        const textStyle = style.getText();
+        expect(textStyle).to.be.an(Text);
+        const textFillStyle = textStyle.getFill();
+        expect(textFillStyle).to.be.an(Fill);
+        expect(textFillStyle.getColor()).to.eql([0xff, 0xff, 0x00, 0x99 / 255]);
+        expect(textStyle.getText()).to.eql(f.get('name'));
+
+        const style1 = styleArray[1];
+        expect(style1).to.be.an(Style);
+        expect(style1.getGeometryFunction()(f)).to.be(f.getGeometry());
+        expect(style1.getFill()).to.be(null);
+        expect(style1.getImage()).to.be(null);
+        const strokeStyle = style1.getStroke();
+        expect(strokeStyle).to.be.an(Stroke);
+        expect(strokeStyle.getColor()).to.eql([0xff, 0x00, 0xff, 0xff / 255]);
+        expect(strokeStyle.getWidth()).to.be(2);
+        expect(style1.getText()).to.be(null);
       });
 
     });