@naivemap/mapbox-gl-image-layer 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Naive Map
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+## ImageLayer class
+
+```bash
+npm i @naivemap/mapbox-gl-image-layer proj4
+```
+
+<b>Signature:</b>
+
+```typescript
+export default class ImageLayer implements mapboxgl.CustomLayerInterface
+```
+
+<b>Implements:</b> mapboxgl.CustomLayerInterface
+
+## Constructors
+
+| Constructor | Description |
+| --- | --- |
+| (constructor)(`id`: `string`, `option`: `ImageOption`) | Constructs a new instance of the <code>ImageLayer</code> class |
+
+### Parameters
+
+**id** `(string)` The ID of the layer.
+
+**option** `(ImageOption)` The option of the image.
+
+| Name | Description |
+| --- | --- |
+| **option.url** <br />`(string)` | URL that points to an image. |
+| **option.projection** <br />`(string)` | Projection with EPSG code that points to the image. |
+| **option.coordinates** <br />`(Array<Array<number>>)` | Corners of image specified in longitude, latitude pairs: top left, top right, bottom right, bottom left. ref: [coordinates](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image-coordinates) |
+| **option.resampling** <br />(Optional `enum`. One of `"linear"`, `"nearest"`. Defaults to `"linear"`) | The resampling/interpolation method to use for overscaling, also known as texture magnification filter. ref: [raster-resampling](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-raster-raster-resampling) |
+| **options.crossOrigin** <br />`(string)` | The crossOrigin attribute is a string which specifies the Cross-Origin Resource Sharing ([CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)) setting to use when retrieving the image. |
+
+```ts
+export type ImageOption = {
+  url: string
+  projection: string
+  coordinates: Coordinates
+  resampling: 'linear' | 'nearest'
+}
+```
+
+### Methods
+
+| Method                     | Description           |
+| -------------------------- | --------------------- |
+| **update** `(url: string)` | Update the image URL. |
+
+## Example
+
+```ts
+const layer = new ImageLayer('layer-id', {
+  url: '/4326.png',
+  projection: 'EPSG:4326',
+  resampling: 'nearest',
+  coordinates: [
+    [105.289838, 32.204171], // top-left
+    [110.195632, 32.204171], // top-right
+    [110.195632, 28.164713], // bottom-right
+    [105.289838, 28.164713], // bottom-left
+  ],
+})
+
+map.addLayer(layer)
+```

package/dist/es/index.js

@@ -0,0 +1,137 @@
+// @ts-ignore
+import Arrugator from 'arrugator';
+import proj4 from 'proj4';
+import { loadImage } from './utils/image';
+import { createProgram } from './utils/webgl';
+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;
+        var arrugado = this._initArrugator(projection, coordinates);
+        this._arrugado = {
+            pos: arrugado.projected.flat(),
+            uv: arrugado.uv.flat(),
+            trigs: arrugado.trigs.flat(), // 三角形索引
+        };
+        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      varying vec2 v_uv;\n      void main() {\n        gl_FragColor = texture2D(u_sampler, v_uv);\n      }";
+        this._program = 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);
+        }
+    };
+    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);
+            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);
+        }
+    };
+    ImageLayer.prototype.update = function (url) {
+        this._loaded = false;
+        this._option.url = url;
+        if (this._gl && this._map) {
+            this._loadImage(this._map, this._gl);
+        }
+    };
+    ImageLayer.prototype._initArrugator = function (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);
+        return arrugator.output();
+    };
+    ImageLayer.prototype._loadImage = function (map, gl) {
+        var _this = this;
+        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;
+}());
+export default ImageLayer;

package/dist/es/utils/image.js

@@ -0,0 +1,19 @@
+/**
+ * load image
+ * @param src
+ * @param crossOrigin
+ * @returns
+ */
+export function loadImage(src, crossOrigin) {
+    return new Promise(function (res, rej) {
+        var img = new Image();
+        img.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : '';
+        img.src = src;
+        img.onload = function () {
+            res(img);
+        };
+        img.onerror = function () {
+            rej('error');
+        };
+    });
+}

package/dist/es/utils/webgl.js

@@ -0,0 +1,64 @@
+/**
+ * Create a shader object
+ * @param gl GL context
+ * @param type the type of the shader object to be created
+ * @param source shader program (string)
+ * @return created shader object, or null if the creation has failed.
+ */
+function createShader(gl, type, source) {
+    // Create shader object
+    var shader = gl.createShader(type);
+    if (shader == null) {
+        console.log('unable to create shader');
+        return null;
+    }
+    // Set the shader program
+    gl.shaderSource(shader, source);
+    // Compile the shader
+    gl.compileShader(shader);
+    // Check the result of compilation
+    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+        var error = gl.getShaderInfoLog(shader);
+        console.log('Failed to compile shader: ' + error);
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+/**
+ * Create the linked program object
+ * @param gl GL context
+ * @param vshader a vertex shader program (string)
+ * @param fshader a fragment shader program (string)
+ * @return created program object, or null if the creation has failed
+ */
+export function createProgram(gl, vshader, fshader) {
+    // Create shader object
+    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
+    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
+    if (!vertexShader || !fragmentShader) {
+        return null;
+    }
+    // Create a program object
+    var program = gl.createProgram();
+    if (!program) {
+        return null;
+    }
+    // Attach the shader objects
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    // Link the program object
+    gl.linkProgram(program);
+    // Check the result of linking
+    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+        var error = gl.getProgramInfoLog(program);
+        console.log('Failed to link program: ' + error);
+        gl.deleteProgram(program);
+        gl.deleteShader(fragmentShader);
+        gl.deleteShader(vertexShader);
+        return null;
+    }
+    return program;
+}

package/dist/js/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="mapbox-gl" />
+declare type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
+export declare type ImageOption = {
+    url: string;
+    projection: string;
+    coordinates: Coordinates;
+    resampling?: 'linear' | 'nearest';
+    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;
+    update(url: string): void;
+    private _initArrugator;
+    private _loadImage;
+}
+export {};

package/dist/js/index.js

@@ -0,0 +1,142 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-ignore
+var arrugator_1 = __importDefault(require("arrugator"));
+var proj4_1 = __importDefault(require("proj4"));
+var image_1 = require("./utils/image");
+var webgl_1 = require("./utils/webgl");
+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;
+        var arrugado = this._initArrugator(projection, coordinates);
+        this._arrugado = {
+            pos: arrugado.projected.flat(),
+            uv: arrugado.uv.flat(),
+            trigs: arrugado.trigs.flat(), // 三角形索引
+        };
+        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      varying vec2 v_uv;\n      void main() {\n        gl_FragColor = texture2D(u_sampler, v_uv);\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);
+        }
+    };
+    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);
+            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);
+        }
+    };
+    ImageLayer.prototype.update = function (url) {
+        this._loaded = false;
+        this._option.url = url;
+        if (this._gl && this._map) {
+            this._loadImage(this._map, this._gl);
+        }
+    };
+    ImageLayer.prototype._initArrugator = function (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);
+        return arrugator.output();
+    };
+    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;

package/dist/js/utils/image.d.ts

@@ -0,0 +1,7 @@
+/**
+ * load image
+ * @param src
+ * @param crossOrigin
+ * @returns
+ */
+export declare function loadImage(src: string, crossOrigin?: string): Promise<HTMLImageElement>;

package/dist/js/utils/image.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadImage = void 0;
+/**
+ * load image
+ * @param src
+ * @param crossOrigin
+ * @returns
+ */
+function loadImage(src, crossOrigin) {
+    return new Promise(function (res, rej) {
+        var img = new Image();
+        img.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : '';
+        img.src = src;
+        img.onload = function () {
+            res(img);
+        };
+        img.onerror = function () {
+            rej('error');
+        };
+    });
+}
+exports.loadImage = loadImage;

package/dist/js/utils/webgl.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create the linked program object
+ * @param gl GL context
+ * @param vshader a vertex shader program (string)
+ * @param fshader a fragment shader program (string)
+ * @return created program object, or null if the creation has failed
+ */
+export declare function createProgram(gl: WebGLRenderingContext, vshader: string, fshader: string): WebGLProgram | null;

package/dist/js/utils/webgl.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createProgram = void 0;
+/**
+ * Create a shader object
+ * @param gl GL context
+ * @param type the type of the shader object to be created
+ * @param source shader program (string)
+ * @return created shader object, or null if the creation has failed.
+ */
+function createShader(gl, type, source) {
+    // Create shader object
+    var shader = gl.createShader(type);
+    if (shader == null) {
+        console.log('unable to create shader');
+        return null;
+    }
+    // Set the shader program
+    gl.shaderSource(shader, source);
+    // Compile the shader
+    gl.compileShader(shader);
+    // Check the result of compilation
+    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+        var error = gl.getShaderInfoLog(shader);
+        console.log('Failed to compile shader: ' + error);
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+/**
+ * Create the linked program object
+ * @param gl GL context
+ * @param vshader a vertex shader program (string)
+ * @param fshader a fragment shader program (string)
+ * @return created program object, or null if the creation has failed
+ */
+function createProgram(gl, vshader, fshader) {
+    // Create shader object
+    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
+    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
+    if (!vertexShader || !fragmentShader) {
+        return null;
+    }
+    // Create a program object
+    var program = gl.createProgram();
+    if (!program) {
+        return null;
+    }
+    // Attach the shader objects
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    // Link the program object
+    gl.linkProgram(program);
+    // Check the result of linking
+    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+        var error = gl.getProgramInfoLog(program);
+        console.log('Failed to link program: ' + error);
+        gl.deleteProgram(program);
+        gl.deleteShader(fragmentShader);
+        gl.deleteShader(vertexShader);
+        return null;
+    }
+    return program;
+}
+exports.createProgram = createProgram;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@naivemap/mapbox-gl-image-layer",
+  "version": "0.3.2",
+  "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",
+  "license": "MIT",
+  "main": "dist/js/index.js",
+  "module": "dist/es/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/js/index.js"
+    }
+  },
+  "types": "dist/js/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "mapbox-gl",
+    "reprojection",
+    "proj4"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/naivemap/mapbox-gl-layers.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "npm-run-all build:*",
+    "build:es": "tsc --outDir dist/es --module esnext --declaration false",
+    "build:js": "tsc",
+    "prepublishOnly": "npm-run-all build:*"
+  },
+  "bugs": {
+    "url": "https://github.com/naivemap/mapbox-gl-layers/issues"
+  },
+  "peerDependencies": {
+    "proj4": "^2.8.0"
+  },
+  "dependencies": {
+    "arrugator": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/mapbox-gl": "^2.7.2",
+    "@types/node": "^17.0.36",
+    "@types/proj4": "^2.5.2",
+    "npm-run-all": "^4.1.5"
+  },
+  "gitHead": "0d34a954e38a0366112328e2cceaafebece75e3e"
+}