@treasuryspatial/map-kit 0.1.10 → 0.1.12
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/mapLayers.d.ts.map +1 -1
- package/dist/mapLayers.js +1 -12
- package/dist/mapThreeLayer.d.ts.map +1 -1
- package/dist/mapThreeLayer.js +79 -48
- package/package.json +1 -1
package/dist/mapLayers.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapLayers.d.ts","sourceRoot":"","sources":["../src/mapLayers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiBF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,wBAAwB,
|
|
1
|
+
{"version":3,"file":"mapLayers.d.ts","sourceRoot":"","sources":["../src/mapLayers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiBF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,wBAAwB,CAiFjF"}
|
package/dist/mapLayers.js
CHANGED
|
@@ -24,17 +24,6 @@ export function ensureFootprintLayers(map) {
|
|
|
24
24
|
'fill-opacity': 0.01,
|
|
25
25
|
},
|
|
26
26
|
});
|
|
27
|
-
ensureLayer(map, {
|
|
28
|
-
id: 'building-footprints-outline',
|
|
29
|
-
type: 'line',
|
|
30
|
-
source: 'composite',
|
|
31
|
-
'source-layer': 'building',
|
|
32
|
-
paint: {
|
|
33
|
-
'line-color': '#ffffff',
|
|
34
|
-
'line-width': 1,
|
|
35
|
-
'line-opacity': 0.5,
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
27
|
if (!map.getSource('footprint-hover')) {
|
|
39
28
|
map.addSource('footprint-hover', {
|
|
40
29
|
type: 'geojson',
|
|
@@ -94,7 +83,7 @@ export function ensureFootprintLayers(map) {
|
|
|
94
83
|
});
|
|
95
84
|
},
|
|
96
85
|
destroy: () => {
|
|
97
|
-
const layers = ['footprint-selected-line', 'footprint-hover-line', 'building-footprints-
|
|
86
|
+
const layers = ['footprint-selected-line', 'footprint-hover-line', 'building-footprints-fill'];
|
|
98
87
|
layers.forEach((id) => {
|
|
99
88
|
if (map.getLayer(id))
|
|
100
89
|
map.removeLayer(id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,
|
|
1
|
+
{"version":3,"file":"mapThreeLayer.d.ts","sourceRoot":"","sources":["../src/mapThreeLayer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;IAC3F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAmWhF"}
|
package/dist/mapThreeLayer.js
CHANGED
|
@@ -22,6 +22,74 @@ export function createMapThreeLayer(options) {
|
|
|
22
22
|
let errorCount = 0;
|
|
23
23
|
let hasRenderable = false;
|
|
24
24
|
let originResolved = false;
|
|
25
|
+
let didPrerender = false;
|
|
26
|
+
let lastMatrix = null;
|
|
27
|
+
const applyMatrix = (matrix) => {
|
|
28
|
+
if (!matrix || !camera)
|
|
29
|
+
return;
|
|
30
|
+
lastMatrix = matrix;
|
|
31
|
+
camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
|
|
32
|
+
if ('projectionMatrixInverse' in camera) {
|
|
33
|
+
camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const renderOffscreen = () => {
|
|
37
|
+
if (renderDisabled)
|
|
38
|
+
return;
|
|
39
|
+
if (!renderer || !scene || !camera || !rootGroup || !renderTarget)
|
|
40
|
+
return;
|
|
41
|
+
if (!hasRenderable)
|
|
42
|
+
return;
|
|
43
|
+
if (lastMatrix) {
|
|
44
|
+
applyMatrix(lastMatrix);
|
|
45
|
+
}
|
|
46
|
+
if (!mercatorOrigin && mapRef && !originResolved) {
|
|
47
|
+
try {
|
|
48
|
+
const center = mapRef.getCenter();
|
|
49
|
+
mercatorOrigin = mapboxgl.MercatorCoordinate.fromLngLat(center);
|
|
50
|
+
meterScale = mercatorOrigin.meterInMercatorCoordinateUnits();
|
|
51
|
+
originResolved = true;
|
|
52
|
+
if (debug) {
|
|
53
|
+
log('origin fallback', {
|
|
54
|
+
origin: { lng: center.lng, lat: center.lat },
|
|
55
|
+
mercator: { x: mercatorOrigin.x, y: mercatorOrigin.y, z: mercatorOrigin.z },
|
|
56
|
+
meterScale,
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
catch (err) {
|
|
61
|
+
logError('origin fallback failed', err);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
if (mercatorOrigin) {
|
|
65
|
+
const translate = new THREE.Matrix4().makeTranslation(mercatorOrigin.x, mercatorOrigin.y, (mercatorOrigin.z ?? 0) + zOffset * meterScale);
|
|
66
|
+
const scale = new THREE.Matrix4().makeScale(meterScale, -meterScale, meterScale);
|
|
67
|
+
rootGroup.matrix = new THREE.Matrix4().multiplyMatrices(translate, scale);
|
|
68
|
+
rootGroup.matrixWorldNeedsUpdate = true;
|
|
69
|
+
}
|
|
70
|
+
const canvas = mapRef?.getCanvas();
|
|
71
|
+
if (canvas && (canvas.width !== targetWidth || canvas.height !== targetHeight)) {
|
|
72
|
+
targetWidth = canvas.width;
|
|
73
|
+
targetHeight = canvas.height;
|
|
74
|
+
renderTarget.setSize(targetWidth, targetHeight);
|
|
75
|
+
log('renderTarget resized', { width: targetWidth, height: targetHeight });
|
|
76
|
+
}
|
|
77
|
+
renderer.setRenderTarget(renderTarget);
|
|
78
|
+
renderer.resetState();
|
|
79
|
+
const gl = renderer.getContext();
|
|
80
|
+
gl.disable(gl.SCISSOR_TEST);
|
|
81
|
+
gl.disable(gl.STENCIL_TEST);
|
|
82
|
+
gl.colorMask(true, true, true, true);
|
|
83
|
+
gl.depthMask(true);
|
|
84
|
+
renderer.setViewport(0, 0, targetWidth, targetHeight);
|
|
85
|
+
renderer.setClearColor(0x000000, 0);
|
|
86
|
+
renderer.setClearAlpha(0);
|
|
87
|
+
renderer.clear(true, true, true);
|
|
88
|
+
checkFramebuffer(gl, 'prerender');
|
|
89
|
+
renderer.render(scene, camera);
|
|
90
|
+
logGlError(gl, 'prerender');
|
|
91
|
+
renderer.setRenderTarget(null);
|
|
92
|
+
};
|
|
25
93
|
const log = (...args) => {
|
|
26
94
|
if (!debug)
|
|
27
95
|
return;
|
|
@@ -159,53 +227,9 @@ export function createMapThreeLayer(options) {
|
|
|
159
227
|
if (!hasRenderable)
|
|
160
228
|
return;
|
|
161
229
|
try {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
const center = mapRef.getCenter();
|
|
166
|
-
mercatorOrigin = mapboxgl.MercatorCoordinate.fromLngLat(center);
|
|
167
|
-
meterScale = mercatorOrigin.meterInMercatorCoordinateUnits();
|
|
168
|
-
originResolved = true;
|
|
169
|
-
if (debug) {
|
|
170
|
-
log('origin fallback', {
|
|
171
|
-
origin: { lng: center.lng, lat: center.lat },
|
|
172
|
-
mercator: { x: mercatorOrigin.x, y: mercatorOrigin.y, z: mercatorOrigin.z },
|
|
173
|
-
meterScale,
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
catch (err) {
|
|
178
|
-
logError('origin fallback failed', err);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
if (mercatorOrigin) {
|
|
182
|
-
const translate = new THREE.Matrix4().makeTranslation(mercatorOrigin.x, mercatorOrigin.y, (mercatorOrigin.z ?? 0) + zOffset * meterScale);
|
|
183
|
-
const scale = new THREE.Matrix4().makeScale(meterScale, -meterScale, meterScale);
|
|
184
|
-
rootGroup.matrix = new THREE.Matrix4().multiplyMatrices(translate, scale);
|
|
185
|
-
rootGroup.matrixWorldNeedsUpdate = true;
|
|
186
|
-
}
|
|
187
|
-
const canvas = mapRef?.getCanvas();
|
|
188
|
-
if (canvas && (canvas.width !== targetWidth || canvas.height !== targetHeight)) {
|
|
189
|
-
targetWidth = canvas.width;
|
|
190
|
-
targetHeight = canvas.height;
|
|
191
|
-
renderTarget.setSize(targetWidth, targetHeight);
|
|
192
|
-
log('renderTarget resized', { width: targetWidth, height: targetHeight });
|
|
193
|
-
}
|
|
194
|
-
renderer.setRenderTarget(renderTarget);
|
|
195
|
-
renderer.resetState();
|
|
196
|
-
const gl = renderer.getContext();
|
|
197
|
-
gl.disable(gl.SCISSOR_TEST);
|
|
198
|
-
gl.disable(gl.STENCIL_TEST);
|
|
199
|
-
gl.colorMask(true, true, true, true);
|
|
200
|
-
gl.depthMask(true);
|
|
201
|
-
renderer.setViewport(0, 0, targetWidth, targetHeight);
|
|
202
|
-
renderer.setClearColor(0x000000, 0);
|
|
203
|
-
renderer.setClearAlpha(0);
|
|
204
|
-
renderer.clear(true, true, true);
|
|
205
|
-
checkFramebuffer(gl, 'prerender');
|
|
206
|
-
renderer.render(scene, camera);
|
|
207
|
-
logGlError(gl, 'prerender');
|
|
208
|
-
renderer.setRenderTarget(null);
|
|
230
|
+
applyMatrix(matrix);
|
|
231
|
+
renderOffscreen();
|
|
232
|
+
didPrerender = true;
|
|
209
233
|
}
|
|
210
234
|
catch (err) {
|
|
211
235
|
errorCount += 1;
|
|
@@ -216,7 +240,7 @@ export function createMapThreeLayer(options) {
|
|
|
216
240
|
}
|
|
217
241
|
}
|
|
218
242
|
},
|
|
219
|
-
render: (gl) => {
|
|
243
|
+
render: (gl, matrix) => {
|
|
220
244
|
if (renderDisabled)
|
|
221
245
|
return;
|
|
222
246
|
if (!renderer || !screenScene || !screenCamera)
|
|
@@ -224,6 +248,13 @@ export function createMapThreeLayer(options) {
|
|
|
224
248
|
if (!hasRenderable)
|
|
225
249
|
return;
|
|
226
250
|
try {
|
|
251
|
+
if (matrix) {
|
|
252
|
+
applyMatrix(matrix);
|
|
253
|
+
}
|
|
254
|
+
if (!didPrerender) {
|
|
255
|
+
renderOffscreen();
|
|
256
|
+
}
|
|
257
|
+
didPrerender = false;
|
|
227
258
|
renderer.resetState();
|
|
228
259
|
gl.disable(gl.DEPTH_TEST);
|
|
229
260
|
gl.depthMask(false);
|