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

package/dist/es/ImageLayer.js

@@ -0,0 +1,232 @@
+import { satisfies } from 'compare-versions';
+import earcut, { flatten } from 'earcut';
+import mapboxgl from 'mapbox-gl';
+import * as twgl from 'twgl.js';
+import { initArrugator } from './arrugator';
+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';
+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 = 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, option.arrugatorStep);
+    }
+    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 (_, 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 = 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, [maskvs, maskfs]);
+                }
+                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 = flatten(coordinates);
+                var vertices = flattened.vertices, holes = flattened.holes, dimensions = flattened.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 flattened = flatten(data.coordinates);
+            var vertices = flattened.vertices, holes = flattened.holes, dimensions = flattened.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;

package/dist/es/arrugator/Arrugator.js

@@ -0,0 +1,270 @@
+/* eslint-disable guard-for-in */
+// @ts-nocheck
+import TinyQueue from '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([], 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;
+}());
+export default Arrugator;

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

@@ -1,39 +1,43 @@
-// @ts-ignore
-import Arrugator from 'arrugator';
-import proj4 from 'proj4';
-export 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 = proj4(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(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(), // 三角形索引
-    };
-}
+import proj4 from 'proj4';
+import Arrugator from './Arrugator';
+export 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 = proj4(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(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(), // 三角形索引
+    };
+}