@naivemap/mapbox-gl-image-layer 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/es/index.js +4 -2
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +4 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -26,11 +26,12 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface
|
|
|
26
26
|
|
|
27
27
|
| Name | Description |
|
|
28
28
|
| --- | --- |
|
|
29
|
-
| **option.url** <br
|
|
30
|
-
| **option.projection** <br
|
|
31
|
-
| **option.coordinates** <br
|
|
29
|
+
| **option.url** <br />(`string`) | URL that points to an image. |
|
|
30
|
+
| **option.projection** <br />(`string`) | Projection with EPSG code that points to the image. |
|
|
31
|
+
| **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) |
|
|
32
32
|
| **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) |
|
|
33
|
-
| **
|
|
33
|
+
| **option.opacity** <br />(Optional `number` between 0 and 1 inclusive. Defaults to 1. | The opacity at which the image will be drawn. |
|
|
34
|
+
| **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. |
|
|
34
35
|
|
|
35
36
|
```ts
|
|
36
37
|
export type ImageOption = {
|
package/dist/es/index.js
CHANGED
|
@@ -24,7 +24,7 @@ var ImageLayer = /** @class */ (function () {
|
|
|
24
24
|
this._gl = gl;
|
|
25
25
|
this._loadImage(map, gl);
|
|
26
26
|
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 }";
|
|
27
|
-
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
|
|
27
|
+
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 }";
|
|
28
28
|
this._program = createProgram(gl, vertexSource, fragmentSource);
|
|
29
29
|
if (this._program) {
|
|
30
30
|
this._positionBuffer = gl.createBuffer();
|
|
@@ -67,7 +67,9 @@ var ImageLayer = /** @class */ (function () {
|
|
|
67
67
|
gl.activeTexture(gl.TEXTURE0);
|
|
68
68
|
gl.bindTexture(gl.TEXTURE_2D, this._texture);
|
|
69
69
|
gl.uniform1i(gl.getUniformLocation(this._program, 'u_sampler'), 0);
|
|
70
|
-
//
|
|
70
|
+
// opacity
|
|
71
|
+
gl.uniform1f(gl.getUniformLocation(this._program, 'u_opacity'), this._option.opacity || 1);
|
|
72
|
+
// blend
|
|
71
73
|
gl.enable(gl.BLEND);
|
|
72
74
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
73
75
|
gl.drawElements(gl.TRIANGLES, this._arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
|
package/dist/js/index.d.ts
CHANGED
package/dist/js/index.js
CHANGED
|
@@ -26,7 +26,7 @@ var ImageLayer = /** @class */ (function () {
|
|
|
26
26
|
this._gl = gl;
|
|
27
27
|
this._loadImage(map, gl);
|
|
28
28
|
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 }";
|
|
29
|
-
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
|
|
29
|
+
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 }";
|
|
30
30
|
this._program = (0, webgl_1.createProgram)(gl, vertexSource, fragmentSource);
|
|
31
31
|
if (this._program) {
|
|
32
32
|
this._positionBuffer = gl.createBuffer();
|
|
@@ -69,7 +69,9 @@ var ImageLayer = /** @class */ (function () {
|
|
|
69
69
|
gl.activeTexture(gl.TEXTURE0);
|
|
70
70
|
gl.bindTexture(gl.TEXTURE_2D, this._texture);
|
|
71
71
|
gl.uniform1i(gl.getUniformLocation(this._program, 'u_sampler'), 0);
|
|
72
|
-
//
|
|
72
|
+
// opacity
|
|
73
|
+
gl.uniform1f(gl.getUniformLocation(this._program, 'u_opacity'), this._option.opacity || 1);
|
|
74
|
+
// blend
|
|
73
75
|
gl.enable(gl.BLEND);
|
|
74
76
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
75
77
|
gl.drawElements(gl.TRIANGLES, this._arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@naivemap/mapbox-gl-image-layer",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "Load a static image of any projection via Arrugator and Proj4js.",
|
|
5
5
|
"author": "huanglii <li.huangli@qq.com>",
|
|
6
6
|
"homepage": "https://github.com/naivemap/mapbox-gl-layers#readme",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"@types/proj4": "^2.5.2",
|
|
54
54
|
"npm-run-all": "^4.1.5"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "5fc47667682399fe76c56d6808a44098bbd46636"
|
|
57
57
|
}
|