@naivemap/mapbox-gl-image-layer 0.5.0 → 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,97 +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. |
-| **option.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. |
-| **option.mask** <br />(`MaskProperty`) | The polygonal mask or multipolygonal mask for the image. |
-
-```ts
-export type ImageOption = {
-  url: string
-  projection: string
-  coordinates: Coordinates
-  resampling?: 'linear' | 'nearest'
-  opacity?: number
-  crossOrigin?: string
-  mask?: MaskProperty
-}
-
-// top left, top right, bottom right, bottom left.
-export type Coordinates = [[number, number], [number, number], [number, number], [number, number]]
-
-export type MaskProperty = {
-  type?: 'in' | 'out' // default: in
-  data: GeoJSON.Polygon | GeoJSON.MultiPolygon
-}
-```
-
-### Methods
-
-#### updateImage
-
-Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
-
-```ts
-updateImage(option: {
-  url?: string
-  projection?: string
-  coordinates?: Coordinates
-  opacity?: number
-  resampling?: 'linear' | 'nearest'
-}): this
-```
-
-#### updateMask
-
-Updates the mask property.
-
-```ts
-updateMask(mask: Partial<MaskProperty>): 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,61 +1,47 @@
 {
   "name": "@naivemap/mapbox-gl-image-layer",
-  "version": "0.5.0",
-  "description": "Load a static image of any projection via Arrugator and Proj4js.",
-  "author": "huanglii <li.huangli@qq.com>",
-  "homepage": "https://github.com/naivemap/mapbox-gl-layers#readme",
-  "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",
-    "compare-versions": "^6.0.0-rc.1",
-    "earcut": "^2.2.4",
-    "twgl.js": "^5.3.1"
-  },
   "devDependencies": {
-    "@types/earcut": "^2.1.1",
-    "@types/mapbox-gl": "^2.7.2",
-    "@types/node": "^17.0.36",
-    "@types/proj4": "^2.5.2",
-    "npm-run-all": "^4.1.5"
+    "mapbox-gl": "^3.10.0"
   },
-  "gitHead": "3a2fa3bab4a8e676df592ea4f674fbf9b9e9b221"
-}
+  "scripts": {
+    "build": "vite build",
+    "typedocs": "pnpm typedoc"
+  }
+}

package/dist/es/index.js

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

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

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

@@ -1,256 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 = __importDefault(require("earcut"));
-var mapbox_gl_1 = __importDefault(require("mapbox-gl"));
-var twgl = __importStar(require("twgl.js"));
-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 arrugator_1 = require("./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 = (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);
-        // 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, [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 (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 = (0, arrugator_1.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_1.default.flatten(coordinates);
-                var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.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 flatten = earcut_1.default.flatten(data.coordinates);
-            var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.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/shaders/image.fragment.glsl.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/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;