@gisatcz/deckgl-geolib 1.11.0-dev.1 → 1.11.0-dev.2
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 +283 -51
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/index.min.js +4 -4
- package/dist/cjs/index.min.js.map +1 -1
- package/dist/cjs/types/cogbitmaplayer/CogBitmapLayer.d.ts +56 -37
- package/dist/esm/index.js +283 -51
- 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 +56 -37
- package/package.json +1 -1
- package/src/cogbitmaplayer/CogBitmapLayer.ts +435 -79
package/dist/cjs/index.js
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
var core = require('@deck.gl/core');
|
|
4
4
|
var geoLayers = require('@deck.gl/geo-layers');
|
|
5
5
|
var layers = require('@deck.gl/layers');
|
|
6
|
-
var extensions = require('@deck.gl/extensions');
|
|
7
6
|
var chroma = require('chroma-js');
|
|
8
7
|
var schema = require('@loaders.gl/schema');
|
|
9
8
|
var loaderUtils = require('@loaders.gl/loader-utils');
|
|
@@ -15469,68 +15468,301 @@ class CogTiles {
|
|
|
15469
15468
|
}
|
|
15470
15469
|
}
|
|
15471
15470
|
|
|
15472
|
-
|
|
15473
|
-
|
|
15471
|
+
const urlType$1 = {
|
|
15472
|
+
type: 'object',
|
|
15473
|
+
value: null,
|
|
15474
|
+
validate: (value, propType) => (propType.optional && value === null)
|
|
15475
|
+
|| typeof value === 'string'
|
|
15476
|
+
|| (Array.isArray(value) && value.every((url) => typeof url === 'string')),
|
|
15477
|
+
equal: (value1, value2) => {
|
|
15478
|
+
if (value1 === value2) {
|
|
15479
|
+
return true;
|
|
15480
|
+
}
|
|
15481
|
+
if (!Array.isArray(value1) || !Array.isArray(value2)) {
|
|
15482
|
+
return false;
|
|
15483
|
+
}
|
|
15484
|
+
const len = value1.length;
|
|
15485
|
+
if (len !== value2.length) {
|
|
15486
|
+
return false;
|
|
15487
|
+
}
|
|
15488
|
+
for (let i = 0; i < len; i++) {
|
|
15489
|
+
if (value1[i] !== value2[i]) {
|
|
15490
|
+
return false;
|
|
15491
|
+
}
|
|
15492
|
+
}
|
|
15493
|
+
return true;
|
|
15494
|
+
},
|
|
15495
|
+
};
|
|
15496
|
+
const DUMMY_DATA$1 = [1];
|
|
15497
|
+
const defaultProps$1 = Object.assign(Object.assign({}, geoLayers.TileLayer.defaultProps), {
|
|
15498
|
+
// Image url that encodes height data
|
|
15499
|
+
// elevationData: urlType,
|
|
15500
|
+
// Image url to use as texture
|
|
15501
|
+
// texture: { ...urlType, optional: true },
|
|
15502
|
+
// Martini error tolerance in meters, smaller number -> more detailed mesh
|
|
15503
|
+
// meshMaxError: { type: 'number', value: 4.0 },
|
|
15504
|
+
// Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates
|
|
15505
|
+
bounds: {
|
|
15506
|
+
type: 'array', value: null, optional: true, compare: true,
|
|
15507
|
+
}, rasterData: urlType$1,
|
|
15508
|
+
// Color to use if texture is unavailable
|
|
15509
|
+
// color: { type: 'color', value: [255, 255, 255] },
|
|
15510
|
+
blurredTexture: true, clampToTerrain: true,
|
|
15511
|
+
// Object to decode height data, from (r, g, b) to height in meters
|
|
15512
|
+
// elevationDecoder: {
|
|
15513
|
+
// type: 'object',
|
|
15514
|
+
// value: {
|
|
15515
|
+
// rScaler: 1,
|
|
15516
|
+
// gScaler: 0,
|
|
15517
|
+
// bScaler: 0,
|
|
15518
|
+
// offset: 0,
|
|
15519
|
+
// },
|
|
15520
|
+
// },
|
|
15521
|
+
// Supply url to local terrain worker bundle. Only required if running offline and cannot access CDN.
|
|
15522
|
+
workerUrl: '' });
|
|
15523
|
+
// Turns array of templates into a single string to work around shallow change
|
|
15524
|
+
function urlTemplateToUpdateTrigger$1(template) {
|
|
15525
|
+
if (Array.isArray(template)) {
|
|
15526
|
+
return template.join(';');
|
|
15527
|
+
}
|
|
15528
|
+
return template || '';
|
|
15529
|
+
}
|
|
15530
|
+
/** Render bitmap texture from cog raster images. */
|
|
15474
15531
|
class CogBitmapLayer extends core.CompositeLayer {
|
|
15475
|
-
|
|
15476
|
-
|
|
15477
|
-
|
|
15478
|
-
|
|
15479
|
-
|
|
15480
|
-
|
|
15481
|
-
|
|
15482
|
-
|
|
15483
|
-
|
|
15484
|
-
|
|
15485
|
-
|
|
15486
|
-
|
|
15487
|
-
|
|
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) {
|
|
15532
|
+
// private _isLoaded: boolean;
|
|
15533
|
+
// id = '';
|
|
15534
|
+
// url: string;
|
|
15535
|
+
// static displayName: string;
|
|
15536
|
+
// cogTiles: CogTiles;
|
|
15537
|
+
//
|
|
15538
|
+
// tileSize: number;
|
|
15539
|
+
//
|
|
15540
|
+
// blurredTexture: boolean;
|
|
15541
|
+
initializeState(context) {
|
|
15542
|
+
const _super = Object.create(null, {
|
|
15543
|
+
initializeState: { get: () => super.initializeState }
|
|
15544
|
+
});
|
|
15498
15545
|
return __awaiter(this, void 0, void 0, function* () {
|
|
15499
|
-
|
|
15500
|
-
this.setState({
|
|
15501
|
-
|
|
15502
|
-
|
|
15546
|
+
_super.initializeState.call(this, context);
|
|
15547
|
+
this.setState({
|
|
15548
|
+
bitmapCogTiles: new CogTiles(this.props.cogBitmapOptions),
|
|
15549
|
+
initialized: false,
|
|
15550
|
+
});
|
|
15551
|
+
yield this.init(this.rasterUrl);
|
|
15552
|
+
});
|
|
15553
|
+
}
|
|
15554
|
+
init(rasterUrl) {
|
|
15555
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
15556
|
+
const cog = yield this.state.bitmapCogTiles.initializeCog(this.props.rasterData);
|
|
15557
|
+
// this.tileSize = this.terrainCogTiles.getTileSize(cog);
|
|
15558
|
+
const zoomRange = this.state.bitmapCogTiles.getZoomRange(cog);
|
|
15503
15559
|
[this.minZoom, this.maxZoom] = zoomRange;
|
|
15560
|
+
console.log(cog);
|
|
15561
|
+
this.setState({ initialized: true });
|
|
15504
15562
|
});
|
|
15505
15563
|
}
|
|
15564
|
+
updateState({ props, oldProps }) {
|
|
15565
|
+
const rasterDataChanged = props.rasterData !== oldProps.rasterData;
|
|
15566
|
+
if (rasterDataChanged) {
|
|
15567
|
+
const { rasterData } = props;
|
|
15568
|
+
const isTiled = rasterData
|
|
15569
|
+
&& (Array.isArray(rasterData)
|
|
15570
|
+
|| (rasterData.includes('{x}') && rasterData.includes('{y}'))) || this.props.isTiled;
|
|
15571
|
+
this.setState({ isTiled });
|
|
15572
|
+
}
|
|
15573
|
+
// Reloading for single terrain mesh
|
|
15574
|
+
const shouldReload = rasterDataChanged
|
|
15575
|
+
// || props.meshMaxError !== oldProps.meshMaxError
|
|
15576
|
+
// || props.elevationDecoder !== oldProps.elevationDecoder
|
|
15577
|
+
|| props.bounds !== oldProps.bounds;
|
|
15578
|
+
if (!this.state.isTiled && shouldReload) ;
|
|
15579
|
+
// TODO - remove in v9
|
|
15580
|
+
// @ts-ignore
|
|
15581
|
+
if (props.workerUrl) {
|
|
15582
|
+
core.log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
|
|
15583
|
+
}
|
|
15584
|
+
}
|
|
15585
|
+
getTiledBitmapData(tile) {
|
|
15586
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
15587
|
+
console.log('getTiledBitmapData');
|
|
15588
|
+
this.props;
|
|
15589
|
+
const { viewport } = this.context;
|
|
15590
|
+
let bottomLeft = [0, 0];
|
|
15591
|
+
let topRight = [0, 0];
|
|
15592
|
+
if (viewport.isGeospatial) {
|
|
15593
|
+
const bbox = tile.bbox;
|
|
15594
|
+
bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
|
|
15595
|
+
topRight = viewport.projectFlat([bbox.east, bbox.north]);
|
|
15596
|
+
}
|
|
15597
|
+
else {
|
|
15598
|
+
const bbox = tile.bbox;
|
|
15599
|
+
bottomLeft = [bbox.left, bbox.bottom];
|
|
15600
|
+
topRight = [bbox.right, bbox.top];
|
|
15601
|
+
}
|
|
15602
|
+
const bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
|
|
15603
|
+
// TODO - pass signal to getTile
|
|
15604
|
+
// abort request if signal is aborted
|
|
15605
|
+
const cogBitmap = yield this.state.bitmapCogTiles.getTile(tile.index.x, tile.index.y, tile.index.z, bounds);
|
|
15606
|
+
return Promise.all([cogBitmap]);
|
|
15607
|
+
});
|
|
15608
|
+
}
|
|
15609
|
+
renderSubLayers(props) {
|
|
15610
|
+
console.log('rendering sub layer and consoling props');
|
|
15611
|
+
const SubLayerClass = this.getSubLayerClass('image', layers.BitmapLayer);
|
|
15612
|
+
// const { color } = this.props;
|
|
15613
|
+
console.log(this.props);
|
|
15614
|
+
const { bounds, blurredTexture, clampToTerrain } = this.props;
|
|
15615
|
+
const { data } = props;
|
|
15616
|
+
if (!data) {
|
|
15617
|
+
return null;
|
|
15618
|
+
}
|
|
15619
|
+
// const [raster, texture] = data;
|
|
15620
|
+
const [image] = data;
|
|
15621
|
+
const { bbox: { west, south, east, north, }, } = props.tile;
|
|
15622
|
+
return new SubLayerClass(Object.assign(Object.assign({}, props), { tileSize: 256 }), {
|
|
15623
|
+
data: DUMMY_DATA$1,
|
|
15624
|
+
// data: null,
|
|
15625
|
+
image,
|
|
15626
|
+
// texture,
|
|
15627
|
+
_instanced: false,
|
|
15628
|
+
// coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
15629
|
+
// getPosition: (d) => [0, 0, 0],
|
|
15630
|
+
bounds: [west, south, east, north],
|
|
15631
|
+
// bounds,
|
|
15632
|
+
opacity: 1,
|
|
15633
|
+
textureParameters: {
|
|
15634
|
+
minFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15635
|
+
magFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15636
|
+
},
|
|
15637
|
+
// extensions: this.cogTiles?.options?.clampToTerrain ? [new TerrainExtension()] : [],
|
|
15638
|
+
// ...(this.cogTiles?.options?.clampToTerrain?.terrainDrawMode
|
|
15639
|
+
// ? { terrainDrawMode: this.cogTiles?.options?.clampToTerrain.terrainDrawMode }
|
|
15640
|
+
// : {}),
|
|
15641
|
+
});
|
|
15642
|
+
}
|
|
15643
|
+
// Update zRange of viewport
|
|
15644
|
+
onViewportLoad(tiles) {
|
|
15645
|
+
if (!tiles) {
|
|
15646
|
+
return;
|
|
15647
|
+
}
|
|
15648
|
+
const { zRange } = this.state;
|
|
15649
|
+
const ranges = tiles
|
|
15650
|
+
.map((tile) => tile.content)
|
|
15651
|
+
.filter((x) => x && x[0])
|
|
15652
|
+
.map((arr) => {
|
|
15653
|
+
var _a, _b;
|
|
15654
|
+
// @ts-ignore
|
|
15655
|
+
const bounds = (_b = (_a = arr[0]) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.boundingBox;
|
|
15656
|
+
return bounds === null || bounds === void 0 ? void 0 : bounds.map((bound) => bound[2]);
|
|
15657
|
+
});
|
|
15658
|
+
if (ranges.length === 0) {
|
|
15659
|
+
return;
|
|
15660
|
+
}
|
|
15661
|
+
const minZ = Math.min(...ranges.map((x) => x[0]));
|
|
15662
|
+
const maxZ = Math.max(...ranges.map((x) => x[1]));
|
|
15663
|
+
if (!zRange || minZ < zRange[0] || maxZ > zRange[1]) {
|
|
15664
|
+
this.setState({ zRange: [Number.isFinite(minZ) ? minZ : 0, Number.isFinite(maxZ) ? maxZ : 0] });
|
|
15665
|
+
}
|
|
15666
|
+
}
|
|
15667
|
+
// constructor(id:string, url:string, options:GeoImageOptions) {
|
|
15668
|
+
// super({});
|
|
15669
|
+
// this.id = id;
|
|
15670
|
+
// // this.state = {
|
|
15671
|
+
// // initialized: false,
|
|
15672
|
+
// // };
|
|
15673
|
+
// // this._isLoaded = false;
|
|
15674
|
+
// this.cogTiles = new CogTiles(options);
|
|
15675
|
+
// this.blurredTexture = options.blurredTexture;
|
|
15676
|
+
// this.url = url;
|
|
15677
|
+
// // setTimeout(() => {
|
|
15678
|
+
// // this.init(url);
|
|
15679
|
+
// // }, 500);
|
|
15680
|
+
// }
|
|
15681
|
+
//
|
|
15682
|
+
// initializeState() {
|
|
15683
|
+
// this.state = {
|
|
15684
|
+
// initialized: false,
|
|
15685
|
+
// };
|
|
15686
|
+
//
|
|
15687
|
+
// this.init(this.url);
|
|
15688
|
+
// }
|
|
15689
|
+
//
|
|
15690
|
+
// async init(url:string) {
|
|
15691
|
+
// const cog = await this.cogTiles.initializeCog(url);
|
|
15692
|
+
// this.setState({ initialized: true });
|
|
15693
|
+
// this.tileSize = this.cogTiles.getTileSize(cog);
|
|
15694
|
+
// const zoomRange = this.cogTiles.getZoomRange(cog);
|
|
15695
|
+
// [this.minZoom, this.maxZoom] = zoomRange;
|
|
15696
|
+
// }
|
|
15697
|
+
//
|
|
15506
15698
|
renderLayers() {
|
|
15507
|
-
|
|
15508
|
-
|
|
15509
|
-
|
|
15510
|
-
|
|
15511
|
-
|
|
15512
|
-
|
|
15513
|
-
|
|
15514
|
-
|
|
15515
|
-
|
|
15516
|
-
|
|
15517
|
-
|
|
15518
|
-
|
|
15519
|
-
|
|
15520
|
-
|
|
15521
|
-
|
|
15522
|
-
|
|
15523
|
-
|
|
15524
|
-
|
|
15699
|
+
const { rasterData, blurredTexture, clampToTerrain, tileSize, maxZoom, minZoom, extent, maxRequests, onTileLoad, onTileUnload, onTileError, maxCacheSize, maxCacheByteSize, refinementStrategy, } = this.props;
|
|
15700
|
+
console.log('render bitmap layers');
|
|
15701
|
+
// console.log(this.state);
|
|
15702
|
+
if (this.state.isTiled && this.state.initialized) {
|
|
15703
|
+
console.log('start rendering tile layer');
|
|
15704
|
+
return new geoLayers.TileLayer(this.getSubLayerProps({
|
|
15705
|
+
id: 'tiles',
|
|
15706
|
+
}), {
|
|
15707
|
+
getTileData: this.getTiledBitmapData.bind(this),
|
|
15708
|
+
// getTileData: (tileData: any) => this.state.bitmapCogTiles.getTile(
|
|
15709
|
+
// tileData.index.x,
|
|
15710
|
+
// tileData.index.y,
|
|
15711
|
+
// tileData.index.z,
|
|
15712
|
+
// ),
|
|
15713
|
+
renderSubLayers: this.renderSubLayers.bind(this),
|
|
15714
|
+
// renderSubLayers: (props: any) => {
|
|
15715
|
+
// const {
|
|
15716
|
+
// bbox: {
|
|
15717
|
+
// west, south, east, north,
|
|
15718
|
+
// },
|
|
15719
|
+
// } = props.tile;
|
|
15720
|
+
// // MK proc to tady funguje jen s 0?
|
|
15721
|
+
// console.log(props.data[0]);
|
|
15722
|
+
// return new BitmapLayer(props, {
|
|
15723
|
+
// data: DUMMY_DATA,
|
|
15724
|
+
// image: props.data[0],
|
|
15725
|
+
// bounds: [west, south, east, north],
|
|
15726
|
+
// opacity: 1, // 0.6
|
|
15727
|
+
// textureParameters: {
|
|
15728
|
+
// minFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15729
|
+
// magFilter: blurredTexture ? 'linear' : 'nearest',
|
|
15730
|
+
// },
|
|
15731
|
+
// // extensions: this.cogTiles?.options?.clampToTerrain ? [new TerrainExtension()] : [],
|
|
15732
|
+
// // ...(this.cogTiles?.options?.clampToTerrain?.terrainDrawMode
|
|
15733
|
+
// // ? { terrainDrawMode: this.cogTiles?.options?.clampToTerrain.terrainDrawMode }
|
|
15734
|
+
// // : {}),
|
|
15735
|
+
// });
|
|
15736
|
+
// },
|
|
15737
|
+
updateTriggers: {
|
|
15738
|
+
getTileData: {
|
|
15739
|
+
rasterData: urlTemplateToUpdateTrigger$1(rasterData),
|
|
15740
|
+
blurredTexture,
|
|
15741
|
+
clampToTerrain,
|
|
15742
|
+
// texture: urlTemplateToUpdateTrigger(texture),
|
|
15743
|
+
// meshMaxError,
|
|
15744
|
+
// elevationDecoder,
|
|
15745
|
+
},
|
|
15525
15746
|
},
|
|
15747
|
+
onViewportLoad: this.onViewportLoad.bind(this),
|
|
15748
|
+
zRange: this.state.zRange || null,
|
|
15749
|
+
tileSize,
|
|
15750
|
+
maxZoom,
|
|
15751
|
+
minZoom,
|
|
15752
|
+
extent,
|
|
15753
|
+
maxRequests,
|
|
15754
|
+
onTileLoad,
|
|
15755
|
+
onTileUnload,
|
|
15756
|
+
onTileError,
|
|
15757
|
+
maxCacheSize,
|
|
15758
|
+
maxCacheByteSize,
|
|
15759
|
+
refinementStrategy,
|
|
15526
15760
|
});
|
|
15527
|
-
return layer;
|
|
15528
15761
|
}
|
|
15529
|
-
return null;
|
|
15530
15762
|
}
|
|
15531
15763
|
}
|
|
15764
|
+
CogBitmapLayer.defaultProps = defaultProps$1;
|
|
15532
15765
|
CogBitmapLayer.layerName = 'CogBitmapLayer';
|
|
15533
|
-
CogBitmapLayer.displayName = 'CogBitmapLayer';
|
|
15534
15766
|
|
|
15535
15767
|
// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
|
|
15536
15768
|
//
|