@gisatcz/deckgl-geolib 1.11.0-dev.1 → 1.11.0-dev.2

package/dist/cjs/types/cogbitmaplayer/CogBitmapLayer.d.ts

@@ -1,42 +1,61 @@
-import { CompositeLayer } from '@deck.gl/core';
-import { TileLayer } from '@deck.gl/geo-layers';
+import { CompositeLayer, CompositeLayerProps, DefaultProps, Layer, LayersList, TextureSource, UpdateParameters } from '@deck.gl/core';
+import { TileLayerProps, GeoBoundingBox, _TileLoadProps as TileLoadProps, _Tile2DHeader as Tile2DHeader, NonGeoBoundingBox } from '@deck.gl/geo-layers';
 import { BitmapLayer } from '@deck.gl/layers';
-import { _TerrainExtension as TerrainExtension } from '@deck.gl/extensions';
-import CogTiles from '../cogtiles/cogtiles.ts';
-import { GeoImageOptions } from '../geoimage/geoimage.ts';
-declare class CogBitmapLayer extends CompositeLayer<any> {
+import type { MeshAttributes } from '@loaders.gl/schema';
+export type TileBoundingBox = NonGeoBoundingBox | GeoBoundingBox;
+export type ZRange = [minZ: number, maxZ: number];
+export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
+export type URLTemplate = string | string[] | null;
+export declare const urlType: {
+    type: "object";
+    value: URLTemplate;
+    validate: (value: any, propType: any) => boolean;
+    equal: (value1: any, value2: any) => boolean;
+};
+type MeshAndTexture = [MeshAttributes | null, TextureSource | null];
+/** All properties supported by CogBitmapLayer */
+export type CogBitmapLayerProps = _CogBitmapLayerProps & TileLayerProps<MeshAndTexture> & CompositeLayerProps;
+/** Props added by the CogBitmapLayer */
+type _CogBitmapLayerProps = {
+    /** Image url that encodes raster data. * */
+    rasterData: URLTemplate;
+    /** Bounding box of the bitmap image, [minX, minY, maxX, maxY] in world coordinates. * */
+    bounds: Bounds | null;
+    /** Whether the rendered texture should be blurred or not - effects minFilter and maxFilter * */
+    blurredTexture?: boolean;
+    /** Whether the rendered texture should be clamped to terrain * */
+    clampToTerrain?: boolean;
+    /**
+     * TODO
+     */
+    cogBitmapOptions: Object;
+    /**
+     * @deprecated Use `loadOptions.terrain.workerUrl` instead
+     */
+    workerUrl?: string;
+};
+/** Render bitmap texture from cog raster images. */
+export default class CogBitmapLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<ExtraPropsT & Required<_CogBitmapLayerProps & Required<TileLayerProps<MeshAndTexture>>>> {
+    static defaultProps: DefaultProps<CogBitmapLayerProps>;
     static layerName: string;
-    id: string;
-    url: string;
-    static displayName: string;
-    cogTiles: CogTiles;
-    tileSize: number;
+    rasterUrl: string;
     minZoom: number;
     maxZoom: number;
-    blurredTexture: boolean;
-    constructor(id: string, url: string, options: GeoImageOptions);
-    initializeState(): void;
-    init(url: string): Promise<void>;
-    renderLayers(): TileLayer<any, {
-        id: `${string}-${string}`;
-        getTileData: (tileData: any) => Promise<string>;
-        minZoom: number;
-        maxZoom: number;
-        tileSize: number;
-        maxRequests: 6;
-        extent: [number, number, number, number];
-        renderSubLayers: (props: any) => BitmapLayer<{
-            terrainDrawMode: any;
-            data: null;
-            image: any;
-            bounds: [any, any, any, any];
-            opacity: number;
-            textureParameters: {
-                minFilter: "linear" | "nearest";
-                magFilter: "linear" | "nearest";
-            };
-            extensions: TerrainExtension[];
-        }>;
-    }>;
+    state: {
+        isTiled?: boolean;
+        terrain?: MeshAttributes;
+        zRange?: ZRange | null;
+    };
+    initializeState(context: any): Promise<void>;
+    init(rasterUrl: string): Promise<void>;
+    updateState({ props, oldProps }: UpdateParameters<this>): void;
+    getTiledBitmapData(tile: TileLoadProps): Promise<TextureSource>;
+    renderSubLayers(props: TileLayerProps<TextureSource> & {
+        id: string;
+        data: TextureSource;
+        tile: Tile2DHeader<TextureSource>;
+    }): BitmapLayer<{}>;
+    onViewportLoad(tiles?: Tile2DHeader<MeshAndTexture>[]): void;
+    renderLayers(): Layer | null | LayersList;
 }
-export default CogBitmapLayer;
+export {};

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 import { CompositeLayer, log, COORDINATE_SYSTEM } from '@deck.gl/core';
 import { TileLayer } from '@deck.gl/geo-layers';
 import { BitmapLayer } from '@deck.gl/layers';
-import { _TerrainExtension } from '@deck.gl/extensions';
 import chroma from 'chroma-js';
 import { getMeshBoundingBox } from '@loaders.gl/schema';
 import { concatenateTypedArrays } from '@loaders.gl/loader-utils';
@@ -15467,68 +15466,301 @@ class CogTiles {
     }
 }
 
-// let needsRerender: boolean = false;
-// let extent = [0, 0, 0, 0]
+const urlType$1 = {
+    type: 'object',
+    value: null,
+    validate: (value, propType) => (propType.optional && value === null)
+        || typeof value === 'string'
+        || (Array.isArray(value) && value.every((url) => typeof url === 'string')),
+    equal: (value1, value2) => {
+        if (value1 === value2) {
+            return true;
+        }
+        if (!Array.isArray(value1) || !Array.isArray(value2)) {
+            return false;
+        }
+        const len = value1.length;
+        if (len !== value2.length) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (value1[i] !== value2[i]) {
+                return false;
+            }
+        }
+        return true;
+    },
+};
+const DUMMY_DATA$1 = [1];
+const defaultProps$1 = Object.assign(Object.assign({}, TileLayer.defaultProps), { 
+    // Image url that encodes height data
+    // elevationData: urlType,
+    // Image url to use as texture
+    // texture: { ...urlType, optional: true },
+    // Martini error tolerance in meters, smaller number -> more detailed mesh
+    // meshMaxError: { type: 'number', value: 4.0 },
+    // Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates
+    bounds: {
+        type: 'array', value: null, optional: true, compare: true,
+    }, rasterData: urlType$1, 
+    // Color to use if texture is unavailable
+    // color: { type: 'color', value: [255, 255, 255] },
+    blurredTexture: true, clampToTerrain: true, 
+    // Object to decode height data, from (r, g, b) to height in meters
+    // elevationDecoder: {
+    //   type: 'object',
+    //   value: {
+    //     rScaler: 1,
+    //     gScaler: 0,
+    //     bScaler: 0,
+    //     offset: 0,
+    //   },
+    // },
+    // Supply url to local terrain worker bundle. Only required if running offline and cannot access CDN.
+    workerUrl: '' });
+// Turns array of templates into a single string to work around shallow change
+function urlTemplateToUpdateTrigger$1(template) {
+    if (Array.isArray(template)) {
+        return template.join(';');
+    }
+    return template || '';
+}
+/** Render bitmap texture from cog raster images. */
 class CogBitmapLayer extends CompositeLayer {
-    constructor(id, url, options) {
-        super({});
-        // private _isLoaded: boolean;
-        this.id = '';
-        this.id = id;
-        // this.state = {
-        //   initialized: false,
-        // };
-        // this._isLoaded = false;
-        this.cogTiles = new CogTiles(options);
-        this.blurredTexture = options.blurredTexture;
-        this.url = url;
-        // setTimeout(() => {
-        //   this.init(url);
-        // }, 500);
-    }
-    initializeState() {
-        this.state = {
-            initialized: false,
-        };
-        this.init(this.url);
-    }
-    init(url) {
+    // private _isLoaded: boolean;
+    // id = '';
+    // url: string;
+    // static displayName: string;
+    // cogTiles: CogTiles;
+    //
+    // tileSize: number;
+    //
+    // blurredTexture: boolean;
+    initializeState(context) {
+        const _super = Object.create(null, {
+            initializeState: { get: () => super.initializeState }
+        });
         return __awaiter(this, void 0, void 0, function* () {
-            const cog = yield this.cogTiles.initializeCog(url);
-            this.setState({ initialized: true });
-            this.tileSize = this.cogTiles.getTileSize(cog);
-            const zoomRange = this.cogTiles.getZoomRange(cog);
+            _super.initializeState.call(this, context);
+            this.setState({
+                bitmapCogTiles: new CogTiles(this.props.cogBitmapOptions),
+                initialized: false,
+            });
+            yield this.init(this.rasterUrl);
+        });
+    }
+    init(rasterUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cog = yield this.state.bitmapCogTiles.initializeCog(this.props.rasterData);
+            // this.tileSize = this.terrainCogTiles.getTileSize(cog);
+            const zoomRange = this.state.bitmapCogTiles.getZoomRange(cog);
             [this.minZoom, this.maxZoom] = zoomRange;
+            console.log(cog);
+            this.setState({ initialized: true });
         });
     }
+    updateState({ props, oldProps }) {
+        const rasterDataChanged = props.rasterData !== oldProps.rasterData;
+        if (rasterDataChanged) {
+            const { rasterData } = props;
+            const isTiled = rasterData
+                && (Array.isArray(rasterData)
+                    || (rasterData.includes('{x}') && rasterData.includes('{y}'))) || this.props.isTiled;
+            this.setState({ isTiled });
+        }
+        // Reloading for single terrain mesh
+        const shouldReload = rasterDataChanged
+            // || props.meshMaxError !== oldProps.meshMaxError
+            // || props.elevationDecoder !== oldProps.elevationDecoder
+            || props.bounds !== oldProps.bounds;
+        if (!this.state.isTiled && shouldReload) ;
+        // TODO - remove in v9
+        // @ts-ignore
+        if (props.workerUrl) {
+            log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
+        }
+    }
+    getTiledBitmapData(tile) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('getTiledBitmapData');
+            this.props;
+            const { viewport } = this.context;
+            let bottomLeft = [0, 0];
+            let topRight = [0, 0];
+            if (viewport.isGeospatial) {
+                const bbox = tile.bbox;
+                bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
+                topRight = viewport.projectFlat([bbox.east, bbox.north]);
+            }
+            else {
+                const bbox = tile.bbox;
+                bottomLeft = [bbox.left, bbox.bottom];
+                topRight = [bbox.right, bbox.top];
+            }
+            const bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+            // TODO - pass signal to getTile
+            // abort request if signal is aborted
+            const cogBitmap = yield this.state.bitmapCogTiles.getTile(tile.index.x, tile.index.y, tile.index.z, bounds);
+            return Promise.all([cogBitmap]);
+        });
+    }
+    renderSubLayers(props) {
+        console.log('rendering sub layer and consoling props');
+        const SubLayerClass = this.getSubLayerClass('image', BitmapLayer);
+        // const { color } = this.props;
+        console.log(this.props);
+        const { bounds, blurredTexture, clampToTerrain } = this.props;
+        const { data } = props;
+        if (!data) {
+            return null;
+        }
+        // const [raster, texture] = data;
+        const [image] = data;
+        const { bbox: { west, south, east, north, }, } = props.tile;
+        return new SubLayerClass(Object.assign(Object.assign({}, props), { tileSize: 256 }), {
+            data: DUMMY_DATA$1,
+            // data: null,
+            image,
+            // texture,
+            _instanced: false,
+            // coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+            // getPosition: (d) => [0, 0, 0],
+            bounds: [west, south, east, north],
+            // bounds,
+            opacity: 1,
+            textureParameters: {
+                minFilter: blurredTexture ? 'linear' : 'nearest',
+                magFilter: blurredTexture ? 'linear' : 'nearest',
+            },
+            // extensions: this.cogTiles?.options?.clampToTerrain ? [new TerrainExtension()] : [],
+            // ...(this.cogTiles?.options?.clampToTerrain?.terrainDrawMode
+            //   ? { terrainDrawMode: this.cogTiles?.options?.clampToTerrain.terrainDrawMode }
+            //   : {}),
+        });
+    }
+    // Update zRange of viewport
+    onViewportLoad(tiles) {
+        if (!tiles) {
+            return;
+        }
+        const { zRange } = this.state;
+        const ranges = tiles
+            .map((tile) => tile.content)
+            .filter((x) => x && x[0])
+            .map((arr) => {
+            var _a, _b;
+            // @ts-ignore
+            const bounds = (_b = (_a = arr[0]) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.boundingBox;
+            return bounds === null || bounds === void 0 ? void 0 : bounds.map((bound) => bound[2]);
+        });
+        if (ranges.length === 0) {
+            return;
+        }
+        const minZ = Math.min(...ranges.map((x) => x[0]));
+        const maxZ = Math.max(...ranges.map((x) => x[1]));
+        if (!zRange || minZ < zRange[0] || maxZ > zRange[1]) {
+            this.setState({ zRange: [Number.isFinite(minZ) ? minZ : 0, Number.isFinite(maxZ) ? maxZ : 0] });
+        }
+    }
+    // constructor(id:string, url:string, options:GeoImageOptions) {
+    //   super({});
+    //   this.id = id;
+    //   // this.state = {
+    //   //   initialized: false,
+    //   // };
+    //   // this._isLoaded = false;
+    //   this.cogTiles = new CogTiles(options);
+    //   this.blurredTexture = options.blurredTexture;
+    //   this.url = url;
+    //   // setTimeout(() => {
+    //   //   this.init(url);
+    //   // }, 500);
+    // }
+    //
+    // initializeState() {
+    //   this.state = {
+    //     initialized: false,
+    //   };
+    //
+    //   this.init(this.url);
+    // }
+    //
+    // async init(url:string) {
+    //   const cog = await this.cogTiles.initializeCog(url);
+    //   this.setState({ initialized: true });
+    //   this.tileSize = this.cogTiles.getTileSize(cog);
+    //   const zoomRange = this.cogTiles.getZoomRange(cog);
+    //   [this.minZoom, this.maxZoom] = zoomRange;
+    // }
+    //
     renderLayers() {
-        if (this.cogTiles.cog) {
-            const layer = new TileLayer({
-                id: `${this.id}-${String(performance.now())}`,
-                getTileData: (tileData) => this.cogTiles.getTile(tileData.index.x, tileData.index.y, tileData.index.z),
-                minZoom: this.minZoom,
-                maxZoom: this.maxZoom,
-                tileSize: this.tileSize,
-                maxRequests: 6,
-                extent: this.cogTiles.cog ? this.cogTiles.getBoundsAsLatLon(this.cogTiles.cog) : null,
-                renderSubLayers: (props) => {
-                    var _a, _b, _c, _d, _e, _f, _g;
-                    const { bbox: { west, south, east, north, }, } = props.tile;
-                    return new BitmapLayer(props, Object.assign({ data: null, image: props.data, bounds: [west, south, east, north], opacity: 1, textureParameters: {
-                            minFilter: this.blurredTexture ? 'linear' : 'nearest',
-                            magFilter: this.blurredTexture ? 'linear' : 'nearest',
-                        }, extensions: ((_b = (_a = this.cogTiles) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.clampToTerrain) ? [new _TerrainExtension()] : [] }, (((_e = (_d = (_c = this.cogTiles) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.clampToTerrain) === null || _e === void 0 ? void 0 : _e.terrainDrawMode)
-                        ? { terrainDrawMode: (_g = (_f = this.cogTiles) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.clampToTerrain.terrainDrawMode }
-                        : {})));
+        const { rasterData, blurredTexture, clampToTerrain, tileSize, maxZoom, minZoom, extent, maxRequests, onTileLoad, onTileUnload, onTileError, maxCacheSize, maxCacheByteSize, refinementStrategy, } = this.props;
+        console.log('render bitmap layers');
+        // console.log(this.state);
+        if (this.state.isTiled && this.state.initialized) {
+            console.log('start rendering tile layer');
+            return new TileLayer(this.getSubLayerProps({
+                id: 'tiles',
+            }), {
+                getTileData: this.getTiledBitmapData.bind(this),
+                // getTileData: (tileData: any) => this.state.bitmapCogTiles.getTile(
+                //   tileData.index.x,
+                //   tileData.index.y,
+                //   tileData.index.z,
+                // ),
+                renderSubLayers: this.renderSubLayers.bind(this),
+                // renderSubLayers: (props: any) => {
+                //   const {
+                //     bbox: {
+                //       west, south, east, north,
+                //     },
+                //   } = props.tile;
+                //   // MK proc to tady funguje jen s 0?
+                //   console.log(props.data[0]);
+                //   return new BitmapLayer(props, {
+                //     data: DUMMY_DATA,
+                //     image: props.data[0],
+                //     bounds: [west, south, east, north],
+                //     opacity: 1, // 0.6
+                //     textureParameters: {
+                //       minFilter: blurredTexture ? 'linear' : 'nearest',
+                //       magFilter: blurredTexture ? 'linear' : 'nearest',
+                //     },
+                //     // extensions: this.cogTiles?.options?.clampToTerrain ? [new TerrainExtension()] : [],
+                //     // ...(this.cogTiles?.options?.clampToTerrain?.terrainDrawMode
+                //     //   ? { terrainDrawMode: this.cogTiles?.options?.clampToTerrain.terrainDrawMode }
+                //     //   : {}),
+                //   });
+                // },
+                updateTriggers: {
+                    getTileData: {
+                        rasterData: urlTemplateToUpdateTrigger$1(rasterData),
+                        blurredTexture,
+                        clampToTerrain,
+                        // texture: urlTemplateToUpdateTrigger(texture),
+                        // meshMaxError,
+                        // elevationDecoder,
+                    },
                 },
+                onViewportLoad: this.onViewportLoad.bind(this),
+                zRange: this.state.zRange || null,
+                tileSize,
+                maxZoom,
+                minZoom,
+                extent,
+                maxRequests,
+                onTileLoad,
+                onTileUnload,
+                onTileError,
+                maxCacheSize,
+                maxCacheByteSize,
+                refinementStrategy,
             });
-            return layer;
         }
-        return null;
     }
 }
+CogBitmapLayer.defaultProps = defaultProps$1;
 CogBitmapLayer.layerName = 'CogBitmapLayer';
-CogBitmapLayer.displayName = 'CogBitmapLayer';
 
 // Copyright (c) 2015 - 2017 Uber Technologies, Inc.
 //