@pirireis/webglobeplugins 0.0.1

package/heatwavemaps/isobar/objectarraylabels.js

@@ -0,0 +1,247 @@
+import {
+    CSGlobe,
+    CSIconTypes,
+    CSObjectTypes,
+    CSObjectArrayUpdateTypes,
+} from "@pirireis/webglobe";
+
+/**
+ * @typedef {Object} IconPayload
+ * @property {string} app6DCode
+ * @property {string} accsCode
+ */
+
+/**
+ * @typedef {IconPayload & Object.<string, any>} PointPayload
+ */
+
+/**
+ * @typedef {Object} CanChangeOptions
+ * @property {boolean} [attribs=false]
+ * @property {boolean} [icon=false]
+ * @property {boolean} [label=false]
+ * @property {boolean} [heading=false]
+ */
+
+/**
+ * @typedef {Object} PointObjectArray
+ * @property {number[]} coords [longitude1, latitude1, longitude2, latitude2, ....]
+ * @property {number[]} coordsZ [z1, z2, ....]
+ * @property {PointPayload[]} attribs
+ */
+
+class ObjectArrayLabels {
+    /**
+     * @param {number | string} id
+     * @param {CSGlobe} globe
+     */
+    constructor(id, globe, labelStyle = null) {
+        this.id = id;
+        this.setGlobe(globe);
+
+        this.data = [
+            {
+                coords: [],
+                coordsZ: [],
+                attribs: [],
+            },
+        ];
+
+        this.primaryKey = "id";
+
+        this.objectType = CSObjectTypes.POINT;
+        this.filter = null;
+        this.bbox = null;
+        this.startLod = 2;
+        this.endLod = 19;
+        this.query = true;
+        this.reportObj = function (values, mouseEvent) { };
+        this._idCollector = new Set();
+        this._setStyle(labelStyle);
+    }
+
+
+
+    _setStyle(labelStyle) {
+        this.style = this.globe.ObjectArray.GetDefaultStyle();
+
+        if (labelStyle) {
+            this.style.labels[0] = labelStyle;
+        } else {
+            this.style.labels[0].vAlignment = 2 // dikey olarak tam noktanın ortası
+            this.style.labels[0].hAlignment = 2 // yatay olarak tam noktanın ortası
+            this.style.labels[0].size = 11;
+            this.style.labels[0].drawAlways = true;
+            this.style.labels[0].fontFamily.name = "arial";
+            this.style.labels[0].fontFamily.bold = false;
+            this.style.labels[0].fontFamily.hollow = true;
+            this.style.labels[0].fontFamily.hollowWidth = 1;
+            this.style.labels[0].fontFamily.hollowOpacity = 1;
+        }
+
+        this.style.labels[0].text = "${value}";
+        this.style.fidKey = this.primaryKey;
+
+        this.style.iconType = CSIconTypes.NOICON; // milIcon ekleyebilmek için icon tipi MAP olmalı
+    }
+    /**
+     * @param {CSGlobe} [globe]
+     */
+    setGlobe(globe) {
+        if (!globe) return;
+        this.globe = globe;
+    }
+
+    addToMap() {
+        this.globe.ObjectArray.Add(this);
+    }
+
+    removeFromMap() {
+        this.flush();
+        this.globe.ObjectArray.Delete(this.id);
+    }
+
+    /**
+     * Haritaya kullanılacak veriyi verir. Her çağrıldığında tüm hesaplamalar yeniden yapılır
+     * @param {PointObjectArray} data
+     */
+    setData(data) {
+        this.globe.ObjectArray.SetData(this, [data]);
+    }
+
+    /**
+     * @param {PointObjectArray} data
+     * @param {CSObjectArrayUpdateTypes} operation
+     * @param {CanChangeOptions} [canChange]
+     */
+    updateData(data, operation, canChange) {
+        this.globe.ObjectArray.UpdateData(this, operation, [data], canChange);
+    }
+
+    flush() {
+        const deleteBucket = {
+            coords: [],
+            coordsZ: [],
+            attribs: [],
+        };
+        this.setData(deleteBucket);
+        this._idCollector = new Set();
+    }
+
+    /**
+     * Haritaya kullanılacak veriyi verir. Her çağrıldığında tüm hesaplamalar yeniden yapılmaz, ancak ön hesaplama maliyeti vardır
+     * @param {PointObjectArray} data
+     */
+    setControlledData(data) {
+        const paritalData = {
+            add: {
+                coords: [],
+                coordsZ: [],
+                attribs: [],
+            },
+            update: {
+                coords: [],
+                coordsZ: [],
+                attribs: [],
+            },
+            delete: {
+                coords: [],
+                coordsZ: [],
+                attribs: [],
+            },
+            canChange: {
+                // Tüm değişimler gözardı edilecek
+                attribs: false,
+                icon: false,
+                label: false,
+                heading: false,
+            },
+        };
+        // İlk toplu ekleme adımı
+        if (this._idCollector.size === 0) {
+            this.setData(data);
+
+            // Eklenen id'ler set edildi
+            for (let i = 0; i < data.attribs.length; i++) {
+                const currentPayload = data.attribs[i];
+                const id = currentPayload[this.primaryKey];
+
+                this._idCollector.add(id);
+            }
+
+            return;
+        }
+
+        /** @type {Set<string>} */
+        const dataIds = new Set();
+
+        for (let i = 0; i < data.attribs.length; i++) {
+            const currentPayload = data.attribs[i];
+            const id = currentPayload[this.primaryKey];
+
+            let bucket = paritalData.add;
+
+            dataIds.add(id);
+
+            if (this._idCollector.has(id)) {
+                bucket = paritalData.update;
+            } else {
+                this._idCollector.add(id);
+            }
+
+            bucket.coords.push(data.coords[2 * i], data.coords[2 * i + 1]);
+            bucket.coordsZ.push(data.coordsZ[i]);
+            bucket.attribs.push(currentPayload);
+        }
+
+        // Artık varolmayan elemenları sil
+        const deleteBucket = paritalData.delete;
+        this._idCollector.forEach((id) => {
+            if (!dataIds.has(id)) {
+                this._idCollector.delete(id);
+
+                deleteBucket.coords.push(0, 0);
+                deleteBucket.coordsZ.push(0);
+                deleteBucket.attribs.push({
+                    [this.primaryKey]: id,
+                });
+            }
+        });
+
+        if (paritalData.add.coords.length > 0) {
+            this.updateData(paritalData.add, CSObjectArrayUpdateTypes.ADD);
+        }
+
+        if (paritalData.update.coords.length > 0) {
+            this.updateData(
+                paritalData.update,
+                CSObjectArrayUpdateTypes.UPDATE,
+                paritalData.canChange
+            );
+        }
+
+        if (paritalData.delete.coords.length > 0) {
+            this.updateData(paritalData.delete, CSObjectArrayUpdateTypes.DELETE);
+        }
+    }
+
+
+    setPrimarykey(key) {
+        this.primaryKey = key;
+    }
+
+    setSymbolSet(symbolSet) {
+        this.symbolSet = symbolSet;
+    }
+
+    getLabelStyle() {
+        return this.style.labels[0];
+    }
+
+    setLabelStyle(style) {
+        this.style.labels[0] = style;
+
+    }
+}
+
+export default ObjectArrayLabels;

package/heatwavemaps/isobar/plugin.js

@@ -0,0 +1,337 @@
+import { ShapesOnGlobeProgram, latLongToPixelXY } from "../../util";
+
+import ContourMipmap, { scaleParameters } from "./quadtreecontours";
+
+import ObjectArrayLabels from "./objectarraylabels";
+
+
+
+export class IsobarRasterToVector {
+
+
+    /**
+     * @typedef {Object} IsobarData
+     * @property {number} threshold 
+     * @property {[number, number, number]} color | rgb color
+     * @property {string} label 
+     * 
+     * @param {*} id 
+     * @param {Array<IsobarData>} isabors 
+     * @param {number} width
+     * @param {number} height
+     * @param {Object} options
+     * @param {boolean} options.xFlip
+     * @param {boolean} options.yFlip
+     * @param {boolean} options.isOn
+     * @param {boolean} options.isLabelsOn
+     * @param {Object} options.labelStyle
+     */
+    constructor(id, dataManager, isobars, width, height, [minLon, minLat, maxLon, maxLat] = [-180, -90, 180, 90], { xFlip = false, yFlip = true, isOn = true, isLabelsOn = true, labelStyle = null, maxMipmapLevel = null } = {}) {
+        this.id = id;
+        this._isobarsCheckAndComplete(isobars);
+        this.isobars = isobars;
+        this.contourMipmap = null;
+        this.width = width;
+        this.height = height;
+        this.xFlip = xFlip;
+        this.yFlip = yFlip;
+        this.bbox = [minLon, minLat, maxLon, maxLat];
+        this.dataManager = dataManager;
+
+        this._transformationMethod = getTransformationMethod(xFlip, yFlip, width, height, minLon, minLat, maxLon, maxLat);
+        this._isOn = isOn;
+        this._isLabelsOn = isLabelsOn;
+        this._labelsLayer = null;
+        this._labelsLayerId = id + '_isobar-labels';
+        this._lineStrignRanges = [];
+        this._transpos = new Float32Array(3);
+        this._maxMipmapLevel = maxMipmapLevel;
+        this._labelStyle = labelStyle;
+
+        // this._transformationMethod = null;
+    }
+
+    // API
+
+    setData(data, on = false) {
+        if (!data) return;
+        this._data = data;
+        if (on) this._isOn = true;
+        if (this._isOn) this._calculateAll(data);
+    }
+
+    on() {
+        this._isOn = true;
+        if (this._data) this._calculateAll(this._data);
+    }
+
+    off() {
+        this._isOn = false;
+        this.clean();
+    }
+
+
+    clean() {
+        this.flush();
+        this.globe.DrawRender();
+    }
+
+    setFlip(xFlip, yFlip) {
+        if (this.xFlip === xFlip && this.yFlip === yFlip) return;
+        this.xFlip = xFlip;
+        this.yFlip = yFlip;
+        const [minLon, minLat, maxLon, maxLat] = this.bbox;
+        const { width, height } = this
+        this._transformationMethod = getTransformationMethod(xFlip, yFlip, width, height, minLon, minLat, maxLon, maxLat);
+        this._calculateLines();
+        this.globe.DrawRender();
+    }
+
+    setBoundingBox([minLon, minLat, maxLon, maxLat]) {
+        this.bbox = [minLon, minLat, maxLon, maxLat];
+        const { width, height, xFlip, yFlip } = this;
+        this._transformationMethod = getTransformationMethod(xFlip, yFlip, width, height, minLon, minLat, maxLon, maxLat);
+        this._calculateLines();
+        this.globe.DrawRender();
+    }
+
+
+    setIsLabelsOn(isLabelsOn) {
+        if (this._isLabelsOn === isLabelsOn) return;
+        this._isLabelsOn = isLabelsOn;
+        if (!isLabelsOn) {
+            this._labelsLayer.removeFromMap();
+        } else {
+            if (this._labelsLayer === null) this._createLabelsLayer();
+            this._labelsLayer.addToMap();
+            this._createBufferData();
+        }
+    }
+
+    getIsobars() {
+        return this.isobars;
+    }
+
+    setIsobars(isobars) {
+        this._isobarsCheckAndComplete(isobars);
+        this.isobars = isobars;
+        this._calculateLines();
+        this.globe.DrawRender();
+    }
+
+    setWidthHeight(width, height) {
+        this.width = width;
+        this.height = height;
+        const { xFlip, yFlip } = this;
+        const [minLon, minLat, maxLon, maxLat] = this.bbox;
+        this._transformationMethod = getTransformationMethod(xFlip, yFlip, width, height, minLon, minLat, maxLon, maxLat);
+        this._calculateLines();
+        this.globe.DrawRender();
+    }
+
+
+    getLabelStyle() {
+        return this._labelsLayer.getLabelStyle();
+    }
+
+    setOpacity(opacity) {
+        if (opacity < 0 || opacity > 1) throw new Error("Opacity must be between 0 and 1");
+        this.program.setOpacity(opacity);
+    }
+
+
+    setLabelStyle(style) {
+        this._labelStyle = style;
+        if (this._labelsLayer) this._labelsLayer.setLabelStyle(style);
+        const lastState = this._isLabelsOn;
+        this.setIsLabelsOn(false);
+        this.setIsLabelsOn(lastState);
+        if (lastState) this._createBufferData();
+    }
+
+    setMaxMipmapLevel(maxMipmapLevel = null) {
+        this._maxMipmapLevel = maxMipmapLevel;
+        this._calculateLines();
+        this.globe.DrawRender();
+    }
+
+
+    flush() {
+        this.program.setBufferData(new Float32Array(0));
+        this._lineStrignRanges = [];
+        if (this._isLabelsOn) this._labelsLayer.flush();
+    }
+
+    // 
+    // implicit methods
+
+    init(globe, gl) {
+        this.gl = gl
+        this.globe = globe
+
+        this.program = new ShapesOnGlobeProgram(gl, globe, 'line_strip');
+        if (this._isLabelsOn) {
+            this._createLabelsLayer();
+            this._labelsLayer.addToMap();
+        }
+
+        this.dataManager.register(this.id, (ratio, t1, t2) => {
+            if (!t1 || !t2) {
+                this.clean();
+                return;
+            }
+            const data = dataMixer(t1, t2, ratio);
+            if (this._isOn) this.setData(data);
+        });
+    }
+
+
+    resize(width, height) {
+        this.program.resize(width, height);
+    }
+
+    draw3D(projMatrix, modelviewMatrix, transPos) {
+        if (!this._ready) return;
+        this._drawContour(projMatrix, modelviewMatrix, transPos);
+    }
+
+    _calculateLines() {
+        this._calculateContours();
+        this._bufferData = this._createBufferData();
+        this.program.setBufferData(this._bufferData);
+    }
+
+    _drawContour(projMatrix, modelviewMatrix, transPos) {
+        this.program.draw(projMatrix, modelviewMatrix, transPos, this._lineStrignRanges);
+    }
+
+
+
+    _calculateIntersections(threshold) {
+        const { _transformationMethod } = this;
+        const lines = this.contourMipmap.contour([threshold], { maxMipmapLevel: this._maxMipmapLevel }).map(coords => {
+            return coords.map(([x, y]) => _transformationMethod(x, y))
+        }
+        );
+        return lines;
+    }
+
+
+    _calculateAll(data) {
+        this.contourMipmap = new ContourMipmap(data, this.width, this.height);
+        this._calculateContours();
+        this._bufferData = this._createBufferData();
+        this.program.setBufferData(this._bufferData);
+
+        this.globe.DrawRender();
+        this._ready = true;
+    }
+
+    _calculateContours() {
+        const { isobars } = this;
+        for (const isobar of isobars) {
+            const { threshold } = isobar;
+            const lines = this._calculateIntersections(threshold);
+            isobar.lines = lines;
+        }
+    }
+
+
+    _isobarsCheckAndComplete(isobars) {
+        window.isobars = isobars;
+        if (!Array.isArray(isobars)) throw new Error("isobars must be an array");
+        if (isobars.length === 0) throw new Error("isobars must contain at least one element");
+        for (const isobar of isobars) {
+            if (!isobar || typeof isobar !== 'object') throw new Error("isobar must be an object");
+            if (typeof isobar.threshold !== 'number') throw new Error("isobar.threshold must be a number");
+            if (isobar.color) {
+                if (!Array.isArray(isobar.color) || isobar.color.length !== 3) throw new Error("isobar.color must be an array with 3 elements");
+                for (const color of isobar.color) {
+                    if (color < 0 || color > 1) throw new Error("isobar.color elements must be between 0 and 1");
+                }
+            }
+            if (!isobar.color) isobar.color = [1, 1, 1];
+        }
+    }
+
+    _createBufferData() {
+        const { isobars } = this;
+        const pointCount = isobars.reduce((acc, { lines }) => acc + lines.reduce((acc, line) => acc + line.length, 0), 0);
+        const bufferData = new Float32Array(pointCount * 6);
+
+        let index = 0;
+        let pointCounter = 0;
+        this._lineStrignRanges = [];
+
+        // gather label data label
+        const labelPoints = {
+            coords: [],
+            coordsZ: [],
+            attribs: []
+        };
+        const { coords, coordsZ, attribs } = labelPoints;
+        let fidCounter = 0;
+        for (const { lines, color, threshold } of isobars) {
+            for (const line of lines) {
+                let startIndex = pointCounter;
+                for (const [x, y] of line) {
+                    const pixXY = latLongToPixelXY(y, x)
+                    bufferData[index++] = pixXY.x;
+                    bufferData[index++] = pixXY.y;
+                    bufferData[index++] = color[0];
+                    bufferData[index++] = color[1];
+                    bufferData[index++] = color[2];
+                    bufferData[index++] = 1.0;
+                    pointCounter++;
+                }
+
+                coords.push(line[0][0], line[0][1]);
+                coordsZ.push(0)
+                attribs.push({ value: threshold, fid: fidCounter++ })
+                this._lineStrignRanges.push([startIndex, pointCounter - startIndex]);
+            }
+        }
+        if (this._isLabelsOn) this._labelsLayer.setData(labelPoints);
+
+        return bufferData;
+    }
+
+
+
+    _createLabelsLayer() {
+        this._labelsLayer = new ObjectArrayLabels(this._labelsLayerId, this.globe, this._labelStyle);
+    }
+
+    setGeometry() {
+        this.program.setGeometry();
+    }
+
+
+    free() {
+        this.flush();
+        this.program.free();
+        if (this._isLabelsOn) this._labelsLayer.removeFromMap();
+        this.dataManager.unregister(this.id);
+    }
+
+
+
+}
+
+const getTransformationMethod = (xFlip, yFlip, width, height, minX, minY, maxX, maxY) => {
+    const { scaleX, scaleY } = scaleParameters(minX, minY, maxX, maxY, width, height);
+    if (xFlip && yFlip) return (x, y) => [maxX - x * scaleX, maxY - y * scaleY];
+    if (xFlip && !yFlip) return (x, y) => [maxX - x * scaleX, minY + y * scaleY];
+    if (!xFlip && yFlip) return (x, y) => [minX + x * scaleX, maxY - y * scaleY];
+    return (x, y) => [minX + x * scaleX, minY + y * scaleY];
+}
+
+function dataMixer(data1, data2, ratio) {
+    if (!data1 || !data2) return null;
+    if (data1.length !== data2.length) throw new Error("Data length mismatch");
+    const data = new Float32Array(data1.length);
+    for (let i = 0; i < data1.length; i++) {
+        data[i] = data1[i] * (1 - ratio) + data2[i] * ratio;
+    }
+    return data;
+}