react-spatial 2.0.0-beta.1 → 2.0.0-beta.3

package/utils/KML.js

@@ -1,289 +1,263 @@
-import KML from 'ol/format/KML';
-import { Feature } from 'ol';
-import Point from 'ol/geom/Point';
-import MultiPoint from 'ol/geom/MultiPoint';
-import GeometryCollection from 'ol/geom/GeometryCollection';
-import { Style, Text, Icon, Circle, Fill, Stroke } from 'ol/style';
-import { asString } from 'ol/color';
-import { parse } from 'ol/xml';
-import { kmlStyle } from './Styles';
-import getPolygonPattern from './getPolygonPattern';
-
-var applyTextStyleForIcon = function (olIcon, olText) {
-  var size = olIcon.getSize() || [48, 48];
-  var scale = olIcon.getScale() || 1;
-  var anchor = olIcon.getAnchor() || [
-    (size[0] * scale) / 2,
-    (size[1] * scale) / 2 ];
-  var offset = [
+import { Feature, getUid } from "ol";
+import { asString } from "ol/color";
+import KML from "ol/format/KML";
+import CircleGeom from "ol/geom/Circle";
+import GeometryCollection from "ol/geom/GeometryCollection";
+import MultiPoint from "ol/geom/MultiPoint";
+import Point from "ol/geom/Point";
+import { fromCircle } from "ol/geom/Polygon";
+import { get, transform } from "ol/proj";
+import { Circle, Fill, Icon, Stroke, Style, Text } from "ol/style";
+import { parse } from "ol/xml";
+import getPolygonPattern from "./getPolygonPattern";
+import { kmlStyle } from "./Styles";
+const CIRCLE_GEOMETRY_CENTER = "circleGeometryCenter";
+const CIRCLE_GEOMETRY_RADIUS = "circleGeometryRadius";
+const EPSG_4326 = get("EPSG:4326");
+const scaleForSize = (size) => {
+  return 32 / Math.min(size[0], size[1]);
+};
+const applyTextStyleForIcon = (olIcon, olText) => {
+  const size = olIcon.getSize() || [48, 48];
+  const scale = olIcon.getScale() || 1;
+  const anchor = olIcon.getAnchor() || [
+    size[0] * scale / 2,
+    size[1] * scale / 2
+  ];
+  const offset = [
     scale * (size[0] - anchor[0]) + 5,
-    scale * (size[1] / 2 - anchor[1]) ];
+    scale * (size[1] / 2 - anchor[1])
+  ];
   olText.setOffsetX(offset[0]);
   olText.setOffsetY(offset[1]);
-  olText.setTextAlign('left');
+  olText.setTextAlign("left");
 };
-
-var getVertexCoord = function (geom, start, index) {
-  if ( start === void 0 ) start = true;
-  if ( index === void 0 ) index = 0;
-
-  var coords = geom.getCoordinates();
-  var len = coords.length - 1;
+const getVertexCoord = (geom, start = true, index = 0) => {
+  const coords = geom.getCoordinates();
+  const len = coords.length - 1;
   return start ? coords[index] : coords[len - index];
 };
-
-var getLineIcon = function (feature, icon, color, start) {
-  if ( start === void 0 ) start = true;
-
-  var geom = feature.getGeometry();
-  var coordA = getVertexCoord(geom, start, 1);
-  var coordB = getVertexCoord(geom, start);
-  var dx = start ? coordA[0] - coordB[0] : coordB[0] - coordA[0];
-  var dy = start ? coordA[1] - coordB[1] : coordB[1] - coordA[1];
-  var rotation = Math.atan2(dy, dx);
-
+const getLineIcon = (feature, icon, color, start = true) => {
+  const geom = feature.getGeometry();
+  const coordA = getVertexCoord(geom, start, 1);
+  const coordB = getVertexCoord(geom, start);
+  const dx = start ? coordA[0] - coordB[0] : coordB[0] - coordA[0];
+  const dy = start ? coordA[1] - coordB[1] : coordB[1] - coordA[1];
+  const rotation = Math.atan2(dy, dx);
   return new Style({
-    geometry: function (feat) {
-      var ge = feat.getGeometry();
+    geometry: (feat) => {
+      const ge = feat.getGeometry();
       return new Point(getVertexCoord(ge, start));
     },
     image: new Icon({
-      src: icon.url,
-      color: color,
-      rotation: -rotation,
+      color,
       rotateWithView: true,
+      rotation: -rotation,
       scale: icon.scale,
-      imgSize: icon.size, // ie 11
+      size: icon.size,
+      // ie 11
+      src: icon.url
     }),
-    zIndex: icon.zIndex,
+    zIndex: icon.zIndex
   });
 };
-
-// Clean the unneeded feature's style and properties created by the KML parser.
-var sanitizeFeature = function (feature) {
-  var geom = feature.getGeometry();
-  var styles = feature.getStyleFunction();
-
-  // Store maxZoom in properties
-  if (feature.get('maxZoom')) {
-    feature.set('maxZoom', parseFloat(feature.get('maxZoom'), 10));
+const sanitizeFeature = (feature, doNotRevert32pxScaling = false) => {
+  const geom = feature.getGeometry();
+  let styles = feature.getStyleFunction();
+  if (feature.get("maxZoom")) {
+    feature.set("maxZoom", parseFloat(feature.get("maxZoom"), 10));
   }
-
-  // Store minZoom in properties
-  if (feature.get('minZoom')) {
-    feature.set('minZoom', parseFloat(feature.get('minZoom'), 10));
+  if (feature.get("minZoom")) {
+    feature.set("minZoom", parseFloat(feature.get("minZoom"), 10));
   }
-
-  // The use of clone is part of the scale fix line 156
-  var tmpStyles = styles(feature);
-  var style = (Array.isArray(tmpStyles) ? tmpStyles[0] : tmpStyles).clone();
-
-  var stroke = style.getStroke();
-  if (stroke && feature.get('lineDash')) {
-    stroke.setLineDash(
-      feature
-        .get('lineDash')
-        .split(',')
-        .map(function (l) {
-          return parseInt(l, 10);
-        })
+  const tmpStyles = styles(feature);
+  const style = (Array.isArray(tmpStyles) ? tmpStyles[0] : tmpStyles).clone();
+  let stroke = style.getStroke();
+  if (feature.get("lineCap")) {
+    stroke?.setLineCap(feature.get("lineCap"));
+  }
+  if (feature.get("lineJoin")) {
+    stroke?.setLineJoin(feature.get("lineJoin"));
+  }
+  if (feature.get("lineDash")) {
+    stroke?.setLineDash(
+      feature.get("lineDash").split(",").map((l) => {
+        return parseInt(l, 10);
+      })
     );
   }
-
-  // The canvas draws a stroke width=1 by default if width=0, so we
-  // remove the stroke style in that case.
+  if (feature.get("lineDashOffset")) {
+    stroke?.setLineDashOffset(parseInt(feature.get("lineDashOffset"), 10));
+  }
+  if (feature.get("miterLimit")) {
+    stroke?.setMiterLimit(parseInt(feature.get("miterLimit"), 10));
+  }
   if (stroke && stroke.getWidth() === 0) {
-    stroke = undefined;
+    stroke = void 0;
   }
-
-  if (feature.get('zIndex')) {
-    style.setZIndex(parseInt(feature.get('zIndex'), 10));
+  if (feature.get("zIndex")) {
+    style.setZIndex(parseInt(feature.get("zIndex"), 10));
   }
-
-  // if the feature is a Point and we are offline, we use default vector
-  // style.
-  // if the feature is a Point and has a name with a text style, we
-  // create a correct text style.
-  // TODO Handle GeometryCollection displaying name on the first Point
-  // geometry.
   if (style && (geom instanceof Point || geom instanceof MultiPoint)) {
-    var image = style.getImage();
-    var text = null;
-    var fill = style.getFill();
-
-    // If the feature has name we display it on the map as Google does
-    if (
-      feature.get('name') &&
-      style.getText() &&
-      style.getText().getScale() !== 0
-    ) {
+    let image = style.getImage();
+    let text = null;
+    let fill = style.getFill();
+    if (feature.get("name") && style.getText() && style.getText().getScale() !== 0) {
       if (image && image.getScale() === 0) {
-        // transparentCircle is used to allow selection
         image = new Circle({
-          radius: 1,
           fill: new Fill({ color: [0, 0, 0, 0] }),
-          stroke: new Stroke({ color: [0, 0, 0, 0] }),
+          radius: 1,
+          stroke: new Stroke({ color: [0, 0, 0, 0] })
         });
       }
-
-      // We replace empty white spaces used to keep normal spaces before and after the name.
-      var name = feature.get('name');
+      let name = feature.get("name");
       if (/\u200B/g.test(name)) {
-        name = name.replace(/\u200B/g, '');
-        feature.set('name', name);
+        name = name.replace(/\u200B/g, "");
+        feature.set("name", name);
+      }
+      const font = feature.get("textFont") || "normal 16px Helvetica";
+      if (/\n/.test(name)) {
+        const array = [];
+        const split = name.split("\n");
+        split.forEach((txt, idx) => {
+          array.push(txt || "\u200B", txt ? font : "");
+          if (idx < split.length - 1) {
+            array.push("\n", "");
+          }
+        });
+        name = array;
+      } else {
+        name = [name, font];
       }
-
       text = new Text({
-        font: feature.get('textFont') || 'normal 16px Helvetica',
-        text: feature.get('name'),
         fill: style.getText().getFill(),
+        font: font.replace(/bold/g, "normal"),
+        // We manage bold in textArray
         // rotation unsupported by KML, taken instead from custom field.
-        rotation: feature.get('textRotation') || 0,
+        rotation: feature.get("textRotation") || 0,
+        // stroke: style.getText().getStroke(),
+        scale: style.getText().getScale(),
         // since ol 6.3.1 : https://github.com/openlayers/openlayers/pull/10613/files#diff-1883da8b57e690db7ea0c35ce53c880aR925
         // a default textstroke is added to mimic google earth.
         // it was not the case before, the stroke was always null. So to keep
         // the same behavior we don't copy the stroke style.
         // TODO : maybe we should use this functionnality in the futur.
-        // stroke: style.getText().getStroke(),
-        scale: style.getText().getScale(),
+        text: name
       });
-
-      if (feature.get('textStrokeColor') && feature.get('textStrokeWidth')) {
+      if (feature.get("textArray")) {
+        try {
+          const textArray = JSON.parse(feature.get("textArray"));
+          text.setText(textArray);
+        } catch (err) {
+          console.error(
+            "Error parsing textArray",
+            feature.get("textArray"),
+            err
+          );
+        }
+      }
+      if (feature.get("textStrokeColor") && feature.get("textStrokeWidth")) {
         text.setStroke(
           new Stroke({
-            color: feature.get('textStrokeColor'),
-            width: parseFloat(feature.get('textStrokeWidth')),
+            color: feature.get("textStrokeColor"),
+            width: parseFloat(feature.get("textStrokeWidth"))
           })
         );
       }
-
-      if (feature.get('textAlign')) {
-        text.setTextAlign(feature.get('textAlign'));
+      if (feature.get("textAlign")) {
+        text.setTextAlign(feature.get("textAlign"));
       }
-
-      if (feature.get('textOffsetX')) {
-        text.setOffsetX(parseFloat(feature.get('textOffsetX')));
+      if (feature.get("textOffsetX")) {
+        text.setOffsetX(parseFloat(feature.get("textOffsetX")));
       }
-
-      if (feature.get('textOffsetY')) {
-        text.setOffsetY(parseFloat(feature.get('textOffsetY')));
+      if (feature.get("textOffsetY")) {
+        text.setOffsetY(parseFloat(feature.get("textOffsetY")));
       }
-
-      if (feature.get('textBackgroundFillColor')) {
+      if (feature.get("textBackgroundFillColor")) {
         text.setBackgroundFill(
           new Fill({
-            color: feature.get('textBackgroundFillColor'),
+            color: feature.get("textBackgroundFillColor")
           })
         );
       }
-
-      if (feature.get('textPadding')) {
+      if (feature.get("textPadding")) {
         text.setPadding(
-          feature
-            .get('textPadding')
-            .split(',')
-            .map(function (n) {
-              return parseFloat(n);
-            })
+          feature.get("textPadding").split(",").map((n) => {
+            return parseFloat(n);
+          })
         );
       }
-
       if (image instanceof Icon) {
         applyTextStyleForIcon(image, text);
       }
     }
-
     if (image instanceof Icon) {
-      /* Apply icon rotation if defined (by default only written as
-       * <heading> tag, which is not read as rotation value by the ol KML module)
-       */
-      image.setRotation(parseFloat(feature.get('iconRotation')) || 0);
-    }
-
-    fill = undefined;
-    stroke = undefined;
-
-    styles = function (feat, resolution) {
-      /* Options to be used for picture scaling with map, should have at least
-       * a resolution attribute (this is the map resolution at the zoom level when
-       * the picture is created), can take an optional constant for further scale
-       * adjustment.
-       * e.g. { resolution: 0.123, defaultScale: 1 / 6 }
-       */
-
-      if (feat.get('pictureOptions')) {
-        var pictureOptions = feat.get('pictureOptions');
-        if (typeof pictureOptions === 'string') {
+      image.setRotation(parseFloat(feature.get("iconRotation")) || 0);
+      if (feature.get("iconScale")) {
+        image.setScale(parseFloat(feature.get("iconScale")) || 0);
+      } else if (!doNotRevert32pxScaling && image.getSize()) {
+        const resizeScale = scaleForSize(image.getSize());
+        image.setScale(image.getScaleArray()[0] / resizeScale);
+      }
+    }
+    fill = void 0;
+    stroke = void 0;
+    styles = (feat, resolution) => {
+      if (feat.get("pictureOptions")) {
+        let pictureOptions = feat.get("pictureOptions");
+        if (typeof pictureOptions === "string") {
           pictureOptions = JSON.parse(pictureOptions);
         }
-        feat.set('pictureOptions', pictureOptions);
+        feat.set("pictureOptions", pictureOptions);
         if (pictureOptions.resolution) {
           image.setScale(
-            (pictureOptions.resolution / resolution) *
-              pictureOptions.defaultScale || 1
+            pictureOptions.resolution / resolution * pictureOptions.defaultScale || 1
           );
         }
       }
-
       return new Style({
-        fill: fill,
-        stroke: stroke,
-        image: image,
-        text: text,
-        zIndex: style.getZIndex(),
+        fill,
+        image,
+        stroke,
+        text,
+        zIndex: style.getZIndex()
       });
     };
   }
-
-  // Remove image and text styles for polygons and lines
-  if (
-    !(
-      geom instanceof Point ||
-      geom instanceof MultiPoint ||
-      geom instanceof GeometryCollection
-    )
-  ) {
+  if (!(geom instanceof Point || geom instanceof MultiPoint || geom instanceof GeometryCollection)) {
     styles = [
       new Style({
         fill: style.getFill(),
-        stroke: stroke,
         image: null,
+        stroke,
         text: null,
-        zIndex: style.getZIndex(),
-      }) ];
-
-    // Parse the fillPattern json string and store parsed object
-    var fillPattern = feature.get('fillPattern');
+        zIndex: style.getZIndex()
+      })
+    ];
+    let fillPattern = feature.get("fillPattern");
     if (fillPattern) {
       fillPattern = JSON.parse(fillPattern);
-      feature.set('fillPattern', fillPattern);
-
-      /* We set the fill pattern for polygons */
+      feature.set("fillPattern", fillPattern);
       if (!style.getFill()) {
         styles[0].setFill(new Fill());
       }
-      var patternOrColor = fillPattern.empty
-        ? [0, 0, 0, 0]
-        : getPolygonPattern(fillPattern.id, fillPattern.color);
+      const patternOrColor = fillPattern.empty ? [0, 0, 0, 0] : getPolygonPattern(fillPattern.id, fillPattern.color);
       styles[0].getFill().setColor(patternOrColor);
     }
-
-    // Add line's icons styles
-    if (feature.get('lineStartIcon')) {
+    if (feature.get("lineStartIcon")) {
       styles.push(
         getLineIcon(
           feature,
-          JSON.parse(feature.get('lineStartIcon')),
+          JSON.parse(feature.get("lineStartIcon")),
           stroke.getColor()
         )
       );
     }
-
-    if (feature.get('lineEndIcon')) {
+    if (feature.get("lineEndIcon")) {
       styles.push(
         getLineIcon(
           feature,
-          JSON.parse(feature.get('lineEndIcon')),
+          JSON.parse(feature.get("lineEndIcon")),
           stroke.getColor(),
           false
         )
@@ -292,307 +266,272 @@ var sanitizeFeature = function (feature) {
   }
   feature.setStyle(styles);
 };
-
-/**
- * Read a KML string.
- * @param {String} kmlString A string representing a KML file.
- * @param {<ol.Projection|String>} featureProjection The projection used by the map.
- */
-var readFeatures = function (kmlString, featureProjection) {
-  var features = new KML().readFeatures(kmlString, {
-    featureProjection: featureProjection,
+const readFeatures = (kmlString, featureProjection, doNotRevert32pxScaling = false) => {
+  const features = new KML().readFeatures(kmlString, {
+    featureProjection
   });
-  features.forEach(function (feature) {
-    sanitizeFeature(feature);
+  features.forEach((feature) => {
+    const {
+      [CIRCLE_GEOMETRY_CENTER]: circleGeometryCenter,
+      [CIRCLE_GEOMETRY_RADIUS]: circleGeometryRadius
+    } = feature?.getProperties() || {};
+    if (circleGeometryCenter && circleGeometryRadius) {
+      const circle = new CircleGeom(
+        transform(
+          JSON.parse(circleGeometryCenter),
+          EPSG_4326,
+          featureProjection || EPSG_4326
+        ),
+        parseFloat(circleGeometryRadius, 10)
+      );
+      circle.setProperties(feature.getGeometry().getProperties());
+      feature.setGeometry(circle);
+    }
+    sanitizeFeature(feature, doNotRevert32pxScaling);
   });
   return features;
 };
-
-/**
- * Create a KML string.
- * @param {VectorLayer} layer A react-spatial VectorLayer.
- * @param {<ol.Projection|String>} featureProjection The current projection used by the features.
- */
-var writeFeatures = function (layer, featureProjection, mapResolution) {
-  var featString;
-  var olLayer = layer.olLayer;
-  var exportFeatures = [];
-
-  olLayer.getSource().forEachFeature(function (feature) {
-    // We silently ignore Circle elements as they are
-    // not supported in kml.
-    if (feature.getGeometry().getType() === 'Circle') {
-      return;
-    }
-
-    var clone = feature.clone();
+const writeFeatures = (layer, featureProjection, mapResolution) => {
+  let featString;
+  const olLayer = layer.olLayer || layer.get("olLayer") || layer;
+  const exportFeatures = [];
+  [...olLayer.getSource().getFeatures()].sort((a, b) => {
+    if (getUid(a) <= getUid(b)) {
+      return -1;
+    }
+    return 1;
+  }).forEach((feature) => {
+    const clone = feature.clone();
+    if (clone.getGeometry().getType() === "Circle") {
+      const circleGeom = feature.getGeometry();
+      clone.setGeometry(fromCircle(circleGeom, 100));
+      clone.set(
+        CIRCLE_GEOMETRY_CENTER,
+        JSON.stringify(
+          transform(circleGeom.getCenter(), featureProjection, EPSG_4326)
+        )
+      );
+      clone.set(CIRCLE_GEOMETRY_RADIUS, circleGeom.getRadius());
+    }
     clone.setId(feature.getId());
-    clone.getGeometry().setProperties(feature.getGeometry().getProperties());
-    clone.getGeometry().transform(featureProjection, 'EPSG:4326');
-
-    // We remove all ExtendedData not related to style.
-    Object.keys(feature.getProperties()).forEach(function (key) {
-      if (!/^(geometry|name|description)$/.test(key)) {
+    clone.getGeometry().transform(featureProjection, EPSG_4326);
+    Object.keys(feature.getProperties()).forEach((key) => {
+      if (![
+        CIRCLE_GEOMETRY_CENTER,
+        CIRCLE_GEOMETRY_RADIUS,
+        "description",
+        "geometry",
+        "name"
+      ].includes(key)) {
         clone.unset(key, true);
       }
     });
-
-    var styles;
-
+    let styles;
     if (feature.getStyleFunction()) {
       styles = feature.getStyleFunction()(feature, mapResolution);
     } else if (olLayer && olLayer.getStyleFunction()) {
       styles = olLayer.getStyleFunction()(feature, mapResolution);
     }
-
-    var mainStyle = styles[0] || styles;
-
-    var newStyle = {
+    const mainStyle = styles[0] || styles;
+    const newStyle = {
       fill: mainStyle.getFill(),
+      image: mainStyle.getImage(),
       stroke: mainStyle.getStroke(),
       text: mainStyle.getText(),
-      image: mainStyle.getImage(),
-      zIndex: mainStyle.getZIndex(),
+      zIndex: mainStyle.getZIndex()
     };
-
     if (newStyle.zIndex) {
-      clone.set('zIndex', newStyle.zIndex);
+      clone.set("zIndex", newStyle.zIndex);
     }
-
-    // If we see spaces at the beginning or at the end we add a empty
-    // white space at the beginning and at the end.
-    if (newStyle.text && /^\s|\s$/g.test(newStyle.text.getText())) {
-      newStyle.text.setText(("​" + (newStyle.text.getText()) + "​"));
+    const text = newStyle.text?.getText();
+    if (text) {
+      let kmlText = text;
+      if (Array.isArray(text)) {
+        clone.set("textArray", JSON.stringify(text));
+        kmlText = text.map((t, idx) => {
+          return idx % 2 === 0 ? t : "";
+        }).join("").replaceAll("\u200B", "");
+      }
+      if (kmlText) {
+        if (/^(\s|\n)|(\n|\s)$/g.test(kmlText)) {
+          clone.set("name", `\u200B${kmlText}\u200B`);
+        } else {
+          clone.set("name", kmlText);
+        }
+      }
     }
-
-    // Set custom properties to be converted in extendedData in KML.
-    if (newStyle.text && newStyle.text.getRotation()) {
-      clone.set('textRotation', newStyle.text.getRotation());
+    if (newStyle.text?.getRotation()) {
+      clone.set("textRotation", newStyle.text.getRotation());
     }
-
-    if (newStyle.text && newStyle.text.getFont()) {
-      clone.set('textFont', newStyle.text.getFont());
+    if (newStyle.text?.getFont()) {
+      clone.set("textFont", newStyle.text.getFont());
     }
-
-    if (newStyle.text && newStyle.text.getTextAlign()) {
-      clone.set('textAlign', newStyle.text.getTextAlign());
+    if (newStyle.text?.getTextAlign()) {
+      clone.set("textAlign", newStyle.text.getTextAlign());
     }
-
-    if (newStyle.text && newStyle.text.getOffsetX()) {
-      clone.set('textOffsetX', newStyle.text.getOffsetX());
+    if (newStyle.text?.getOffsetX()) {
+      clone.set("textOffsetX", newStyle.text.getOffsetX());
     }
-
-    if (newStyle.text && newStyle.text.getOffsetY()) {
-      clone.set('textOffsetY', newStyle.text.getOffsetY());
+    if (newStyle.text?.getOffsetY()) {
+      clone.set("textOffsetY", newStyle.text.getOffsetY());
     }
-
-    if (newStyle.text && newStyle.text.getStroke()) {
+    if (newStyle.text?.getStroke()) {
       if (newStyle.text.getStroke().getColor()) {
         clone.set(
-          'textStrokeColor',
+          "textStrokeColor",
           asString(newStyle.text.getStroke().getColor())
         );
       }
-
       if (newStyle.text.getStroke().getWidth()) {
-        clone.set('textStrokeWidth', newStyle.text.getStroke().getWidth());
+        clone.set("textStrokeWidth", newStyle.text.getStroke().getWidth());
       }
     }
-
-    if (newStyle.text && newStyle.text.getBackgroundFill()) {
+    if (newStyle.text?.getBackgroundFill()) {
       clone.set(
-        'textBackgroundFillColor',
+        "textBackgroundFillColor",
         asString(newStyle.text.getBackgroundFill().getColor())
       );
     }
-
-    if (newStyle.text && newStyle.text.getPadding()) {
-      clone.set('textPadding', newStyle.text.getPadding().join());
+    if (newStyle.text?.getPadding()) {
+      clone.set("textPadding", newStyle.text.getPadding().join());
+    }
+    if (newStyle.stroke?.getLineCap()) {
+      clone.set("lineCap", newStyle.stroke.getLineCap());
+    }
+    if (newStyle.stroke?.getLineJoin()) {
+      clone.set("lineJoin", newStyle.stroke.getLineJoin());
+    }
+    if (newStyle.stroke?.getLineDash()) {
+      clone.set("lineDash", newStyle.stroke.getLineDash().join(","));
+    }
+    if (newStyle.stroke?.getLineDashOffset()) {
+      clone.set("lineDashOffset", newStyle.stroke.getLineDashOffset());
     }
-
-    if (newStyle.stroke && newStyle.stroke.getLineDash()) {
-      clone.set('lineDash', newStyle.stroke.getLineDash().join(','));
+    if (newStyle.stroke?.getMiterLimit()) {
+      clone.set("miterLimit", newStyle.stroke.getMiterLimit());
     }
-
     if (newStyle.image instanceof Circle) {
       newStyle.image = null;
     }
-
     if (newStyle.image) {
-      var imgSource = newStyle.image.getSrc();
+      const imgSource = newStyle.image.getSrc();
       if (!/(http(s?)):\/\//gi.test(imgSource)) {
-        // eslint-disable-next-line no-console
         console.log(
-          'Local image source not supported for KML export.' +
-            'Should use remote web server'
+          "Local image source not supported for KML export.Should use remote web server"
         );
       }
-
       if (newStyle.image.getRotation()) {
-        // We set the icon rotation as extended data
-        clone.set('iconRotation', newStyle.image.getRotation());
+        clone.set("iconRotation", newStyle.image.getRotation());
       }
-
-      // Set map resolution to use for icon-to-map proportional scaling
-      if (feature.get('pictureOptions')) {
+      if (newStyle.image.getScale()) {
+        clone.set("iconScale", newStyle.image.getScale());
+      }
+      if (feature.get("pictureOptions")) {
         clone.set(
-          'pictureOptions',
-          JSON.stringify(feature.get('pictureOptions'))
+          "pictureOptions",
+          JSON.stringify(feature.get("pictureOptions"))
         );
       }
     }
-
-    // In case a fill pattern should be applied (use fillPattern attribute to store pattern id, color etc)
-    if (feature.get('fillPattern')) {
-      clone.set('fillPattern', JSON.stringify(feature.get('fillPattern')));
+    if (feature.get("fillPattern")) {
+      clone.set("fillPattern", JSON.stringify(feature.get("fillPattern")));
       newStyle.fill = null;
     }
-
-    // maxZoom: maximum zoom level at which the feature is displayed
-    if (feature.get('maxZoom')) {
-      clone.set('maxZoom', parseFloat(feature.get('maxZoom'), 10));
+    if (feature.get("maxZoom")) {
+      clone.set("maxZoom", parseFloat(feature.get("maxZoom"), 10));
     }
-
-    // minZoom: minimum zoom level at which the feature is displayed
-    if (feature.get('minZoom')) {
-      clone.set('minZoom', parseFloat(feature.get('minZoom'), 10));
+    if (feature.get("minZoom")) {
+      clone.set("minZoom", parseFloat(feature.get("minZoom"), 10));
     }
-
-    // If only text is displayed we must specify an
-    // image style with scale=0
     if (newStyle.text && !newStyle.image) {
       newStyle.image = new Icon({
-        src: 'noimage',
         scale: 0,
+        src: "noimage"
       });
     }
-
-    // In case we use line's icon .
-    var extraLineStyles = (Array.isArray(styles) && styles.slice(1)) || [];
-    extraLineStyles.forEach(function (extraLineStyle) {
-      if (
-        extraLineStyle &&
-        extraLineStyle.getImage() instanceof Icon &&
-        extraLineStyle.getGeometry()
-      ) {
-        var coord = extraLineStyle.getGeometry()(feature).getCoordinates();
-        var startCoord = feature.getGeometry().getFirstCoordinate();
+    const extraLineStyles = Array.isArray(styles) && styles.slice(1) || [];
+    extraLineStyles.forEach((extraLineStyle) => {
+      if (extraLineStyle && extraLineStyle.getImage() instanceof Icon && extraLineStyle.getGeometry()) {
+        const coord = extraLineStyle.getGeometry()(feature).getCoordinates();
+        const startCoord = feature.getGeometry().getFirstCoordinate();
         if (coord[0] === startCoord[0] && coord[1] === startCoord[1]) {
           clone.set(
-            'lineStartIcon',
+            "lineStartIcon",
             JSON.stringify({
-              url: extraLineStyle.getImage().getSrc(),
               scale: extraLineStyle.getImage().getScale(),
               size: extraLineStyle.getImage().getSize(),
-              zIndex: extraLineStyle.getZIndex(),
+              url: extraLineStyle.getImage().getSrc(),
+              zIndex: extraLineStyle.getZIndex()
             })
           );
         } else {
           clone.set(
-            'lineEndIcon',
+            "lineEndIcon",
             JSON.stringify({
-              url: extraLineStyle.getImage().getSrc(),
               scale: extraLineStyle.getImage().getScale(),
               size: extraLineStyle.getImage().getSize(),
-              zIndex: extraLineStyle.getZIndex(),
+              url: extraLineStyle.getImage().getSrc(),
+              zIndex: extraLineStyle.getZIndex()
             })
           );
         }
       }
     });
-
-    var olStyle = new Style(newStyle);
+    const olStyle = new Style(newStyle);
     clone.setStyle(olStyle);
-
-    if (
-      !(
-        clone.getGeometry() instanceof Point &&
-        olStyle.getText() &&
-        !olStyle.getText().getText()
-      )
-    ) {
+    if (!(clone.getGeometry() instanceof Point && olStyle.getText() && !olStyle.getText().getText())) {
       exportFeatures.push(clone);
     }
   });
-
   if (exportFeatures.length > 0) {
     if (exportFeatures.length === 1) {
-      // force the add of a <Document> node
       exportFeatures.push(new Feature());
     }
-
     featString = new KML({
-      extractStyles: true,
       defaultStyle: [kmlStyle],
+      extractStyles: true
     }).writeFeatures(exportFeatures);
-
-    // Remove no image hack
     featString = featString.replace(
       /<Icon>\s*<href>noimage<\/href>\s*<\/Icon>/g,
-      ''
+      ""
     );
-
-    // Remove empty placemark added to have
-    // <Document> tag
-    featString = featString.replace(/<Placemark\/>/g, '');
-
-    // Add KML document name
-    if (layer.name) {
+    featString = featString.replace(/<Placemark\/>/g, "");
+    if (layer.get("name")) {
       featString = featString.replace(
         /<Document>/,
-        ("<Document><name>" + (layer.name) + "</name>")
+        `<Document><name>${layer.get("name")}</name>`
       );
     }
   }
-
   return featString;
 };
-
-/**
- * Removes the <Camera> tag from a KML string. Returns the KML string with removed <Camera> tag.
- * @param {String} kmlString A string representing a KML file.
- */
-var removeDocumentCamera = function (kmlString) {
-  var kmlDoc = parse(kmlString);
-  // Remove old Camera node
-  var oldCameraNode = kmlDoc.getElementsByTagName('Camera')[0];
+const removeDocumentCamera = (kmlString) => {
+  const kmlDoc = parse(kmlString);
+  const oldCameraNode = kmlDoc.getElementsByTagName("Camera")[0];
   if (oldCameraNode) {
     oldCameraNode.remove();
   }
   return new XMLSerializer().serializeToString(kmlDoc);
 };
-
-/**
- * Write the <Camera> tag into a KML string. Returns the KML string with added <Camera> tag.
- * @param {String} kmlString A string representing a KML file.
- * @param {Object} cameraAttributes Object containing the camera tags (longitude, latitude, altitude, heading, tilt, altitudeMode, roll)
- *    as keys with corresponding values. See https://developers.google.com/kml/documentation/kmlreference#camera
- */
-var writeDocumentCamera = function (kmlString, cameraAttributes) {
-  var kmlDoc = parse(removeDocumentCamera(kmlString));
-
+const writeDocumentCamera = (kmlString, cameraAttributes) => {
+  const kmlDoc = parse(removeDocumentCamera(kmlString));
   if (cameraAttributes) {
-    // Create Camera node with child attributes if the cameraAttributes object is defined
-    var cameraNode = kmlDoc.createElement('Camera');
-    Object.keys(cameraAttributes).forEach(function (key) {
-      var cameraAttribute = kmlDoc.createElement(
-        ("" + (key.charAt(0).toUpperCase() + key.slice(1)))
+    const cameraNode = kmlDoc.createElement("Camera");
+    Object.keys(cameraAttributes).forEach((key) => {
+      const cameraAttribute = kmlDoc.createElement(
+        `${key.charAt(0).toUpperCase() + key.slice(1)}`
       );
       cameraAttribute.innerHTML = cameraAttributes[key];
       cameraNode.appendChild(cameraAttribute);
     });
-    var documentNode = kmlDoc.getElementsByTagName('Document')[0];
+    const documentNode = kmlDoc.getElementsByTagName("Document")[0];
     documentNode.appendChild(cameraNode);
   }
-
   return new XMLSerializer().serializeToString(kmlDoc);
 };
-
 export default {
-  readFeatures: readFeatures,
-  writeFeatures: writeFeatures,
-  writeDocumentCamera: writeDocumentCamera,
-  removeDocumentCamera: removeDocumentCamera,
+  readFeatures,
+  removeDocumentCamera,
+  writeDocumentCamera,
+  writeFeatures
 };
-
-//# sourceMappingURL=KML.js.map