@naivemap/mapbox-gl-image-layer 0.3.2 → 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.
Files changed (8) hide show
  1. package/README.md +17 -7
  2. package/dist/es/index.js +43 -48
  3. package/dist/es/utils/arrugator.js +39 -0
  4. package/dist/js/index.d.ts +17 -4
  5. package/dist/js/index.js +43 -51
  6. package/dist/js/utils/arrugator.d.ts +7 -0
  7. package/dist/js/utils/arrugator.js +46 -0
  8. 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 />`(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) |
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
- | **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. |
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 = {
@@ -43,9 +44,18 @@ export type ImageOption = {
43
44
 
44
45
  ### Methods
45
46
 
46
- | Method | Description |
47
- | -------------------------- | --------------------- |
48
- | **update** `(url: string)` | Update the image URL. |
47
+ #### updateImage
48
+
49
+ Updates the image URL and, optionally, the projection, the coordinates and the resampling.
50
+
51
+ ```ts
52
+ updateImage(option: {
53
+ url: string
54
+ projection?: string
55
+ coordinates?: Coordinates
56
+ resampling?: 'linear' | 'nearest'
57
+ }): this
58
+ ```
49
59
 
50
60
  ## Example
51
61
 
package/dist/es/index.js CHANGED
@@ -1,8 +1,6 @@
1
- // @ts-ignore
2
- import Arrugator from 'arrugator';
3
- import proj4 from 'proj4';
4
1
  import { loadImage } from './utils/image';
5
2
  import { createProgram } from './utils/webgl';
3
+ import { initArrugator } from './utils/arrugator';
6
4
  var ImageLayer = /** @class */ (function () {
7
5
  function ImageLayer(id, option) {
8
6
  this.id = id;
@@ -12,12 +10,7 @@ var ImageLayer = /** @class */ (function () {
12
10
  this._loaded = false;
13
11
  // 初始化 Arrugator
14
12
  var projection = option.projection, coordinates = option.coordinates;
15
- var arrugado = this._initArrugator(projection, coordinates);
16
- this._arrugado = {
17
- pos: arrugado.projected.flat(),
18
- uv: arrugado.uv.flat(),
19
- trigs: arrugado.trigs.flat(), // 三角形索引
20
- };
13
+ this._arrugado = initArrugator(projection, coordinates);
21
14
  this._map = null;
22
15
  this._gl = null;
23
16
  this._program = null;
@@ -31,24 +24,25 @@ var ImageLayer = /** @class */ (function () {
31
24
  this._gl = gl;
32
25
  this._loadImage(map, gl);
33
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 }";
34
- var fragmentSource = "\n #ifdef GL_ES\n precision highp int;\n precision mediump float;\n #endif\n uniform sampler2D u_sampler;\n varying vec2 v_uv;\n void main() {\n gl_FragColor = texture2D(u_sampler, v_uv);\n }";
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 }";
35
28
  this._program = createProgram(gl, vertexSource, fragmentSource);
36
29
  if (this._program) {
37
30
  this._positionBuffer = gl.createBuffer();
38
- gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
39
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.pos), gl.STATIC_DRAW);
31
+ // gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer)
32
+ // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.pos), gl.STATIC_DRAW)
40
33
  var a_pos = gl.getAttribLocation(this._program, 'a_pos');
41
34
  gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
42
35
  gl.enableVertexAttribArray(a_pos);
43
36
  this._uvBuffer = gl.createBuffer();
44
- gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
45
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.uv), gl.STATIC_DRAW);
37
+ // gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer)
38
+ // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.uv), gl.STATIC_DRAW)
46
39
  var a_uv = gl.getAttribLocation(this._program, 'a_uv');
47
40
  gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 0, 0);
48
41
  gl.enableVertexAttribArray(a_uv);
49
42
  this._verticesIndexBuffer = gl.createBuffer();
50
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
51
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this._arrugado.trigs), gl.STATIC_DRAW);
43
+ // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer)
44
+ // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this._arrugado.trigs), gl.STATIC_DRAW)
45
+ this._bindData(gl, this._arrugado);
52
46
  }
53
47
  };
54
48
  ImageLayer.prototype.onRemove = function (map, gl) {
@@ -73,48 +67,49 @@ var ImageLayer = /** @class */ (function () {
73
67
  gl.activeTexture(gl.TEXTURE0);
74
68
  gl.bindTexture(gl.TEXTURE_2D, this._texture);
75
69
  gl.uniform1i(gl.getUniformLocation(this._program, 'u_sampler'), 0);
70
+ // opacity
71
+ gl.uniform1f(gl.getUniformLocation(this._program, 'u_opacity'), this._option.opacity || 1);
72
+ // blend
73
+ gl.enable(gl.BLEND);
74
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
76
75
  gl.drawElements(gl.TRIANGLES, this._arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
77
76
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
78
77
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
79
78
  }
80
79
  };
81
- ImageLayer.prototype.update = function (url) {
80
+ /**
81
+ * Updates the image URL and, optionally, the projection, the coordinates and the resampling.
82
+ * @param {Object} option Options object.
83
+ * @param {string} [option.url] Required image URL.
84
+ * @param {string} [option.projection] Projection with EPSG code that points to the image..
85
+ * @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
86
+ * @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
87
+ */
88
+ ImageLayer.prototype.updateImage = function (option) {
89
+ var _a, _b, _c;
82
90
  this._loaded = false;
83
- this._option.url = url;
91
+ this._option.url = option.url;
84
92
  if (this._gl && this._map) {
93
+ if (option.projection || option.coordinates) {
94
+ this._option.projection = (_a = option.projection) !== null && _a !== void 0 ? _a : this._option.projection;
95
+ this._option.coordinates = (_b = option.coordinates) !== null && _b !== void 0 ? _b : this._option.coordinates;
96
+ // reinit arrugator
97
+ this._arrugado = initArrugator(this._option.projection, this._option.coordinates);
98
+ this._bindData(this._gl, this._arrugado);
99
+ }
100
+ this._option.resampling = (_c = option.resampling) !== null && _c !== void 0 ? _c : this._option.resampling;
101
+ // reload image
85
102
  this._loadImage(this._map, this._gl);
86
103
  }
104
+ return this;
87
105
  };
88
- ImageLayer.prototype._initArrugator = function (fromProj, coordinates) {
89
- // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
90
- var origin = [-20037508.342789244, 20037508.342789244];
91
- // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
92
- var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
93
- // 转换为 EPSG:3857
94
- var projector = proj4(fromProj, 'EPSG:3857').forward;
95
- // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
96
- function forward(coors) {
97
- // 墨卡托坐标
98
- var coor_3857 = projector(coors);
99
- // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
100
- var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
101
- var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
102
- return [mapbox_coor1, mapbox_coor2];
103
- }
104
- var epsilon = 0.00000000001;
105
- // 纹理uv坐标
106
- var sourceUV = [
107
- [0, 0],
108
- [0, 1],
109
- [1, 0],
110
- [1, 1], // bottom-right
111
- ];
112
- var arrugator = new Arrugator(forward, verts, sourceUV, [
113
- [0, 1, 3],
114
- [0, 3, 2],
115
- ]);
116
- arrugator.lowerEpsilon(epsilon);
117
- return arrugator.output();
106
+ ImageLayer.prototype._bindData = function (gl, arrugado) {
107
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
108
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.pos), gl.STATIC_DRAW);
109
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
110
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.uv), gl.STATIC_DRAW);
111
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
112
+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(arrugado.trigs), gl.STATIC_DRAW);
118
113
  };
119
114
  ImageLayer.prototype._loadImage = function (map, gl) {
120
115
  var _this = this;
package/dist/es/utils/arrugator.js ADDED
@@ -0,0 +1,39 @@
1
+ // @ts-ignore
2
+ import Arrugator from 'arrugator';
3
+ import proj4 from 'proj4';
4
+ export function initArrugator(fromProj, coordinates) {
5
+ // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
6
+ var origin = [-20037508.342789244, 20037508.342789244];
7
+ // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
8
+ var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
9
+ // 转换为 EPSG:3857
10
+ var projector = proj4(fromProj, 'EPSG:3857').forward;
11
+ // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
12
+ function forward(coors) {
13
+ // 墨卡托坐标
14
+ var coor_3857 = projector(coors);
15
+ // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
16
+ var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
17
+ var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
18
+ return [mapbox_coor1, mapbox_coor2];
19
+ }
20
+ var epsilon = 0.00000000001;
21
+ // 纹理uv坐标
22
+ var sourceUV = [
23
+ [0, 0],
24
+ [0, 1],
25
+ [1, 0],
26
+ [1, 1], // bottom-right
27
+ ];
28
+ var arrugator = new Arrugator(forward, verts, sourceUV, [
29
+ [0, 1, 3],
30
+ [0, 3, 2],
31
+ ]);
32
+ arrugator.lowerEpsilon(epsilon);
33
+ var arrugado = arrugator.output();
34
+ return {
35
+ pos: arrugado.projected.flat(),
36
+ uv: arrugado.uv.flat(),
37
+ trigs: arrugado.trigs.flat(), // 三角形索引
38
+ };
39
+ }
package/dist/js/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  /// <reference types="mapbox-gl" />
2
- declare type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
2
+ import type { Coordinates } from './utils/arrugator';
3
3
  export declare type ImageOption = {
4
4
  url: string;
5
5
  projection: string;
6
6
  coordinates: Coordinates;
7
7
  resampling?: 'linear' | 'nearest';
8
+ opacity?: number;
8
9
  crossOrigin?: string;
9
10
  };
10
11
  export default class ImageLayer implements mapboxgl.CustomLayerInterface {
@@ -25,8 +26,20 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface {
25
26
  onAdd(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
26
27
  onRemove(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
27
28
  render(gl: WebGLRenderingContext, matrix: number[]): void;
28
- update(url: string): void;
29
- private _initArrugator;
29
+ /**
30
+ * Updates the image URL and, optionally, the projection, the coordinates and the resampling.
31
+ * @param {Object} option Options object.
32
+ * @param {string} [option.url] Required image URL.
33
+ * @param {string} [option.projection] Projection with EPSG code that points to the image..
34
+ * @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
35
+ * @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
36
+ */
37
+ updateImage(option: {
38
+ url: string;
39
+ projection?: string;
40
+ coordinates?: Coordinates;
41
+ resampling?: 'linear' | 'nearest';
42
+ }): this;
43
+ private _bindData;
30
44
  private _loadImage;
31
45
  }
32
- export {};
package/dist/js/index.js CHANGED
@@ -1,13 +1,8 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
- // @ts-ignore
7
- var arrugator_1 = __importDefault(require("arrugator"));
8
- var proj4_1 = __importDefault(require("proj4"));
9
3
  var image_1 = require("./utils/image");
10
4
  var webgl_1 = require("./utils/webgl");
5
+ var arrugator_1 = require("./utils/arrugator");
11
6
  var ImageLayer = /** @class */ (function () {
12
7
  function ImageLayer(id, option) {
13
8
  this.id = id;
@@ -17,12 +12,7 @@ var ImageLayer = /** @class */ (function () {
17
12
  this._loaded = false;
18
13
  // 初始化 Arrugator
19
14
  var projection = option.projection, coordinates = option.coordinates;
20
- var arrugado = this._initArrugator(projection, coordinates);
21
- this._arrugado = {
22
- pos: arrugado.projected.flat(),
23
- uv: arrugado.uv.flat(),
24
- trigs: arrugado.trigs.flat(), // 三角形索引
25
- };
15
+ this._arrugado = (0, arrugator_1.initArrugator)(projection, coordinates);
26
16
  this._map = null;
27
17
  this._gl = null;
28
18
  this._program = null;
@@ -36,24 +26,25 @@ var ImageLayer = /** @class */ (function () {
36
26
  this._gl = gl;
37
27
  this._loadImage(map, gl);
38
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 }";
39
- var fragmentSource = "\n #ifdef GL_ES\n precision highp int;\n precision mediump float;\n #endif\n uniform sampler2D u_sampler;\n varying vec2 v_uv;\n void main() {\n gl_FragColor = texture2D(u_sampler, v_uv);\n }";
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 }";
40
30
  this._program = (0, webgl_1.createProgram)(gl, vertexSource, fragmentSource);
41
31
  if (this._program) {
42
32
  this._positionBuffer = gl.createBuffer();
43
- gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
44
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.pos), gl.STATIC_DRAW);
33
+ // gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer)
34
+ // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.pos), gl.STATIC_DRAW)
45
35
  var a_pos = gl.getAttribLocation(this._program, 'a_pos');
46
36
  gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);
47
37
  gl.enableVertexAttribArray(a_pos);
48
38
  this._uvBuffer = gl.createBuffer();
49
- gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
50
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.uv), gl.STATIC_DRAW);
39
+ // gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer)
40
+ // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._arrugado.uv), gl.STATIC_DRAW)
51
41
  var a_uv = gl.getAttribLocation(this._program, 'a_uv');
52
42
  gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 0, 0);
53
43
  gl.enableVertexAttribArray(a_uv);
54
44
  this._verticesIndexBuffer = gl.createBuffer();
55
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
56
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this._arrugado.trigs), gl.STATIC_DRAW);
45
+ // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer)
46
+ // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this._arrugado.trigs), gl.STATIC_DRAW)
47
+ this._bindData(gl, this._arrugado);
57
48
  }
58
49
  };
59
50
  ImageLayer.prototype.onRemove = function (map, gl) {
@@ -78,48 +69,49 @@ var ImageLayer = /** @class */ (function () {
78
69
  gl.activeTexture(gl.TEXTURE0);
79
70
  gl.bindTexture(gl.TEXTURE_2D, this._texture);
80
71
  gl.uniform1i(gl.getUniformLocation(this._program, 'u_sampler'), 0);
72
+ // opacity
73
+ gl.uniform1f(gl.getUniformLocation(this._program, 'u_opacity'), this._option.opacity || 1);
74
+ // blend
75
+ gl.enable(gl.BLEND);
76
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
81
77
  gl.drawElements(gl.TRIANGLES, this._arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
82
78
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
83
79
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
84
80
  }
85
81
  };
86
- ImageLayer.prototype.update = function (url) {
82
+ /**
83
+ * Updates the image URL and, optionally, the projection, the coordinates and the resampling.
84
+ * @param {Object} option Options object.
85
+ * @param {string} [option.url] Required image URL.
86
+ * @param {string} [option.projection] Projection with EPSG code that points to the image..
87
+ * @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
88
+ * @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
89
+ */
90
+ ImageLayer.prototype.updateImage = function (option) {
91
+ var _a, _b, _c;
87
92
  this._loaded = false;
88
- this._option.url = url;
93
+ this._option.url = option.url;
89
94
  if (this._gl && this._map) {
95
+ if (option.projection || option.coordinates) {
96
+ this._option.projection = (_a = option.projection) !== null && _a !== void 0 ? _a : this._option.projection;
97
+ this._option.coordinates = (_b = option.coordinates) !== null && _b !== void 0 ? _b : this._option.coordinates;
98
+ // reinit arrugator
99
+ this._arrugado = (0, arrugator_1.initArrugator)(this._option.projection, this._option.coordinates);
100
+ this._bindData(this._gl, this._arrugado);
101
+ }
102
+ this._option.resampling = (_c = option.resampling) !== null && _c !== void 0 ? _c : this._option.resampling;
103
+ // reload image
90
104
  this._loadImage(this._map, this._gl);
91
105
  }
106
+ return this;
92
107
  };
93
- ImageLayer.prototype._initArrugator = function (fromProj, coordinates) {
94
- // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
95
- var origin = [-20037508.342789244, 20037508.342789244];
96
- // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
97
- var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
98
- // 转换为 EPSG:3857
99
- var projector = (0, proj4_1.default)(fromProj, 'EPSG:3857').forward;
100
- // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
101
- function forward(coors) {
102
- // 墨卡托坐标
103
- var coor_3857 = projector(coors);
104
- // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
105
- var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
106
- var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
107
- return [mapbox_coor1, mapbox_coor2];
108
- }
109
- var epsilon = 0.00000000001;
110
- // 纹理uv坐标
111
- var sourceUV = [
112
- [0, 0],
113
- [0, 1],
114
- [1, 0],
115
- [1, 1], // bottom-right
116
- ];
117
- var arrugator = new arrugator_1.default(forward, verts, sourceUV, [
118
- [0, 1, 3],
119
- [0, 3, 2],
120
- ]);
121
- arrugator.lowerEpsilon(epsilon);
122
- return arrugator.output();
108
+ ImageLayer.prototype._bindData = function (gl, arrugado) {
109
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
110
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.pos), gl.STATIC_DRAW);
111
+ gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
112
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.uv), gl.STATIC_DRAW);
113
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
114
+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(arrugado.trigs), gl.STATIC_DRAW);
123
115
  };
124
116
  ImageLayer.prototype._loadImage = function (map, gl) {
125
117
  var _this = this;
package/dist/js/utils/arrugator.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
2
+ export declare type ArrugadoFlat = {
3
+ pos: number[];
4
+ uv: number[];
5
+ trigs: number[];
6
+ };
7
+ export declare function initArrugator(fromProj: string, coordinates: Coordinates): ArrugadoFlat;
package/dist/js/utils/arrugator.js ADDED
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.initArrugator = void 0;
7
+ // @ts-ignore
8
+ var arrugator_1 = __importDefault(require("arrugator"));
9
+ var proj4_1 = __importDefault(require("proj4"));
10
+ function initArrugator(fromProj, coordinates) {
11
+ // 墨卡托投影的左上角坐标，对应 mapbox 左上角起始坐标 [0,0]
12
+ var origin = [-20037508.342789244, 20037508.342789244];
13
+ // 坐标转换为 Arrugator 坐标 top-left, top-left, top-left, top-left)
14
+ var verts = [coordinates[0], coordinates[3], coordinates[1], coordinates[2]];
15
+ // 转换为 EPSG:3857
16
+ var projector = (0, proj4_1.default)(fromProj, 'EPSG:3857').forward;
17
+ // 改写坐标转换函数，因为 mapbox 的墨卡托坐标是 0-1，并且对应地理范围与标准 3857 不同
18
+ function forward(coors) {
19
+ // 墨卡托坐标
20
+ var coor_3857 = projector(coors);
21
+ // 墨卡托坐标转换到 0-1 区间，origin 对应 mapbox 0 0点
22
+ var mapbox_coor1 = Math.abs((coor_3857[0] - origin[0]) / (20037508.342789244 * 2));
23
+ var mapbox_coor2 = Math.abs((coor_3857[1] - origin[1]) / (20037508.342789244 * 2));
24
+ return [mapbox_coor1, mapbox_coor2];
25
+ }
26
+ var epsilon = 0.00000000001;
27
+ // 纹理uv坐标
28
+ var sourceUV = [
29
+ [0, 0],
30
+ [0, 1],
31
+ [1, 0],
32
+ [1, 1], // bottom-right
33
+ ];
34
+ var arrugator = new arrugator_1.default(forward, verts, sourceUV, [
35
+ [0, 1, 3],
36
+ [0, 3, 2],
37
+ ]);
38
+ arrugator.lowerEpsilon(epsilon);
39
+ var arrugado = arrugator.output();
40
+ return {
41
+ pos: arrugado.projected.flat(),
42
+ uv: arrugado.uv.flat(),
43
+ trigs: arrugado.trigs.flat(), // 三角形索引
44
+ };
45
+ }
46
+ exports.initArrugator = initArrugator;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@naivemap/mapbox-gl-image-layer",
3
- "version": "0.3.2",
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": "0d34a954e38a0366112328e2cceaafebece75e3e"
56
+ "gitHead": "5fc47667682399fe76c56d6808a44098bbd46636"
57
57
  }