react-spatial 1.5.2 → 1.5.3

package/src/utils/KML.test.js

@@ -0,0 +1,337 @@
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { Style } from 'ol/style';
+import { get } from 'ol/proj';
+import beautify from 'xml-beautifier';
+import KML from './KML';
+
+const xmlns =
+  '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"';
+
+const expectWriteResult = (feats, str) => {
+  expect(
+    beautify(
+      KML.writeFeatures(
+        {
+          name: 'lala',
+          olLayer: new VectorLayer({
+            source: new VectorSource({
+              features: feats,
+            }),
+          }),
+        },
+        get('EPSG:4326'),
+      ),
+    ),
+  ).toEqual(beautify(str));
+};
+
+describe('KML', () => {
+  describe('readFeatures() and writeFeatures()', () => {
+    test('should read/write LineStyle and ExtendedData (linesDash, lineStartIcon and lineEndIcon).', () => {
+      const str = `
+        <kml ${xmlns}>
+          <Document>
+            <name>lala</name>
+            <Placemark>
+                <Style>
+                  <LineStyle>
+                    <color>ff056600</color>
+                    <width>1</width>
+                  </LineStyle>
+                </Style>
+                <ExtendedData>
+                  <Data name="lineDash"><value>40,40</value></Data>
+                  <Data name="lineEndIcon"><value>{"url":"fooarrowend.png","scale":0.35,"size":[36,58],"zIndex":1}</value></Data>
+                  <Data name="lineStartIcon"><value>{"url":"fooarrowstart.png","scale":0.35,"size":[36,58],"zIndex":1}</value></Data>
+                </ExtendedData>
+                <LineString><coordinates>0,1,0 3,5,0 40,25,0</coordinates></LineString>
+            </Placemark>
+          </Document>
+        </kml>
+      `;
+      const feats = KML.readFeatures(str);
+      const styles = feats[0].getStyle();
+      expect(feats.length).toBe(1);
+      expect(styles.length).toBe(3);
+
+      // line stroke
+      const strokeStyle = styles[0].getStroke();
+      expect(strokeStyle.getColor()).toEqual([0, 102, 5, 1]);
+      expect(strokeStyle.getLineDash()).toEqual([40, 40]);
+
+      // line start icon
+      const lineStartStyle = styles[1];
+      expect(lineStartStyle.getImage().getRotation()).toEqual(
+        -0.9272952180016122,
+      );
+      expect(lineStartStyle.getImage().getColor()).toEqual([0, 102, 5, 1]);
+      expect(lineStartStyle.getImage().getRotateWithView()).toBe(true);
+      expect(lineStartStyle.getGeometry()(feats[0]).getCoordinates()).toEqual([
+        0, 1, 0,
+      ]);
+      expect(lineStartStyle.getZIndex()).toEqual(1);
+
+      // line end icon
+      const lineEndStyle = styles[2];
+      expect(lineEndStyle.getImage().getRotation()).toEqual(
+        -0.49555167348582857,
+      );
+      expect(lineEndStyle.getImage().getRotateWithView()).toBe(true);
+      expect(lineEndStyle.getImage().getColor()).toEqual([0, 102, 5, 1]);
+      expect(lineEndStyle.getGeometry()(feats[0]).getCoordinates()).toEqual([
+        40, 25, 0,
+      ]);
+      expect(lineEndStyle.getZIndex()).toEqual(1);
+
+      expectWriteResult(feats, str);
+    });
+
+    test('should read/write TextStyle and ExtendedData.', () => {
+      const str = `
+        <kml ${xmlns}>
+          <Document>
+            <name>lala</name>
+            <Placemark>
+              <name>   bar  </name>
+              <Style>
+                <IconStyle>
+                  <scale>0</scale>
+                </IconStyle>
+                <LabelStyle>
+                  <color>ff7e3420</color>
+                  <scale>2</scale>
+                </LabelStyle>
+              </Style>
+              <ExtendedData>
+                <Data name="textAlign">
+                  <value>right</value>
+                </Data>
+                <Data name="textBackgroundFillColor">
+                  <value>rgba(255,255,255,0.01)</value>
+                </Data>
+                <Data name="textFont">
+                  <value>bold 16px arial</value>
+                </Data>
+                <Data name="textOffsetX">
+                  <value>-90</value>
+                </Data>
+                <Data name="textOffsetY">
+                  <value>30</value>
+                </Data>
+                <Data name="textPadding">
+                  <value>5,6,7,8</value>
+                </Data>
+                <Data name="textRotation">
+                  <value>2.303834612632515</value>
+                </Data>
+                <Data name="textStrokeColor">
+                  <value>rgba(100,255,255,0.2)</value>
+                </Data>
+                <Data name="textStrokeWidth">
+                  <value>3</value>
+                </Data>
+              </ExtendedData>
+              <Point>
+                <coordinates>0,0,0</coordinates>
+              </Point>
+            </Placemark>
+          </Document>
+        </kml>
+      `;
+      const feats = KML.readFeatures(str);
+      const style = feats[0].getStyleFunction()(feats[0], 1);
+      expect(feats.length).toBe(1);
+      expect(style instanceof Style).toBe(true);
+
+      // Text
+      const styleText = style.getText();
+      expect(styleText.getText()).toBe('bar'); // spaces are trimmed.
+      expect(styleText.getFont()).toEqual('bold 16px arial');
+      expect(styleText.getFill()).toEqual({ color_: [32, 52, 126, 1] });
+      expect(styleText.getStroke()).toEqual({
+        color_: 'rgba(100,255,255,0.2)',
+        width_: 3,
+        lineCap_: undefined,
+        lineDashOffset_: undefined,
+        lineDash_: null,
+        lineJoin_: undefined,
+        miterLimit_: undefined,
+      });
+      expect(styleText.getScale()).toEqual(2);
+      expect(styleText.getRotation()).toEqual('2.303834612632515');
+      expect(styleText.getPadding()).toEqual([5, 6, 7, 8]);
+      expect(styleText.getBackgroundFill()).toEqual({
+        color_: 'rgba(255,255,255,0.01)',
+      });
+      expect(styleText.getTextAlign()).toEqual('right');
+      expect(styleText.getOffsetX()).toEqual(-90);
+      expect(styleText.getOffsetY()).toEqual(30);
+      expectWriteResult(feats, str);
+    });
+
+    test('should read and write lineDash and fillPattern style for polygon', () => {
+      const str = `
+        <kml ${xmlns}>
+          <Document>
+            <name>lala</name>
+            <Placemark>
+                <description></description>
+                <Style>
+                    <LineStyle>
+                        <color>ff0000eb</color>
+                        <width>2</width>
+                    </LineStyle>
+                    <PolyStyle>
+                      <fill>0</fill>
+                    </PolyStyle>
+                </Style>
+                <ExtendedData>
+                    <Data name="fillPattern">
+                        <value>{"id":3,"color":[235,0,0,1]}</value>
+                    </Data>
+                    <Data name="lineDash">
+                        <value>1,1</value>
+                    </Data>
+                </ExtendedData>
+                <Polygon>
+                    <outerBoundaryIs>
+                        <LinearRing>
+                            <coordinates>8.521,47.381,0 8.529,47.375,0 8.531,47.382,0 8.521,47.381,0</coordinates>
+                        </LinearRing>
+                    </outerBoundaryIs>
+                </Polygon>
+            </Placemark>
+        </Document>
+      </kml>
+      `;
+      const feats = KML.readFeatures(str);
+      const styles = feats[0].getStyle();
+      expect(feats.length).toBe(1);
+      expect(styles.length).toBe(1);
+
+      // Polygon
+      const feature = feats[0];
+      const outlineStyle = styles[0].getStroke();
+      expect(outlineStyle.getColor()).toEqual([235, 0, 0, 1]);
+      expect(outlineStyle.getWidth()).toEqual(2);
+      const fillStyle = styles[0].getFill();
+      expect(feature.get('fillPattern')).toEqual({
+        id: 3,
+        color: [235, 0, 0, 1],
+      });
+      const color = fillStyle.getColor();
+      expect(color.id).toBe(3);
+      expect(color.color).toEqual([235, 0, 0, 1]);
+      expectWriteResult(feats, str);
+    });
+
+    test('should add zIndex and rotation to icon style and pictureOptions to feature properties.', () => {
+      const str = `
+      <kml ${xmlns}>
+        <Document>
+            <name>lala</name>
+            <Placemark>
+                <description></description>
+                <Style>
+                    <IconStyle>
+                        <scale>
+                          2
+                        </scale>
+                        <heading>
+                          1.5707963267948966
+                        </heading>
+                        <Icon>
+                            <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
+                            <gx:w>64</gx:w>
+                            <gx:h>64</gx:h>
+                        </Icon>
+                        <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
+                    </IconStyle>
+                </Style>
+                <ExtendedData>
+                    <Data name="iconRotation">
+                      <value>1.5707963267948966</value>
+                    </Data>
+                    <Data name="maxZoom">
+                      <value>18.5</value>
+                    </Data>
+                    <Data name="minZoom">
+                      <value>15</value>
+                    </Data>
+                    <Data name="pictureOptions">
+                      <value>{"resolution":4,"defaultScale":0.5}</value>
+                    </Data>
+                    <Data name="zIndex">
+                        <value>1</value>
+                    </Data>
+                </ExtendedData>
+                <Point>
+                    <coordinates>0,0,0</coordinates>
+                </Point>
+            </Placemark>
+        </Document>
+      </kml>
+      `;
+      const feats = KML.readFeatures(str);
+      const style = feats[0].getStyleFunction()(feats[0], 1);
+      expect(style.getZIndex()).toBe(1);
+      expect(style.getImage().getRotation()).toBe(1.5707963267948966);
+      expect(feats[0].get('pictureOptions')).toEqual({
+        resolution: 4,
+        defaultScale: 0.5,
+      });
+      expect(feats[0].get('maxZoom')).toEqual(18.5);
+      expect(feats[0].get('minZoom')).toEqual(15);
+      expectWriteResult(feats, str);
+    });
+  });
+
+  describe('writeDocumentCamera()', () => {
+    const str = `
+      <kml ${xmlns}>
+        <Document>
+          <name>
+            CamTest
+          </name>
+        </Document>
+      </kml>`;
+
+    const strWithCam = `<kml ${xmlns}>
+        <Document>
+            <name>
+                CamTest
+            </name>
+            <Camera xmlns="">
+                <Heading>
+                    270
+                </Heading>
+                <Altitude>
+                    300
+                </Altitude>
+                <Longitude>
+                    5.8
+                </Longitude>
+                <Latitude>
+                    41.6
+                </Latitude>
+            </Camera>
+        </Document>
+      </kml>`;
+
+    test('should insert the correct <Camera> tag.', () => {
+      const kmlWithKamera = KML.writeDocumentCamera(str, {
+        heading: 270,
+        altitude: 300,
+        longitude: 5.8,
+        latitude: 41.6,
+      });
+      expect(beautify(kmlWithKamera)).toEqual(beautify(strWithCam));
+    });
+
+    test('should remove the present <Camera> tag when called without cameraAttributes.', () => {
+      const kmlWithoutKamera = KML.writeDocumentCamera(strWithCam);
+      expect(beautify(kmlWithoutKamera)).toEqual(beautify(str));
+    });
+  });
+});

package/src/utils/KMLFormat.js

@@ -0,0 +1,100 @@
+import OLKML from 'ol/format/KML';
+import {
+  parse,
+  pushParseAndPop,
+  isDocument,
+  makeStructureNS,
+  makeObjectPropertySetter,
+} from 'ol/xml';
+import { extend, includes } from 'ol/array';
+import { readDecimal, readString } from 'ol/format/xsd';
+
+const NAMESPACE_URIS = [
+  null,
+  'http://earth.google.com/kml/2.0',
+  'http://earth.google.com/kml/2.1',
+  'http://earth.google.com/kml/2.2',
+  'http://www.opengis.net/kml/2.2',
+];
+
+const CAMERA_PARSERS = makeStructureNS(NAMESPACE_URIS, {
+  Altitude: makeObjectPropertySetter(readDecimal),
+  Longitude: makeObjectPropertySetter(readDecimal),
+  Latitude: makeObjectPropertySetter(readDecimal),
+  Tilt: makeObjectPropertySetter(readDecimal),
+  AltitudeMode: makeObjectPropertySetter(readString),
+  Heading: makeObjectPropertySetter(readDecimal),
+  Roll: makeObjectPropertySetter(readDecimal),
+});
+
+class KML extends OLKML {
+  /**
+   * Read the cameras of the KML.
+   *
+   * @param {Document|Element|string} source Source.
+   * @return {Array<Object>} Cameras.
+   * @api
+   */
+  readCamera(source) {
+    const cameras = [];
+    if (typeof source === 'string') {
+      const doc = parse(source);
+      extend(cameras, this.readCameraFromDocument(doc));
+    } else if (isDocument(source)) {
+      extend(
+        cameras,
+        this.readCameraFromDocument(/** @type {Document} */ (source)),
+      );
+    } else {
+      extend(cameras, this.readCameraFromNode(/** @type {Element} */ (source)));
+    }
+    return cameras;
+  }
+
+  /**
+   * @param {Document} doc Document.
+   * @return {Array<Object>} Cameras.
+   */
+  readCameraFromDocument(doc) {
+    const cameras = [];
+    for (let n = /** @type {Node} */ (doc.firstChild); n; n = n.nextSibling) {
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        extend(cameras, this.readCameraFromNode(/** @type {Element} */ (n)));
+      }
+    }
+    return cameras;
+  }
+
+  /**
+   * @param {Element} node Node.
+   * @return {Array<Object>} Cameras.
+   * @api
+   */
+  readCameraFromNode(node) {
+    const cameras = [];
+    for (let n = node.firstElementChild; n; n = n.nextElementSibling) {
+      if (
+        includes(NAMESPACE_URIS, n.namespaceURI) &&
+        n.localName === 'Camera'
+      ) {
+        const obj = pushParseAndPop({}, CAMERA_PARSERS, n, []);
+        cameras.push(obj);
+      }
+    }
+    for (let n = node.firstElementChild; n; n = n.nextElementSibling) {
+      const { localName } = n;
+      if (
+        includes(NAMESPACE_URIS, n.namespaceURI) &&
+        (localName === 'Document' ||
+          localName === 'Folder' ||
+          localName === 'Placemark' ||
+          localName === 'kml')
+      ) {
+        extend(cameras, this.readCameraFromNode(n));
+      }
+    }
+    return cameras;
+  }
+}
+
+export default KML;

package/src/utils/KMLFormat.test.js

@@ -0,0 +1,50 @@
+import KML from './KMLFormat';
+
+const xmlns =
+  '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"';
+
+describe('KML', () => {
+  test('should read <Camera> tags correctly.', () => {
+    const str = `
+      <kml ${xmlns}>
+        <Document>
+        <name>lala</name>
+        <Camera>
+                <Heading>
+                    270
+                </Heading>
+                <Altitude>
+                    300
+                </Altitude>
+                <Longitude>
+                    5.8
+                </Longitude>
+                <Latitude>
+                    41.6
+                </Latitude>
+            </Camera>
+            <Placemark>
+            <Camera>
+                <Heading>
+                    180
+                </Heading>
+                <AltitudeMode>
+                    clampToGround
+                </AltitudeMode>
+            </Camera>
+            </Placemark>
+        </Document>
+      </kml>
+    `;
+    const format = new KML();
+    const cameras = format.readCamera(str);
+
+    expect(cameras.length).toEqual(2);
+    expect(cameras[0].Heading).toEqual(270);
+    expect(cameras[0].Altitude).toEqual(300);
+    expect(cameras[0].Longitude).toEqual(5.8);
+    expect(cameras[0].Latitude).toEqual(41.6);
+    expect(cameras[1].Heading).toEqual(180);
+    expect(cameras[1].AltitudeMode).toEqual('clampToGround');
+  });
+});

package/{utils → src/utils}/Styles.js

@@ -1,46 +1,52 @@
-import { Fill, Stroke, Circle, Style, Text } from "ol/style";
+import { Fill, Stroke, Circle, Style, Text } from 'ol/style';
+
+// Default style for Ol
 const fill = new Fill({
-  color: "rgba(255,255,255,0.4)"
+  color: 'rgba(255,255,255,0.4)',
 });
 const stroke = new Stroke({
-  color: "#3399CC",
-  width: 1.25
+  color: '#3399CC',
+  width: 1.25,
 });
 const dfltOlStyle = new Style({
   image: new Circle({
     fill,
     stroke,
-    radius: 5
+    radius: 5,
   }),
   fill,
-  stroke
+  stroke,
 });
+
+// Default style for KML layer
 const kmlFill = new Fill({
-  color: [255, 0, 0, 0.7]
+  color: [255, 0, 0, 0.7],
 });
 const kmlStroke = new Stroke({
   color: [255, 0, 0, 1],
-  width: 1.5
+  width: 1.5,
 });
 const kmlcircle = new Circle({
   radius: 7,
   fill: kmlFill,
-  stroke: kmlStroke
+  stroke: kmlStroke,
 });
 const kmlStyle = new Style({
   fill: kmlFill,
   stroke: kmlStroke,
   image: kmlcircle,
   text: new Text({
-    font: "normal 16px Helvetica",
+    font: 'normal 16px Helvetica',
     fill: kmlFill,
     stroke: new Stroke({
       color: [255, 255, 255, 1],
-      width: 3
-    })
-  })
+      width: 3,
+    }),
+  }),
 });
+
 export { kmlStyle };
+
 export default {
-  default: dfltOlStyle
+  default: dfltOlStyle,
 };

package/{utils → src/utils}/getPolygonPattern.js

@@ -1,19 +1,26 @@
-import { DEVICE_PIXEL_RATIO } from "ol/has";
+import { DEVICE_PIXEL_RATIO } from 'ol/has';
+
 const getPolygonPattern = (patternId = 1, color = [235, 0, 0, 1]) => {
   if (patternId === 1) {
     return color;
   }
-  const canvasElement = document.createElement("canvas");
+
+  const canvasElement = document.createElement('canvas');
   const pixelRatio = DEVICE_PIXEL_RATIO;
+
   canvasElement.width = 20 * pixelRatio;
   canvasElement.height = 20 * pixelRatio;
+
   let pattern = {};
-  const ctx = canvasElement.getContext("2d");
+  const ctx = canvasElement.getContext('2d');
   ctx.strokeStyle = `rgba(${color.toString()})`;
   ctx.fillStyle = `rgba(${color.toString()})`;
   ctx.lineWidth = 3;
+
   switch (patternId) {
     case 2:
+      /* Hatched pattern */
+      /* Ascending line */
       ctx.beginPath();
       ctx.moveTo(0, canvasElement.height);
       ctx.lineTo(0, canvasElement.height - ctx.lineWidth / 2);
@@ -24,6 +31,8 @@ const getPolygonPattern = (patternId = 1, color = [235, 0, 0, 1]) => {
       ctx.lineTo(ctx.lineWidth / 2, canvasElement.height);
       ctx.fill();
       ctx.closePath();
+
+      /* Descending line */
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(0, ctx.lineWidth / 2);
@@ -34,16 +43,21 @@ const getPolygonPattern = (patternId = 1, color = [235, 0, 0, 1]) => {
       ctx.lineTo(0, 0);
       ctx.fill();
       ctx.closePath();
-      pattern = ctx.createPattern(canvasElement, "repeat");
+
+      pattern = ctx.createPattern(canvasElement, 'repeat');
       pattern.canvas = canvasElement;
       break;
     case 3:
+      /* Shade ascending pattern */
+      /* Corner triangle */
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(0, ctx.lineWidth / 2);
       ctx.lineTo(ctx.lineWidth / 2, 0);
       ctx.fill();
       ctx.closePath();
+
+      /* Ascending line */
       ctx.beginPath();
       ctx.moveTo(0, canvasElement.height);
       ctx.lineTo(0, canvasElement.height - ctx.lineWidth / 2);
@@ -54,22 +68,29 @@ const getPolygonPattern = (patternId = 1, color = [235, 0, 0, 1]) => {
       ctx.lineTo(ctx.lineWidth / 2, canvasElement.height);
       ctx.fill();
       ctx.closePath();
+
+      /* Corner triangle */
       ctx.beginPath();
       ctx.moveTo(canvasElement.width, canvasElement.height);
       ctx.lineTo(canvasElement.width, canvasElement.height - ctx.lineWidth / 2);
       ctx.lineTo(canvasElement.width - ctx.lineWidth / 2, canvasElement.height);
       ctx.fill();
       ctx.closePath();
-      pattern = ctx.createPattern(canvasElement, "repeat");
+
+      pattern = ctx.createPattern(canvasElement, 'repeat');
       pattern.canvas = canvasElement;
       break;
     case 4:
+      /* Shade descending pattern */
+      /* Corner triangle */
       ctx.beginPath();
       ctx.moveTo(canvasElement.width, 0);
       ctx.lineTo(canvasElement.width, ctx.lineWidth / 2);
       ctx.lineTo(canvasElement.width - ctx.lineWidth / 2, 0);
       ctx.fill();
       ctx.closePath();
+
+      /* Descending line */
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(0, ctx.lineWidth / 2);
@@ -80,22 +101,29 @@ const getPolygonPattern = (patternId = 1, color = [235, 0, 0, 1]) => {
       ctx.lineTo(0, 0);
       ctx.fill();
       ctx.closePath();
+
+      /* Corner triangle */
       ctx.beginPath();
       ctx.moveTo(0, canvasElement.height);
       ctx.lineTo(0, canvasElement.height - ctx.lineWidth / 2);
       ctx.lineTo(ctx.lineWidth / 2, canvasElement.height);
       ctx.fill();
       ctx.closePath();
-      pattern = ctx.createPattern(canvasElement, "repeat");
+
+      pattern = ctx.createPattern(canvasElement, 'repeat');
       pattern.canvas = canvasElement;
       break;
     default:
   }
+
   if (patternId === 0) {
     pattern.empty = true;
   }
+
   pattern.id = patternId;
   pattern.color = color;
+
   return pattern;
 };
+
 export default getPolygonPattern;