@naivemap/mapbox-gl-image-layer 0.5.0 → 0.6.0-beta.0

package/dist/js/arrugator/Arrugator.js

@@ -0,0 +1,275 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable guard-for-in */
+// @ts-nocheck
+var tinyqueue_1 = __importDefault(require("tinyqueue"));
+var Arrugator = /** @class */ (function () {
+    function Arrugator(projector, verts, uv, trigs) {
+        this._stepsWithSameEpsilon = 0;
+        // The projector function. Must be able to take
+        // an array of two numbers [x,y] and return an array of
+        // two numbers.
+        // The typical use case is a proj4(from,to).forward function.
+        this._projector = projector;
+        // A two-dimensional array of vertex coordinates. Each vertex is a
+        // two-element [x,y] array.
+        this._verts = verts;
+        // A two-dimensional array of UV-map coordinates. These are intended to
+        // represent the [0,0]-[1-1] coordinate space of WebGL textures. Each
+        // n-th element is the UV coordinates of the n-th vertex. These shall
+        // be linearly interpolated when splitting segments.
+        this._uv = uv;
+        // A two-dimensional array of vertex coordinates, projected. Each
+        // vertex is a two-element [x,y] array.
+        this._projVerts = verts.map(projector);
+        // A two-dimensional array of triangle vertex IDs. Each triangle is a
+        // three-element [v1,v2,v3] array.
+        // The mesh is **expected** to be compact, planar, non-overlapping.
+        this._trigs = trigs;
+        // A map of segments to vertices. Key is the segment index (generated inside
+        // arrugator), value is an array of two vertex indices.
+        this._segs = [];
+        this._segCount = 0;
+        // A map of segments to triangles. Key is the segment index (generated inside
+        // arrugator), value is an array of triangle indices (all segments should
+        // have either 1 or 2 triangles associated)
+        this._segTrigs = [];
+        // A priority queue of segments, ordered by their epsilons, in descending order.
+        this._queue = new tinyqueue_1.default([], function (a, b) {
+            return b.epsilon - a.epsilon;
+        });
+        // A map of vertex indices to segment indices.
+        this._vertToSeg = new Array(verts.length);
+        for (var i in this._verts) {
+            this._vertToSeg[i] = [];
+        }
+        /// NOTE: Not using .fill([]), because that would use a reference to the *same*
+        /// empty array for every element.
+        for (var t in this._trigs) {
+            var trig = this._trigs[t];
+            var v0 = trig[0];
+            var v1 = trig[1];
+            var v2 = trig[2];
+            this._segment(v0, v1, t);
+            this._segment(v1, v2, t);
+            this._segment(v2, v0, t);
+        }
+    }
+    // Returns the segment index linking the two given vertex indices;
+    // Must be passed a triangle index to use as context.
+    // Might create a new segment index (as well as segment data structure and
+    // entry in the priority queue).
+    Arrugator.prototype._segment = function (v1, v2, t, maxEpsilon) {
+        if (maxEpsilon === void 0) { maxEpsilon = Infinity; }
+        if (this._vertToSeg[v1] && this._vertToSeg[v1][v2] !== undefined) {
+            var found = this._vertToSeg[v1][v2];
+            if (!this._segTrigs[found].includes(t)) {
+                this._segTrigs[found].push(t);
+            }
+            return found;
+        }
+        var segIdx = this._segCount++;
+        this._segs[segIdx] = [v1, v2];
+        this._vertToSeg[v1][v2] = segIdx;
+        this._vertToSeg[v2][v1] = segIdx;
+        this._segTrigs[segIdx] = [t];
+        // Calculate segment epsilon
+        // The "epsilon" of a segment is the square of the midpoint projection distance:
+        // i.e. the square of the distance between:
+        //  - the projected midpoint of the two vertices, and
+        //  - the midpoint of the two projected vertices,
+        // the distance function being euclidean distance in the "destination"
+        // projection, squared.
+        var midpoint = [
+            (this._verts[v1][0] + this._verts[v2][0]) / 2,
+            (this._verts[v1][1] + this._verts[v2][1]) / 2,
+        ];
+        var projectedMid = this._projector(midpoint);
+        var midProjected = [
+            (this._projVerts[v1][0] + this._projVerts[v2][0]) / 2,
+            (this._projVerts[v1][1] + this._projVerts[v2][1]) / 2,
+        ];
+        var epsilon = Math.pow((projectedMid[0] - midProjected[0]), 2) + Math.pow((projectedMid[1] - midProjected[1]), 2);
+        if (Number.isFinite(epsilon) && epsilon < maxEpsilon) {
+            this._queue.push({
+                v1: v1,
+                v2: v2,
+                epsilon: epsilon,
+                midpoint: midpoint,
+                projectedMid: projectedMid,
+            });
+        }
+        return segIdx;
+    };
+    // Outputs shallow copies of some data structures at the current step.
+    Arrugator.prototype.output = function () {
+        // Most data structs are 2-dimensional arrays, and doing a shallow copy
+        // of the first level *should* just work.
+        return {
+            unprojected: Array.from(this._verts),
+            projected: Array.from(this._projVerts),
+            uv: Array.from(this._uv),
+            trigs: Array.from(this._trigs),
+        };
+    };
+    // Subdivides the mesh until the maximum segment epsilon is below the
+    // given threshold.
+    // The `targetEpsilon` parameter must be in the same units as the
+    // internal epsilons: units of the projected CRS, **squared**.
+    Arrugator.prototype.lowerEpsilon = function (targetEpsilon) {
+        var currentEpsilon = this._queue.peek().epsilon;
+        var lastEpsilon = currentEpsilon;
+        while (currentEpsilon >= targetEpsilon) {
+            this.step();
+            currentEpsilon = this._queue.peek().epsilon;
+            if (currentEpsilon === lastEpsilon) {
+                this._stepsWithSameEpsilon++;
+                if (this._stepsWithSameEpsilon < 500) {
+                    console.warn('Arrugator stopped due to epsilon stall. Raster may need hints for proper arrugation.');
+                    break;
+                }
+            }
+            else {
+                this._stepsWithSameEpsilon = 0;
+                lastEpsilon = currentEpsilon;
+            }
+        }
+    };
+    Object.defineProperty(Arrugator.prototype, "epsilon", {
+        get: function () {
+            return this._queue.peek().epsilon;
+        },
+        set: function (ep) {
+            return this.lowerEpsilon(ep);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Triggers subdivision of the segment with the largest epsilon.
+    Arrugator.prototype.step = function () {
+        var seg = this._queue.pop();
+        return this._splitSegment(seg, seg.epsilon);
+    };
+    // Triggers *one* subdivision of *all* segments in the queue.
+    // Can be useful to run this prior to stepping, in order to overcome
+    // artefacts
+    Arrugator.prototype.force = function () {
+        var _this = this;
+        var segments = this._queue.data;
+        this._queue.data = []; // Empties the queue
+        this._queue.length = 0;
+        segments.forEach(function (seg) { return _this._splitSegment(seg, Infinity); });
+    };
+    // Splits the given segment.
+    // This deletes the segment, spawns a new vertex at the midpoint, and
+    // for each triangle the segment was originally a part of (either 1 or 2),
+    // the triangle is divided into two.
+    Arrugator.prototype._splitSegment = function (seg, maxEpsilon) {
+        // Which are the two vertices affected by the popped segment?
+        var v1 = seg.v1;
+        var v2 = seg.v2;
+        var s = this._vertToSeg[v1] && this._vertToSeg[v1][v2];
+        // Which triangle(s) are affected by the popped segment?
+        var trigs = this._segTrigs[s];
+        // Sanity check
+        if (trigs.length >= 3) {
+            throw new Error('Somehow a segment is shared by three triangles');
+        }
+        // Clean up refs
+        delete this._segTrigs[s];
+        delete this._segs[s];
+        delete this._vertToSeg[v1][v2];
+        delete this._vertToSeg[v2][v1];
+        // What is the vertex ID of the new midpoint vertex?
+        var vm = this._verts.length;
+        this._projVerts[vm] = seg.projectedMid;
+        this._verts[vm] = seg.midpoint;
+        this._vertToSeg[vm] = [];
+        this._uv[vm] = [
+            (this._uv[v1][0] + this._uv[v2][0]) / 2,
+            (this._uv[v1][1] + this._uv[v2][1]) / 2,
+        ];
+        for (var _i = 0, trigs_1 = trigs; _i < trigs_1.length; _i++) {
+            var t = trigs_1[_i];
+            this._splitTriangle(v1, v2, vm, t, maxEpsilon);
+        }
+    };
+    // Split a triangle in two.
+    // Must be given vertex indices of the segment being splitted, the index of the new
+    // midpoint vertex, and the triangle index.
+    // Shall silently drop any new segments with an epsilon larger than the
+    // given one. This means that the segment shall be in the triangle mesh,
+    // but will not be queued and therefore not subdivided ever.
+    Arrugator.prototype._splitTriangle = function (v1, v2, vm, t, epsilon) {
+        if (epsilon === void 0) { epsilon = Infinity; }
+        var tvs = this._trigs[t];
+        var v3;
+        var winding = false;
+        // Fetch the ID of the 3rd vertex in the original triangle, and the winding order
+        if (tvs[0] === v1 && tvs[1] === v2) {
+            v3 = tvs[2];
+            winding = true; // A-B-C
+        }
+        else if (tvs[1] === v1 && tvs[2] === v2) {
+            v3 = tvs[0];
+            winding = true; // C-A-B
+        }
+        else if (tvs[2] === v1 && tvs[0] === v2) {
+            v3 = tvs[1];
+            winding = true; // B-C-A
+        }
+        else if (tvs[1] === v1 && tvs[0] === v2) {
+            v3 = tvs[2];
+            winding = false; // B-A-C
+        }
+        else if (tvs[2] === v1 && tvs[1] === v2) {
+            v3 = tvs[0];
+            winding = false; // C-B-A
+        }
+        else if (tvs[0] === v1 && tvs[2] === v2) {
+            v3 = tvs[1];
+            winding = false; // A-C-B
+        }
+        else {
+            throw new Error('Data structure mishap: could not fetch 3rd vertex used in triangle');
+        }
+        // Index of the first "half" triangle will be the reused index of the original triangle
+        // Index of the second "half" triangle must be allocated at the end of the triangles structure
+        var t2 = this._trigs.length;
+        if (winding) {
+            this._trigs[t] = [v1, vm, v3];
+            this._trigs[t2] = [vm, v2, v3];
+        }
+        else {
+            this._trigs[t] = [vm, v1, v3];
+            this._trigs[t2] = [v2, vm, v3];
+        }
+        // Clean up references from old segments
+        var s1 = this._vertToSeg[v1] && this._vertToSeg[v1][v2];
+        var s2 = this._vertToSeg[v2] && this._vertToSeg[v2][v3];
+        var s3 = this._vertToSeg[v3] && this._vertToSeg[v3][v1];
+        function filterTrig(i) {
+            return i !== t;
+        }
+        if (s1 !== undefined) {
+            this._segTrigs[s1] = this._segTrigs[s1].filter(filterTrig);
+        }
+        if (s2 !== undefined) {
+            this._segTrigs[s2] = this._segTrigs[s2].filter(filterTrig);
+        }
+        if (s3 !== undefined) {
+            this._segTrigs[s3] = this._segTrigs[s3].filter(filterTrig);
+        }
+        this._segment(v1, vm, t, epsilon);
+        this._segment(vm, v3, t, epsilon);
+        this._segment(v3, v1, t, epsilon);
+        this._segment(v2, vm, t2, epsilon);
+        this._segment(vm, v3, t2, epsilon);
+        this._segment(v3, v2, t2, epsilon);
+    };
+    return Arrugator;
+}());
+exports.default = Arrugator;

package/dist/js/arrugator/index.d.ts

@@ -0,0 +1,7 @@
+export type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
+export type ArrugadoFlat = {
+    pos: number[];
+    uv: number[];
+    trigs: number[];
+};
+export declare function initArrugator(fromProj: string, coordinates: Coordinates, step?: number): ArrugadoFlat;

package/dist/js/{utils/arrugator.js → arrugator/index.js}

@@ -1,46 +1,49 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initArrugator = void 0;
-// @ts-ignore
-var arrugator_1 = __importDefault(require("arrugator"));
-var proj4_1 = __importDefault(require("proj4"));
-function initArrugator(fromProj, coordinates) {
-    // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
-    var origin = [-20037508.342789244, 20037508.342789244];
-    // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
-    var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
-    // 转换为 EPSG:3857
-    var projector = (0, proj4_1.default)(fromProj, 'EPSG:3857').forward;
-    // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
-    function forward(coors) {
-        // 墨卡托坐标
-        var coor_3857 = projector(coors);
-        // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
-        var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
-        var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
-        return [mapbox_coor1, mapbox_coor2];
-    }
-    var epsilon = 0.00000000001;
-    // 纹理uv坐标
-    var sourceUV = [
-        [0, 0],
-        [0, 1],
-        [1, 0],
-        [1, 1], // bottom-right
-    ];
-    var arrugator = new arrugator_1.default(forward, verts, sourceUV, [
-        [0, 1, 3],
-        [0, 3, 2],
-    ]);
-    arrugator.lowerEpsilon(epsilon);
-    var arrugado = arrugator.output();
-    return {
-        pos: arrugado.projected.flat(),
-        uv: arrugado.uv.flat(),
-        trigs: arrugado.trigs.flat(), // 三角形索引
-    };
-}
-exports.initArrugator = initArrugator;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initArrugator = initArrugator;
+var proj4_1 = __importDefault(require("proj4"));
+var Arrugator_1 = __importDefault(require("./Arrugator"));
+function initArrugator(fromProj, coordinates, step) {
+    if (step === void 0) { step = 100; }
+    // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
+    var origin = [-20037508.342789244, 20037508.342789244];
+    // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
+    var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
+    // 转换为 EPSG:3857
+    var projector = (0, proj4_1.default)(fromProj, 'EPSG:3857').forward;
+    // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
+    function forward(coors) {
+        // 墨卡托坐标
+        var coor_3857 = projector(coors);
+        // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
+        var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
+        var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
+        return [mapbox_coor1, mapbox_coor2];
+    }
+    // 纹理uv坐标
+    var sourceUV = [
+        [0, 0], // top-left
+        [0, 1], // bottom-left
+        [1, 0], // top-right
+        [1, 1], // bottom-right
+    ];
+    var arrugator = new Arrugator_1.default(forward, verts, sourceUV, [
+        [0, 1, 3],
+        [0, 3, 2],
+    ]);
+    if (step > 0) {
+        arrugator.force();
+        for (var i = 0; i < step; i++) {
+            arrugator.step();
+        }
+    }
+    var arrugado = arrugator.output();
+    return {
+        pos: arrugado.projected.flat(), // mapbox 墨卡托坐标
+        uv: arrugado.uv.flat(), // uv 纹理
+        trigs: arrugado.trigs.flat(), // 三角形索引
+    };
+}

package/dist/js/index.d.ts

@@ -1,60 +1,4 @@
-import mapboxgl from 'mapbox-gl';
-import type { Coordinates } from './utils/arrugator';
-export type { Coordinates } from './utils/arrugator';
-export declare type MaskProperty = {
-    type?: 'in' | 'out';
-    data: GeoJSON.Polygon | GeoJSON.MultiPolygon;
-};
-export declare type ImageOption = {
-    url: string;
-    projection: string;
-    coordinates: Coordinates;
-    resampling?: 'linear' | 'nearest';
-    opacity?: number;
-    crossOrigin?: string;
-    mask?: MaskProperty;
-};
-export default class ImageLayer implements mapboxgl.CustomLayerInterface {
-    id: string;
-    type: 'custom';
-    renderingMode?: '2d' | '3d' | undefined;
-    private option;
-    private map?;
-    private gl?;
-    private loaded;
-    private arrugado;
-    private programInfo?;
-    private bufferInfo?;
-    private texture?;
-    private stencilChecked;
-    private maskProperty;
-    private maskProgramInfo?;
-    private maskBufferInfo?;
-    constructor(id: string, option: ImageOption);
-    onAdd(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
-    onRemove(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
-    render(gl: WebGLRenderingContext, matrix: number[]): void;
-    /**
-     * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
-     * @param {Object} option Options object.
-     * @param {string} [option.url] Image URL.
-     * @param {string} [option.projection] Projection with EPSG code that points to the image..
-     * @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
-     * @param {number} [option.opacity] opacity of the image.
-     * @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
-     */
-    updateImage(option: {
-        url?: string;
-        projection?: string;
-        coordinates?: Coordinates;
-        opacity?: number;
-        resampling?: 'linear' | 'nearest';
-    }): this;
-    /**
-     * Updates the mask property
-     * @param {MaskProperty} mask The mask property.
-     */
-    updateMask(mask: Partial<MaskProperty>): this;
-    private loadTexture;
-    private getMaskBufferInfo;
-}
+import ImageLayer from './ImageLayer';
+export type { ImageOption, MaskProperty } from './ImageLayer';
+export default ImageLayer;
+export type { Coordinates } from './arrugator';