@openglobus/og 0.18.0 → 0.18.1

package/{src/layer/KML.ts → lib/js/layer/KML.js}

@@ -1,15 +1,7 @@
-import {Billboard, IBillboardParams} from "../entity/Billboard";
-import {Entity} from "../entity/Entity";
-import {Extent} from "../Extent";
-import {LonLat} from "../LonLat";
-import {Vector, IVectorParams} from "./Vector";
-import {NumberArray3} from "../math/Vec3";
-
-interface IKMLParams extends IVectorParams {
-    color?: string;
-    billboard?: IBillboardParams;
-}
-
+import { Entity } from "../entity/Entity";
+import { Extent } from "../Extent";
+import { LonLat } from "../LonLat";
+import { Vector } from "./Vector";
 /**
  * Layer to render KMLs files
  * @class
@@ -18,92 +10,74 @@ interface IKMLParams extends IVectorParams {
  * @param {*} [options]
  */
 export class KML extends Vector {
-
-    protected _color: string;
-    protected _billboard: IBillboardParams;
-
-    constructor(name: string, options: IKMLParams = {}) {
+    constructor(name, options = {}) {
         super(name, options);
         this._billboard = options.billboard || {
             src: "https://openglobus.org/examples/billboards/carrot.png"
         };
-
         this._color = options.color || "#6689db";
     }
-
-    public override get instanceName() {
+    get instanceName() {
         return "KML";
     }
-
-    protected _extractCoordonatesFromKml(xmlDoc: XMLDocument) {
+    _extractCoordonatesFromKml(xmlDoc) {
         const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
-        const rawText = raw.map(item => item.textContent!.trim());
-        const coordinates = rawText.map(item =>
-            item
-                .replace(/\n/g, " ")
-                .replace(/\t/g, " ")
-                .replace(/ +/g, " ")
-                .split(" ")
-                .map((co) => co.split(",").map(parseFloat))
-        );
+        const rawText = raw.map(item => item.textContent.trim());
+        const coordinates = rawText.map(item => item
+            .replace(/\n/g, " ")
+            .replace(/\t/g, " ")
+            .replace(/ +/g, " ")
+            .split(" ")
+            .map((co) => co.split(",").map(parseFloat)));
         return coordinates;
     }
-
-    protected _AGBRtoRGBA(agbr: string): string | undefined {
-        if (!agbr || agbr.length != 8) return;
-
+    _AGBRtoRGBA(agbr) {
+        if (!agbr || agbr.length != 8)
+            return;
         const a = parseInt(agbr.slice(0, 2), 16) / 255;
         const b = parseInt(agbr.slice(2, 4), 16);
         const g = parseInt(agbr.slice(4, 6), 16);
         const r = parseInt(agbr.slice(6, 8), 16);
-
         return `rgba(${r},${g},${b},${a})`;
     }
-
     /**
      * @protected
      returns array of longitude, latitude, altitude (altitude optional)
      */
-    protected _parseKMLcoordinates(coords: Element): number[][] {
+    _parseKMLcoordinates(coords) {
         const coordinates = coords.innerHTML.trim()
             .replace(/\n/g, ' ')
             .replace(/\t/g, ' ')
             .replace(/ +/g, ' ')
             .split(" ")
-            .map((co) => co.split(",").map(parseFloat))
-
+            .map((co) => co.split(",").map(parseFloat));
         return coordinates;
     }
-
-    protected _kmlPlacemarkToEntity(placemark: Element | undefined | null, extent: Extent): Entity | undefined {
-        if (!placemark) return;
-
-        const nameTags: Element[] = Array.from(placemark.getElementsByTagName("name"))
-        const name: string = nameTags && nameTags.length > 0 ? nameTags[0].innerHTML.trim() : '';
-
-        const {iconHeading, iconURL, iconColor, lineWidth, lineColor} = this._extractStyle(placemark);
-
+    _kmlPlacemarkToEntity(placemark, extent) {
+        if (!placemark)
+            return;
+        const nameTags = Array.from(placemark.getElementsByTagName("name"));
+        const name = nameTags && nameTags.length > 0 ? nameTags[0].innerHTML.trim() : '';
+        const { iconHeading, iconURL, iconColor, lineWidth, lineColor } = this._extractStyle(placemark);
         // TODO handle MultiGeometry
-
-        const lonLats: LonLat[] = [];
+        const lonLats = [];
         for (const coord of placemark.getElementsByTagName("coordinates")) {
-            const coordinates = this._parseKMLcoordinates(coord) || [[0, 0, 0]]
-
+            const coordinates = this._parseKMLcoordinates(coord) || [[0, 0, 0]];
             for (const lonlatalt of coordinates) {
-                const [lon, lat, alt] = lonlatalt
-
+                const [lon, lat, alt] = lonlatalt;
                 lonLats.push(new LonLat(lon, lat, alt));
-
-                if (lon < extent.southWest.lon) extent.southWest.lon = lon;
-                if (lat < extent.southWest.lat) extent.southWest.lat = lat;
-                if (lon > extent.northEast.lon) extent.northEast.lon = lon;
-                if (lat > extent.northEast.lat) extent.northEast.lat = lat;
+                if (lon < extent.southWest.lon)
+                    extent.southWest.lon = lon;
+                if (lat < extent.southWest.lat)
+                    extent.southWest.lat = lat;
+                if (lon > extent.northEast.lon)
+                    extent.northEast.lon = lon;
+                if (lat > extent.northEast.lat)
+                    extent.northEast.lat = lat;
             }
         }
-
         if (lonLats.length === 1) {
             const hdgrad = iconHeading * 0.01745329; // radians
-
             return new Entity({
                 name,
                 lonlat: lonLats[0],
@@ -118,8 +92,8 @@ export class KML extends Vector {
                     heading: iconHeading
                 }
             });
-
-        } else {
+        }
+        else {
             return new Entity({
                 polyline: {
                     pathLonLat: [lonLats],
@@ -130,14 +104,12 @@ export class KML extends Vector {
             });
         }
     }
-
-    protected _extractStyle(placemark: Element): any {
+    _extractStyle(placemark) {
         let iconColor;
         let iconHeading;
         let iconURL;
         let lineColor;
         let lineWidth;
-
         const style = placemark.getElementsByTagName("Style")[0];
         if (style) {
             let iconstyle = style.getElementsByTagName("IconStyle")[0];
@@ -145,14 +117,12 @@ export class KML extends Vector {
                 let color = iconstyle.getElementsByTagName("color")[0];
                 if (color)
                     iconColor = this._AGBRtoRGBA(color.innerHTML.trim());
-
                 let heading = iconstyle.getElementsByTagName("heading")[0];
                 if (heading) {
                     const hdg = parseFloat(heading.innerHTML.trim());
                     if (hdg >= 0 && hdg <= 360)
                         iconHeading = hdg % 360;
                 }
-
                 let icon = iconstyle.getElementsByTagName("Icon")[0];
                 if (icon) {
                     let href = icon.getElementsByTagName("href")[0];
@@ -161,7 +131,6 @@ export class KML extends Vector {
                     }
                 }
             }
-
             let linestyle = style.getElementsByTagName("LineStyle")[0];
             if (linestyle) {
                 let color = linestyle.getElementsByTagName("color")[0];
@@ -172,39 +141,35 @@ export class KML extends Vector {
                     lineWidth = parseFloat(width.innerHTML.trim());
             }
         }
-
-        if (!iconColor) iconColor = "#FFFFFF"
-        if (!iconHeading) iconHeading = 0
-        if (!iconURL) iconURL = "https://openglobus.org/examples/billboards/carrot.png"
-
-        if (!lineColor) lineColor = "#FFFFFF"
-        if (!lineWidth) lineWidth = 1
-
-        return {iconHeading, iconURL, iconColor, lineWidth, lineColor};
+        if (!iconColor)
+            iconColor = "#FFFFFF";
+        if (!iconHeading)
+            iconHeading = 0;
+        if (!iconURL)
+            iconURL = "https://openglobus.org/examples/billboards/carrot.png";
+        if (!lineColor)
+            lineColor = "#FFFFFF";
+        if (!lineWidth)
+            lineWidth = 1;
+        return { iconHeading, iconURL, iconColor, lineWidth, lineColor };
     }
-
-    protected _parseKML(xml: XMLDocument, extent: Extent, entities?: Entity[]): Entity[] {
+    _parseKML(xml, extent, entities) {
         if (!entities)
             entities = [];
-
         if (xml.documentElement.nodeName !== "kml")
             return entities;
-
         for (const placemark of xml.getElementsByTagName("Placemark")) {
             const entity = this._kmlPlacemarkToEntity(placemark, extent);
-            if (entity) entities.push(entity);
+            if (entity)
+                entities.push(entity);
         }
-
         return entities;
     }
-
-    protected _convertKMLintoEntities(xml: XMLDocument): any {
+    _convertKMLintoEntities(xml) {
         const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
         const entities = this._parseKML(xml, extent);
-
-        return {entities, extent}
+        return { entities, extent };
     }
-
     /**
      * Creates billboards or polylines from array of lonlat.
      * @protected
@@ -212,55 +177,55 @@ export class KML extends Vector {
      * @param {string} color
      * @returns {any}
      */
-    protected _convertCoordonatesIntoEntities(coordinates: number[][][][], color: string, billboard?: IBillboardParams): any {
+    _convertCoordonatesIntoEntities(coordinates, color, billboard) {
         const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
-        const addToExtent = (c: number[]) => {
-            const lon = c[0],
-                lat = c[1];
-            if (lon < extent.southWest.lon) extent.southWest.lon = lon;
-            if (lat < extent.southWest.lat) extent.southWest.lat = lat;
-            if (lon > extent.northEast.lon) extent.northEast.lon = lon;
-            if (lat > extent.northEast.lat) extent.northEast.lat = lat;
+        const addToExtent = (c) => {
+            const lon = c[0], lat = c[1];
+            if (lon < extent.southWest.lon)
+                extent.southWest.lon = lon;
+            if (lat < extent.southWest.lat)
+                extent.southWest.lat = lat;
+            if (lon > extent.northEast.lon)
+                extent.northEast.lon = lon;
+            if (lat > extent.northEast.lat)
+                extent.northEast.lat = lat;
         };
-        const _pathes: number[][][] = [];
-
-        coordinates.forEach((kmlFile: number[][][]) => kmlFile.forEach((p: number[][]) => _pathes.push(p)));
-
+        const _pathes = [];
+        coordinates.forEach((kmlFile) => kmlFile.forEach((p) => _pathes.push(p)));
         const entities = _pathes.map((path) => {
             if (path.length === 1) {
-                const lonlat = path[0] as NumberArray3;
-                const _entity = new Entity({lonlat, billboard});
+                const lonlat = path[0];
+                const _entity = new Entity({ lonlat, billboard });
                 addToExtent(lonlat);
                 return _entity;
-            } else if (path.length > 1) {
-                const pathLonLat = path.map((item: number[]) => {
+            }
+            else if (path.length > 1) {
+                const pathLonLat = path.map((item) => {
                     addToExtent(item);
                     return new LonLat(item[0], item[1], item[2]);
                 });
                 const _entity = new Entity({
-                    polyline: {pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false}
+                    polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false }
                 });
                 return _entity;
             }
         });
-        return {entities, extent};
+        return { entities, extent };
     }
-
     /**
      * @protected
      * @returns {Document}
      */
-    protected _getXmlContent(file: Blob): Promise<XMLDocument> {
+    _getXmlContent(file) {
         return new Promise((resolve) => {
             const fileReader = new FileReader();
-            fileReader.onload = async (i) =>
-                resolve(new DOMParser().parseFromString(i.target!.result as string, "text/xml"));
+            fileReader.onload = async (i) => resolve(new DOMParser().parseFromString(i.target.result, "text/xml"));
             fileReader.readAsText(file);
         });
     }
-
-    protected _expandExtents(extent1: Extent | null | undefined, extent2: Extent): Extent {
-        if (!extent1) return extent2;
+    _expandExtents(extent1, extent2) {
+        if (!extent1)
+            return extent2;
         if (extent2.southWest.lon < extent1.southWest.lon)
             extent1.southWest.lon = extent2.southWest.lon;
         if (extent2.southWest.lat < extent1.southWest.lat)
@@ -271,7 +236,6 @@ export class KML extends Vector {
             extent1.northEast.lat = extent2.northEast.lat;
         return extent1;
     }
-
     /**
      * @public
      * @param {File[]} kmls
@@ -279,46 +243,41 @@ export class KML extends Vector {
      * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    public async addKmlFromFiles(kmls: Blob[], color?: string, billboard?: IBillboardParams) {
-        if (!Array.isArray(kmls)) return null
+    async addKmlFromFiles(kmls, color, billboard) {
+        if (!Array.isArray(kmls))
+            return null;
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
-        const {entities, extent} = this._convertCoordonatesIntoEntities(
-            coordonates,
-            color || this._color,
-            billboard || this._billboard
-        );
+        const { entities, extent } = this._convertCoordonatesIntoEntities(coordonates, color || this._color, billboard || this._billboard);
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
-        return {entities, extent};
+        return { entities, extent };
     }
-
     /**
      * @param {string} color
      * @public
      */
-    public setColor(color: string) {
+    setColor(color) {
         this._color = color;
         this._billboard.color = color;
     }
-
-    protected _getKmlFromUrl(url: string): Promise<Document> {
-        return new Promise<Document>((resolve, reject) => {
+    _getKmlFromUrl(url) {
+        return new Promise((resolve, reject) => {
             const request = new XMLHttpRequest();
             request.open("GET", url, true);
             request.responseType = "document";
             request.overrideMimeType("text/xml");
             request.onload = () => {
                 if (request.readyState === request.DONE && request.status === 200) {
-                    resolve(request.responseXML!);
-                } else {
+                    resolve(request.responseXML);
+                }
+                else {
                     reject(new Error("no valid kml file"));
                 }
             };
             request.send();
         });
     }
-
     /**
      * @public
      * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
@@ -326,7 +285,7 @@ export class KML extends Vector {
      * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    public async addKmlFromUrl(url: string, color?: string, billboard?: Billboard | IBillboardParams): Promise<any> {
+    async addKmlFromUrl(url, color, billboard) {
         const kml = await this._getKmlFromUrl(url);
         /*
                 const coordonates = this._extractCoordonatesFromKml(kml);
@@ -336,12 +295,9 @@ export class KML extends Vector {
                     billboard || this._billboard
                 );
         */
-        const {entities, extent} = this._convertKMLintoEntities(kml);
-
+        const { entities, extent } = this._convertKMLintoEntities(kml);
         this._extent = this._expandExtents(this._extent, extent);
-
         entities.forEach(this.add.bind(this));
-
-        return {entities, extent};
+        return { entities, extent };
     }
 }