@naivemap/mapbox-gl-image-layer 0.5.0 → 0.6.0-beta.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/dist/es/ImageLayer.js +232 -0
- package/dist/es/arrugator/Arrugator.js +270 -0
- package/dist/es/{utils/arrugator.js → arrugator/index.js} +43 -39
- package/dist/es/index.js +2 -228
- package/dist/es/shaders/image.fragment.glsl.js +1 -1
- package/dist/es/shaders/image.vertex.glsl.js +1 -1
- package/dist/es/shaders/mask.fragment.glsl.js +1 -1
- package/dist/es/shaders/mask.vertex.glsl.js +1 -1
- package/dist/js/ImageLayer.d.ts +62 -0
- package/dist/js/ImageLayer.js +270 -0
- package/dist/js/arrugator/Arrugator.d.ts +18 -0
- package/dist/js/arrugator/Arrugator.js +275 -0
- package/dist/js/arrugator/index.d.ts +7 -0
- package/dist/js/{utils/arrugator.js → arrugator/index.js} +49 -46
- package/dist/js/index.d.ts +4 -60
- package/dist/js/index.js +7 -256
- package/dist/js/shaders/image.fragment.glsl.d.ts +2 -2
- package/dist/js/shaders/image.fragment.glsl.js +3 -3
- package/dist/js/shaders/image.vertex.glsl.d.ts +2 -2
- package/dist/js/shaders/image.vertex.glsl.js +3 -3
- package/dist/js/shaders/mask.fragment.glsl.d.ts +2 -2
- package/dist/js/shaders/mask.fragment.glsl.js +3 -3
- package/dist/js/shaders/mask.vertex.glsl.d.ts +2 -2
- package/dist/js/shaders/mask.vertex.glsl.js +3 -3
- package/package.json +8 -9
- package/LICENSE +0 -21
- package/dist/es/utils/image.js +0 -19
- package/dist/es/utils/webgl.js +0 -64
- package/dist/js/utils/arrugator.d.ts +0 -7
- package/dist/js/utils/image.d.ts +0 -7
- package/dist/js/utils/image.js +0 -23
- package/dist/js/utils/webgl.d.ts +0 -8
- package/dist/js/utils/webgl.js +0 -68
package/dist/js/index.js
CHANGED
|
@@ -1,256 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
var compare_versions_1 = require("compare-versions");
|
|
30
|
-
var earcut_1 = __importDefault(require("earcut"));
|
|
31
|
-
var mapbox_gl_1 = __importDefault(require("mapbox-gl"));
|
|
32
|
-
var twgl = __importStar(require("twgl.js"));
|
|
33
|
-
var image_fragment_glsl_1 = __importDefault(require("./shaders/image.fragment.glsl"));
|
|
34
|
-
var image_vertex_glsl_1 = __importDefault(require("./shaders/image.vertex.glsl"));
|
|
35
|
-
var mask_fragment_glsl_1 = __importDefault(require("./shaders/mask.fragment.glsl"));
|
|
36
|
-
var mask_vertex_glsl_1 = __importDefault(require("./shaders/mask.vertex.glsl"));
|
|
37
|
-
var arrugator_1 = require("./utils/arrugator");
|
|
38
|
-
var ImageLayer = /** @class */ (function () {
|
|
39
|
-
function ImageLayer(id, option) {
|
|
40
|
-
this.type = 'custom';
|
|
41
|
-
this.renderingMode = '2d';
|
|
42
|
-
// mask
|
|
43
|
-
this.stencilChecked = true; // resetStencilClippingMasks 版本检查
|
|
44
|
-
this.id = id;
|
|
45
|
-
this.option = option;
|
|
46
|
-
this.loaded = false;
|
|
47
|
-
this.maskProperty = Object.assign({ type: 'in' }, option.mask);
|
|
48
|
-
// 检查 stencil 是否可用
|
|
49
|
-
this.stencilChecked = (0, compare_versions_1.satisfies)(mapbox_gl_1.default.version, '>=2.7.0');
|
|
50
|
-
// 如果传了 mask 边界数据,且版本不符
|
|
51
|
-
if (this.maskProperty.data && !this.stencilChecked) {
|
|
52
|
-
throw new Error("\u5982\u679C\u9700\u8981\u906E\u7F69\uFF08\u63A9\u819C\uFF09\uFF0Cmapbox-gl \u7248\u672C\u5FC5\u987B\uFF1A>=2.7.0");
|
|
53
|
-
}
|
|
54
|
-
// 初始化 Arrugator
|
|
55
|
-
var projection = option.projection, coordinates = option.coordinates;
|
|
56
|
-
this.arrugado = (0, arrugator_1.initArrugator)(projection, coordinates);
|
|
57
|
-
// this._map = null
|
|
58
|
-
// this._gl = null
|
|
59
|
-
// this._program = null
|
|
60
|
-
// this._texture = null
|
|
61
|
-
// this._positionBuffer = null
|
|
62
|
-
// this._uvBuffer = null
|
|
63
|
-
// this._verticesIndexBuffer = null
|
|
64
|
-
}
|
|
65
|
-
ImageLayer.prototype.onAdd = function (map, gl) {
|
|
66
|
-
this.map = map;
|
|
67
|
-
this.gl = gl;
|
|
68
|
-
// 主程序
|
|
69
|
-
this.programInfo = twgl.createProgramInfo(gl, [image_vertex_glsl_1.default, image_fragment_glsl_1.default]);
|
|
70
|
-
this.loadTexture(map, gl);
|
|
71
|
-
this.bufferInfo = twgl.createBufferInfoFromArrays(gl, {
|
|
72
|
-
a_pos: { numComponents: 2, data: this.arrugado.pos },
|
|
73
|
-
a_uv: { numComponents: 2, data: this.arrugado.uv },
|
|
74
|
-
indices: this.arrugado.trigs,
|
|
75
|
-
});
|
|
76
|
-
// 掩膜程序
|
|
77
|
-
if (this.maskProperty.data) {
|
|
78
|
-
var data = this.maskProperty.data;
|
|
79
|
-
if (data) {
|
|
80
|
-
this.maskProgramInfo = twgl.createProgramInfo(gl, [mask_vertex_glsl_1.default, mask_fragment_glsl_1.default]);
|
|
81
|
-
this.maskBufferInfo = this.getMaskBufferInfo(gl, data);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
ImageLayer.prototype.onRemove = function (map, gl) {
|
|
86
|
-
if (this.programInfo) {
|
|
87
|
-
gl.deleteProgram(this.programInfo.program);
|
|
88
|
-
}
|
|
89
|
-
if (this.maskProgramInfo) {
|
|
90
|
-
gl.deleteProgram(this.maskProgramInfo.program);
|
|
91
|
-
}
|
|
92
|
-
if (this.texture) {
|
|
93
|
-
gl.deleteTexture(this.texture);
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
ImageLayer.prototype.render = function (gl, matrix) {
|
|
97
|
-
/**
|
|
98
|
-
* 线图层在启用 stencil 会消失,参考: https://github.com/mapbox/mapbox-gl-js/issues/12213
|
|
99
|
-
* 临时解决方案: map.painter.resetStencilClippingMasks()
|
|
100
|
-
* 该方法在 mapboxgl version >=2.7.0 才能用
|
|
101
|
-
*/
|
|
102
|
-
var _a;
|
|
103
|
-
if (this.stencilChecked) {
|
|
104
|
-
// @ts-ignore
|
|
105
|
-
this.map.painter.resetStencilClippingMasks();
|
|
106
|
-
}
|
|
107
|
-
if (this.loaded && this.programInfo && this.bufferInfo) {
|
|
108
|
-
// blend
|
|
109
|
-
gl.enable(gl.BLEND);
|
|
110
|
-
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
111
|
-
if (this.maskProgramInfo && this.maskBufferInfo) {
|
|
112
|
-
// mask program
|
|
113
|
-
gl.useProgram(this.maskProgramInfo.program);
|
|
114
|
-
// stencil test
|
|
115
|
-
gl.enable(gl.STENCIL_TEST);
|
|
116
|
-
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
|
|
117
|
-
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
|
|
118
|
-
gl.stencilMask(0xff);
|
|
119
|
-
gl.clear(gl.STENCIL_BUFFER_BIT);
|
|
120
|
-
// matrix
|
|
121
|
-
twgl.setUniforms(this.maskProgramInfo, { u_matrix: matrix });
|
|
122
|
-
// pos & indices
|
|
123
|
-
twgl.setBuffersAndAttributes(gl, this.maskProgramInfo, this.maskBufferInfo);
|
|
124
|
-
// draw
|
|
125
|
-
var elementType = gl.UNSIGNED_SHORT;
|
|
126
|
-
if (this.maskBufferInfo.numElements / 3 > 65535) {
|
|
127
|
-
// 使 drawElements 支持 UNSIGNED_INT 类型
|
|
128
|
-
gl.getExtension('OES_element_index_uint');
|
|
129
|
-
elementType = gl.UNSIGNED_INT;
|
|
130
|
-
}
|
|
131
|
-
gl.drawElements(gl.TRIANGLES, this.maskBufferInfo.numElements, elementType, 0);
|
|
132
|
-
}
|
|
133
|
-
// texture program
|
|
134
|
-
gl.useProgram(this.programInfo.program);
|
|
135
|
-
if ((_a = this.maskProgramInfo) === null || _a === void 0 ? void 0 : _a.program) {
|
|
136
|
-
// stencil test
|
|
137
|
-
var ref = this.maskProperty.type === 'out' ? 0 : 1;
|
|
138
|
-
gl.stencilFunc(gl.EQUAL, ref, 0xff);
|
|
139
|
-
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
|
|
140
|
-
}
|
|
141
|
-
// uniforms
|
|
142
|
-
twgl.setUniforms(this.programInfo, {
|
|
143
|
-
u_matrix: matrix,
|
|
144
|
-
u_opacity: this.option.opacity || 1,
|
|
145
|
-
u_sampler: this.texture,
|
|
146
|
-
});
|
|
147
|
-
// pos, uv & indices
|
|
148
|
-
twgl.setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
|
|
149
|
-
// draw
|
|
150
|
-
gl.drawElements(gl.TRIANGLES, this.arrugado.trigs.length, gl.UNSIGNED_SHORT, 0);
|
|
151
|
-
gl.clear(gl.STENCIL_BUFFER_BIT);
|
|
152
|
-
gl.disable(gl.STENCIL_TEST);
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
/**
|
|
156
|
-
* Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.
|
|
157
|
-
* @param {Object} option Options object.
|
|
158
|
-
* @param {string} [option.url] Image URL.
|
|
159
|
-
* @param {string} [option.projection] Projection with EPSG code that points to the image..
|
|
160
|
-
* @param {Array<Array<number>>} [option.coordinates] Four geographical coordinates,
|
|
161
|
-
* @param {number} [option.opacity] opacity of the image.
|
|
162
|
-
* @param {string} [option.resampling] The resampling/interpolation method to use for overscaling.
|
|
163
|
-
*/
|
|
164
|
-
ImageLayer.prototype.updateImage = function (option) {
|
|
165
|
-
var _a, _b, _c, _d, _e;
|
|
166
|
-
if (this.gl && this.map) {
|
|
167
|
-
this.option.opacity = (_a = option.opacity) !== null && _a !== void 0 ? _a : this.option.opacity;
|
|
168
|
-
if (option.projection || option.coordinates) {
|
|
169
|
-
this.option.projection = (_b = option.projection) !== null && _b !== void 0 ? _b : this.option.projection;
|
|
170
|
-
this.option.coordinates = (_c = option.coordinates) !== null && _c !== void 0 ? _c : this.option.coordinates;
|
|
171
|
-
// reinit arrugator
|
|
172
|
-
this.arrugado = (0, arrugator_1.initArrugator)(this.option.projection, this.option.coordinates);
|
|
173
|
-
this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, {
|
|
174
|
-
a_pos: { numComponents: 2, data: this.arrugado.pos },
|
|
175
|
-
a_uv: { numComponents: 2, data: this.arrugado.uv },
|
|
176
|
-
indices: this.arrugado.trigs,
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
if (option.url || option.resampling) {
|
|
180
|
-
this.loaded = false;
|
|
181
|
-
this.option.url = (_d = option.url) !== null && _d !== void 0 ? _d : this.option.url;
|
|
182
|
-
this.option.resampling = (_e = option.resampling) !== null && _e !== void 0 ? _e : this.option.resampling;
|
|
183
|
-
// reload image
|
|
184
|
-
this.loadTexture(this.map, this.gl);
|
|
185
|
-
}
|
|
186
|
-
else {
|
|
187
|
-
this.map.triggerRepaint();
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
return this;
|
|
191
|
-
};
|
|
192
|
-
/**
|
|
193
|
-
* Updates the mask property
|
|
194
|
-
* @param {MaskProperty} mask The mask property.
|
|
195
|
-
*/
|
|
196
|
-
ImageLayer.prototype.updateMask = function (mask) {
|
|
197
|
-
if (this.gl && this.map && this.maskProgramInfo) {
|
|
198
|
-
this.maskProperty = Object.assign(this.maskProperty, mask);
|
|
199
|
-
this.maskBufferInfo = this.getMaskBufferInfo(this.gl, this.maskProperty.data);
|
|
200
|
-
this.map.triggerRepaint();
|
|
201
|
-
}
|
|
202
|
-
return this;
|
|
203
|
-
};
|
|
204
|
-
ImageLayer.prototype.loadTexture = function (map, gl) {
|
|
205
|
-
var _this = this;
|
|
206
|
-
// 创建纹理
|
|
207
|
-
var filter = this.option.resampling === 'nearest' ? gl.NEAREST : gl.LINEAR;
|
|
208
|
-
this.texture = twgl.createTexture(gl, {
|
|
209
|
-
src: this.option.url,
|
|
210
|
-
crossOrigin: this.option.crossOrigin,
|
|
211
|
-
minMag: filter,
|
|
212
|
-
flipY: 0,
|
|
213
|
-
}, function () {
|
|
214
|
-
_this.loaded = true;
|
|
215
|
-
map.triggerRepaint();
|
|
216
|
-
});
|
|
217
|
-
};
|
|
218
|
-
ImageLayer.prototype.getMaskBufferInfo = function (gl, data) {
|
|
219
|
-
var positions = [];
|
|
220
|
-
var triangles = [];
|
|
221
|
-
if (data.type === 'MultiPolygon') {
|
|
222
|
-
// type: 'MultiPolygon'
|
|
223
|
-
var polyCount = data.coordinates.length;
|
|
224
|
-
var triangleStartIndex_1 = 0;
|
|
225
|
-
for (var i = 0; i < polyCount; i++) {
|
|
226
|
-
var coordinates = data.coordinates[i];
|
|
227
|
-
var flatten = earcut_1.default.flatten(coordinates);
|
|
228
|
-
var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.dimensions;
|
|
229
|
-
var triangle = (0, earcut_1.default)(vertices, holes, dimensions);
|
|
230
|
-
var triangleNew = triangle.map(function (item) { return item + triangleStartIndex_1; });
|
|
231
|
-
triangleStartIndex_1 += vertices.length / 2;
|
|
232
|
-
// positions.push(...vertices)
|
|
233
|
-
// triangles.push(...triangleNew)
|
|
234
|
-
for (var m = 0; m < vertices.length; m++) {
|
|
235
|
-
positions.push(vertices[m]);
|
|
236
|
-
}
|
|
237
|
-
for (var n = 0; n < triangleNew.length; n++) {
|
|
238
|
-
triangles.push(triangleNew[n]);
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
else {
|
|
243
|
-
// type: 'Polygon'
|
|
244
|
-
var flatten = earcut_1.default.flatten(data.coordinates);
|
|
245
|
-
var vertices = flatten.vertices, holes = flatten.holes, dimensions = flatten.dimensions;
|
|
246
|
-
positions = vertices;
|
|
247
|
-
triangles = (0, earcut_1.default)(vertices, holes, dimensions);
|
|
248
|
-
}
|
|
249
|
-
return twgl.createBufferInfoFromArrays(gl, {
|
|
250
|
-
a_pos: { numComponents: 2, data: positions },
|
|
251
|
-
indices: triangles.length / 3 > 65535 ? new Uint32Array(triangles) : new Uint16Array(triangles),
|
|
252
|
-
});
|
|
253
|
-
};
|
|
254
|
-
return ImageLayer;
|
|
255
|
-
}());
|
|
256
|
-
exports.default = ImageLayer;
|
|
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
|
+
var ImageLayer_1 = __importDefault(require("./ImageLayer"));
|
|
7
|
+
exports.default = ImageLayer_1.default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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";
|
|
2
|
-
export default _default;
|
|
1
|
+
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";
|
|
2
|
+
export default _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
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";
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
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";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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";
|
|
2
|
-
export default _default;
|
|
1
|
+
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";
|
|
2
|
+
export default _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
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";
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
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";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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";
|
|
2
|
-
export default _default;
|
|
1
|
+
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";
|
|
2
|
+
export default _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
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";
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
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";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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";
|
|
2
|
-
export default _default;
|
|
1
|
+
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";
|
|
2
|
+
export default _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
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";
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@naivemap/mapbox-gl-image-layer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0-beta.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",
|
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
"proj4"
|
|
26
26
|
],
|
|
27
27
|
"publishConfig": {
|
|
28
|
-
"access": "public"
|
|
28
|
+
"access": "public",
|
|
29
|
+
"tag": "beta"
|
|
29
30
|
},
|
|
30
31
|
"repository": {
|
|
31
32
|
"type": "git",
|
|
@@ -45,17 +46,15 @@
|
|
|
45
46
|
"proj4": "^2.8.0"
|
|
46
47
|
},
|
|
47
48
|
"dependencies": {
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"twgl.js": "^5.
|
|
49
|
+
"compare-versions": "^6.1.1",
|
|
50
|
+
"earcut": "^3.0.1",
|
|
51
|
+
"tinyqueue": "^3.0.0",
|
|
52
|
+
"twgl.js": "^5.5.4"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@types/earcut": "^2.1.1",
|
|
55
56
|
"@types/mapbox-gl": "^2.7.2",
|
|
56
|
-
"@types/node": "^17.0.36",
|
|
57
57
|
"@types/proj4": "^2.5.2",
|
|
58
58
|
"npm-run-all": "^4.1.5"
|
|
59
|
-
}
|
|
60
|
-
"gitHead": "3a2fa3bab4a8e676df592ea4f674fbf9b9e9b221"
|
|
59
|
+
}
|
|
61
60
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 Naive Map
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/dist/es/utils/image.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* load image
|
|
3
|
-
* @param src
|
|
4
|
-
* @param crossOrigin
|
|
5
|
-
* @returns
|
|
6
|
-
*/
|
|
7
|
-
export function loadImage(src, crossOrigin) {
|
|
8
|
-
return new Promise(function (res, rej) {
|
|
9
|
-
var img = new Image();
|
|
10
|
-
img.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : '';
|
|
11
|
-
img.src = src;
|
|
12
|
-
img.onload = function () {
|
|
13
|
-
res(img);
|
|
14
|
-
};
|
|
15
|
-
img.onerror = function () {
|
|
16
|
-
rej('error');
|
|
17
|
-
};
|
|
18
|
-
});
|
|
19
|
-
}
|
package/dist/es/utils/webgl.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Create a shader object
|
|
3
|
-
* @param gl GL context
|
|
4
|
-
* @param type the type of the shader object to be created
|
|
5
|
-
* @param source shader program (string)
|
|
6
|
-
* @return created shader object, or null if the creation has failed.
|
|
7
|
-
*/
|
|
8
|
-
function createShader(gl, type, source) {
|
|
9
|
-
// Create shader object
|
|
10
|
-
var shader = gl.createShader(type);
|
|
11
|
-
if (shader == null) {
|
|
12
|
-
console.log('unable to create shader');
|
|
13
|
-
return null;
|
|
14
|
-
}
|
|
15
|
-
// Set the shader program
|
|
16
|
-
gl.shaderSource(shader, source);
|
|
17
|
-
// Compile the shader
|
|
18
|
-
gl.compileShader(shader);
|
|
19
|
-
// Check the result of compilation
|
|
20
|
-
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
|
21
|
-
if (!compiled) {
|
|
22
|
-
var error = gl.getShaderInfoLog(shader);
|
|
23
|
-
console.log('Failed to compile shader: ' + error);
|
|
24
|
-
gl.deleteShader(shader);
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
|
-
return shader;
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Create the linked program object
|
|
31
|
-
* @param gl GL context
|
|
32
|
-
* @param vshader a vertex shader program (string)
|
|
33
|
-
* @param fshader a fragment shader program (string)
|
|
34
|
-
* @return created program object, or null if the creation has failed
|
|
35
|
-
*/
|
|
36
|
-
export function createProgram(gl, vshader, fshader) {
|
|
37
|
-
// Create shader object
|
|
38
|
-
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
|
|
39
|
-
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
|
|
40
|
-
if (!vertexShader || !fragmentShader) {
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
// Create a program object
|
|
44
|
-
var program = gl.createProgram();
|
|
45
|
-
if (!program) {
|
|
46
|
-
return null;
|
|
47
|
-
}
|
|
48
|
-
// Attach the shader objects
|
|
49
|
-
gl.attachShader(program, vertexShader);
|
|
50
|
-
gl.attachShader(program, fragmentShader);
|
|
51
|
-
// Link the program object
|
|
52
|
-
gl.linkProgram(program);
|
|
53
|
-
// Check the result of linking
|
|
54
|
-
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
|
55
|
-
if (!linked) {
|
|
56
|
-
var error = gl.getProgramInfoLog(program);
|
|
57
|
-
console.log('Failed to link program: ' + error);
|
|
58
|
-
gl.deleteProgram(program);
|
|
59
|
-
gl.deleteShader(fragmentShader);
|
|
60
|
-
gl.deleteShader(vertexShader);
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
return program;
|
|
64
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
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/image.d.ts
DELETED
package/dist/js/utils/image.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.loadImage = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* load image
|
|
6
|
-
* @param src
|
|
7
|
-
* @param crossOrigin
|
|
8
|
-
* @returns
|
|
9
|
-
*/
|
|
10
|
-
function loadImage(src, crossOrigin) {
|
|
11
|
-
return new Promise(function (res, rej) {
|
|
12
|
-
var img = new Image();
|
|
13
|
-
img.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : '';
|
|
14
|
-
img.src = src;
|
|
15
|
-
img.onload = function () {
|
|
16
|
-
res(img);
|
|
17
|
-
};
|
|
18
|
-
img.onerror = function () {
|
|
19
|
-
rej('error');
|
|
20
|
-
};
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
exports.loadImage = loadImage;
|
package/dist/js/utils/webgl.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Create the linked program object
|
|
3
|
-
* @param gl GL context
|
|
4
|
-
* @param vshader a vertex shader program (string)
|
|
5
|
-
* @param fshader a fragment shader program (string)
|
|
6
|
-
* @return created program object, or null if the creation has failed
|
|
7
|
-
*/
|
|
8
|
-
export declare function createProgram(gl: WebGLRenderingContext, vshader: string, fshader: string): WebGLProgram | null;
|
package/dist/js/utils/webgl.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.createProgram = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* Create a shader object
|
|
6
|
-
* @param gl GL context
|
|
7
|
-
* @param type the type of the shader object to be created
|
|
8
|
-
* @param source shader program (string)
|
|
9
|
-
* @return created shader object, or null if the creation has failed.
|
|
10
|
-
*/
|
|
11
|
-
function createShader(gl, type, source) {
|
|
12
|
-
// Create shader object
|
|
13
|
-
var shader = gl.createShader(type);
|
|
14
|
-
if (shader == null) {
|
|
15
|
-
console.log('unable to create shader');
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
// Set the shader program
|
|
19
|
-
gl.shaderSource(shader, source);
|
|
20
|
-
// Compile the shader
|
|
21
|
-
gl.compileShader(shader);
|
|
22
|
-
// Check the result of compilation
|
|
23
|
-
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
|
24
|
-
if (!compiled) {
|
|
25
|
-
var error = gl.getShaderInfoLog(shader);
|
|
26
|
-
console.log('Failed to compile shader: ' + error);
|
|
27
|
-
gl.deleteShader(shader);
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
return shader;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Create the linked program object
|
|
34
|
-
* @param gl GL context
|
|
35
|
-
* @param vshader a vertex shader program (string)
|
|
36
|
-
* @param fshader a fragment shader program (string)
|
|
37
|
-
* @return created program object, or null if the creation has failed
|
|
38
|
-
*/
|
|
39
|
-
function createProgram(gl, vshader, fshader) {
|
|
40
|
-
// Create shader object
|
|
41
|
-
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
|
|
42
|
-
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
|
|
43
|
-
if (!vertexShader || !fragmentShader) {
|
|
44
|
-
return null;
|
|
45
|
-
}
|
|
46
|
-
// Create a program object
|
|
47
|
-
var program = gl.createProgram();
|
|
48
|
-
if (!program) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
|
-
// Attach the shader objects
|
|
52
|
-
gl.attachShader(program, vertexShader);
|
|
53
|
-
gl.attachShader(program, fragmentShader);
|
|
54
|
-
// Link the program object
|
|
55
|
-
gl.linkProgram(program);
|
|
56
|
-
// Check the result of linking
|
|
57
|
-
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
|
58
|
-
if (!linked) {
|
|
59
|
-
var error = gl.getProgramInfoLog(program);
|
|
60
|
-
console.log('Failed to link program: ' + error);
|
|
61
|
-
gl.deleteProgram(program);
|
|
62
|
-
gl.deleteShader(fragmentShader);
|
|
63
|
-
gl.deleteShader(vertexShader);
|
|
64
|
-
return null;
|
|
65
|
-
}
|
|
66
|
-
return program;
|
|
67
|
-
}
|
|
68
|
-
exports.createProgram = createProgram;
|