@naivemap/mapbox-gl-image-layer 0.4.2 → 0.6.0-alpha.0

package/LICENSE

@@ -1,21 +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.
+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

@@ -1,76 +1,11 @@
-## 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) |
-| **option.opacity** <br />(Optional `number` between 0 and 1 inclusive. Defaults to 1. | The opacity at which the image will be drawn. |
-| **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
-
-#### updateImage
-
-Updates the image URL and, optionally, the projection, the coordinates and the resampling.
-
-```ts
-updateImage(option: {
-  url: string
-  projection?: string
-  coordinates?: Coordinates
-  resampling?: 'linear' | 'nearest'
-}): this
-```
-
-## 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)
-```
+# @naivemap/mapbox-gl-image-layer
+
+ImageLayer ([@naivemap/mapbox-gl-image-layer](https://www.npmjs.com/package/@naivemap/mapbox-gl-image-layer)): A versatile layer for displaying georeferenced images with **various projections** on the map. It supports loading and correctly positioning images from different coordinate systems, making it ideal for integrating non-standard raster data, historical maps, or aerial imagery.
+
+[API References](https://www.naivemap.com/map-gl-layers/api/image-layer/)
+
+## Install
+
+```bash
+pnpm add @naivemap/mapbox-gl-image-layer proj4
+```

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("@naivemap/image-layer-core"),a=require("@naivemap/map-gl-layer-adaptor");class d{id;type="custom";renderingMode="2d";core;adaptor;constructor(e,r){this.id=e,this.core=new o(r),this.adaptor=a.createMapboxLayerAdaptor(this.core,{id:e,renderingMode:this.renderingMode,prepareStencilMask:t=>a.clearTileClippingMask(t)})}onAdd(e,r){this.adaptor.onAdd(e,r)}onRemove(e,r){this.adaptor.onRemove(e,r)}render(e,r){this.adaptor.render(e,r)}updateImage(e){return this.core.updateImage(e)}updateMask(e){return this.core.updateMask(e)}}module.exports=d;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './mapbox-gl-image-layer/src/index'
+export {}
+import MapboxImageLayer from './mapbox-gl-image-layer/src/index'
+export default MapboxImageLayer
+export * from './mapbox-gl-image-layer/src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,61 @@
+import t from "@naivemap/image-layer-core";
+import { createMapboxLayerAdaptor as o, clearTileClippingMask as d } from "@naivemap/map-gl-layer-adaptor";
+class n {
+  id;
+  /**
+   * @ignore
+   */
+  type = "custom";
+  /**
+   * @ignore
+   */
+  renderingMode = "2d";
+  core;
+  adaptor;
+  /**
+   * @param id - A unique layer id
+   * @param option - ImageLayer options
+   */
+  constructor(e, r) {
+    this.id = e, this.core = new t(r), this.adaptor = o(this.core, {
+      id: e,
+      renderingMode: this.renderingMode,
+      prepareStencilMask: (a) => d(a)
+    });
+  }
+  /**
+   * @ignore
+   */
+  onAdd(e, r) {
+    this.adaptor.onAdd(e, r);
+  }
+  /**
+   * @ignore
+   */
+  onRemove(e, r) {
+    this.adaptor.onRemove(e, r);
+  }
+  /**
+   * @ignore
+   */
+  render(e, r) {
+    this.adaptor.render(e, r);
+  }
+  /**
+   * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
+   * @param {Object} option Options object.
+   */
+  updateImage(e) {
+    return this.core.updateImage(e);
+  }
+  /**
+   * Updates the mask property of the image layer.
+   * @param mask
+   */
+  updateMask(e) {
+    return this.core.updateMask(e);
+  }
+}
+export {
+  n as default
+};

package/dist/mapbox-gl-image-layer/src/ImageLayer.d.ts

@@ -0,0 +1,46 @@
+import { default as ImageLayerCore, ImageLayerOption, MaskProperty } from '../../image-layer-core/src/index.ts';
+import { CustomLayerInterface, Map } from 'mapbox-gl';
+export type { ImageLayerOption } from '../../image-layer-core/src/index.ts';
+/**
+ * A custom Mapbox GL JS layer for rendering georeferenced images with arbitrary projections.
+ */
+export default class ImageLayer implements CustomLayerInterface {
+    id: string;
+    /**
+     * @ignore
+     */
+    type: 'custom';
+    /**
+     * @ignore
+     */
+    renderingMode?: '2d' | '3d' | undefined;
+    private core;
+    private adaptor;
+    /**
+     * @param id - A unique layer id
+     * @param option - ImageLayer options
+     */
+    constructor(id: string, option: ImageLayerOption);
+    /**
+     * @ignore
+     */
+    onAdd(map: Map, gl: WebGLRenderingContext): void;
+    /**
+     * @ignore
+     */
+    onRemove(map: Map, gl: WebGLRenderingContext): void;
+    /**
+     * @ignore
+     */
+    render(gl: WebGLRenderingContext, args: unknown): void;
+    /**
+     * Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
+     * @param {Object} option Options object.
+     */
+    updateImage(option: Partial<Omit<ImageLayerOption, 'mask'>>): ImageLayerCore;
+    /**
+     * Updates the mask property of the image layer.
+     * @param mask
+     */
+    updateMask(mask: Partial<MaskProperty>): ImageLayerCore;
+}

package/dist/mapbox-gl-image-layer/src/index.d.ts

@@ -0,0 +1,4 @@
+import { default as ImageLayer } from './ImageLayer';
+export type { ImageLayerOption } from '../../image-layer-core/src/index.ts';
+export default ImageLayer;
+export type { MaskProperty } from '../../image-layer-core/src/index.ts';

package/package.json

@@ -1,57 +1,47 @@
 {
   "name": "@naivemap/mapbox-gl-image-layer",
-  "version": "0.4.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",
+  "version": "0.6.0-alpha.0",
+  "description": "Load a static image of any projection via Arrugator and Proj4js for Mapbox GL JS.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "type": "module",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
-      "import": "./dist/es/index.js",
-      "require": "./dist/js/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "types": "dist/js/index.d.ts",
-  "sideEffects": false,
   "files": [
     "dist"
   ],
   "keywords": [
-    "mapbox-gl",
-    "reprojection",
-    "proj4"
+    "mapbox",
+    "image",
+    "layer",
+    "custom"
   ],
+  "author": "naivemap",
+  "license": "MIT",
+  "types": "./dist/index.d.ts",
+  "repository": "https://github.com/naivemap/maplibre-gl-layers",
   "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"
+  "sideEffects": false,
+  "dependencies": {
+    "@naivemap/map-gl-layer-adaptor": "0.1.0",
+    "@naivemap/image-layer-core": "0.1.0"
   },
   "peerDependencies": {
+    "mapbox-gl": "^2.0.0 || ^3.0.0",
     "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"
+    "mapbox-gl": "^3.10.0"
   },
-  "gitHead": "5fc47667682399fe76c56d6808a44098bbd46636"
-}
+  "scripts": {
+    "build": "vite build",
+    "typedocs": "pnpm typedoc"
+  }
+}

package/dist/es/index.js

@@ -1,132 +0,0 @@
-import { loadImage } from './utils/image';
-import { createProgram } from './utils/webgl';
-import { initArrugator } from './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 = 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 = 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 = 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;
-        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/arrugator.js

@@ -1,39 +0,0 @@
-// @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(), // 三角形索引
-    };
-}

package/dist/es/utils/image.js

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,64 +0,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
- */
-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

@@ -1,45 +0,0 @@
-/// <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;
-}

package/dist/js/index.js

@@ -1,134 +0,0 @@
-"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;

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

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

package/dist/js/utils/arrugator.js

@@ -1,46 +0,0 @@
-"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;

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

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

package/dist/js/utils/image.js

@@ -1,23 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1,68 +0,0 @@
-"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;