@gisatcz/deckgl-geolib 1.11.0-dev.0 → 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 +286 -56
- 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 +286 -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 +56 -37
- package/package.json +1 -1
- package/src/cogbitmaplayer/CogBitmapLayer.ts +435 -79
- package/src/geoimage/geoimage.ts +3 -4
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');
|
|
@@ -15077,7 +15076,9 @@ class GeoImage {
|
|
|
15077
15076
|
}) : undefined;
|
|
15078
15077
|
for (let i = 0; i < arrayLength; i += 4) {
|
|
15079
15078
|
let pixelColor = options.nullColor;
|
|
15080
|
-
|
|
15079
|
+
// FIXME
|
|
15080
|
+
// eslint-disable-next-line max-len
|
|
15081
|
+
if ((!Number.isNaN(dataArray[pixel])) && (options.noDataValue === undefined || dataArray[pixel] !== options.noDataValue)) {
|
|
15081
15082
|
if ((options.clipLow != null && dataArray[pixel] <= options.clipLow)
|
|
15082
15083
|
|| (options.clipHigh != null && dataArray[pixel] >= options.clipHigh)) {
|
|
15083
15084
|
pixelColor = options.clippedColor;
|
|
@@ -15113,10 +15114,6 @@ class GeoImage {
|
|
|
15113
15114
|
pixelColor[3] = this.scale(dataArray[pixel], options.colorScaleValueRange[0], options.colorScaleValueRange.slice(-1)[0], 0, 255);
|
|
15114
15115
|
}
|
|
15115
15116
|
}
|
|
15116
|
-
// If pixel has null value
|
|
15117
|
-
}
|
|
15118
|
-
else if (Number.isNaN(dataArray[pixel])) {
|
|
15119
|
-
pixelColor = [0, 0, 0, 0];
|
|
15120
15117
|
}
|
|
15121
15118
|
// FIXME
|
|
15122
15119
|
// eslint-disable-next-line
|
|
@@ -15471,68 +15468,301 @@ class CogTiles {
|
|
|
15471
15468
|
}
|
|
15472
15469
|
}
|
|
15473
15470
|
|
|
15474
|
-
|
|
15475
|
-
|
|
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. */
|
|
15476
15531
|
class CogBitmapLayer extends core.CompositeLayer {
|
|
15477
|
-
|
|
15478
|
-
|
|
15479
|
-
|
|
15480
|
-
|
|
15481
|
-
|
|
15482
|
-
|
|
15483
|
-
|
|
15484
|
-
|
|
15485
|
-
|
|
15486
|
-
|
|
15487
|
-
|
|
15488
|
-
|
|
15489
|
-
|
|
15490
|
-
// this.init(url);
|
|
15491
|
-
// }, 500);
|
|
15492
|
-
}
|
|
15493
|
-
initializeState() {
|
|
15494
|
-
this.state = {
|
|
15495
|
-
initialized: false,
|
|
15496
|
-
};
|
|
15497
|
-
this.init(this.url);
|
|
15498
|
-
}
|
|
15499
|
-
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
|
+
});
|
|
15500
15545
|
return __awaiter(this, void 0, void 0, function* () {
|
|
15501
|
-
|
|
15502
|
-
this.setState({
|
|
15503
|
-
|
|
15504
|
-
|
|
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);
|
|
15505
15559
|
[this.minZoom, this.maxZoom] = zoomRange;
|
|
15560
|
+
console.log(cog);
|
|
15561
|
+
this.setState({ initialized: true });
|
|
15506
15562
|
});
|
|
15507
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
|
+
//
|
|
15508
15698
|
renderLayers() {
|
|
15509
|
-
|
|
15510
|
-
|
|
15511
|
-
|
|
15512
|
-
|
|
15513
|
-
|
|
15514
|
-
|
|
15515
|
-
|
|
15516
|
-
|
|
15517
|
-
|
|
15518
|
-
|
|
15519
|
-
|
|
15520
|
-
|
|
15521
|
-
|
|
15522
|
-
|
|
15523
|
-
|
|
15524
|
-
|
|
15525
|
-
|
|
15526
|
-
|
|
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
|
+
},
|
|
15527
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,
|
|
15528
15760
|
});
|
|
15529
|
-
return layer;
|
|
15530
15761
|
}
|
|
15531
|
-
return null;
|
|
15532
15762
|
}
|
|
15533
15763
|
}
|
|
15764
|
+
CogBitmapLayer.defaultProps = defaultProps$1;
|
|
15534
15765
|
CogBitmapLayer.layerName = 'CogBitmapLayer';
|
|
15535
|
-
CogBitmapLayer.displayName = 'CogBitmapLayer';
|
|
15536
15766
|
|
|
15537
15767
|
// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
|
|
15538
15768
|
//
|