@naivemap/mapbox-gl-image-layer 0.3.2 → 0.4.0
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 +12 -3
- package/dist/es/index.js +37 -47
- package/dist/es/utils/arrugator.js +39 -0
- package/dist/js/index.d.ts +16 -4
- package/dist/js/index.js +37 -50
- package/dist/js/utils/arrugator.d.ts +7 -0
- package/dist/js/utils/arrugator.js +46 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -43,9 +43,18 @@ export type ImageOption = {
|
|
|
43
43
|
|
|
44
44
|
### Methods
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
#### updateImage
|
|
47
|
+
|
|
48
|
+
Updates the image URL and, optionally, the projection, the coordinates and the resampling.
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
updateImage(option: {
|
|
52
|
+
url: string
|
|
53
|
+
projection?: string
|
|
54
|
+
coordinates?: Coordinates
|
|
55
|
+
resampling?: 'linear' | 'nearest'
|
|
56
|
+
}): this
|
|
57
|
+
```
|
|
49
58
|
|
|
50
59
|
## Example
|
|
51
60
|
|
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
|
-
|
|
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;
|
|
@@ -35,20 +28,21 @@ var ImageLayer = /** @class */ (function () {
|
|
|
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) {
|
|
@@ -78,43 +72,39 @@ var ImageLayer = /** @class */ (function () {
|
|
|
78
72
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
|
|
79
73
|
}
|
|
80
74
|
};
|
|
81
|
-
|
|
75
|
+
/**
|
|
76
|
+
* Updates the image URL and, optionally, the projection, the coordinates and the resampling.
|
|
77
|
+
* @param {Object} option Options object.
|
|
78
|
+
* @param {string} [option.url] Required image URL.
|
|
79
|
+
* @param {string} [option.projection] Projection with EPSG code that points to the image..
|
|
80
|
+
* @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
|
|
81
|
+
* @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
|
|
82
|
+
*/
|
|
83
|
+
ImageLayer.prototype.updateImage = function (option) {
|
|
84
|
+
var _a, _b, _c;
|
|
82
85
|
this._loaded = false;
|
|
83
|
-
this._option.url = url;
|
|
86
|
+
this._option.url = option.url;
|
|
84
87
|
if (this._gl && this._map) {
|
|
88
|
+
if (option.projection || option.coordinates) {
|
|
89
|
+
this._option.projection = (_a = option.projection) !== null && _a !== void 0 ? _a : this._option.projection;
|
|
90
|
+
this._option.coordinates = (_b = option.coordinates) !== null && _b !== void 0 ? _b : this._option.coordinates;
|
|
91
|
+
// reinit arrugator
|
|
92
|
+
this._arrugado = initArrugator(this._option.projection, this._option.coordinates);
|
|
93
|
+
this._bindData(this._gl, this._arrugado);
|
|
94
|
+
}
|
|
95
|
+
this._option.resampling = (_c = option.resampling) !== null && _c !== void 0 ? _c : this._option.resampling;
|
|
96
|
+
// reload image
|
|
85
97
|
this._loadImage(this._map, this._gl);
|
|
86
98
|
}
|
|
99
|
+
return this;
|
|
87
100
|
};
|
|
88
|
-
ImageLayer.prototype.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
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();
|
|
101
|
+
ImageLayer.prototype._bindData = function (gl, arrugado) {
|
|
102
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
|
|
103
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.pos), gl.STATIC_DRAW);
|
|
104
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
|
|
105
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.uv), gl.STATIC_DRAW);
|
|
106
|
+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
|
|
107
|
+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(arrugado.trigs), gl.STATIC_DRAW);
|
|
118
108
|
};
|
|
119
109
|
ImageLayer.prototype._loadImage = function (map, gl) {
|
|
120
110
|
var _this = this;
|
|
@@ -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,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="mapbox-gl" />
|
|
2
|
-
|
|
2
|
+
import type { Coordinates } from './utils/arrugator';
|
|
3
3
|
export declare type ImageOption = {
|
|
4
4
|
url: string;
|
|
5
5
|
projection: string;
|
|
@@ -25,8 +25,20 @@ export default class ImageLayer implements mapboxgl.CustomLayerInterface {
|
|
|
25
25
|
onAdd(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
|
|
26
26
|
onRemove(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
|
|
27
27
|
render(gl: WebGLRenderingContext, matrix: number[]): void;
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Updates the image URL and, optionally, the projection, the coordinates and the resampling.
|
|
30
|
+
* @param {Object} option Options object.
|
|
31
|
+
* @param {string} [option.url] Required image URL.
|
|
32
|
+
* @param {string} [option.projection] Projection with EPSG code that points to the image..
|
|
33
|
+
* @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
|
|
34
|
+
* @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
|
|
35
|
+
*/
|
|
36
|
+
updateImage(option: {
|
|
37
|
+
url: string;
|
|
38
|
+
projection?: string;
|
|
39
|
+
coordinates?: Coordinates;
|
|
40
|
+
resampling?: 'linear' | 'nearest';
|
|
41
|
+
}): this;
|
|
42
|
+
private _bindData;
|
|
30
43
|
private _loadImage;
|
|
31
44
|
}
|
|
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
|
-
|
|
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;
|
|
@@ -40,20 +30,21 @@ var ImageLayer = /** @class */ (function () {
|
|
|
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) {
|
|
@@ -83,43 +74,39 @@ var ImageLayer = /** @class */ (function () {
|
|
|
83
74
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
|
|
84
75
|
}
|
|
85
76
|
};
|
|
86
|
-
|
|
77
|
+
/**
|
|
78
|
+
* Updates the image URL and, optionally, the projection, the coordinates and the resampling.
|
|
79
|
+
* @param {Object} option Options object.
|
|
80
|
+
* @param {string} [option.url] Required image URL.
|
|
81
|
+
* @param {string} [option.projection] Projection with EPSG code that points to the image..
|
|
82
|
+
* @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
|
|
83
|
+
* @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
|
|
84
|
+
*/
|
|
85
|
+
ImageLayer.prototype.updateImage = function (option) {
|
|
86
|
+
var _a, _b, _c;
|
|
87
87
|
this._loaded = false;
|
|
88
|
-
this._option.url = url;
|
|
88
|
+
this._option.url = option.url;
|
|
89
89
|
if (this._gl && this._map) {
|
|
90
|
+
if (option.projection || option.coordinates) {
|
|
91
|
+
this._option.projection = (_a = option.projection) !== null && _a !== void 0 ? _a : this._option.projection;
|
|
92
|
+
this._option.coordinates = (_b = option.coordinates) !== null && _b !== void 0 ? _b : this._option.coordinates;
|
|
93
|
+
// reinit arrugator
|
|
94
|
+
this._arrugado = (0, arrugator_1.initArrugator)(this._option.projection, this._option.coordinates);
|
|
95
|
+
this._bindData(this._gl, this._arrugado);
|
|
96
|
+
}
|
|
97
|
+
this._option.resampling = (_c = option.resampling) !== null && _c !== void 0 ? _c : this._option.resampling;
|
|
98
|
+
// reload image
|
|
90
99
|
this._loadImage(this._map, this._gl);
|
|
91
100
|
}
|
|
101
|
+
return this;
|
|
92
102
|
};
|
|
93
|
-
ImageLayer.prototype.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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();
|
|
103
|
+
ImageLayer.prototype._bindData = function (gl, arrugado) {
|
|
104
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
|
|
105
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.pos), gl.STATIC_DRAW);
|
|
106
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, this._uvBuffer);
|
|
107
|
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arrugado.uv), gl.STATIC_DRAW);
|
|
108
|
+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._verticesIndexBuffer);
|
|
109
|
+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(arrugado.trigs), gl.STATIC_DRAW);
|
|
123
110
|
};
|
|
124
111
|
ImageLayer.prototype._loadImage = function (map, gl) {
|
|
125
112
|
var _this = this;
|
|
@@ -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;
|
|
@@ -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
|
+
"version": "0.4.0",
|
|
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": "b5f82501e57c669f76b38335b6f8f057fc1a2666"
|
|
57
57
|
}
|