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

package/dist/es/index.js

@@ -1,228 +1,2 @@
-import { satisfies } from 'compare-versions';
-import earcut from 'earcut';
-import mapboxgl from 'mapbox-gl';
-import * as twgl from 'twgl.js';
-import fs from './shaders/image.fragment.glsl';
-import vs from './shaders/image.vertex.glsl';
-import maskfs from './shaders/mask.fragment.glsl';
-import maskvs from './shaders/mask.vertex.glsl';
-import { initArrugator } from './utils/arrugator';
-var ImageLayer = /** @class */ (function () {
-    function ImageLayer(id, option) {
-        this.type = 'custom';
-        this.renderingMode = '2d';
-        // mask
-        this.stencilChecked = true; // resetStencilClippingMasks 版本检查
-        this.id = id;
-        this.option = option;
-        this.loaded = false;
-        this.maskProperty = Object.assign({ type: 'in' }, option.mask);
-        // 检查 stencil 是否可用
-        this.stencilChecked = satisfies(mapboxgl.version, '>=2.7.0');
-        // 如果传了 mask 边界数据，且版本不符
-        if (this.maskProperty.data && !this.stencilChecked) {
-            throw new Error("\u5982\u679C\u9700\u8981\u906E\u7F69\uFF08\u63A9\u819C\uFF09\uFF0Cmapbox-gl \u7248\u672C\u5FC5\u987B\uFF1A>=2.7.0");
-        }
-        // 初始化 Arrugator
-        var projection = option.projection, coordinates = option.coordinates;
-        this.arrugado = 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.programInfo = twgl.createProgramInfo(gl, [vs, fs]);
-        this.loadTexture(map, gl);
-        this.bufferInfo = twgl.createBufferInfoFromArrays(gl, {
-            a_pos: { numComponents: 2, data: this.arrugado.pos },
-            a_uv: { numComponents: 2, data: this.arrugado.uv },
-            indices: this.arrugado.trigs,
-        });
-        // 掩膜程序
-        if (this.maskProperty.data) {
-            var data = this.maskProperty.data;
-            if (data) {
-                this.maskProgramInfo = twgl.createProgramInfo(gl, [maskvs, maskfs]);
-                this.maskBufferInfo = this.getMaskBufferInfo(gl, data);
-            }
-        }
-    };
-    ImageLayer.prototype.onRemove = function (map, gl) {
-        if (this.programInfo) {
-            gl.deleteProgram(this.programInfo.program);
-        }
-        if (this.maskProgramInfo) {
-            gl.deleteProgram(this.maskProgramInfo.program);
-        }
-        if (this.texture) {
-            gl.deleteTexture(this.texture);
-        }
-    };
-    ImageLayer.prototype.render = function (gl, matrix) {
-        /**
-         * 线图层在启用 stencil 会消失，参考: https://github.com/mapbox/mapbox-gl-js/issues/12213
-         * 临时解决方案: map.painter.resetStencilClippingMasks()
-         * 该方法在 mapboxgl version >=2.7.0 才能用
-         */
-        var _a;
-        if (this.stencilChecked) {
-            // @ts-ignore
-            this.map.painter.resetStencilClippingMasks();
-        }
-        if (this.loaded && this.programInfo && this.bufferInfo) {
-            // blend
-            gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            if (this.maskProgramInfo && this.maskBufferInfo) {
-                // mask program
-                gl.useProgram(this.maskProgramInfo.program);
-                // stencil test
-                gl.enable(gl.STENCIL_TEST);
-                gl.stencilFunc(gl.ALWAYS, 1, 0xff);
-                gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
-                gl.stencilMask(0xff);
-                gl.clear(gl.STENCIL_BUFFER_BIT);
-                // matrix
-                twgl.setUniforms(this.maskProgramInfo, { u_matrix: matrix });
-                // pos & indices
-                twgl.setBuffersAndAttributes(gl, this.maskProgramInfo, this.maskBufferInfo);
-                // draw
-                var elementType = gl.UNSIGNED_SHORT;
-                if (this.maskBufferInfo.numElements / 3 > 65535) {
-                    // 使 drawElements 支持 UNSIGNED_INT 类型
-                    gl.getExtension('OES_element_index_uint');
-                    elementType = gl.UNSIGNED_INT;
-                }
-                gl.drawElements(gl.TRIANGLES, this.maskBufferInfo.numElements, elementType, 0);
-            }
-            // texture program
-            gl.useProgram(this.programInfo.program);
-            if ((_a = this.maskProgramInfo) === null || _a === void 0 ? void 0 : _a.program) {
-                // stencil test
-                var ref = this.maskProperty.type === 'out' ? 0 : 1;
-                gl.stencilFunc(gl.EQUAL, ref, 0xff);
-                gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
-            }
-            // uniforms
-            twgl.setUniforms(this.programInfo, {
-                u_matrix: matrix,
-                u_opacity: this.option.opacity || 1,
-                u_sampler: this.texture,
-            });
-            // pos, uv & indices
-            twgl.setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
-            // draw
-            gl.drawElements(gl.TRIANGLES, this.arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
-            gl.clear(gl.STENCIL_BUFFER_BIT);
-            gl.disable(gl.STENCIL_TEST);
-        }
-    };
-    /**
-     * 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.
-     */
-    ImageLayer.prototype.updateImage = function (option) {
-        var _a, _b, _c, _d, _e;
-        if (this.gl && this.map) {
-            this.option.opacity = (_a = option.opacity) !== null && _a !== void 0 ? _a : this.option.opacity;
-            if (option.projection || option.coordinates) {
-                this.option.projection = (_b = option.projection) !== null && _b !== void 0 ? _b : this.option.projection;
-                this.option.coordinates = (_c = option.coordinates) !== null && _c !== void 0 ? _c : this.option.coordinates;
-                // reinit arrugator
-                this.arrugado = initArrugator(this.option.projection, this.option.coordinates);
-                this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, {
-                    a_pos: { numComponents: 2, data: this.arrugado.pos },
-                    a_uv: { numComponents: 2, data: this.arrugado.uv },
-                    indices: this.arrugado.trigs,
-                });
-            }
-            if (option.url || option.resampling) {
-                this.loaded = false;
-                this.option.url = (_d = option.url) !== null && _d !== void 0 ? _d : this.option.url;
-                this.option.resampling = (_e = option.resampling) !== null && _e !== void 0 ? _e : this.option.resampling;
-                // reload image
-                this.loadTexture(this.map, this.gl);
-            }
-            else {
-                this.map.triggerRepaint();
-            }
-        }
-        return this;
-    };
-    /**
-     * Updates the mask property
-     * @param {MaskProperty} mask The mask property.
-     */
-    ImageLayer.prototype.updateMask = function (mask) {
-        if (this.gl && this.map && this.maskProgramInfo) {
-            this.maskProperty = Object.assign(this.maskProperty, mask);
-            this.maskBufferInfo = this.getMaskBufferInfo(this.gl, this.maskProperty.data);
-            this.map.triggerRepaint();
-        }
-        return this;
-    };
-    ImageLayer.prototype.loadTexture = function (map, gl) {
-        var _this = this;
-        // 创建纹理
-        var filter = this.option.resampling === 'nearest' ? gl.NEAREST : gl.LINEAR;
-        this.texture = twgl.createTexture(gl, {
-            src: this.option.url,
-            crossOrigin: this.option.crossOrigin,
-            minMag: filter,
-            flipY: 0,
-        }, function () {
-            _this.loaded = true;
-            map.triggerRepaint();
-        });
-    };
-    ImageLayer.prototype.getMaskBufferInfo = function (gl, data) {
-        var positions = [];
-        var triangles = [];
-        if (data.type === 'MultiPolygon') {
-            // type: 'MultiPolygon'
-            var polyCount = data.coordinates.length;
-            var triangleStartIndex_1 = 0;
-            for (var i = 0; i < polyCount; i++) {
-                var coordinates = data.coordinates[i];
-                var flatten = earcut.flatten(coordinates);
-                var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.dimensions;
-                var triangle = earcut(vertices, holes, dimensions);
-                var triangleNew = triangle.map(function (item) { return item + triangleStartIndex_1; });
-                triangleStartIndex_1 += vertices.length / 2;
-                // positions.push(...vertices)
-                // triangles.push(...triangleNew)
-                for (var m = 0; m < vertices.length; m++) {
-                    positions.push(vertices[m]);
-                }
-                for (var n = 0; n < triangleNew.length; n++) {
-                    triangles.push(triangleNew[n]);
-                }
-            }
-        }
-        else {
-            // type: 'Polygon'
-            var flatten = earcut.flatten(data.coordinates);
-            var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.dimensions;
-            positions = vertices;
-            triangles = earcut(vertices, holes, dimensions);
-        }
-        return twgl.createBufferInfoFromArrays(gl, {
-            a_pos: { numComponents: 2, data: positions },
-            indices: triangles.length / 3 > 65535 ? new Uint32Array(triangles) : new Uint16Array(triangles),
-        });
-    };
-    return ImageLayer;
-}());
-export default ImageLayer;
+import ImageLayer from './ImageLayer';
+export default ImageLayer;

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

@@ -1 +1 @@
-export 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 "\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/es/shaders/image.vertex.glsl.js

@@ -1 +1 @@
-export 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 "\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/es/shaders/mask.fragment.glsl.js

@@ -1 +1 @@
-export 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 "\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/es/shaders/mask.vertex.glsl.js

@@ -1 +1 @@
-export 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 "\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/dist/js/ImageLayer.d.ts

@@ -0,0 +1,62 @@
+import mapboxgl from 'mapbox-gl';
+import type { Coordinates } from './arrugator';
+export type MaskProperty = {
+    type?: 'in' | 'out';
+    data: GeoJSON.Polygon | GeoJSON.MultiPolygon;
+};
+export type ImageOption = {
+    url: string;
+    projection: string;
+    coordinates: Coordinates;
+    resampling?: 'linear' | 'nearest';
+    opacity?: number;
+    crossOrigin?: string;
+    arrugatorStep?: number;
+    mask?: MaskProperty;
+    metadata?: any;
+};
+export default class ImageLayer implements mapboxgl.CustomLayerInterface {
+    id: string;
+    type: 'custom';
+    renderingMode?: '2d' | '3d' | undefined;
+    metadata?: any;
+    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(_: 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;
+}

package/dist/js/ImageLayer.js

@@ -0,0 +1,270 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var compare_versions_1 = require("compare-versions");
+var earcut_1 = __importStar(require("earcut"));
+var mapbox_gl_1 = __importDefault(require("mapbox-gl"));
+var twgl = __importStar(require("twgl.js"));
+var arrugator_1 = require("./arrugator");
+var image_fragment_glsl_1 = __importDefault(require("./shaders/image.fragment.glsl"));
+var image_vertex_glsl_1 = __importDefault(require("./shaders/image.vertex.glsl"));
+var mask_fragment_glsl_1 = __importDefault(require("./shaders/mask.fragment.glsl"));
+var mask_vertex_glsl_1 = __importDefault(require("./shaders/mask.vertex.glsl"));
+var ImageLayer = /** @class */ (function () {
+    function ImageLayer(id, option) {
+        this.type = 'custom';
+        this.renderingMode = '2d';
+        // mask
+        this.stencilChecked = true; // resetStencilClippingMasks 版本检查
+        this.id = id;
+        this.option = option;
+        this.loaded = false;
+        this.maskProperty = Object.assign({ type: 'in' }, option.mask);
+        this.metadata = option.metadata;
+        // 检查 stencil 是否可用
+        this.stencilChecked = (0, compare_versions_1.satisfies)(mapbox_gl_1.default.version, '>=2.7.0');
+        // 如果传了 mask 边界数据，且版本不符
+        if (this.maskProperty.data && !this.stencilChecked) {
+            throw new Error("\u5982\u679C\u9700\u8981\u906E\u7F69\uFF08\u63A9\u819C\uFF09\uFF0Cmapbox-gl \u7248\u672C\u5FC5\u987B\uFF1A>=2.7.0");
+        }
+        // 初始化 Arrugator
+        var projection = option.projection, coordinates = option.coordinates;
+        this.arrugado = (0, arrugator_1.initArrugator)(projection, coordinates, option.arrugatorStep);
+    }
+    ImageLayer.prototype.onAdd = function (map, gl) {
+        this.map = map;
+        this.gl = gl;
+        // 主程序
+        this.programInfo = twgl.createProgramInfo(gl, [image_vertex_glsl_1.default, image_fragment_glsl_1.default]);
+        this.loadTexture(map, gl);
+        this.bufferInfo = twgl.createBufferInfoFromArrays(gl, {
+            a_pos: { numComponents: 2, data: this.arrugado.pos },
+            a_uv: { numComponents: 2, data: this.arrugado.uv },
+            indices: this.arrugado.trigs,
+        });
+        // 掩膜程序
+        if (this.maskProperty.data) {
+            var data = this.maskProperty.data;
+            if (data) {
+                this.maskProgramInfo = twgl.createProgramInfo(gl, [mask_vertex_glsl_1.default, mask_fragment_glsl_1.default]);
+                this.maskBufferInfo = this.getMaskBufferInfo(gl, data);
+            }
+        }
+    };
+    ImageLayer.prototype.onRemove = function (_, gl) {
+        if (this.programInfo) {
+            gl.deleteProgram(this.programInfo.program);
+        }
+        if (this.maskProgramInfo) {
+            gl.deleteProgram(this.maskProgramInfo.program);
+        }
+        if (this.texture) {
+            gl.deleteTexture(this.texture);
+        }
+    };
+    ImageLayer.prototype.render = function (gl, matrix) {
+        /**
+         * 线图层在启用 stencil 会消失，参考: https://github.com/mapbox/mapbox-gl-js/issues/12213
+         * 临时解决方案: map.painter.resetStencilClippingMasks()
+         * 该方法在 mapboxgl version >=2.7.0 才能用
+         */
+        var _a, _b;
+        if (this.stencilChecked) {
+            // @ts-ignore
+            this.map.painter.resetStencilClippingMasks();
+        }
+        if (this.loaded && this.programInfo && this.bufferInfo) {
+            // blend
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            if (this.maskProgramInfo && this.maskBufferInfo) {
+                // mask program
+                gl.useProgram(this.maskProgramInfo.program);
+                // stencil test
+                gl.enable(gl.STENCIL_TEST);
+                gl.stencilFunc(gl.ALWAYS, 1, 0xff);
+                gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
+                gl.stencilMask(0xff);
+                gl.clear(gl.STENCIL_BUFFER_BIT);
+                // matrix
+                twgl.setUniforms(this.maskProgramInfo, { u_matrix: matrix });
+                // pos & indices
+                twgl.setBuffersAndAttributes(gl, this.maskProgramInfo, this.maskBufferInfo);
+                // draw
+                var elementType = gl.UNSIGNED_SHORT;
+                if (this.maskBufferInfo.numElements / 3 > 65535) {
+                    // 使 drawElements 支持 UNSIGNED_INT 类型
+                    gl.getExtension('OES_element_index_uint');
+                    elementType = gl.UNSIGNED_INT;
+                }
+                gl.drawElements(gl.TRIANGLES, this.maskBufferInfo.numElements, elementType, 0);
+            }
+            // texture program
+            gl.useProgram(this.programInfo.program);
+            if ((_a = this.maskProgramInfo) === null || _a === void 0 ? void 0 : _a.program) {
+                // stencil test
+                var ref = this.maskProperty.type === 'out' ? 0 : 1;
+                gl.stencilFunc(gl.EQUAL, ref, 0xff);
+                gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
+            }
+            // uniforms
+            twgl.setUniforms(this.programInfo, {
+                u_matrix: matrix,
+                u_opacity: (_b = this.option.opacity) !== null && _b !== void 0 ? _b : 1,
+                u_sampler: this.texture,
+            });
+            // pos, uv & indices
+            twgl.setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
+            // draw
+            gl.drawElements(gl.TRIANGLES, this.arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
+            gl.clear(gl.STENCIL_BUFFER_BIT);
+            gl.disable(gl.STENCIL_TEST);
+        }
+    };
+    /**
+     * 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.
+     */
+    ImageLayer.prototype.updateImage = function (option) {
+        var _a, _b, _c, _d, _e;
+        if (this.gl && this.map) {
+            this.option.opacity = (_a = option.opacity) !== null && _a !== void 0 ? _a : this.option.opacity;
+            if (option.projection || option.coordinates) {
+                this.option.projection = (_b = option.projection) !== null && _b !== void 0 ? _b : this.option.projection;
+                this.option.coordinates = (_c = option.coordinates) !== null && _c !== void 0 ? _c : this.option.coordinates;
+                // reinit arrugator
+                this.arrugado = (0, arrugator_1.initArrugator)(this.option.projection, this.option.coordinates, this.option.arrugatorStep);
+                this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, {
+                    a_pos: { numComponents: 2, data: this.arrugado.pos },
+                    a_uv: { numComponents: 2, data: this.arrugado.uv },
+                    indices: this.arrugado.trigs,
+                });
+            }
+            if (option.url || option.resampling) {
+                this.loaded = false;
+                this.option.url = (_d = option.url) !== null && _d !== void 0 ? _d : this.option.url;
+                this.option.resampling = (_e = option.resampling) !== null && _e !== void 0 ? _e : this.option.resampling;
+                // reload image
+                this.loadTexture(this.map, this.gl);
+            }
+            else {
+                this.map.triggerRepaint();
+            }
+        }
+        return this;
+    };
+    /**
+     * Updates the mask property
+     * @param {MaskProperty} mask The mask property.
+     */
+    ImageLayer.prototype.updateMask = function (mask) {
+        if (this.gl && this.map) {
+            if (mask.data) {
+                if (!this.maskProgramInfo) {
+                    this.maskProgramInfo = twgl.createProgramInfo(this.gl, [mask_vertex_glsl_1.default, mask_fragment_glsl_1.default]);
+                }
+                this.maskProperty = Object.assign(this.maskProperty, mask);
+                this.maskBufferInfo = this.getMaskBufferInfo(this.gl, this.maskProperty.data);
+            }
+            else {
+                this.maskProgramInfo && this.gl.deleteProgram(this.maskProgramInfo.program);
+                this.maskProgramInfo = undefined;
+                this.maskBufferInfo = undefined;
+            }
+            this.map.triggerRepaint();
+        }
+        return this;
+    };
+    ImageLayer.prototype.loadTexture = function (map, gl) {
+        var _this = this;
+        // 创建纹理
+        var filter = this.option.resampling === 'nearest' ? gl.NEAREST : gl.LINEAR;
+        this.texture = twgl.createTexture(gl, {
+            src: this.option.url,
+            crossOrigin: this.option.crossOrigin,
+            minMag: filter,
+            flipY: 0,
+        }, function () {
+            _this.loaded = true;
+            map.triggerRepaint();
+        });
+    };
+    ImageLayer.prototype.getMaskBufferInfo = function (gl, data) {
+        var positions = [];
+        var triangles = [];
+        if (data.type === 'MultiPolygon') {
+            // type: 'MultiPolygon'
+            var polyCount = data.coordinates.length;
+            var triangleStartIndex_1 = 0;
+            for (var i = 0; i < polyCount; i++) {
+                var coordinates = data.coordinates[i];
+                var flattened = (0, earcut_1.flatten)(coordinates);
+                var vertices = flattened.vertices, holes = flattened.holes, dimensions = flattened.dimensions;
+                var triangle = (0, earcut_1.default)(vertices, holes, dimensions);
+                var triangleNew = triangle.map(function (item) { return item + triangleStartIndex_1; });
+                triangleStartIndex_1 += vertices.length / 2;
+                // positions.push(...vertices)
+                // triangles.push(...triangleNew)
+                for (var m = 0; m < vertices.length; m++) {
+                    positions.push(vertices[m]);
+                }
+                for (var n = 0; n < triangleNew.length; n++) {
+                    triangles.push(triangleNew[n]);
+                }
+            }
+        }
+        else {
+            // type: 'Polygon'
+            var flattened = (0, earcut_1.flatten)(data.coordinates);
+            var vertices = flattened.vertices, holes = flattened.holes, dimensions = flattened.dimensions;
+            positions = vertices;
+            triangles = (0, earcut_1.default)(vertices, holes, dimensions);
+        }
+        return twgl.createBufferInfoFromArrays(gl, {
+            a_pos: { numComponents: 2, data: positions },
+            indices: triangles.length / 3 > 65535 ? new Uint32Array(triangles) : new Uint16Array(triangles),
+        });
+    };
+    return ImageLayer;
+}());
+exports.default = ImageLayer;

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

@@ -0,0 +1,18 @@
+export default class Arrugator {
+    constructor(projector: any, verts: any, uv: any, trigs: any);
+    _segment(v1: any, v2: any, t: any, maxEpsilon?: number): any;
+    output(): {
+        unprojected: unknown[];
+        projected: unknown[];
+        uv: unknown[];
+        trigs: unknown[];
+    };
+    private _stepsWithSameEpsilon;
+    lowerEpsilon(targetEpsilon: any): void;
+    get epsilon(): any;
+    set epsilon(ep: any);
+    step(): void;
+    force(): void;
+    private _splitSegment;
+    private _splitTriangle;
+}