@naivemap/mapbox-gl-image-layer 0.4.2 → 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,45 +1,4 @@
-/// <reference types="mapbox-gl" />
-import type { Coordinates } from './utils/arrugator';
-export declare type ImageOption = {
-    url: string;
-    projection: string;
-    coordinates: Coordinates;
-    resampling?: 'linear' | 'nearest';
-    opacity?: number;
-    crossOrigin?: string;
-};
-export default class ImageLayer implements mapboxgl.CustomLayerInterface {
-    id: string;
-    type: 'custom';
-    renderingMode?: '2d' | '3d' | undefined;
-    private _option;
-    private _loaded;
-    private _arrugado;
-    private _map;
-    private _gl;
-    private _program;
-    private _texture;
-    private _positionBuffer;
-    private _uvBuffer;
-    private _verticesIndexBuffer;
-    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 image URL and, optionally, the projection, the coordinates and the resampling.
-     * @param {Object} option Options object.
-     * @param {string} [option.url] Required 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 {string} [option.resampling] The resampling/interpolation method to use for overscaling.
-     */
-    updateImage(option: {
-        url: string;
-        projection?: string;
-        coordinates?: Coordinates;
-        resampling?: 'linear' | 'nearest';
-    }): this;
-    private _bindData;
-    private _loadImage;
-}
+import ImageLayer from './ImageLayer';
+export type { ImageOption, MaskProperty } from './ImageLayer';
+export default ImageLayer;
+export type { Coordinates } from './arrugator';

package/dist/js/index.js

@@ -1,134 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var image_1 = require("./utils/image");
-var webgl_1 = require("./utils/webgl");
-var arrugator_1 = require("./utils/arrugator");
-var ImageLayer = /** @class */ (function () {
-    function ImageLayer(id, option) {
-        this.id = id;
-        this.type = 'custom';
-        this.renderingMode = '2d';
-        this._option = option;
-        this._loaded = false;
-        // 初始化 Arrugator
-        var projection = option.projection, coordinates = option.coordinates;
-        this._arrugado = (0, arrugator_1.initArrugator)(projection, coordinates);
-        this._map = null;
-        this._gl = null;
-        this._program = null;
-        this._texture = null;
-        this._positionBuffer = null;
-        this._uvBuffer = null;
-        this._verticesIndexBuffer = null;
-    }
-    ImageLayer.prototype.onAdd = function (map, gl) {
-        this._map = map;
-        this._gl = gl;
-        this._loadImage(map, gl);
-        var vertexSource = "\n      uniform mat4 u_matrix;\n      attribute vec2 a_pos;\n      attribute vec2 a_uv;\n      varying vec2 v_uv;\n      void main() {\n        gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n        v_uv = a_uv;\n      }";
-        var fragmentSource = "\n      #ifdef GL_ES\n        precision highp int;\n        precision mediump float;\n      #endif\n      uniform sampler2D u_sampler;\n      uniform float u_opacity;\n      varying vec2 v_uv;\n      void main() {\n        vec4 color = texture2D(u_sampler, v_uv);\n        gl_FragColor = color * u_opacity;\n      }";
-        this._program = (0, webgl_1.createProgram)(gl, vertexSource, fragmentSource);
-        if (this._program) {
-            this._positionBuffer = gl.createBuffer();
-            // gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer)
-            // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.pos), gl.STATIC_DRAW)
-            var a_pos = gl.getAttribLocation(this._program, 'a_pos');
-            gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(a_pos);
-            this._uvBuffer = gl.createBuffer();
-            // gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer)
-            // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.uv), gl.STATIC_DRAW)
-            var a_uv = gl.getAttribLocation(this._program, 'a_uv');
-            gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 0, 0);
-            gl.enableVertexAttribArray(a_uv);
-            this._verticesIndexBuffer = gl.createBuffer();
-            // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer)
-            // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this._arrugado.trigs), gl.STATIC_DRAW)
-            this._bindData(gl, this._arrugado);
-        }
-    };
-    ImageLayer.prototype.onRemove = function (map, gl) {
-        gl.deleteProgram(this._program);
-        gl.deleteTexture(this._texture);
-        gl.deleteBuffer(this._verticesIndexBuffer);
-    };
-    ImageLayer.prototype.render = function (gl, matrix) {
-        if (this._loaded && this._program) {
-            gl.useProgram(this._program);
-            // matrix
-            gl.uniformMatrix4fv(gl.getUniformLocation(this._program, 'u_matrix'), false, matrix);
-            // pos
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
-            gl.vertexAttribPointer(gl.getAttribLocation(this._program, 'a_pos'), 2, gl.FLOAT, false, 0, 0);
-            // uv
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
-            gl.vertexAttribPointer(gl.getAttribLocation(this._program, 'a_uv'), 2, gl.FLOAT, false, 0, 0);
-            // index
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
-            // texture
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, this._texture);
-            gl.uniform1i(gl.getUniformLocation(this._program, 'u_sampler'), 0);
-            // opacity
-            gl.uniform1f(gl.getUniformLocation(this._program, 'u_opacity'), this._option.opacity || 1);
-            // blend
-            gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            gl.drawElements(gl.TRIANGLES, this._arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        }
-    };
-    /**
-     * Updates the image URL and, optionally, the projection, the coordinates and the resampling.
-     * @param {Object} option Options object.
-     * @param {string} [option.url] Required 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 {string} [option.resampling] The resampling/interpolation method to use for overscaling.
-     */
-    ImageLayer.prototype.updateImage = function (option) {
-        var _a, _b, _c;
-        this._loaded = false;
-        this._option.url = option.url;
-        if (this._gl && this._map) {
-            if (option.projection || option.coordinates) {
-                this._option.projection = (_a = option.projection) !== null && _a !== void 0 ? _a : this._option.projection;
-                this._option.coordinates = (_b = option.coordinates) !== null && _b !== void 0 ? _b : this._option.coordinates;
-                // reinit arrugator
-                this._arrugado = (0, arrugator_1.initArrugator)(this._option.projection, this._option.coordinates);
-                this._bindData(this._gl, this._arrugado);
-            }
-            this._option.resampling = (_c = option.resampling) !== null && _c !== void 0 ? _c : this._option.resampling;
-            // reload image
-            this._loadImage(this._map, this._gl);
-        }
-        return this;
-    };
-    ImageLayer.prototype._bindData = function (gl, arrugado) {
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.pos), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.uv), gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(arrugado.trigs), gl.STATIC_DRAW);
-    };
-    ImageLayer.prototype._loadImage = function (map, gl) {
-        var _this = this;
-        (0, image_1.loadImage)(this._option.url, this._option.crossOrigin).then(function (img) {
-            _this._loaded = true;
-            // 创建纹理
-            _this._texture = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, _this._texture);
-            var textureFilter = _this._option.resampling === 'nearest' ? gl.NEAREST : gl.LINEAR;
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, textureFilter);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, textureFilter);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-            map.triggerRepaint();
-        });
-    };
-    return ImageLayer;
-}());
-exports.default = ImageLayer;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ImageLayer_1 = __importDefault(require("./ImageLayer"));
+exports.default = ImageLayer_1.default;

package/dist/js/shaders/image.fragment.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\n#ifdef GL_ES\n  precision highp int;\n  precision mediump float;\n#endif\nuniform sampler2D u_sampler;\nuniform float u_opacity;\nvarying vec2 v_uv;\nvoid main() {\n  vec4 color = texture2D(u_sampler, v_uv);\n  gl_FragColor = color * u_opacity;\n}\n";
+export default _default;

package/dist/js/shaders/image.fragment.glsl.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = "\n#ifdef GL_ES\n  precision highp int;\n  precision mediump float;\n#endif\nuniform sampler2D u_sampler;\nuniform float u_opacity;\nvarying vec2 v_uv;\nvoid main() {\n  vec4 color = texture2D(u_sampler, v_uv);\n  gl_FragColor = color * u_opacity;\n}\n";

package/dist/js/shaders/image.vertex.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\nuniform mat4 u_matrix;\nattribute vec2 a_pos;\nattribute vec2 a_uv;\nvarying vec2 v_uv;\nvoid main() {\n  gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  v_uv = a_uv;\n}\n";
+export default _default;

package/dist/js/shaders/image.vertex.glsl.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = "\nuniform mat4 u_matrix;\nattribute vec2 a_pos;\nattribute vec2 a_uv;\nvarying vec2 v_uv;\nvoid main() {\n  gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  v_uv = a_uv;\n}\n";

package/dist/js/shaders/mask.fragment.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\n#ifdef GL_ES\nprecision highp int;\nprecision mediump float;\n#endif\n\nvoid main() {\n  gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n}\n";
+export default _default;

package/dist/js/shaders/mask.fragment.glsl.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = "\n#ifdef GL_ES\nprecision highp int;\nprecision mediump float;\n#endif\n\nvoid main() {\n  gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n}\n";

package/dist/js/shaders/mask.vertex.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\nuniform mat4 u_matrix;\nuniform float u_alt;\nattribute vec2 a_pos;\n\nconst float PI = 3.1415926536;\nconst float earthRadius = 6371008.8;\nconst float earthCircumference = 2.0 * PI * earthRadius; // meters\n\nfloat circumferenceAtLatitude(float latitude) {\n  return earthCircumference * cos(latitude * PI / 180.0);\n}\n\nfloat mercatorXfromLng(float lng) {\n  return (180.0 + lng) / 360.0;\n}\n\nfloat mercatorYfromLat(float lat) {\n  return (180.0 - (180.0 / PI * log(tan(PI / 4.0 + lat * PI / 360.0)))) / 360.0;\n}\n\nfloat mercatorZfromAltitude(float altitude, float lat) {\n  return altitude / circumferenceAtLatitude(lat);\n}\n\nvec3 mercatorfromLngLat(vec2 lnglat, float alt) {\n  return vec3(mercatorXfromLng(lnglat.x), mercatorYfromLat(lnglat.y), mercatorZfromAltitude(alt, lnglat.y));\n}\n\nvoid main() {\n  vec3 mercator = mercatorfromLngLat(a_pos, 0.0);\n  gl_Position = u_matrix * vec4(mercator, 1.0);\n  // gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n}\n";
+export default _default;

package/dist/js/shaders/mask.vertex.glsl.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = "\nuniform mat4 u_matrix;\nuniform float u_alt;\nattribute vec2 a_pos;\n\nconst float PI = 3.1415926536;\nconst float earthRadius = 6371008.8;\nconst float earthCircumference = 2.0 * PI * earthRadius; // meters\n\nfloat circumferenceAtLatitude(float latitude) {\n  return earthCircumference * cos(latitude * PI / 180.0);\n}\n\nfloat mercatorXfromLng(float lng) {\n  return (180.0 + lng) / 360.0;\n}\n\nfloat mercatorYfromLat(float lat) {\n  return (180.0 - (180.0 / PI * log(tan(PI / 4.0 + lat * PI / 360.0)))) / 360.0;\n}\n\nfloat mercatorZfromAltitude(float altitude, float lat) {\n  return altitude / circumferenceAtLatitude(lat);\n}\n\nvec3 mercatorfromLngLat(vec2 lnglat, float alt) {\n  return vec3(mercatorXfromLng(lnglat.x), mercatorYfromLat(lnglat.y), mercatorZfromAltitude(alt, lnglat.y));\n}\n\nvoid main() {\n  vec3 mercator = mercatorfromLngLat(a_pos, 0.0);\n  gl_Position = u_matrix * vec4(mercator, 1.0);\n  // gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naivemap/mapbox-gl-image-layer",
-  "version": "0.4.2",
+  "version": "0.6.0-beta.0",
   "description": "Load a static image of any projection via Arrugator and Proj4js.",
   "author": "huanglii <li.huangli@qq.com>",
   "homepage": "https://github.com/naivemap/mapbox-gl-layers#readme",
@@ -25,7 +25,8 @@
     "proj4"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "beta"
   },
   "repository": {
     "type": "git",
@@ -45,13 +46,15 @@
     "proj4": "^2.8.0"
   },
   "dependencies": {
-    "arrugator": "^1.0.1"
+    "compare-versions": "^6.1.1",
+    "earcut": "^3.0.1",
+    "tinyqueue": "^3.0.0",
+    "twgl.js": "^5.5.4"
   },
   "devDependencies": {
+    "@types/earcut": "^2.1.1",
     "@types/mapbox-gl": "^2.7.2",
-    "@types/node": "^17.0.36",
     "@types/proj4": "^2.5.2",
     "npm-run-all": "^4.1.5"
-  },
-  "gitHead": "5fc47667682399fe76c56d6808a44098bbd46636"
+  }
 }