@deck.gl-community/layers 9.1.0-beta.4 → 9.1.0-beta.6
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/index.cjs +18 -118
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +14 -8
- package/src/index.ts +0 -3
- package/dist/tile-source-layer/tile-source-layer.d.ts +0 -45
- package/dist/tile-source-layer/tile-source-layer.d.ts.map +0 -1
- package/dist/tile-source-layer/tile-source-layer.js +0 -110
- package/dist/tile-source-layer/tile-source-layer.js.map +0 -1
- package/src/tile-source-layer/tile-source-layer.ts +0 -156
package/dist/index.cjs
CHANGED
|
@@ -25,112 +25,12 @@ var __publicField = (obj, key, value) => {
|
|
|
25
25
|
var dist_exports = {};
|
|
26
26
|
__export(dist_exports, {
|
|
27
27
|
PathMarkerLayer: () => PathMarkerLayer,
|
|
28
|
-
PathOutlineLayer: () => PathOutlineLayer
|
|
29
|
-
TileSourceLayer: () => TileSourceLayer
|
|
28
|
+
PathOutlineLayer: () => PathOutlineLayer
|
|
30
29
|
});
|
|
31
30
|
module.exports = __toCommonJS(dist_exports);
|
|
32
31
|
|
|
33
|
-
// dist/tile-source-layer/tile-source-layer.js
|
|
34
|
-
var import_core = require("@deck.gl/core");
|
|
35
|
-
var import_geo_layers = require("@deck.gl/geo-layers");
|
|
36
|
-
var import_layers = require("@deck.gl/layers");
|
|
37
|
-
var devicePixelRatio = typeof window !== "undefined" && window.devicePixelRatio || 1;
|
|
38
|
-
var TileSourceLayer = class extends import_core.CompositeLayer {
|
|
39
|
-
state = void 0;
|
|
40
|
-
initializeState() {
|
|
41
|
-
this.setState({
|
|
42
|
-
tileSource: null
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
updateState({ props, changeFlags }) {
|
|
46
|
-
this.setState({
|
|
47
|
-
tileSource: props.tileSource
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
renderLayers() {
|
|
51
|
-
const { tileSource, showTileBorders, metadata, onTilesLoad } = this.props;
|
|
52
|
-
const minZoom = (metadata == null ? void 0 : metadata.minZoom) || 0;
|
|
53
|
-
const maxZoom = (metadata == null ? void 0 : metadata.maxZoom) || 30;
|
|
54
|
-
return [
|
|
55
|
-
new import_geo_layers.TileLayer({
|
|
56
|
-
// HACK: Trigger new layer via id prop to force clear tile cache
|
|
57
|
-
id: String(tileSource.url),
|
|
58
|
-
getTileData: tileSource.getTileData,
|
|
59
|
-
// Assume the pmtiles file support HTTP/2, so we aren't limited by the browser to a certain number per domain.
|
|
60
|
-
maxRequests: 20,
|
|
61
|
-
pickable: true,
|
|
62
|
-
onViewportLoad: onTilesLoad,
|
|
63
|
-
autoHighlight: showTileBorders,
|
|
64
|
-
highlightColor: [60, 60, 60, 40],
|
|
65
|
-
minZoom,
|
|
66
|
-
maxZoom,
|
|
67
|
-
tileSize: 256,
|
|
68
|
-
// TOOD - why is this needed?
|
|
69
|
-
zoomOffset: devicePixelRatio === 1 ? -1 : 0,
|
|
70
|
-
renderSubLayers,
|
|
71
|
-
// Custom prop
|
|
72
|
-
tileSource,
|
|
73
|
-
showTileBorders
|
|
74
|
-
})
|
|
75
|
-
];
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
__publicField(TileSourceLayer, "layerName", "TileSourceLayer");
|
|
79
|
-
__publicField(TileSourceLayer, "defaultProps", {
|
|
80
|
-
...import_geo_layers.TileLayer.defaultProps,
|
|
81
|
-
showTileBorders: true
|
|
82
|
-
});
|
|
83
|
-
function renderSubLayers(props) {
|
|
84
|
-
const { tileSource, showTileBorders, minZoom, maxZoom, tile: { index: { z: zoom }, bbox: { west, south, east, north } } } = props;
|
|
85
|
-
const layers = [];
|
|
86
|
-
const borderColor = zoom <= minZoom || zoom >= maxZoom ? [255, 0, 0, 255] : [0, 0, 255, 255];
|
|
87
|
-
switch (tileSource.mimeType) {
|
|
88
|
-
case "application/vnd.mapbox-vector-tile":
|
|
89
|
-
layers.push(new import_layers.GeoJsonLayer({
|
|
90
|
-
id: `${props.id}-geojson`,
|
|
91
|
-
data: props.data,
|
|
92
|
-
pickable: true,
|
|
93
|
-
getFillColor: [0, 190, 80, 255],
|
|
94
|
-
lineWidthScale: 500,
|
|
95
|
-
lineWidthMinPixels: 0.5
|
|
96
|
-
}));
|
|
97
|
-
break;
|
|
98
|
-
case "image/png":
|
|
99
|
-
case "image/jpeg":
|
|
100
|
-
case "image/webp":
|
|
101
|
-
case "image/avif":
|
|
102
|
-
layers.push(new import_layers.BitmapLayer(props, {
|
|
103
|
-
data: null,
|
|
104
|
-
image: props.data,
|
|
105
|
-
bounds: [west, south, east, north],
|
|
106
|
-
pickable: true
|
|
107
|
-
}));
|
|
108
|
-
break;
|
|
109
|
-
default:
|
|
110
|
-
console.error("Unknown tile mimeType", tileSource == null ? void 0 : tileSource.mimeType);
|
|
111
|
-
}
|
|
112
|
-
if (showTileBorders) {
|
|
113
|
-
layers.push(new import_layers.PathLayer({
|
|
114
|
-
id: `${props.id}-border`,
|
|
115
|
-
data: [
|
|
116
|
-
[
|
|
117
|
-
[west, north],
|
|
118
|
-
[west, south],
|
|
119
|
-
[east, south],
|
|
120
|
-
[east, north],
|
|
121
|
-
[west, north]
|
|
122
|
-
]
|
|
123
|
-
],
|
|
124
|
-
getPath: (d) => d,
|
|
125
|
-
getColor: borderColor,
|
|
126
|
-
widthMinPixels: 4
|
|
127
|
-
}));
|
|
128
|
-
}
|
|
129
|
-
return layers;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
32
|
// dist/path-outline-layer/path-outline-layer.js
|
|
133
|
-
var
|
|
33
|
+
var import_layers = require("@deck.gl/layers");
|
|
134
34
|
var import_constants = require("@luma.gl/constants");
|
|
135
35
|
|
|
136
36
|
// dist/path-outline-layer/outline.js
|
|
@@ -245,7 +145,7 @@ var FS_CODE = ` fragColor = outline_filterColor(fragColor);
|
|
|
245
145
|
var defaultProps = {
|
|
246
146
|
getZLevel: () => 0
|
|
247
147
|
};
|
|
248
|
-
var PathOutlineLayer = class extends
|
|
148
|
+
var PathOutlineLayer = class extends import_layers.PathLayer {
|
|
249
149
|
state = void 0;
|
|
250
150
|
// Override getShaders to inject the outline module
|
|
251
151
|
getShaders() {
|
|
@@ -323,8 +223,8 @@ __publicField(PathOutlineLayer, "layerName", "PathOutlineLayer");
|
|
|
323
223
|
__publicField(PathOutlineLayer, "defaultProps", defaultProps);
|
|
324
224
|
|
|
325
225
|
// dist/path-marker-layer/path-marker-layer.js
|
|
326
|
-
var
|
|
327
|
-
var
|
|
226
|
+
var import_core3 = require("@deck.gl/core");
|
|
227
|
+
var import_layers2 = require("@deck.gl/layers");
|
|
328
228
|
var import_mesh_layers = require("@deck.gl/mesh-layers");
|
|
329
229
|
|
|
330
230
|
// dist/path-marker-layer/arrow-2d-geometry.js
|
|
@@ -384,7 +284,7 @@ function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tail
|
|
|
384
284
|
}
|
|
385
285
|
|
|
386
286
|
// dist/path-marker-layer/create-path-markers.js
|
|
387
|
-
var
|
|
287
|
+
var import_core = require("@math.gl/core");
|
|
388
288
|
function getLineLength(vPoints) {
|
|
389
289
|
let lineLength = 0;
|
|
390
290
|
for (let i = 0; i < vPoints.length - 1; i++) {
|
|
@@ -400,7 +300,7 @@ function createPathMarkers({ data, getPath = (x, context) => x.path, getDirectio
|
|
|
400
300
|
const path = getPath(object, null);
|
|
401
301
|
const direction = getDirection(object) || DEFAULT_DIRECTION;
|
|
402
302
|
const color = getColor(object);
|
|
403
|
-
const vPoints = path.map((p) => new
|
|
303
|
+
const vPoints = path.map((p) => new import_core.Vector2(p));
|
|
404
304
|
const vPointsReverse = vPoints.slice(0).reverse();
|
|
405
305
|
const lineLength = getLineLength(vPoints);
|
|
406
306
|
const percentages = getMarkerPercentages(object, { lineLength });
|
|
@@ -448,25 +348,25 @@ function createMarkerAlongPath({ path, percentage, lineLength, color, object, pr
|
|
|
448
348
|
}
|
|
449
349
|
const vDirection = path[i + 1].clone().subtract(path[i]).normalize();
|
|
450
350
|
const along = distanceAlong - previousDistance;
|
|
451
|
-
const vCenter = vDirection.clone().multiply(new
|
|
452
|
-
const vDirection2 = new
|
|
351
|
+
const vCenter = vDirection.clone().multiply(new import_core.Vector2(along, along)).add(path[i]);
|
|
352
|
+
const vDirection2 = new import_core.Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));
|
|
453
353
|
const angle = vDirection2.verticalAngle() * 180 / Math.PI;
|
|
454
354
|
return { position: [vCenter.x, vCenter.y, 0], angle, color, object };
|
|
455
355
|
}
|
|
456
356
|
|
|
457
357
|
// dist/path-marker-layer/polyline.js
|
|
458
|
-
var
|
|
358
|
+
var import_core2 = require("@math.gl/core");
|
|
459
359
|
function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
|
|
460
|
-
const lineVector = new
|
|
461
|
-
const pointVector = new
|
|
360
|
+
const lineVector = new import_core2.Vector3(p2).subtract(p1);
|
|
361
|
+
const pointVector = new import_core2.Vector3(p).subtract(p1);
|
|
462
362
|
let dotProduct = lineVector.dot(pointVector);
|
|
463
363
|
if (clampToLine) {
|
|
464
|
-
dotProduct = (0,
|
|
364
|
+
dotProduct = (0, import_core2.clamp)(dotProduct, 0, 1);
|
|
465
365
|
}
|
|
466
366
|
return lineVector.lerp(p1, p2, dotProduct);
|
|
467
367
|
}
|
|
468
368
|
function getClosestPointOnPolyline({ p, points }) {
|
|
469
|
-
p = new
|
|
369
|
+
p = new import_core2.Vector3(p);
|
|
470
370
|
let pClosest = null;
|
|
471
371
|
let distanceSquared = Infinity;
|
|
472
372
|
let index = -1;
|
|
@@ -512,7 +412,7 @@ var defaultProps2 = Object.assign({}, PathOutlineLayer.defaultProps, {
|
|
|
512
412
|
getDirection: (x) => x.direction,
|
|
513
413
|
getMarkerPercentages: (object, { lineLength }) => lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]
|
|
514
414
|
});
|
|
515
|
-
var PathMarkerLayer = class extends
|
|
415
|
+
var PathMarkerLayer = class extends import_core3.CompositeLayer {
|
|
516
416
|
state = void 0;
|
|
517
417
|
initializeState() {
|
|
518
418
|
this.state = {
|
|
@@ -523,11 +423,11 @@ var PathMarkerLayer = class extends import_core4.CompositeLayer {
|
|
|
523
423
|
};
|
|
524
424
|
}
|
|
525
425
|
projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {
|
|
526
|
-
if (coordinateSystem ===
|
|
426
|
+
if (coordinateSystem === import_core3.COORDINATE_SYSTEM.METER_OFFSETS) {
|
|
527
427
|
const [dx, dy] = viewport.metersToLngLatDelta(xyz);
|
|
528
428
|
const [x, y] = coordinateOrigin;
|
|
529
429
|
return viewport.projectFlat([x + dx, dy + y]);
|
|
530
|
-
} else if (coordinateSystem ===
|
|
430
|
+
} else if (coordinateSystem === import_core3.COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
|
|
531
431
|
const [dx, dy] = xyz;
|
|
532
432
|
const [x, y] = coordinateOrigin;
|
|
533
433
|
return viewport.projectFlat([x + dx, dy + y]);
|
|
@@ -592,7 +492,7 @@ var PathMarkerLayer = class extends import_core4.CompositeLayer {
|
|
|
592
492
|
depthTest: false
|
|
593
493
|
}
|
|
594
494
|
}))),
|
|
595
|
-
this.state.closestPoints && new
|
|
495
|
+
this.state.closestPoints && new import_layers2.ScatterplotLayer({
|
|
596
496
|
id: `${this.props.id}-highlight`,
|
|
597
497
|
data: this.state.closestPoints,
|
|
598
498
|
fp64: this.props.fp64
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.ts", "../src/
|
|
4
|
-
"sourcesContent": ["// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nexport type {TileSourceLayerProps} from './tile-source-layer/tile-source-layer';\nexport {TileSourceLayer} from './tile-source-layer/tile-source-layer';\n\nexport type {PathOutlineLayerProps} from './path-outline-layer/path-outline-layer';\nexport {PathOutlineLayer} from './path-outline-layer/path-outline-layer';\n\nexport type {PathMarkerLayerProps} from './path-marker-layer/path-marker-layer';\nexport {PathMarkerLayer} from './path-marker-layer/path-marker-layer';\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {CompositeLayer, Layer} from '@deck.gl/core';\nimport type {TileLayerProps} from '@deck.gl/geo-layers';\nimport {TileLayer} from '@deck.gl/geo-layers';\nimport {BitmapLayer, GeoJsonLayer, PathLayer} from '@deck.gl/layers';\nimport type {TileSource} from '@loaders.gl/loader-utils';\n\n/* global window */\nconst devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;\n\nexport type TileSourceLayerProps = TileLayerProps & {\n tileSource: TileSource<any>;\n showTileBorders?: boolean;\n};\n\n/**\n * A Deck.gl layer that renders a tile source\n * Autodiscovers type of content (vector tile, bitmap, ...)\n * Can render debug borders around tiles\n * TODO - Change debug border color based on zoom level\n */\nexport class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {\n static layerName = 'TileSourceLayer';\n static defaultProps = {\n ...TileLayer.defaultProps,\n showTileBorders: true\n };\n\n state: {\n tileSource: TileSource<any> | null;\n } = undefined!;\n\n initializeState() {\n this.setState({\n tileSource: null\n });\n }\n\n updateState({props, changeFlags}) {\n this.setState({\n tileSource: props.tileSource\n });\n }\n\n renderLayers() {\n const {tileSource, showTileBorders, metadata, onTilesLoad} = this.props as any;\n const minZoom = metadata?.minZoom || 0;\n const maxZoom = metadata?.maxZoom || 30;\n\n return [\n new TileLayer({\n // HACK: Trigger new layer via id prop to force clear tile cache\n id: String(tileSource.url),\n getTileData: tileSource.getTileData,\n // Assume the pmtiles file support HTTP/2, so we aren't limited by the browser to a certain number per domain.\n maxRequests: 20,\n\n pickable: true,\n onViewportLoad: onTilesLoad,\n autoHighlight: showTileBorders,\n highlightColor: [60, 60, 60, 40],\n minZoom,\n maxZoom,\n tileSize: 256,\n // TOOD - why is this needed?\n zoomOffset: devicePixelRatio === 1 ? -1 : 0,\n renderSubLayers: renderSubLayers as any,\n\n // Custom prop\n tileSource,\n showTileBorders\n })\n ];\n }\n}\n\nfunction renderSubLayers(\n props: TileSourceLayerProps & {tile: {index; bbox: {west; south; east; north}}}\n) {\n const {\n tileSource,\n showTileBorders,\n minZoom,\n maxZoom,\n tile: {\n index: {z: zoom},\n bbox: {west, south, east, north}\n }\n } = props as any;\n\n const layers: Layer[] = [];\n\n const borderColor = zoom <= minZoom || zoom >= maxZoom ? [255, 0, 0, 255] : [0, 0, 255, 255];\n\n switch (tileSource.mimeType) {\n case 'application/vnd.mapbox-vector-tile':\n layers.push(\n new GeoJsonLayer({\n id: `${props.id}-geojson`,\n data: props.data as any,\n pickable: true,\n getFillColor: [0, 190, 80, 255],\n lineWidthScale: 500,\n lineWidthMinPixels: 0.5\n })\n );\n break;\n\n case 'image/png':\n case 'image/jpeg':\n case 'image/webp':\n case 'image/avif':\n layers.push(\n new BitmapLayer(\n props as any,\n {\n data: null,\n image: props.data,\n bounds: [west, south, east, north],\n pickable: true\n } as any\n )\n );\n break;\n\n default:\n // eslint-disable-next-line no-console\n console.error('Unknown tile mimeType', tileSource?.mimeType);\n }\n\n // Debug tile borders\n if (showTileBorders) {\n layers.push(\n new PathLayer({\n id: `${props.id}-border`,\n data: [\n [\n [west, north],\n [west, south],\n [east, south],\n [east, north],\n [west, north]\n ]\n ],\n getPath: (d) => d,\n getColor: borderColor as any,\n widthMinPixels: 4\n })\n );\n }\n\n return layers;\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {PathLayerProps} from '@deck.gl/layers';\nimport {PathLayer} from '@deck.gl/layers';\nimport type {DefaultProps, LayerContext} from '@deck.gl/core';\nimport {GL} from '@luma.gl/constants';\nimport {Framebuffer, Texture} from '@luma.gl/core';\nimport {outline} from './outline';\n\n/**\n * Unit literal to shader unit number conversion.\n */\nexport const UNIT = {\n common: 0,\n meters: 1,\n pixels: 2\n};\n\n// TODO - this should be built into assembleShaders\nfunction injectShaderCode({source, code = ''}) {\n const INJECT_CODE = /}[^{}]*$/;\n return source.replace(INJECT_CODE, code.concat('\\n}\\n'));\n}\n\nconst VS_CODE = `\\\n outline_setUV(gl_Position);\n outline_setZLevel(instanceZLevel);\n`;\n\nconst FS_CODE = `\\\n fragColor = outline_filterColor(fragColor);\n`;\n\nexport type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {\n dashJustified?: boolean;\n getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);\n getZLevel?: (d: DataT, index: number) => number;\n};\n\nconst defaultProps: DefaultProps<PathOutlineLayerProps<any>> = {\n getZLevel: () => 0\n};\n\nexport class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends PathLayer<\n DataT,\n ExtraPropsT & Required<PathOutlineLayerProps<DataT>>\n> {\n static layerName = 'PathOutlineLayer';\n static defaultProps = defaultProps;\n\n state: {\n model?: any;\n pathTesselator: any;\n outlineFramebuffer: Framebuffer;\n dummyTexture: Texture;\n } = undefined!;\n\n // Override getShaders to inject the outline module\n getShaders() {\n const shaders = super.getShaders();\n return Object.assign({}, shaders, {\n modules: shaders.modules.concat([outline]),\n vs: injectShaderCode({source: shaders.vs, code: VS_CODE}),\n fs: injectShaderCode({source: shaders.fs, code: FS_CODE})\n });\n }\n\n // @ts-expect-error PathLayer is missing LayerContext arg\n initializeState(context: LayerContext) {\n super.initializeState();\n\n // Create an outline \"shadow\" map\n // TODO - we should create a single outlineMap for all layers\n this.setState({\n outlineFramebuffer: context.device.createFramebuffer({}),\n dummyTexture: context.device.createTexture({})\n });\n\n // Create an attribute manager\n // @ts-expect-error check whether this.getAttributeManager works here\n this.state.attributeManager.addInstanced({\n instanceZLevel: {\n size: 1,\n type: GL.UNSIGNED_BYTE,\n accessor: 'getZLevel'\n }\n });\n }\n\n // Override draw to add render module\n draw({moduleParameters = {}, parameters, uniforms, context}) {\n // Need to calculate same uniforms as base layer\n const {\n jointRounded,\n capRounded,\n billboard,\n miterLimit,\n widthUnits,\n widthScale,\n widthMinPixels,\n widthMaxPixels\n } = this.props;\n\n uniforms = Object.assign({}, uniforms, {\n jointType: Number(jointRounded),\n capType: Number(capRounded),\n billboard,\n widthUnits: UNIT[widthUnits],\n widthScale,\n miterLimit,\n widthMinPixels,\n widthMaxPixels\n });\n\n // Render the outline shadowmap (based on segment z orders)\n const {outlineFramebuffer, dummyTexture} = this.state;\n // TODO(v9): resize, see 'sf' example.\n // outlineFramebuffer.resize();\n // TODO(v9) clear FBO\n // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });\n\n this.state.model.updateModuleSettings({\n outlineEnabled: true,\n outlineRenderShadowmap: true,\n outlineShadowmap: dummyTexture\n });\n\n this.state.model.draw({\n uniforms: Object.assign({}, uniforms, {\n jointType: 0,\n widthScale: this.props.widthScale * 1.3\n }),\n parameters: {\n depthTest: false,\n // Biggest value needs to go into buffer\n blendEquation: GL.MAX\n },\n framebuffer: outlineFramebuffer\n });\n\n // Now use the outline shadowmap to render the lines (with outlines)\n this.state.model.updateModuleSettings({\n outlineEnabled: true,\n outlineRenderShadowmap: false,\n outlineShadowmap: outlineFramebuffer\n });\n this.state.model.draw({\n uniforms: Object.assign({}, uniforms, {\n jointType: Number(jointRounded),\n capType: Number(capRounded),\n widthScale: this.props.widthScale\n }),\n parameters: {\n depthTest: false\n }\n });\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {ShaderModule} from '@luma.gl/shadertools';\n\n/* eslint-disable camelcase */\nconst INITIAL_STATE: Record<string, any> = {\n outlineEnabled: false,\n outlineRenderShadowmap: false,\n outlineShadowmap: null\n};\n\nfunction getUniforms({outlineEnabled, outlineRenderShadowmap, outlineShadowmap} = INITIAL_STATE) {\n const uniforms: Record<string, any> = {};\n if (outlineEnabled !== undefined) {\n // ? 1.0 : 0.0;\n uniforms.outline_uEnabled = outlineEnabled;\n }\n if (outlineRenderShadowmap !== undefined) {\n // ? 1.0 : 0.0;\n uniforms.outline_uRenderOutlines = outlineRenderShadowmap;\n }\n if (outlineShadowmap !== undefined) {\n uniforms.outline_uShadowmap = outlineShadowmap;\n }\n return uniforms;\n}\n\nconst vs = `\\\n#version 300 es\nin float instanceZLevel;\nout float outline_vzLevel;\nout vec4 outline_vPosition;\n\n// Set the z level for the outline shadowmap rendering\nvoid outline_setZLevel(float zLevel) {\n outline_vzLevel = zLevel;\n}\n\n// Store an adjusted position for texture2DProj\nvoid outline_setUV(vec4 position) {\n // mat4(\n // 0.5, 0.0, 0.0, 0.0,\n // 0.0, 0.5, 0.0, 0.0,\n // 0.0, 0.0, 0.5, 0.0,\n // 0.5, 0.5, 0.5, 1.0\n // ) * position;\n outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);\n}\n`;\n\nconst fs = `\\\nuniform bool outline_uEnabled;\nuniform bool outline_uRenderOutlines;\nuniform sampler2D outline_uShadowmap;\n\nin float outline_vzLevel;\n// in vec2 outline_vUV;\nin vec4 outline_vPosition;\n\nout vec4 fragColor;\n\nconst float OUTLINE_Z_LEVEL_ERROR = 0.01;\n\n// Return a darker color in shadowmap\nvec4 outline_filterShadowColor(vec4 color) {\n return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);\n}\n\n// Return a darker color if in shadowmap\nvec4 outline_filterDarkenColor(vec4 color) {\n if (outline_uEnabled) {\n float maxZLevel;\n if (outline_vPosition.q > 0.0) {\n maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;\n } else {\n discard;\n }\n if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {\n vec4(color.rgb * 0.5, color.a);\n } else {\n discard;\n }\n }\n return color;\n}\n\n// if enabled and rendering outlines - Render depth to shadowmap\n// if enabled and rendering colors - Return a darker color if in shadowmap\n// if disabled, just return color\nvec4 outline_filterColor(vec4 color) {\n if (outline_uEnabled) {\n return outline_uRenderOutlines ?\n outline_filterShadowColor(color) :\n outline_filterDarkenColor(color);\n }\n return color;\n}\n`;\n\nexport const outline = {\n name: 'outline',\n vs,\n fs,\n getUniforms\n} as const satisfies ShaderModule;\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {DefaultProps} from '@deck.gl/core';\nimport {CompositeLayer, COORDINATE_SYSTEM} from '@deck.gl/core';\nimport {ScatterplotLayer} from '@deck.gl/layers';\nimport {SimpleMeshLayer} from '@deck.gl/mesh-layers';\nimport {PathOutlineLayer, PathOutlineLayerProps} from '../path-outline-layer/path-outline-layer';\nimport {Arrow2DGeometry} from './arrow-2d-geometry';\n\nimport {createPathMarkers} from './create-path-markers';\nimport {getClosestPointOnPolyline} from './polyline';\nimport {Vector3} from '@math.gl/core';\n\nconst DISTANCE_FOR_MULTI_ARROWS = 0.1;\nconst ARROW_HEAD_SIZE = 0.2;\nconst ARROW_TAIL_WIDTH = 0.05;\n// const ARROW_CENTER_ADJUST = -0.8;\n\nconst DEFAULT_MARKER_LAYER = SimpleMeshLayer;\n\nexport type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {\n getDirection?: (x) => any;\n getMarkerColor?: (x) => number[];\n getMarkerPercentages?: (x: any, info: any) => number[];\n highlightPoint?: any;\n highlightIndex?: number;\n MarkerLayer?: any;\n markerLayerProps?: any;\n sizeScale?: number;\n fp64?: boolean;\n nebulaLayer?: any;\n};\n\nconst DEFAULT_MARKER_LAYER_PROPS = {\n mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH})\n};\n\nconst defaultProps: DefaultProps<PathMarkerLayerProps<any>> = Object.assign(\n {},\n PathOutlineLayer.defaultProps,\n {\n MarkerLayer: DEFAULT_MARKER_LAYER,\n markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,\n\n sizeScale: 100,\n fp64: false,\n\n highlightIndex: -1,\n highlightPoint: null,\n\n getPath: (x) => x.path,\n getColor: (x) => x.color,\n getMarkerColor: (x) => [0, 0, 0, 255],\n getDirection: (x) => x.direction,\n getMarkerPercentages: (object, {lineLength}) =>\n lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]\n }\n);\n\nexport class PathMarkerLayer<\n DataT = any,\n ExtraPropsT = Record<string, unknown>\n> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {\n static layerName = 'PathMarkerLayer';\n static defaultProps = defaultProps;\n\n state: {\n closestPoint: Vector3 | null;\n closestPoints?: {position: Vector3}[];\n markers: any[];\n mesh: Arrow2DGeometry;\n } = undefined!;\n\n initializeState() {\n this.state = {\n markers: [],\n mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH}),\n closestPoint: null,\n closestPoints: []\n };\n }\n\n projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {\n if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {\n const [dx, dy] = viewport.metersToLngLatDelta(xyz);\n const [x, y] = coordinateOrigin;\n return viewport.projectFlat([x + dx, dy + y]);\n } else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {\n const [dx, dy] = xyz;\n const [x, y] = coordinateOrigin;\n return viewport.projectFlat([x + dx, dy + y]);\n }\n\n return viewport.projectFlat(xyz);\n }\n\n updateState({props, oldProps, changeFlags}) {\n if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {\n const {\n data,\n getPath,\n getDirection,\n getMarkerColor,\n getMarkerPercentages,\n coordinateSystem,\n coordinateOrigin\n } = this.props;\n\n const {viewport} = this.context;\n const projectFlat = (o) => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);\n this.state.markers = createPathMarkers({\n data,\n getPath,\n getDirection,\n getColor: getMarkerColor,\n getMarkerPercentages,\n projectFlat\n });\n this._recalculateClosestPoint();\n }\n if (changeFlags.propsChanged) {\n if (props.point !== oldProps.point) {\n this._recalculateClosestPoint();\n }\n }\n }\n\n _recalculateClosestPoint() {\n const {highlightPoint, highlightIndex} = this.props;\n if (highlightPoint && highlightIndex >= 0) {\n const object = this.props.data[highlightIndex];\n const points = this.props.getPath(object, null as any);\n const {point} = getClosestPointOnPolyline({points, p: highlightPoint});\n this.state.closestPoints = [{position: point}];\n } else {\n this.state.closestPoints = [];\n }\n }\n\n getPickingInfo({info}) {\n return Object.assign(info, {\n // override object with picked feature\n object: (info.object && info.object.path) || info.object\n });\n }\n\n renderLayers() {\n return [\n new PathOutlineLayer(\n this.props,\n this.getSubLayerProps({\n id: 'paths',\n // Note: data has to be passed explicitly like this to avoid being empty\n data: this.props.data\n })\n ),\n new this.props.MarkerLayer(\n this.getSubLayerProps(\n Object.assign({}, this.props.markerLayerProps, {\n id: 'markers',\n data: this.state.markers,\n getOrientation: (x) => [0, -x.angle, 0],\n getColor: (x) => x.color,\n sizeScale: this.props.sizeScale,\n fp64: this.props.fp64,\n pickable: false,\n parameters: {\n blend: false,\n depthTest: false\n }\n })\n )\n ),\n this.state.closestPoints &&\n new ScatterplotLayer({\n id: `${this.props.id}-highlight`,\n data: this.state.closestPoints,\n fp64: this.props.fp64\n })\n ];\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Geometry} from '@luma.gl/engine';\n\nexport class Arrow2DGeometry extends Geometry {\n constructor(opts = {}) {\n super(\n Object.assign({}, opts, {\n attributes: getArrowAttributes(opts),\n topology: 'triangle-list' as const\n })\n );\n }\n}\n\nfunction getArrowAttributes({length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05}) {\n const texCoords = [\n // HEAD\n 0.5,\n 1.0,\n 0,\n 0.5 - headSize / 2,\n 1.0 - headSize,\n 0,\n 0.5 + headSize / 2,\n 1.0 - headSize,\n 0,\n 0.5 - tailWidth / 2,\n tailStart,\n 0,\n 0.5 + tailWidth / 2,\n 1.0 - headSize,\n 0,\n 0.5 + tailWidth / 2,\n tailStart,\n 0,\n 0.5 - tailWidth / 2,\n tailStart,\n 0,\n 0.5 - tailWidth / 2,\n 1.0 - headSize,\n 0,\n 0.5 + tailWidth / 2,\n 1.0 - headSize,\n 0\n ];\n\n const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];\n\n // Center and scale\n const positions = new Array(texCoords.length);\n for (let i = 0; i < texCoords.length / 3; i++) {\n const i3 = i * 3;\n positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;\n positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;\n positions[i3 + 2] = 0;\n }\n return {\n positions: {size: 3, value: new Float32Array(positions)},\n normals: {size: 3, value: new Float32Array(normals)},\n texCoords: {size: 2, value: new Float32Array(texCoords)}\n };\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Vector2} from '@math.gl/core';\n\n/** GeoJSON style position coordinate vector */\nexport type Position = [number, number] | [number, number, number];\n\n/** [red, green, blue, alpha] in premultiplied alpha format */\nexport type Color = [number, number, number, number];\n\nexport interface PathMarker {\n position: Position;\n angle: number;\n color: Color;\n object: unknown;\n}\n\nfunction getLineLength(vPoints) {\n // calculate total length\n let lineLength = 0;\n for (let i = 0; i < vPoints.length - 1; i++) {\n lineLength += vPoints[i].distance(vPoints[i + 1]);\n }\n return lineLength;\n}\n\nconst DEFAULT_COLOR = [0, 0, 0, 255];\nconst DEFAULT_DIRECTION = {forward: true, backward: false};\n\nexport function createPathMarkers({\n data,\n getPath = (x, context) => x.path,\n getDirection = (x) => x.direction,\n getColor = (x) => DEFAULT_COLOR,\n getMarkerPercentages = (x, info) => [0.5],\n projectFlat\n}): PathMarker[] {\n const markers: PathMarker[] = [];\n\n for (const object of data) {\n const path = getPath(object, null);\n const direction = getDirection(object) || DEFAULT_DIRECTION;\n const color = getColor(object);\n\n const vPoints = path.map((p) => new Vector2(p));\n const vPointsReverse = vPoints.slice(0).reverse();\n\n // calculate total length\n const lineLength = getLineLength(vPoints);\n\n // Ask for where to put markers\n const percentages = getMarkerPercentages(object, {lineLength});\n\n // Create the markers\n for (const percentage of percentages) {\n if (direction.forward) {\n const marker = createMarkerAlongPath({\n path: vPoints,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n });\n markers.push(marker);\n }\n\n if (direction.backward) {\n const marker = createMarkerAlongPath({\n path: vPointsReverse,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n });\n markers.push(marker);\n }\n }\n }\n\n return markers;\n}\n\nfunction createMarkerAlongPath({\n path,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n}): PathMarker {\n const distanceAlong = lineLength * percentage;\n let currentDistance = 0;\n let previousDistance = 0;\n let i = 0;\n for (i = 0; i < path.length - 1; i++) {\n currentDistance += path[i].distance(path[i + 1]);\n if (currentDistance > distanceAlong) {\n break;\n }\n previousDistance = currentDistance;\n }\n\n // If reached the end of the loop without exiting early,\n // undo the final increment to avoid a null-pointer exception\n if (i === path.length - 1) {\n i -= 1;\n }\n\n const vDirection = path[i + 1].clone().subtract(path[i]).normalize();\n const along = distanceAlong - previousDistance;\n const vCenter = vDirection.clone().multiply(new Vector2(along, along)).add(path[i]);\n\n const vDirection2 = new Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));\n\n const angle = (vDirection2.verticalAngle() * 180) / Math.PI;\n\n return {position: [vCenter.x, vCenter.y, 0], angle, color, object};\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Vector3, clamp} from '@math.gl/core';\n\n// Return the closest point on a line segment\nexport function getClosestPointOnLine({p, p1, p2, clampToLine = true}) {\n const lineVector = new Vector3(p2).subtract(p1);\n const pointVector = new Vector3(p).subtract(p1);\n let dotProduct = lineVector.dot(pointVector);\n if (clampToLine) {\n dotProduct = clamp(dotProduct, 0, 1);\n }\n\n return lineVector.lerp(p1, p2, dotProduct);\n}\n\n// Return the closest point on a line segment\nexport function getClosestPointOnPolyline({p, points}) {\n p = new Vector3(p);\n let pClosest: Vector3 | null = null;\n let distanceSquared = Infinity;\n let index = -1;\n for (let i = 0; i < points.length - 1; ++i) {\n const p1 = points[i];\n const p2 = points[i + 1];\n const pClosestOnLine = getClosestPointOnLine({p, p1, p2});\n const distanceToLineSquared = p.distanceSquared(pClosestOnLine);\n if (distanceToLineSquared < distanceSquared) {\n distanceSquared = distanceToLineSquared;\n pClosest = pClosestOnLine;\n index = i;\n }\n }\n return {\n point: pClosest,\n index,\n p1: points[index],\n p2: points[index + 1],\n distanceSquared,\n distance: Math.sqrt(distanceSquared)\n };\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../src/index.ts", "../src/path-outline-layer/path-outline-layer.ts", "../src/path-outline-layer/outline.ts", "../src/path-marker-layer/path-marker-layer.ts", "../src/path-marker-layer/arrow-2d-geometry.ts", "../src/path-marker-layer/create-path-markers.ts", "../src/path-marker-layer/polyline.ts"],
|
|
4
|
+
"sourcesContent": ["// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nexport type {PathOutlineLayerProps} from './path-outline-layer/path-outline-layer';\nexport {PathOutlineLayer} from './path-outline-layer/path-outline-layer';\n\nexport type {PathMarkerLayerProps} from './path-marker-layer/path-marker-layer';\nexport {PathMarkerLayer} from './path-marker-layer/path-marker-layer';\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {PathLayerProps} from '@deck.gl/layers';\nimport {PathLayer} from '@deck.gl/layers';\nimport type {DefaultProps, LayerContext} from '@deck.gl/core';\nimport {GL} from '@luma.gl/constants';\nimport {Framebuffer, Texture} from '@luma.gl/core';\nimport {outline} from './outline';\n\n/**\n * Unit literal to shader unit number conversion.\n */\nexport const UNIT = {\n common: 0,\n meters: 1,\n pixels: 2\n};\n\n// TODO - this should be built into assembleShaders\nfunction injectShaderCode({source, code = ''}) {\n const INJECT_CODE = /}[^{}]*$/;\n return source.replace(INJECT_CODE, code.concat('\\n}\\n'));\n}\n\nconst VS_CODE = `\\\n outline_setUV(gl_Position);\n outline_setZLevel(instanceZLevel);\n`;\n\nconst FS_CODE = `\\\n fragColor = outline_filterColor(fragColor);\n`;\n\nexport type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {\n dashJustified?: boolean;\n getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);\n getZLevel?: (d: DataT, index: number) => number;\n};\n\nconst defaultProps: DefaultProps<PathOutlineLayerProps<any>> = {\n getZLevel: () => 0\n};\n\nexport class PathOutlineLayer<DataT = any, ExtraPropsT = Record<string, unknown>> extends PathLayer<\n DataT,\n ExtraPropsT & Required<PathOutlineLayerProps<DataT>>\n> {\n static layerName = 'PathOutlineLayer';\n static defaultProps = defaultProps;\n\n state: {\n model?: any;\n pathTesselator: any;\n outlineFramebuffer: Framebuffer;\n dummyTexture: Texture;\n } = undefined!;\n\n // Override getShaders to inject the outline module\n getShaders() {\n const shaders = super.getShaders();\n return Object.assign({}, shaders, {\n modules: shaders.modules.concat([outline]),\n vs: injectShaderCode({source: shaders.vs, code: VS_CODE}),\n fs: injectShaderCode({source: shaders.fs, code: FS_CODE})\n });\n }\n\n // @ts-expect-error PathLayer is missing LayerContext arg\n initializeState(context: LayerContext) {\n super.initializeState();\n\n // Create an outline \"shadow\" map\n // TODO - we should create a single outlineMap for all layers\n this.setState({\n outlineFramebuffer: context.device.createFramebuffer({}),\n dummyTexture: context.device.createTexture({})\n });\n\n // Create an attribute manager\n // @ts-expect-error check whether this.getAttributeManager works here\n this.state.attributeManager.addInstanced({\n instanceZLevel: {\n size: 1,\n type: GL.UNSIGNED_BYTE,\n accessor: 'getZLevel'\n }\n });\n }\n\n // Override draw to add render module\n draw({moduleParameters = {}, parameters, uniforms, context}) {\n // Need to calculate same uniforms as base layer\n const {\n jointRounded,\n capRounded,\n billboard,\n miterLimit,\n widthUnits,\n widthScale,\n widthMinPixels,\n widthMaxPixels\n } = this.props;\n\n uniforms = Object.assign({}, uniforms, {\n jointType: Number(jointRounded),\n capType: Number(capRounded),\n billboard,\n widthUnits: UNIT[widthUnits],\n widthScale,\n miterLimit,\n widthMinPixels,\n widthMaxPixels\n });\n\n // Render the outline shadowmap (based on segment z orders)\n const {outlineFramebuffer, dummyTexture} = this.state;\n // TODO(v9): resize, see 'sf' example.\n // outlineFramebuffer.resize();\n // TODO(v9) clear FBO\n // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });\n\n this.state.model.updateModuleSettings({\n outlineEnabled: true,\n outlineRenderShadowmap: true,\n outlineShadowmap: dummyTexture\n });\n\n this.state.model.draw({\n uniforms: Object.assign({}, uniforms, {\n jointType: 0,\n widthScale: this.props.widthScale * 1.3\n }),\n parameters: {\n depthTest: false,\n // Biggest value needs to go into buffer\n blendEquation: GL.MAX\n },\n framebuffer: outlineFramebuffer\n });\n\n // Now use the outline shadowmap to render the lines (with outlines)\n this.state.model.updateModuleSettings({\n outlineEnabled: true,\n outlineRenderShadowmap: false,\n outlineShadowmap: outlineFramebuffer\n });\n this.state.model.draw({\n uniforms: Object.assign({}, uniforms, {\n jointType: Number(jointRounded),\n capType: Number(capRounded),\n widthScale: this.props.widthScale\n }),\n parameters: {\n depthTest: false\n }\n });\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {ShaderModule} from '@luma.gl/shadertools';\n\n/* eslint-disable camelcase */\nconst INITIAL_STATE: Record<string, any> = {\n outlineEnabled: false,\n outlineRenderShadowmap: false,\n outlineShadowmap: null\n};\n\nfunction getUniforms({outlineEnabled, outlineRenderShadowmap, outlineShadowmap} = INITIAL_STATE) {\n const uniforms: Record<string, any> = {};\n if (outlineEnabled !== undefined) {\n // ? 1.0 : 0.0;\n uniforms.outline_uEnabled = outlineEnabled;\n }\n if (outlineRenderShadowmap !== undefined) {\n // ? 1.0 : 0.0;\n uniforms.outline_uRenderOutlines = outlineRenderShadowmap;\n }\n if (outlineShadowmap !== undefined) {\n uniforms.outline_uShadowmap = outlineShadowmap;\n }\n return uniforms;\n}\n\nconst vs = `\\\n#version 300 es\nin float instanceZLevel;\nout float outline_vzLevel;\nout vec4 outline_vPosition;\n\n// Set the z level for the outline shadowmap rendering\nvoid outline_setZLevel(float zLevel) {\n outline_vzLevel = zLevel;\n}\n\n// Store an adjusted position for texture2DProj\nvoid outline_setUV(vec4 position) {\n // mat4(\n // 0.5, 0.0, 0.0, 0.0,\n // 0.0, 0.5, 0.0, 0.0,\n // 0.0, 0.0, 0.5, 0.0,\n // 0.5, 0.5, 0.5, 1.0\n // ) * position;\n outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);\n}\n`;\n\nconst fs = `\\\nuniform bool outline_uEnabled;\nuniform bool outline_uRenderOutlines;\nuniform sampler2D outline_uShadowmap;\n\nin float outline_vzLevel;\n// in vec2 outline_vUV;\nin vec4 outline_vPosition;\n\nout vec4 fragColor;\n\nconst float OUTLINE_Z_LEVEL_ERROR = 0.01;\n\n// Return a darker color in shadowmap\nvec4 outline_filterShadowColor(vec4 color) {\n return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);\n}\n\n// Return a darker color if in shadowmap\nvec4 outline_filterDarkenColor(vec4 color) {\n if (outline_uEnabled) {\n float maxZLevel;\n if (outline_vPosition.q > 0.0) {\n maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;\n } else {\n discard;\n }\n if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {\n vec4(color.rgb * 0.5, color.a);\n } else {\n discard;\n }\n }\n return color;\n}\n\n// if enabled and rendering outlines - Render depth to shadowmap\n// if enabled and rendering colors - Return a darker color if in shadowmap\n// if disabled, just return color\nvec4 outline_filterColor(vec4 color) {\n if (outline_uEnabled) {\n return outline_uRenderOutlines ?\n outline_filterShadowColor(color) :\n outline_filterDarkenColor(color);\n }\n return color;\n}\n`;\n\nexport const outline = {\n name: 'outline',\n vs,\n fs,\n getUniforms\n} as const satisfies ShaderModule;\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport type {DefaultProps} from '@deck.gl/core';\nimport {CompositeLayer, COORDINATE_SYSTEM} from '@deck.gl/core';\nimport {ScatterplotLayer} from '@deck.gl/layers';\nimport {SimpleMeshLayer} from '@deck.gl/mesh-layers';\nimport {PathOutlineLayer, PathOutlineLayerProps} from '../path-outline-layer/path-outline-layer';\nimport {Arrow2DGeometry} from './arrow-2d-geometry';\n\nimport {createPathMarkers} from './create-path-markers';\nimport {getClosestPointOnPolyline} from './polyline';\nimport {Vector3} from '@math.gl/core';\n\nconst DISTANCE_FOR_MULTI_ARROWS = 0.1;\nconst ARROW_HEAD_SIZE = 0.2;\nconst ARROW_TAIL_WIDTH = 0.05;\n// const ARROW_CENTER_ADJUST = -0.8;\n\nconst DEFAULT_MARKER_LAYER = SimpleMeshLayer;\n\nexport type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {\n getDirection?: (x) => any;\n getMarkerColor?: (x) => number[];\n getMarkerPercentages?: (x: any, info: any) => number[];\n highlightPoint?: any;\n highlightIndex?: number;\n MarkerLayer?: any;\n markerLayerProps?: any;\n sizeScale?: number;\n fp64?: boolean;\n nebulaLayer?: any;\n};\n\nconst DEFAULT_MARKER_LAYER_PROPS = {\n mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH})\n};\n\nconst defaultProps: DefaultProps<PathMarkerLayerProps<any>> = Object.assign(\n {},\n PathOutlineLayer.defaultProps,\n {\n MarkerLayer: DEFAULT_MARKER_LAYER,\n markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,\n\n sizeScale: 100,\n fp64: false,\n\n highlightIndex: -1,\n highlightPoint: null,\n\n getPath: (x) => x.path,\n getColor: (x) => x.color,\n getMarkerColor: (x) => [0, 0, 0, 255],\n getDirection: (x) => x.direction,\n getMarkerPercentages: (object, {lineLength}) =>\n lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]\n }\n);\n\nexport class PathMarkerLayer<\n DataT = any,\n ExtraPropsT = Record<string, unknown>\n> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {\n static layerName = 'PathMarkerLayer';\n static defaultProps = defaultProps;\n\n state: {\n closestPoint: Vector3 | null;\n closestPoints?: {position: Vector3}[];\n markers: any[];\n mesh: Arrow2DGeometry;\n } = undefined!;\n\n initializeState() {\n this.state = {\n markers: [],\n mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH}),\n closestPoint: null,\n closestPoints: []\n };\n }\n\n projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {\n if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {\n const [dx, dy] = viewport.metersToLngLatDelta(xyz);\n const [x, y] = coordinateOrigin;\n return viewport.projectFlat([x + dx, dy + y]);\n } else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {\n const [dx, dy] = xyz;\n const [x, y] = coordinateOrigin;\n return viewport.projectFlat([x + dx, dy + y]);\n }\n\n return viewport.projectFlat(xyz);\n }\n\n updateState({props, oldProps, changeFlags}) {\n if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {\n const {\n data,\n getPath,\n getDirection,\n getMarkerColor,\n getMarkerPercentages,\n coordinateSystem,\n coordinateOrigin\n } = this.props;\n\n const {viewport} = this.context;\n const projectFlat = (o) => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);\n this.state.markers = createPathMarkers({\n data,\n getPath,\n getDirection,\n getColor: getMarkerColor,\n getMarkerPercentages,\n projectFlat\n });\n this._recalculateClosestPoint();\n }\n if (changeFlags.propsChanged) {\n if (props.point !== oldProps.point) {\n this._recalculateClosestPoint();\n }\n }\n }\n\n _recalculateClosestPoint() {\n const {highlightPoint, highlightIndex} = this.props;\n if (highlightPoint && highlightIndex >= 0) {\n const object = this.props.data[highlightIndex];\n const points = this.props.getPath(object, null as any);\n const {point} = getClosestPointOnPolyline({points, p: highlightPoint});\n this.state.closestPoints = [{position: point}];\n } else {\n this.state.closestPoints = [];\n }\n }\n\n getPickingInfo({info}) {\n return Object.assign(info, {\n // override object with picked feature\n object: (info.object && info.object.path) || info.object\n });\n }\n\n renderLayers() {\n return [\n new PathOutlineLayer(\n this.props,\n this.getSubLayerProps({\n id: 'paths',\n // Note: data has to be passed explicitly like this to avoid being empty\n data: this.props.data\n })\n ),\n new this.props.MarkerLayer(\n this.getSubLayerProps(\n Object.assign({}, this.props.markerLayerProps, {\n id: 'markers',\n data: this.state.markers,\n getOrientation: (x) => [0, -x.angle, 0],\n getColor: (x) => x.color,\n sizeScale: this.props.sizeScale,\n fp64: this.props.fp64,\n pickable: false,\n parameters: {\n blend: false,\n depthTest: false\n }\n })\n )\n ),\n this.state.closestPoints &&\n new ScatterplotLayer({\n id: `${this.props.id}-highlight`,\n data: this.state.closestPoints,\n fp64: this.props.fp64\n })\n ];\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Geometry} from '@luma.gl/engine';\n\nexport class Arrow2DGeometry extends Geometry {\n constructor(opts = {}) {\n super(\n Object.assign({}, opts, {\n attributes: getArrowAttributes(opts),\n topology: 'triangle-list' as const\n })\n );\n }\n}\n\nfunction getArrowAttributes({length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05}) {\n const texCoords = [\n // HEAD\n 0.5,\n 1.0,\n 0,\n 0.5 - headSize / 2,\n 1.0 - headSize,\n 0,\n 0.5 + headSize / 2,\n 1.0 - headSize,\n 0,\n 0.5 - tailWidth / 2,\n tailStart,\n 0,\n 0.5 + tailWidth / 2,\n 1.0 - headSize,\n 0,\n 0.5 + tailWidth / 2,\n tailStart,\n 0,\n 0.5 - tailWidth / 2,\n tailStart,\n 0,\n 0.5 - tailWidth / 2,\n 1.0 - headSize,\n 0,\n 0.5 + tailWidth / 2,\n 1.0 - headSize,\n 0\n ];\n\n const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];\n\n // Center and scale\n const positions = new Array(texCoords.length);\n for (let i = 0; i < texCoords.length / 3; i++) {\n const i3 = i * 3;\n positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;\n positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;\n positions[i3 + 2] = 0;\n }\n return {\n positions: {size: 3, value: new Float32Array(positions)},\n normals: {size: 3, value: new Float32Array(normals)},\n texCoords: {size: 2, value: new Float32Array(texCoords)}\n };\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Vector2} from '@math.gl/core';\n\n/** GeoJSON style position coordinate vector */\nexport type Position = [number, number] | [number, number, number];\n\n/** [red, green, blue, alpha] in premultiplied alpha format */\nexport type Color = [number, number, number, number];\n\nexport interface PathMarker {\n position: Position;\n angle: number;\n color: Color;\n object: unknown;\n}\n\nfunction getLineLength(vPoints) {\n // calculate total length\n let lineLength = 0;\n for (let i = 0; i < vPoints.length - 1; i++) {\n lineLength += vPoints[i].distance(vPoints[i + 1]);\n }\n return lineLength;\n}\n\nconst DEFAULT_COLOR = [0, 0, 0, 255];\nconst DEFAULT_DIRECTION = {forward: true, backward: false};\n\nexport function createPathMarkers({\n data,\n getPath = (x, context) => x.path,\n getDirection = (x) => x.direction,\n getColor = (x) => DEFAULT_COLOR,\n getMarkerPercentages = (x, info) => [0.5],\n projectFlat\n}): PathMarker[] {\n const markers: PathMarker[] = [];\n\n for (const object of data) {\n const path = getPath(object, null);\n const direction = getDirection(object) || DEFAULT_DIRECTION;\n const color = getColor(object);\n\n const vPoints = path.map((p) => new Vector2(p));\n const vPointsReverse = vPoints.slice(0).reverse();\n\n // calculate total length\n const lineLength = getLineLength(vPoints);\n\n // Ask for where to put markers\n const percentages = getMarkerPercentages(object, {lineLength});\n\n // Create the markers\n for (const percentage of percentages) {\n if (direction.forward) {\n const marker = createMarkerAlongPath({\n path: vPoints,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n });\n markers.push(marker);\n }\n\n if (direction.backward) {\n const marker = createMarkerAlongPath({\n path: vPointsReverse,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n });\n markers.push(marker);\n }\n }\n }\n\n return markers;\n}\n\nfunction createMarkerAlongPath({\n path,\n percentage,\n lineLength,\n color,\n object,\n projectFlat\n}): PathMarker {\n const distanceAlong = lineLength * percentage;\n let currentDistance = 0;\n let previousDistance = 0;\n let i = 0;\n for (i = 0; i < path.length - 1; i++) {\n currentDistance += path[i].distance(path[i + 1]);\n if (currentDistance > distanceAlong) {\n break;\n }\n previousDistance = currentDistance;\n }\n\n // If reached the end of the loop without exiting early,\n // undo the final increment to avoid a null-pointer exception\n if (i === path.length - 1) {\n i -= 1;\n }\n\n const vDirection = path[i + 1].clone().subtract(path[i]).normalize();\n const along = distanceAlong - previousDistance;\n const vCenter = vDirection.clone().multiply(new Vector2(along, along)).add(path[i]);\n\n const vDirection2 = new Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));\n\n const angle = (vDirection2.verticalAngle() * 180) / Math.PI;\n\n return {position: [vCenter.x, vCenter.y, 0], angle, color, object};\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n\nimport {Vector3, clamp} from '@math.gl/core';\n\n// Return the closest point on a line segment\nexport function getClosestPointOnLine({p, p1, p2, clampToLine = true}) {\n const lineVector = new Vector3(p2).subtract(p1);\n const pointVector = new Vector3(p).subtract(p1);\n let dotProduct = lineVector.dot(pointVector);\n if (clampToLine) {\n dotProduct = clamp(dotProduct, 0, 1);\n }\n\n return lineVector.lerp(p1, p2, dotProduct);\n}\n\n// Return the closest point on a line segment\nexport function getClosestPointOnPolyline({p, points}) {\n p = new Vector3(p);\n let pClosest: Vector3 | null = null;\n let distanceSquared = Infinity;\n let index = -1;\n for (let i = 0; i < points.length - 1; ++i) {\n const p1 = points[i];\n const p2 = points[i + 1];\n const pClosestOnLine = getClosestPointOnLine({p, p1, p2});\n const distanceToLineSquared = p.distanceSquared(pClosestOnLine);\n if (distanceToLineSquared < distanceSquared) {\n distanceSquared = distanceToLineSquared;\n pClosest = pClosestOnLine;\n index = i;\n }\n }\n return {\n point: pClosest,\n index,\n p1: points[index],\n p2: points[index + 1],\n distanceSquared,\n distance: Math.sqrt(distanceSquared)\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_core", "import_layers", "import_core", "defaultProps"]
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export type { TileSourceLayerProps } from "./tile-source-layer/tile-source-layer.js";
|
|
2
|
-
export { TileSourceLayer } from "./tile-source-layer/tile-source-layer.js";
|
|
3
1
|
export type { PathOutlineLayerProps } from "./path-outline-layer/path-outline-layer.js";
|
|
4
2
|
export { PathOutlineLayer } from "./path-outline-layer/path-outline-layer.js";
|
|
5
3
|
export type { PathMarkerLayerProps } from "./path-marker-layer/path-marker-layer.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAC,qBAAqB,EAAC,mDAAgD;AACnF,OAAO,EAAC,gBAAgB,EAAC,mDAAgD;AAEzE,YAAY,EAAC,oBAAoB,EAAC,iDAA8C;AAChF,OAAO,EAAC,eAAe,EAAC,iDAA8C"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// deck.gl-community
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright (c) vis.gl contributors
|
|
4
|
-
export { TileSourceLayer } from "./tile-source-layer/tile-source-layer.js";
|
|
5
4
|
export { PathOutlineLayer } from "./path-outline-layer/path-outline-layer.js";
|
|
6
5
|
export { PathMarkerLayer } from "./path-marker-layer/path-marker-layer.js";
|
|
7
6
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAGpC,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAGpC,OAAO,EAAC,gBAAgB,EAAC,mDAAgD;AAGzE,OAAO,EAAC,eAAe,EAAC,iDAA8C"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deck.gl-community/layers",
|
|
3
|
-
"version": "9.1.0-beta.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "9.1.0-beta.6",
|
|
4
|
+
"description": "Add-on layers for deck.gl",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"layers",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"test-watch": "vitest"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@deck.gl/core": "^9.1.
|
|
33
|
+
"@deck.gl/core": "^9.1.12",
|
|
34
34
|
"@deck.gl/extensions": "^9.1.0",
|
|
35
35
|
"@deck.gl/geo-layers": "^9.1.0",
|
|
36
36
|
"@deck.gl/layers": "^9.1.0",
|
|
@@ -41,10 +41,16 @@
|
|
|
41
41
|
"@loaders.gl/loader-utils": "^4.2.0",
|
|
42
42
|
"@loaders.gl/schema": "^4.2.0",
|
|
43
43
|
"@loaders.gl/tiles": "^4.2.0",
|
|
44
|
-
"@luma.gl/constants": "^9.1.
|
|
45
|
-
"@luma.gl/core": "^9.1.
|
|
46
|
-
"@luma.gl/engine": "^9.1.
|
|
47
|
-
"@math.gl/core": "^4.0.0"
|
|
44
|
+
"@luma.gl/constants": "^9.1.9",
|
|
45
|
+
"@luma.gl/core": "^9.1.9",
|
|
46
|
+
"@luma.gl/engine": "^9.1.9",
|
|
47
|
+
"@math.gl/core": "^4.0.0",
|
|
48
|
+
"a5-js": "^0.1.4",
|
|
49
|
+
"h3-js": "^4.2.1"
|
|
48
50
|
},
|
|
49
|
-
"
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@deck.gl/test-utils": "^9.1.12",
|
|
53
|
+
"@luma.gl/webgpu": "^9.1.9"
|
|
54
|
+
},
|
|
55
|
+
"gitHead": "9d11258b824b698e3f0c0dcf726a5dd6fe8ab363"
|
|
50
56
|
}
|
package/src/index.ts
CHANGED
|
@@ -2,9 +2,6 @@
|
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright (c) vis.gl contributors
|
|
4
4
|
|
|
5
|
-
export type {TileSourceLayerProps} from './tile-source-layer/tile-source-layer';
|
|
6
|
-
export {TileSourceLayer} from './tile-source-layer/tile-source-layer';
|
|
7
|
-
|
|
8
5
|
export type {PathOutlineLayerProps} from './path-outline-layer/path-outline-layer';
|
|
9
6
|
export {PathOutlineLayer} from './path-outline-layer/path-outline-layer';
|
|
10
7
|
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { CompositeLayer } from '@deck.gl/core';
|
|
2
|
-
import type { TileLayerProps } from '@deck.gl/geo-layers';
|
|
3
|
-
import { TileLayer } from '@deck.gl/geo-layers';
|
|
4
|
-
import type { TileSource } from '@loaders.gl/loader-utils';
|
|
5
|
-
export type TileSourceLayerProps = TileLayerProps & {
|
|
6
|
-
tileSource: TileSource<any>;
|
|
7
|
-
showTileBorders?: boolean;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* A Deck.gl layer that renders a tile source
|
|
11
|
-
* Autodiscovers type of content (vector tile, bitmap, ...)
|
|
12
|
-
* Can render debug borders around tiles
|
|
13
|
-
* TODO - Change debug border color based on zoom level
|
|
14
|
-
*/
|
|
15
|
-
export declare class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
|
|
16
|
-
static layerName: string;
|
|
17
|
-
static defaultProps: {
|
|
18
|
-
showTileBorders: boolean;
|
|
19
|
-
};
|
|
20
|
-
state: {
|
|
21
|
-
tileSource: TileSource<any> | null;
|
|
22
|
-
};
|
|
23
|
-
initializeState(): void;
|
|
24
|
-
updateState({ props, changeFlags }: {
|
|
25
|
-
props: any;
|
|
26
|
-
changeFlags: any;
|
|
27
|
-
}): void;
|
|
28
|
-
renderLayers(): TileLayer<any, {
|
|
29
|
-
id: string;
|
|
30
|
-
getTileData: any;
|
|
31
|
-
maxRequests: 20;
|
|
32
|
-
pickable: true;
|
|
33
|
-
onViewportLoad: any;
|
|
34
|
-
autoHighlight: any;
|
|
35
|
-
highlightColor: number[];
|
|
36
|
-
minZoom: any;
|
|
37
|
-
maxZoom: any;
|
|
38
|
-
tileSize: 256;
|
|
39
|
-
zoomOffset: 0 | -1;
|
|
40
|
-
renderSubLayers: any;
|
|
41
|
-
tileSource: any;
|
|
42
|
-
showTileBorders: any;
|
|
43
|
-
}>[];
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=tile-source-layer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tile-source-layer.d.ts","sourceRoot":"","sources":["../../src/tile-source-layer/tile-source-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAQ,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAKzD,MAAM,MAAM,oBAAoB,GAAG,cAAc,GAAG;IAClD,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACvE,MAAM,CAAC,SAAS,SAAqB;IACrC,MAAM,CAAC,YAAY;;MAGjB;IAEF,KAAK,EAAE;QACL,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;KACpC,CAAc;IAEf,eAAe;IAMf,WAAW,CAAC,EAAC,KAAK,EAAE,WAAW,EAAC;;;KAAA;IAMhC,YAAY;;;;;;;;;;;;yBAsB8B,GAAG;;;;CAQ9C"}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
// deck.gl-community
|
|
2
|
-
// SPDX-License-Identifier: MIT
|
|
3
|
-
// Copyright (c) vis.gl contributors
|
|
4
|
-
import { CompositeLayer } from '@deck.gl/core';
|
|
5
|
-
import { TileLayer } from '@deck.gl/geo-layers';
|
|
6
|
-
import { BitmapLayer, GeoJsonLayer, PathLayer } from '@deck.gl/layers';
|
|
7
|
-
/* global window */
|
|
8
|
-
const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
|
|
9
|
-
/**
|
|
10
|
-
* A Deck.gl layer that renders a tile source
|
|
11
|
-
* Autodiscovers type of content (vector tile, bitmap, ...)
|
|
12
|
-
* Can render debug borders around tiles
|
|
13
|
-
* TODO - Change debug border color based on zoom level
|
|
14
|
-
*/
|
|
15
|
-
export class TileSourceLayer extends CompositeLayer {
|
|
16
|
-
static layerName = 'TileSourceLayer';
|
|
17
|
-
static defaultProps = {
|
|
18
|
-
...TileLayer.defaultProps,
|
|
19
|
-
showTileBorders: true
|
|
20
|
-
};
|
|
21
|
-
state = undefined;
|
|
22
|
-
initializeState() {
|
|
23
|
-
this.setState({
|
|
24
|
-
tileSource: null
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
updateState({ props, changeFlags }) {
|
|
28
|
-
this.setState({
|
|
29
|
-
tileSource: props.tileSource
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
renderLayers() {
|
|
33
|
-
const { tileSource, showTileBorders, metadata, onTilesLoad } = this.props;
|
|
34
|
-
const minZoom = metadata?.minZoom || 0;
|
|
35
|
-
const maxZoom = metadata?.maxZoom || 30;
|
|
36
|
-
return [
|
|
37
|
-
new TileLayer({
|
|
38
|
-
// HACK: Trigger new layer via id prop to force clear tile cache
|
|
39
|
-
id: String(tileSource.url),
|
|
40
|
-
getTileData: tileSource.getTileData,
|
|
41
|
-
// Assume the pmtiles file support HTTP/2, so we aren't limited by the browser to a certain number per domain.
|
|
42
|
-
maxRequests: 20,
|
|
43
|
-
pickable: true,
|
|
44
|
-
onViewportLoad: onTilesLoad,
|
|
45
|
-
autoHighlight: showTileBorders,
|
|
46
|
-
highlightColor: [60, 60, 60, 40],
|
|
47
|
-
minZoom,
|
|
48
|
-
maxZoom,
|
|
49
|
-
tileSize: 256,
|
|
50
|
-
// TOOD - why is this needed?
|
|
51
|
-
zoomOffset: devicePixelRatio === 1 ? -1 : 0,
|
|
52
|
-
renderSubLayers: renderSubLayers,
|
|
53
|
-
// Custom prop
|
|
54
|
-
tileSource,
|
|
55
|
-
showTileBorders
|
|
56
|
-
})
|
|
57
|
-
];
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
function renderSubLayers(props) {
|
|
61
|
-
const { tileSource, showTileBorders, minZoom, maxZoom, tile: { index: { z: zoom }, bbox: { west, south, east, north } } } = props;
|
|
62
|
-
const layers = [];
|
|
63
|
-
const borderColor = zoom <= minZoom || zoom >= maxZoom ? [255, 0, 0, 255] : [0, 0, 255, 255];
|
|
64
|
-
switch (tileSource.mimeType) {
|
|
65
|
-
case 'application/vnd.mapbox-vector-tile':
|
|
66
|
-
layers.push(new GeoJsonLayer({
|
|
67
|
-
id: `${props.id}-geojson`,
|
|
68
|
-
data: props.data,
|
|
69
|
-
pickable: true,
|
|
70
|
-
getFillColor: [0, 190, 80, 255],
|
|
71
|
-
lineWidthScale: 500,
|
|
72
|
-
lineWidthMinPixels: 0.5
|
|
73
|
-
}));
|
|
74
|
-
break;
|
|
75
|
-
case 'image/png':
|
|
76
|
-
case 'image/jpeg':
|
|
77
|
-
case 'image/webp':
|
|
78
|
-
case 'image/avif':
|
|
79
|
-
layers.push(new BitmapLayer(props, {
|
|
80
|
-
data: null,
|
|
81
|
-
image: props.data,
|
|
82
|
-
bounds: [west, south, east, north],
|
|
83
|
-
pickable: true
|
|
84
|
-
}));
|
|
85
|
-
break;
|
|
86
|
-
default:
|
|
87
|
-
// eslint-disable-next-line no-console
|
|
88
|
-
console.error('Unknown tile mimeType', tileSource?.mimeType);
|
|
89
|
-
}
|
|
90
|
-
// Debug tile borders
|
|
91
|
-
if (showTileBorders) {
|
|
92
|
-
layers.push(new PathLayer({
|
|
93
|
-
id: `${props.id}-border`,
|
|
94
|
-
data: [
|
|
95
|
-
[
|
|
96
|
-
[west, north],
|
|
97
|
-
[west, south],
|
|
98
|
-
[east, south],
|
|
99
|
-
[east, north],
|
|
100
|
-
[west, north]
|
|
101
|
-
]
|
|
102
|
-
],
|
|
103
|
-
getPath: (d) => d,
|
|
104
|
-
getColor: borderColor,
|
|
105
|
-
widthMinPixels: 4
|
|
106
|
-
}));
|
|
107
|
-
}
|
|
108
|
-
return layers;
|
|
109
|
-
}
|
|
110
|
-
//# sourceMappingURL=tile-source-layer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tile-source-layer.js","sourceRoot":"","sources":["../../src/tile-source-layer/tile-source-layer.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
// deck.gl-community
|
|
2
|
-
// SPDX-License-Identifier: MIT
|
|
3
|
-
// Copyright (c) vis.gl contributors
|
|
4
|
-
|
|
5
|
-
import {CompositeLayer, Layer} from '@deck.gl/core';
|
|
6
|
-
import type {TileLayerProps} from '@deck.gl/geo-layers';
|
|
7
|
-
import {TileLayer} from '@deck.gl/geo-layers';
|
|
8
|
-
import {BitmapLayer, GeoJsonLayer, PathLayer} from '@deck.gl/layers';
|
|
9
|
-
import type {TileSource} from '@loaders.gl/loader-utils';
|
|
10
|
-
|
|
11
|
-
/* global window */
|
|
12
|
-
const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
|
|
13
|
-
|
|
14
|
-
export type TileSourceLayerProps = TileLayerProps & {
|
|
15
|
-
tileSource: TileSource<any>;
|
|
16
|
-
showTileBorders?: boolean;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* A Deck.gl layer that renders a tile source
|
|
21
|
-
* Autodiscovers type of content (vector tile, bitmap, ...)
|
|
22
|
-
* Can render debug borders around tiles
|
|
23
|
-
* TODO - Change debug border color based on zoom level
|
|
24
|
-
*/
|
|
25
|
-
export class TileSourceLayer extends CompositeLayer<TileSourceLayerProps> {
|
|
26
|
-
static layerName = 'TileSourceLayer';
|
|
27
|
-
static defaultProps = {
|
|
28
|
-
...TileLayer.defaultProps,
|
|
29
|
-
showTileBorders: true
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
state: {
|
|
33
|
-
tileSource: TileSource<any> | null;
|
|
34
|
-
} = undefined!;
|
|
35
|
-
|
|
36
|
-
initializeState() {
|
|
37
|
-
this.setState({
|
|
38
|
-
tileSource: null
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
updateState({props, changeFlags}) {
|
|
43
|
-
this.setState({
|
|
44
|
-
tileSource: props.tileSource
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
renderLayers() {
|
|
49
|
-
const {tileSource, showTileBorders, metadata, onTilesLoad} = this.props as any;
|
|
50
|
-
const minZoom = metadata?.minZoom || 0;
|
|
51
|
-
const maxZoom = metadata?.maxZoom || 30;
|
|
52
|
-
|
|
53
|
-
return [
|
|
54
|
-
new TileLayer({
|
|
55
|
-
// HACK: Trigger new layer via id prop to force clear tile cache
|
|
56
|
-
id: String(tileSource.url),
|
|
57
|
-
getTileData: tileSource.getTileData,
|
|
58
|
-
// Assume the pmtiles file support HTTP/2, so we aren't limited by the browser to a certain number per domain.
|
|
59
|
-
maxRequests: 20,
|
|
60
|
-
|
|
61
|
-
pickable: true,
|
|
62
|
-
onViewportLoad: onTilesLoad,
|
|
63
|
-
autoHighlight: showTileBorders,
|
|
64
|
-
highlightColor: [60, 60, 60, 40],
|
|
65
|
-
minZoom,
|
|
66
|
-
maxZoom,
|
|
67
|
-
tileSize: 256,
|
|
68
|
-
// TOOD - why is this needed?
|
|
69
|
-
zoomOffset: devicePixelRatio === 1 ? -1 : 0,
|
|
70
|
-
renderSubLayers: renderSubLayers as any,
|
|
71
|
-
|
|
72
|
-
// Custom prop
|
|
73
|
-
tileSource,
|
|
74
|
-
showTileBorders
|
|
75
|
-
})
|
|
76
|
-
];
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
function renderSubLayers(
|
|
81
|
-
props: TileSourceLayerProps & {tile: {index; bbox: {west; south; east; north}}}
|
|
82
|
-
) {
|
|
83
|
-
const {
|
|
84
|
-
tileSource,
|
|
85
|
-
showTileBorders,
|
|
86
|
-
minZoom,
|
|
87
|
-
maxZoom,
|
|
88
|
-
tile: {
|
|
89
|
-
index: {z: zoom},
|
|
90
|
-
bbox: {west, south, east, north}
|
|
91
|
-
}
|
|
92
|
-
} = props as any;
|
|
93
|
-
|
|
94
|
-
const layers: Layer[] = [];
|
|
95
|
-
|
|
96
|
-
const borderColor = zoom <= minZoom || zoom >= maxZoom ? [255, 0, 0, 255] : [0, 0, 255, 255];
|
|
97
|
-
|
|
98
|
-
switch (tileSource.mimeType) {
|
|
99
|
-
case 'application/vnd.mapbox-vector-tile':
|
|
100
|
-
layers.push(
|
|
101
|
-
new GeoJsonLayer({
|
|
102
|
-
id: `${props.id}-geojson`,
|
|
103
|
-
data: props.data as any,
|
|
104
|
-
pickable: true,
|
|
105
|
-
getFillColor: [0, 190, 80, 255],
|
|
106
|
-
lineWidthScale: 500,
|
|
107
|
-
lineWidthMinPixels: 0.5
|
|
108
|
-
})
|
|
109
|
-
);
|
|
110
|
-
break;
|
|
111
|
-
|
|
112
|
-
case 'image/png':
|
|
113
|
-
case 'image/jpeg':
|
|
114
|
-
case 'image/webp':
|
|
115
|
-
case 'image/avif':
|
|
116
|
-
layers.push(
|
|
117
|
-
new BitmapLayer(
|
|
118
|
-
props as any,
|
|
119
|
-
{
|
|
120
|
-
data: null,
|
|
121
|
-
image: props.data,
|
|
122
|
-
bounds: [west, south, east, north],
|
|
123
|
-
pickable: true
|
|
124
|
-
} as any
|
|
125
|
-
)
|
|
126
|
-
);
|
|
127
|
-
break;
|
|
128
|
-
|
|
129
|
-
default:
|
|
130
|
-
// eslint-disable-next-line no-console
|
|
131
|
-
console.error('Unknown tile mimeType', tileSource?.mimeType);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// Debug tile borders
|
|
135
|
-
if (showTileBorders) {
|
|
136
|
-
layers.push(
|
|
137
|
-
new PathLayer({
|
|
138
|
-
id: `${props.id}-border`,
|
|
139
|
-
data: [
|
|
140
|
-
[
|
|
141
|
-
[west, north],
|
|
142
|
-
[west, south],
|
|
143
|
-
[east, south],
|
|
144
|
-
[east, north],
|
|
145
|
-
[west, north]
|
|
146
|
-
]
|
|
147
|
-
],
|
|
148
|
-
getPath: (d) => d,
|
|
149
|
-
getColor: borderColor as any,
|
|
150
|
-
widthMinPixels: 4
|
|
151
|
-
})
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
return layers;
|
|
156
|
-
}
|