@openglobus/og 0.24.2 → 0.25.0

package/lib/js/layer/GeoVideo.js

@@ -1,157 +0,0 @@
-import { BaseGeoImage } from "./BaseGeoImage";
-/**
- * Used to load and display a video stream by specific corners coordinates on the globe.
- * @class
- * @extends {BaseGeoImage}
- */
-class GeoVideo extends BaseGeoImage {
-    constructor(name, options = {}) {
-        super(name, options);
-        this._animate = true;
-        this._video = options.videoElement || null;
-        this._src = options.src || null;
-    }
-    get instanceName() {
-        return "GeoVideo";
-    }
-    /**
-     * Sets video source url path.
-     * @public
-     * @param {string} src - Video url path.
-     */
-    setSrc(src) {
-        this._planet && this._planet._geoImageCreator.remove(this);
-        this._src = src;
-        this._sourceReady = false;
-    }
-    /**
-     * Sets HTML5 video object.
-     * @public
-     * @param {HTMLVideoElement} video - HTML5 video element object.
-     */
-    setVideoElement(video) {
-        this._planet && this._planet._geoImageCreator.remove(this);
-        this._video = video;
-        this._src = video.src;
-        this._sourceReady = false;
-    }
-    /**
-     * Sets layer visibility.
-     * @public
-     * @param {boolean} visibility - Layer visibility.
-     */
-    setVisibility(visibility) {
-        if (visibility != this._visibility) {
-            super.setVisibility(visibility);
-            if (this._planet) {
-                if (visibility) {
-                    this._sourceReady && this._planet._geoImageCreator.add(this);
-                    this._video && this._video.play();
-                }
-                else {
-                    this._sourceReady && this._planet._geoImageCreator.remove(this);
-                    this._video && this._video.pause();
-                }
-            }
-        }
-    }
-    /**
-     * Creates or refresh source video GL texture.
-     * @virtual
-     * @protected
-     */
-    _createSourceTexture() {
-        let gl = this._planet.renderer.handler.gl;
-        if (this._sourceCreated) {
-            gl.bindTexture(gl.TEXTURE_2D, this._sourceTexture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._video);
-        }
-        else {
-            this._sourceTexture = this._planet.renderer.handler.createTexture_n_webgl1(this._video);
-            this._sourceCreated = true;
-        }
-    }
-    /**
-     * @private
-     */
-    _onCanPlay(video) {
-        this._frameWidth = video.videoWidth;
-        this._frameHeight = video.videoHeight;
-        video.width = video.videoWidth;
-        video.height = video.videoHeight;
-        video.play();
-        this._sourceReady = true;
-        this._planet._geoImageCreator.add(this);
-    }
-    _onError(video) {
-        let err = "unknown error";
-        switch (video.error.code) {
-            case 1:
-                err = "video loading aborted";
-                break;
-            case 2:
-                err = "network loading error";
-                break;
-            case 3:
-                err = "video decoding failed / corrupted data or unsupported codec";
-                break;
-            case 4:
-                err = "video not supported";
-                break;
-        }
-        console.warn(`Error: ${err} error-code=${video.error.code})`);
-    }
-    /**
-     * Loads planet segment material. In this case - GeoImage source video.
-     * @public
-     * @param {Material} material - GeoImage planet material.
-     */
-    loadMaterial(material) {
-        material.isLoading = true;
-        this._creationProceeding = true;
-        if (!this._sourceReady && this._src) {
-            if (this._video) {
-                if (this._video.readyState === this._video.HAVE_ENOUGH_DATA) {
-                    this._onCanPlay(this._video);
-                }
-                else if (this._video.src) {
-                    let that = this;
-                    this._video.addEventListener("canplay", function (e) {
-                        that._onCanPlay(this);
-                    });
-                }
-            }
-            else {
-                this._video = document.createElement("video");
-                this._video.crossOrigin = "Anonymous";
-                let that = this;
-                this._video.addEventListener("canplay", function () {
-                    that._onCanPlay(this);
-                });
-                this._video.addEventListener("error", function () {
-                    that._onError(this);
-                });
-            }
-            this._video.autoplay = true;
-            this._video.loop = true;
-            this._video.src = this._src;
-            this._video.muted = true;
-            this._video.setAttribute("playsinline", "true");
-            this._video.setAttribute("webkit-playsinline", "true");
-        }
-        else {
-            this._planet._geoImageCreator.add(this);
-        }
-    }
-    /**
-     * @virtual
-     * @param {Material} material - GeoImage material.
-     */
-    abortMaterialLoading(material) {
-        this._video && (this._video.src = "");
-        this._creationProceeding = false;
-        material.isLoading = false;
-        material.isReady = false;
-    }
-}
-export { GeoVideo };

package/lib/js/layer/KML.d.ts

@@ -1,74 +0,0 @@
-import { Billboard } from "../entity/Billboard";
-import type { IBillboardParams } from "../entity/Billboard";
-import { Entity } from "../entity/Entity";
-import { Extent } from "../Extent";
-import { Vector } from "./Vector";
-import type { IVectorParams } from "./Vector";
-interface IKMLParams extends IVectorParams {
-    color?: string;
-    billboard?: IBillboardParams;
-}
-/**
- * Layer to render KMLs files
- * @class
- * @extends {Vector}
- * @param {string} name
- * @param {*} [options]
- */
-export declare class KML extends Vector {
-    protected _color: string;
-    protected _billboard: IBillboardParams;
-    constructor(name: string, options?: IKMLParams);
-    get instanceName(): string;
-    protected _extractCoordonatesFromKml(xmlDoc: XMLDocument): number[][][];
-    protected _AGBRtoRGBA(agbr: string): string | undefined;
-    /**
-     * @protected
-     * @returns array of longitude, latitude, altitude (altitude optional)
-     */
-    protected _parseKMLcoordinates(coords: Element): number[][];
-    protected _kmlPlacemarkToEntity(placemark: Element | undefined | null, extent: Extent): Entity | undefined;
-    protected _extractStyle(placemark: Element): any;
-    protected _parseKML(xml: XMLDocument, extent: Extent, entities?: Entity[]): Entity[];
-    protected _convertKMLintoEntities(xml: XMLDocument): any;
-    /**
-     * Creates billboards or polylines from array of lonlat.
-     * @protected
-     * @param {Array} coordonates
-     * @param {string} color
-     * @returns {any}
-     */
-    protected _convertCoordonatesIntoEntities(coordinates: number[][][][], color: string, billboard?: IBillboardParams): any;
-    /**
-     * @protected
-     * @returns {Document}
-     */
-    protected _getXmlContent(file: Blob): Promise<XMLDocument>;
-    protected _expandExtents(extent1: Extent | null | undefined, extent2: Extent): Extent;
-    /**
-     * @public
-     * @param {File[]} kmls
-     * @param {string} [color]
-     * @param {Billboard} [billboard]
-     * @returns {Promise<{entities: Entity[], extent: Extent}>}
-     */
-    addKmlFromFiles(kmls: Blob[], color?: string, billboard?: IBillboardParams): Promise<{
-        entities: any;
-        extent: any;
-    } | null>;
-    /**
-     * @param {string} color
-     * @public
-     */
-    setColor(color: string): void;
-    protected _getKmlFromUrl(url: string): Promise<Document>;
-    /**
-     * @public
-     * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
-     * @param {string} [color]
-     * @param {Billboard} [billboard]
-     * @returns {Promise<{entities: Entity[], extent: Extent}>}
-     */
-    addKmlFromUrl(url: string, color?: string, billboard?: Billboard | IBillboardParams): Promise<any>;
-}
-export {};

package/lib/js/layer/KML.js

@@ -1,303 +0,0 @@
-import { Entity } from "../entity/Entity";
-import { Extent } from "../Extent";
-import { LonLat } from "../LonLat";
-import { Vector } from "./Vector";
-/**
- * Layer to render KMLs files
- * @class
- * @extends {Vector}
- * @param {string} name
- * @param {*} [options]
- */
-export class KML extends Vector {
-    constructor(name, options = {}) {
-        super(name, options);
-        this._billboard = options.billboard || {
-            src: "https://openglobus.org/examples/billboards/carrot.png"
-        };
-        this._color = options.color || "#6689db";
-    }
-    get instanceName() {
-        return "KML";
-    }
-    _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)));
-        return coordinates;
-    }
-    _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)
-     */
-    _parseKMLcoordinates(coords) {
-        const coordinates = coords.innerHTML.trim()
-            .replace(/\n/g, ' ')
-            .replace(/\t/g, ' ')
-            .replace(/ +/g, ' ')
-            .split(" ")
-            .map((co) => co.split(",").map(parseFloat));
-        return coordinates;
-    }
-    _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 = [];
-        for (const coord of placemark.getElementsByTagName("coordinates")) {
-            const coordinates = this._parseKMLcoordinates(coord) || [[0, 0, 0]];
-            for (const lonlatalt of coordinates) {
-                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 (lonLats.length === 1) {
-            const hdgrad = iconHeading * 0.01745329; // radians
-            return new Entity({
-                name,
-                lonlat: lonLats[0],
-                billboard: {
-                    src: iconURL,
-                    size: [24, 24],
-                    color: iconColor,
-                    rotation: hdgrad
-                },
-                properties: {
-                    color: iconColor,
-                    heading: iconHeading
-                }
-            });
-        }
-        else {
-            return new Entity({
-                polyline: {
-                    pathLonLat: [lonLats],
-                    thickness: lineWidth,
-                    color: lineColor,
-                    isClosed: false
-                }
-            });
-        }
-    }
-    _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];
-            if (iconstyle) {
-                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];
-                    if (href) {
-                        iconURL = href.innerHTML.trim();
-                    }
-                }
-            }
-            let linestyle = style.getElementsByTagName("LineStyle")[0];
-            if (linestyle) {
-                let color = linestyle.getElementsByTagName("color")[0];
-                if (color)
-                    lineColor = this._AGBRtoRGBA(color.innerHTML.trim());
-                let width = linestyle.getElementsByTagName("width")[0];
-                if (width !== undefined)
-                    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 };
-    }
-    _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);
-        }
-        return entities;
-    }
-    _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 };
-    }
-    /**
-     * Creates billboards or polylines from array of lonlat.
-     * @protected
-     * @param {Array} coordonates
-     * @param {string} color
-     * @returns {any}
-     */
-    _convertCoordonatesIntoEntities(coordinates, color, billboard) {
-        const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
-        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 = [];
-        coordinates.forEach((kmlFile) => kmlFile.forEach((p) => _pathes.push(p)));
-        const entities = _pathes.map((path) => {
-            if (path.length === 1) {
-                const lonlat = path[0];
-                const _entity = new Entity({ lonlat, billboard });
-                addToExtent(lonlat);
-                return _entity;
-            }
-            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 }
-                });
-                return _entity;
-            }
-        });
-        return { entities, extent };
-    }
-    /**
-     * @protected
-     * @returns {Document}
-     */
-    _getXmlContent(file) {
-        return new Promise((resolve) => {
-            const fileReader = new FileReader();
-            fileReader.onload = async (i) => resolve(new DOMParser().parseFromString(i.target.result, "text/xml"));
-            fileReader.readAsText(file);
-        });
-    }
-    _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)
-            extent1.southWest.lat = extent2.southWest.lat;
-        if (extent2.northEast.lon > extent1.northEast.lon)
-            extent1.northEast.lon = extent2.northEast.lon;
-        if (extent2.northEast.lat > extent1.northEast.lat)
-            extent1.northEast.lat = extent2.northEast.lat;
-        return extent1;
-    }
-    /**
-     * @public
-     * @param {File[]} kmls
-     * @param {string} [color]
-     * @param {Billboard} [billboard]
-     * @returns {Promise<{entities: Entity[], extent: Extent}>}
-     */
-    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);
-        this._extent = this._expandExtents(this._extent, extent);
-        entities.forEach(this.add.bind(this));
-        return { entities, extent };
-    }
-    /**
-     * @param {string} color
-     * @public
-     */
-    setColor(color) {
-        this._color = color;
-        this._billboard.color = color;
-    }
-    _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 {
-                    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.
-     * @param {string} [color]
-     * @param {Billboard} [billboard]
-     * @returns {Promise<{entities: Entity[], extent: Extent}>}
-     */
-    async addKmlFromUrl(url, color, billboard) {
-        const kml = await this._getKmlFromUrl(url);
-        /*
-                const coordonates = this._extractCoordonatesFromKml(kml);
-                const { entities, extent } = this._convertCoordonatesIntoEntities(
-                    [coordonates],
-                    color || this._color,
-                    billboard || this._billboard
-                );
-        */
-        const { entities, extent } = this._convertKMLintoEntities(kml);
-        this._extent = this._expandExtents(this._extent, extent);
-        entities.forEach(this.add.bind(this));
-        return { entities, extent };
-    }
-}