@gisatcz/deckgl-geolib 1.11.0-dev.0 → 1.11.0-dev.10
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/cjs/index.js +163 -56
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.min.js +3 -3
- package/dist/cjs/index.min.js.map +1 -1
- package/dist/cjs/types/cogbitmaplayer/CogBitmapLayer.d.ts +77 -32
- package/dist/esm/index.js +163 -56
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +4 -4
- package/dist/esm/index.min.js.map +1 -1
- package/dist/esm/types/cogbitmaplayer/CogBitmapLayer.d.ts +77 -32
- package/package.json +11 -12
- package/src/cogbitmaplayer/CogBitmapLayer.ts +294 -77
- package/src/cogtiles/cogtiles.ts +5 -1
- package/src/geoimage/geoimage.ts +3 -4
|
@@ -1,42 +1,87 @@
|
|
|
1
|
-
import { CompositeLayer } from '@deck.gl/core';
|
|
2
|
-
import { TileLayer } from '@deck.gl/geo-layers';
|
|
1
|
+
import { CompositeLayer, CompositeLayerProps, DefaultProps, TextureSource, UpdateParameters } from '@deck.gl/core';
|
|
2
|
+
import { _Tile2DHeader as Tile2DHeader, _TileLoadProps as TileLoadProps, GeoBoundingBox, NonGeoBoundingBox, TileLayer, TileLayerProps } from '@deck.gl/geo-layers';
|
|
3
3
|
import { BitmapLayer } from '@deck.gl/layers';
|
|
4
|
-
import {
|
|
5
|
-
import CogTiles from '../cogtiles/cogtiles.ts';
|
|
4
|
+
import type { MeshAttributes } from '@loaders.gl/schema';
|
|
6
5
|
import { GeoImageOptions } from '../geoimage/geoimage.ts';
|
|
7
|
-
|
|
6
|
+
export type TileBoundingBox = NonGeoBoundingBox | GeoBoundingBox;
|
|
7
|
+
export type ZRange = [minZ: number, maxZ: number];
|
|
8
|
+
export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
|
|
9
|
+
export type URLTemplate = string | string[] | null;
|
|
10
|
+
export declare const urlType: {
|
|
11
|
+
type: "object";
|
|
12
|
+
value: URLTemplate;
|
|
13
|
+
validate: (value: any, propType: any) => boolean;
|
|
14
|
+
equal: (value1: any, value2: any) => boolean;
|
|
15
|
+
};
|
|
16
|
+
export type ClampToTerrainOptions = {
|
|
17
|
+
terrainDrawMode?: string;
|
|
18
|
+
};
|
|
19
|
+
type MeshAndTexture = [MeshAttributes | null, TextureSource | null];
|
|
20
|
+
/** Props added by the CogBitmapLayer */
|
|
21
|
+
type _CogBitmapLayerProps = {
|
|
22
|
+
/** Image url that encodes raster data. * */
|
|
23
|
+
rasterData: URLTemplate;
|
|
24
|
+
/** Bounding box of the bitmap image, [minX, minY, maxX, maxY] in world coordinates. * */
|
|
25
|
+
bounds: Bounds | null;
|
|
26
|
+
/** Weather visualise the entire image with specified opacity (0-1) * */
|
|
27
|
+
opacity?: number;
|
|
28
|
+
/** Whether the rendered texture should be clamped to terrain * */
|
|
29
|
+
clampToTerrain?: ClampToTerrainOptions | boolean;
|
|
30
|
+
/**
|
|
31
|
+
* TODO
|
|
32
|
+
*/
|
|
33
|
+
cogBitmapOptions: GeoImageOptions;
|
|
34
|
+
isTiled: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* @deprecated Use `loadOptions.terrain.workerUrl` instead
|
|
37
|
+
*/
|
|
38
|
+
workerUrl?: string;
|
|
39
|
+
};
|
|
40
|
+
/** All properties supported by CogBitmapLayer */
|
|
41
|
+
export type CogBitmapLayerProps = _CogBitmapLayerProps & TileLayerProps<MeshAndTexture> & CompositeLayerProps;
|
|
42
|
+
/** Render bitmap texture from cog raster images. */
|
|
43
|
+
export default class CogBitmapLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<ExtraPropsT & Required<_CogBitmapLayerProps & Required<TileLayerProps<MeshAndTexture>>>> {
|
|
44
|
+
static defaultProps: DefaultProps<CogBitmapLayerProps>;
|
|
8
45
|
static layerName: string;
|
|
9
|
-
id: string;
|
|
10
|
-
url: string;
|
|
11
|
-
static displayName: string;
|
|
12
|
-
cogTiles: CogTiles;
|
|
13
|
-
tileSize: number;
|
|
14
46
|
minZoom: number;
|
|
15
47
|
maxZoom: number;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
getTileData: (tileData: any) => Promise<string>;
|
|
48
|
+
state: {
|
|
49
|
+
initialized: boolean;
|
|
50
|
+
isTiled?: boolean;
|
|
51
|
+
terrain?: MeshAttributes;
|
|
52
|
+
zRange?: ZRange | null;
|
|
53
|
+
bitmapCogTiles: any;
|
|
23
54
|
minZoom: number;
|
|
24
55
|
maxZoom: number;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
56
|
+
};
|
|
57
|
+
initializeState(context: any): Promise<void>;
|
|
58
|
+
init(): Promise<void>;
|
|
59
|
+
updateState({ props, oldProps }: UpdateParameters<this>): void;
|
|
60
|
+
getTiledBitmapData(tile: TileLoadProps): Promise<TextureSource>;
|
|
61
|
+
renderSubLayers(props: TileLayerProps<TextureSource> & {
|
|
62
|
+
id: string;
|
|
63
|
+
data: TextureSource;
|
|
64
|
+
tile: Tile2DHeader<TextureSource>;
|
|
65
|
+
}): BitmapLayer<{}>;
|
|
66
|
+
renderLayers(): TileLayer<any, {
|
|
67
|
+
getTileData: any;
|
|
68
|
+
renderSubLayers: any;
|
|
69
|
+
updateTriggers: {
|
|
70
|
+
getTileData: {
|
|
71
|
+
clampToTerrain: boolean | ClampToTerrainOptions;
|
|
37
72
|
};
|
|
38
|
-
|
|
39
|
-
|
|
73
|
+
};
|
|
74
|
+
extent: any;
|
|
75
|
+
tileSize: any;
|
|
76
|
+
minZoom: number;
|
|
77
|
+
maxZoom: number;
|
|
78
|
+
maxRequests: number;
|
|
79
|
+
onTileLoad: (tile: Tile2DHeader<MeshAndTexture>) => void;
|
|
80
|
+
onTileUnload: (tile: Tile2DHeader<MeshAndTexture>) => void;
|
|
81
|
+
onTileError: (err: any, tile?: any) => void;
|
|
82
|
+
maxCacheSize: number;
|
|
83
|
+
maxCacheByteSize: number;
|
|
84
|
+
refinementStrategy: import("node_modules/@deck.gl/geo-layers/dist/tileset-2d/tileset-2d.js").RefinementStrategy;
|
|
40
85
|
}>;
|
|
41
86
|
}
|
|
42
|
-
export
|
|
87
|
+
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -15075,7 +15075,9 @@ class GeoImage {
|
|
|
15075
15075
|
}) : undefined;
|
|
15076
15076
|
for (let i = 0; i < arrayLength; i += 4) {
|
|
15077
15077
|
let pixelColor = options.nullColor;
|
|
15078
|
-
|
|
15078
|
+
// FIXME
|
|
15079
|
+
// eslint-disable-next-line max-len
|
|
15080
|
+
if ((!Number.isNaN(dataArray[pixel])) && (options.noDataValue === undefined || dataArray[pixel] !== options.noDataValue)) {
|
|
15079
15081
|
if ((options.clipLow != null && dataArray[pixel] <= options.clipLow)
|
|
15080
15082
|
|| (options.clipHigh != null && dataArray[pixel] >= options.clipHigh)) {
|
|
15081
15083
|
pixelColor = options.clippedColor;
|
|
@@ -15111,10 +15113,6 @@ class GeoImage {
|
|
|
15111
15113
|
pixelColor[3] = this.scale(dataArray[pixel], options.colorScaleValueRange[0], options.colorScaleValueRange.slice(-1)[0], 0, 255);
|
|
15112
15114
|
}
|
|
15113
15115
|
}
|
|
15114
|
-
// If pixel has null value
|
|
15115
|
-
}
|
|
15116
|
-
else if (Number.isNaN(dataArray[pixel])) {
|
|
15117
|
-
pixelColor = [0, 0, 0, 0];
|
|
15118
15116
|
}
|
|
15119
15117
|
// FIXME
|
|
15120
15118
|
// eslint-disable-next-line
|
|
@@ -15216,6 +15214,9 @@ function getDelatinTileMesh(meshMaxError, width, height, terrain) {
|
|
|
15216
15214
|
|
|
15217
15215
|
const EARTH_CIRCUMFERENCE = 40075000.0;
|
|
15218
15216
|
const EARTH_HALF_CIRCUMFERENCE = 20037500.0;
|
|
15217
|
+
const CogTilesGeoImageOptionsDefaults = {
|
|
15218
|
+
blurredTexture: true,
|
|
15219
|
+
};
|
|
15219
15220
|
class CogTiles {
|
|
15220
15221
|
constructor(options) {
|
|
15221
15222
|
this.zoomRange = [0, 0];
|
|
@@ -15224,7 +15225,7 @@ class CogTiles {
|
|
|
15224
15225
|
this.loaded = false;
|
|
15225
15226
|
this.geo = new GeoImage();
|
|
15226
15227
|
this.lzw = new LZWDecoder$1();
|
|
15227
|
-
this.options = options;
|
|
15228
|
+
this.options = Object.assign(Object.assign({}, CogTilesGeoImageOptionsDefaults), options);
|
|
15228
15229
|
}
|
|
15229
15230
|
initializeCog(url) {
|
|
15230
15231
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -15469,68 +15470,174 @@ class CogTiles {
|
|
|
15469
15470
|
}
|
|
15470
15471
|
}
|
|
15471
15472
|
|
|
15472
|
-
|
|
15473
|
-
|
|
15473
|
+
const urlType$1 = {
|
|
15474
|
+
type: 'object',
|
|
15475
|
+
value: null,
|
|
15476
|
+
validate: (value, propType) => (propType.optional && value === null)
|
|
15477
|
+
|| typeof value === 'string'
|
|
15478
|
+
|| (Array.isArray(value) && value.every((url) => typeof url === 'string')),
|
|
15479
|
+
equal: (value1, value2) => {
|
|
15480
|
+
if (value1 === value2) {
|
|
15481
|
+
return true;
|
|
15482
|
+
}
|
|
15483
|
+
if (!Array.isArray(value1) || !Array.isArray(value2)) {
|
|
15484
|
+
return false;
|
|
15485
|
+
}
|
|
15486
|
+
const len = value1.length;
|
|
15487
|
+
if (len !== value2.length) {
|
|
15488
|
+
return false;
|
|
15489
|
+
}
|
|
15490
|
+
for (let i = 0; i < len; i++) {
|
|
15491
|
+
if (value1[i] !== value2[i]) {
|
|
15492
|
+
return false;
|
|
15493
|
+
}
|
|
15494
|
+
}
|
|
15495
|
+
return true;
|
|
15496
|
+
},
|
|
15497
|
+
};
|
|
15498
|
+
const defaultProps$1 = Object.assign(Object.assign({}, TileLayer.defaultProps), {
|
|
15499
|
+
// Image url that encodes height data
|
|
15500
|
+
// elevationData: urlType,
|
|
15501
|
+
// Image url to use as texture
|
|
15502
|
+
// texture: { ...urlType, optional: true },
|
|
15503
|
+
// Martini error tolerance in meters, smaller number -> more detailed mesh
|
|
15504
|
+
// meshMaxError: { type: 'number', value: 4.0 },
|
|
15505
|
+
// Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates
|
|
15506
|
+
bounds: {
|
|
15507
|
+
type: 'array', value: null, optional: true, compare: true,
|
|
15508
|
+
}, rasterData: urlType$1,
|
|
15509
|
+
// Color to use if texture is unavailable
|
|
15510
|
+
// color: { type: 'color', value: [255, 255, 255] },
|
|
15511
|
+
blurredTexture: true, opacity: 1, clampToTerrain: false,
|
|
15512
|
+
// Object to decode height data, from (r, g, b) to height in meters
|
|
15513
|
+
// elevationDecoder: {
|
|
15514
|
+
// type: 'object',
|
|
15515
|
+
// value: {
|
|
15516
|
+
// rScaler: 1,
|
|
15517
|
+
// gScaler: 0,
|
|
15518
|
+
// bScaler: 0,
|
|
15519
|
+
// offset: 0,
|
|
15520
|
+
// },
|
|
15521
|
+
// },
|
|
15522
|
+
// Supply url to local terrain worker bundle. Only required if running offline and cannot access CDN.
|
|
15523
|
+
workerUrl: '' });
|
|
15524
|
+
/** Render bitmap texture from cog raster images. */
|
|
15474
15525
|
class CogBitmapLayer extends CompositeLayer {
|
|
15475
|
-
|
|
15476
|
-
|
|
15477
|
-
|
|
15478
|
-
|
|
15479
|
-
|
|
15480
|
-
|
|
15481
|
-
|
|
15482
|
-
|
|
15483
|
-
|
|
15484
|
-
|
|
15485
|
-
|
|
15486
|
-
|
|
15487
|
-
// setTimeout(() => {
|
|
15488
|
-
// this.init(url);
|
|
15489
|
-
// }, 500);
|
|
15490
|
-
}
|
|
15491
|
-
initializeState() {
|
|
15492
|
-
this.state = {
|
|
15493
|
-
initialized: false,
|
|
15494
|
-
};
|
|
15495
|
-
this.init(this.url);
|
|
15496
|
-
}
|
|
15497
|
-
init(url) {
|
|
15526
|
+
// private _isLoaded: boolean;
|
|
15527
|
+
// id = '';
|
|
15528
|
+
// url: string;
|
|
15529
|
+
// static displayName: string;
|
|
15530
|
+
// cogTiles: CogTiles;
|
|
15531
|
+
//
|
|
15532
|
+
// tileSize: number;
|
|
15533
|
+
//
|
|
15534
|
+
initializeState(context) {
|
|
15535
|
+
const _super = Object.create(null, {
|
|
15536
|
+
initializeState: { get: () => super.initializeState }
|
|
15537
|
+
});
|
|
15498
15538
|
return __awaiter(this, void 0, void 0, function* () {
|
|
15499
|
-
|
|
15500
|
-
this.setState({
|
|
15501
|
-
|
|
15502
|
-
|
|
15503
|
-
|
|
15539
|
+
_super.initializeState.call(this, context);
|
|
15540
|
+
this.setState({
|
|
15541
|
+
bitmapCogTiles: new CogTiles(this.props.cogBitmapOptions),
|
|
15542
|
+
initialized: false,
|
|
15543
|
+
});
|
|
15544
|
+
yield this.init();
|
|
15545
|
+
});
|
|
15546
|
+
}
|
|
15547
|
+
init() {
|
|
15548
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
15549
|
+
const cog = yield this.state.bitmapCogTiles.initializeCog(this.props.rasterData);
|
|
15550
|
+
const zoomRange = this.state.bitmapCogTiles.getZoomRange(cog);
|
|
15551
|
+
const [minZoom, maxZoom] = zoomRange;
|
|
15552
|
+
this.setState({ initialized: true, minZoom, maxZoom });
|
|
15553
|
+
});
|
|
15554
|
+
}
|
|
15555
|
+
updateState({ props, oldProps }) {
|
|
15556
|
+
const rasterDataChanged = props.rasterData !== oldProps.rasterData;
|
|
15557
|
+
if (rasterDataChanged) {
|
|
15558
|
+
const { rasterData } = props;
|
|
15559
|
+
const isTiled = rasterData
|
|
15560
|
+
&& ((Array.isArray(rasterData)
|
|
15561
|
+
|| (rasterData.includes('{x}') && rasterData.includes('{y}'))) || this.props.isTiled);
|
|
15562
|
+
this.setState({ isTiled });
|
|
15563
|
+
}
|
|
15564
|
+
// Reloading for single terrain mesh
|
|
15565
|
+
const shouldReload = rasterDataChanged
|
|
15566
|
+
// || props.meshMaxError !== oldProps.meshMaxError
|
|
15567
|
+
// || props.elevationDecoder !== oldProps.elevationDecoder
|
|
15568
|
+
|| props.bounds !== oldProps.bounds;
|
|
15569
|
+
if (!this.state.isTiled && shouldReload) ;
|
|
15570
|
+
// TODO - remove in v9
|
|
15571
|
+
// @ts-ignore
|
|
15572
|
+
if (props.workerUrl) {
|
|
15573
|
+
log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
|
|
15574
|
+
}
|
|
15575
|
+
}
|
|
15576
|
+
getTiledBitmapData(tile) {
|
|
15577
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
15578
|
+
// TODO - pass signal to getTile
|
|
15579
|
+
// abort request if signal is aborted
|
|
15580
|
+
const tileData = yield this.state.bitmapCogTiles.getTile(tile.index.x, tile.index.y, tile.index.z);
|
|
15581
|
+
return tileData;
|
|
15504
15582
|
});
|
|
15505
15583
|
}
|
|
15584
|
+
renderSubLayers(props) {
|
|
15585
|
+
const SubLayerClass = this.getSubLayerClass('image', BitmapLayer);
|
|
15586
|
+
const { blurredTexture } = this.state.bitmapCogTiles.options;
|
|
15587
|
+
const { opacity, clampToTerrain } = this.props;
|
|
15588
|
+
const { data } = props;
|
|
15589
|
+
if (!data) {
|
|
15590
|
+
return null;
|
|
15591
|
+
}
|
|
15592
|
+
const { bbox: { west, south, east, north, }, } = props.tile;
|
|
15593
|
+
return new SubLayerClass(Object.assign(Object.assign({}, props), { tileSize: this.state.bitmapCogTiles.tileSize }), Object.assign({ data: null, image: data, _instanced: false, bounds: [west, south, east, north], opacity, textureParameters: {
|
|
15594
|
+
minFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15595
|
+
magFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15596
|
+
},
|
|
15597
|
+
// TODO check if works!!!
|
|
15598
|
+
extensions: clampToTerrain ? [new _TerrainExtension()] : [] }, ((clampToTerrain === null || clampToTerrain === void 0 ? void 0 : clampToTerrain.terrainDrawMode)
|
|
15599
|
+
? { terrainDrawMode: clampToTerrain.terrainDrawMode }
|
|
15600
|
+
: {})));
|
|
15601
|
+
}
|
|
15506
15602
|
renderLayers() {
|
|
15507
|
-
|
|
15508
|
-
|
|
15509
|
-
|
|
15510
|
-
|
|
15511
|
-
|
|
15512
|
-
|
|
15513
|
-
|
|
15514
|
-
|
|
15515
|
-
|
|
15516
|
-
renderSubLayers: (
|
|
15517
|
-
|
|
15518
|
-
|
|
15519
|
-
|
|
15520
|
-
|
|
15521
|
-
|
|
15522
|
-
|
|
15523
|
-
|
|
15524
|
-
|
|
15603
|
+
const { rasterData, blurredTexture, opacity, clampToTerrain,
|
|
15604
|
+
// tileSize,
|
|
15605
|
+
maxRequests, onTileLoad, onTileUnload, onTileError, maxCacheSize, maxCacheByteSize, refinementStrategy, cogBitmapOptions, } = this.props;
|
|
15606
|
+
if (this.state.isTiled && this.state.initialized) {
|
|
15607
|
+
const { tileSize } = this.state.bitmapCogTiles;
|
|
15608
|
+
return new TileLayer(this.getSubLayerProps({
|
|
15609
|
+
id: 'tiles',
|
|
15610
|
+
}), {
|
|
15611
|
+
getTileData: this.getTiledBitmapData.bind(this),
|
|
15612
|
+
renderSubLayers: this.renderSubLayers.bind(this),
|
|
15613
|
+
updateTriggers: {
|
|
15614
|
+
getTileData: {
|
|
15615
|
+
// rasterData: urlTemplateToUpdateTrigger(rasterData),
|
|
15616
|
+
// blurredTexture,
|
|
15617
|
+
// opacity,
|
|
15618
|
+
// cogBitmapOptions,
|
|
15619
|
+
clampToTerrain,
|
|
15620
|
+
},
|
|
15525
15621
|
},
|
|
15622
|
+
extent: this.state.bitmapCogTiles.cog
|
|
15623
|
+
? this.state.bitmapCogTiles.getBoundsAsLatLon(this.state.bitmapCogTiles.cog) : null,
|
|
15624
|
+
tileSize,
|
|
15625
|
+
minZoom: this.state.minZoom,
|
|
15626
|
+
maxZoom: this.state.maxZoom,
|
|
15627
|
+
maxRequests,
|
|
15628
|
+
onTileLoad,
|
|
15629
|
+
onTileUnload,
|
|
15630
|
+
onTileError,
|
|
15631
|
+
maxCacheSize,
|
|
15632
|
+
maxCacheByteSize,
|
|
15633
|
+
refinementStrategy,
|
|
15526
15634
|
});
|
|
15527
|
-
return layer;
|
|
15528
15635
|
}
|
|
15529
15636
|
return null;
|
|
15530
15637
|
}
|
|
15531
15638
|
}
|
|
15639
|
+
CogBitmapLayer.defaultProps = defaultProps$1;
|
|
15532
15640
|
CogBitmapLayer.layerName = 'CogBitmapLayer';
|
|
15533
|
-
CogBitmapLayer.displayName = 'CogBitmapLayer';
|
|
15534
15641
|
|
|
15535
15642
|
// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
|
|
15536
15643
|
//
|