@deck.gl/geo-layers 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/tile-3d-layer/tile-3d-layer.js

@@ -0,0 +1,302 @@
+import { Geometry } from '@luma.gl/engine';
+import { CompositeLayer, COORDINATE_SYSTEM, log } from '@deck.gl/core';
+import { PointCloudLayer } from '@deck.gl/layers';
+import { ScenegraphLayer } from '@deck.gl/mesh-layers';
+import { default as MeshLayer } from "../mesh-layer/mesh-layer.js";
+import { load } from '@loaders.gl/core';
+import { Tileset3D, TILE_TYPE } from '@loaders.gl/tiles';
+import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
+const SINGLE_DATA = [0];
+const defaultProps = {
+    getPointColor: { type: 'accessor', value: [0, 0, 0, 255] },
+    pointSize: 1.0,
+    // Disable async data loading (handling it in _loadTileSet)
+    data: '',
+    loader: Tiles3DLoader,
+    onTilesetLoad: { type: 'function', value: tileset3d => { } },
+    onTileLoad: { type: 'function', value: tileHeader => { } },
+    onTileUnload: { type: 'function', value: tileHeader => { } },
+    onTileError: { type: 'function', value: (tile, message, url) => { } },
+    _getMeshColor: { type: 'function', value: tileHeader => [255, 255, 255] }
+};
+/** Render 3d tiles data formatted according to the [3D Tiles Specification](https://www.opengeospatial.org/standards/3DTiles) and [`ESRI I3S`](https://github.com/Esri/i3s-spec) */
+export default class Tile3DLayer extends CompositeLayer {
+    static { this.defaultProps = defaultProps; }
+    static { this.layerName = 'Tile3DLayer'; }
+    initializeState() {
+        if ('onTileLoadFail' in this.props) {
+            log.removed('onTileLoadFail', 'onTileError')();
+        }
+        // prop verification
+        this.state = {
+            layerMap: {},
+            tileset3d: null,
+            activeViewports: {},
+            lastUpdatedViewports: null
+        };
+    }
+    get isLoaded() {
+        return Boolean(this.state?.tileset3d?.isLoaded() && super.isLoaded);
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.somethingChanged;
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        if (props.data && props.data !== oldProps.data) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._loadTileset(props.data);
+        }
+        if (changeFlags.viewportChanged) {
+            const { activeViewports } = this.state;
+            const viewportsNumber = Object.keys(activeViewports).length;
+            if (viewportsNumber) {
+                this._updateTileset(activeViewports);
+                this.state.lastUpdatedViewports = activeViewports;
+                this.state.activeViewports = {};
+            }
+        }
+        if (changeFlags.propsChanged) {
+            const { layerMap } = this.state;
+            for (const key in layerMap) {
+                layerMap[key].needsUpdate = true;
+            }
+        }
+    }
+    activateViewport(viewport) {
+        const { activeViewports, lastUpdatedViewports } = this.state;
+        this.internalState.viewport = viewport;
+        activeViewports[viewport.id] = viewport;
+        const lastViewport = lastUpdatedViewports?.[viewport.id];
+        if (!lastViewport || !viewport.equals(lastViewport)) {
+            this.setChangeFlags({ viewportChanged: true });
+            this.setNeedsUpdate();
+        }
+    }
+    getPickingInfo({ info, sourceLayer }) {
+        const sourceTile = sourceLayer && sourceLayer.props.tile;
+        if (info.picked) {
+            info.object = sourceTile;
+        }
+        info.sourceTile = sourceTile;
+        return info;
+    }
+    filterSubLayer({ layer, viewport }) {
+        // All sublayers will have a tile prop
+        const { tile } = layer.props;
+        const { id: viewportId } = viewport;
+        return tile.selected && tile.viewportIds.includes(viewportId);
+    }
+    _updateAutoHighlight(info) {
+        const sourceTile = info.sourceTile;
+        const layerCache = this.state.layerMap[sourceTile?.id];
+        if (layerCache && layerCache.layer) {
+            layerCache.layer.updateAutoHighlight(info);
+        }
+    }
+    async _loadTileset(tilesetUrl) {
+        const { loadOptions = {} } = this.props;
+        // TODO: deprecate `loader` in v9.0
+        // @ts-ignore
+        const loaders = this.props.loader || this.props.loaders;
+        const loader = Array.isArray(loaders) ? loaders[0] : loaders;
+        const options = { loadOptions: { ...loadOptions } };
+        let actualTilesetUrl = tilesetUrl;
+        if (loader.preload) {
+            const preloadOptions = await loader.preload(tilesetUrl, loadOptions);
+            if (preloadOptions.url) {
+                actualTilesetUrl = preloadOptions.url;
+            }
+            if (preloadOptions.headers) {
+                options.loadOptions.fetch = {
+                    ...options.loadOptions.fetch,
+                    headers: preloadOptions.headers
+                };
+            }
+            Object.assign(options, preloadOptions);
+        }
+        const tilesetJson = await load(actualTilesetUrl, loader, options.loadOptions);
+        const tileset3d = new Tileset3D(tilesetJson, {
+            onTileLoad: this._onTileLoad.bind(this),
+            onTileUnload: this._onTileUnload.bind(this),
+            onTileError: this.props.onTileError,
+            ...options
+        });
+        this.setState({
+            tileset3d,
+            layerMap: {}
+        });
+        this._updateTileset(this.state.activeViewports);
+        this.props.onTilesetLoad(tileset3d);
+    }
+    _onTileLoad(tileHeader) {
+        const { lastUpdatedViewports } = this.state;
+        this.props.onTileLoad(tileHeader);
+        this._updateTileset(lastUpdatedViewports);
+        this.setNeedsUpdate();
+    }
+    _onTileUnload(tileHeader) {
+        // Was cleaned up from tileset cache. We no longer need to track it.
+        delete this.state.layerMap[tileHeader.id];
+        this.props.onTileUnload(tileHeader);
+    }
+    _updateTileset(viewports) {
+        if (!viewports) {
+            return;
+        }
+        const { tileset3d } = this.state;
+        const { timeline } = this.context;
+        const viewportsNumber = Object.keys(viewports).length;
+        if (!timeline || !viewportsNumber || !tileset3d) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        tileset3d.selectTiles(Object.values(viewports)).then(frameNumber => {
+            const tilesetChanged = this.state.frameNumber !== frameNumber;
+            if (tilesetChanged) {
+                this.setState({ frameNumber });
+            }
+        });
+    }
+    _getSubLayer(tileHeader, oldLayer) {
+        if (!tileHeader.content) {
+            return null;
+        }
+        switch (tileHeader.type) {
+            case TILE_TYPE.POINTCLOUD:
+                return this._makePointCloudLayer(tileHeader, oldLayer);
+            case TILE_TYPE.SCENEGRAPH:
+                return this._make3DModelLayer(tileHeader);
+            case TILE_TYPE.MESH:
+                return this._makeSimpleMeshLayer(tileHeader, oldLayer);
+            default:
+                throw new Error(`Tile3DLayer: Failed to render layer of type ${tileHeader.content.type}`);
+        }
+    }
+    _makePointCloudLayer(tileHeader, oldLayer) {
+        const { attributes, pointCount, constantRGBA, cartographicOrigin, modelMatrix } = tileHeader.content;
+        const { positions, normals, colors } = attributes;
+        if (!positions) {
+            return null;
+        }
+        const data = (oldLayer && oldLayer.props.data) || {
+            header: {
+                vertexCount: pointCount
+            },
+            attributes: {
+                POSITION: positions,
+                NORMAL: normals,
+                COLOR_0: colors
+            }
+        };
+        const { pointSize, getPointColor } = this.props;
+        const SubLayerClass = this.getSubLayerClass('pointcloud', PointCloudLayer);
+        return new SubLayerClass({
+            pointSize
+        }, this.getSubLayerProps({
+            id: 'pointcloud'
+        }), {
+            id: `${this.id}-pointcloud-${tileHeader.id}`,
+            tile: tileHeader,
+            data,
+            coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
+            coordinateOrigin: cartographicOrigin,
+            modelMatrix,
+            getColor: constantRGBA || getPointColor,
+            _offset: 0
+        });
+    }
+    _make3DModelLayer(tileHeader) {
+        const { gltf, instances, cartographicOrigin, modelMatrix } = tileHeader.content;
+        const SubLayerClass = this.getSubLayerClass('scenegraph', ScenegraphLayer);
+        return new SubLayerClass({
+            _lighting: 'pbr'
+        }, this.getSubLayerProps({
+            id: 'scenegraph'
+        }), {
+            id: `${this.id}-scenegraph-${tileHeader.id}`,
+            tile: tileHeader,
+            data: instances || SINGLE_DATA,
+            scenegraph: gltf,
+            coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
+            coordinateOrigin: cartographicOrigin,
+            modelMatrix,
+            getTransformMatrix: instance => instance.modelMatrix,
+            getPosition: [0, 0, 0],
+            _offset: 0
+        });
+    }
+    _makeSimpleMeshLayer(tileHeader, oldLayer) {
+        const content = tileHeader.content;
+        const { attributes, indices, modelMatrix, cartographicOrigin, coordinateSystem = COORDINATE_SYSTEM.METER_OFFSETS, material, featureIds } = content;
+        const { _getMeshColor } = this.props;
+        const geometry = (oldLayer && oldLayer.props.mesh) ||
+            new Geometry({
+                topology: 'triangle-list',
+                attributes: getMeshGeometry(attributes),
+                indices
+            });
+        const SubLayerClass = this.getSubLayerClass('mesh', MeshLayer);
+        return new SubLayerClass(this.getSubLayerProps({
+            id: 'mesh'
+        }), {
+            id: `${this.id}-mesh-${tileHeader.id}`,
+            tile: tileHeader,
+            mesh: geometry,
+            data: SINGLE_DATA,
+            getColor: _getMeshColor(tileHeader),
+            pbrMaterial: material,
+            modelMatrix,
+            coordinateOrigin: cartographicOrigin,
+            coordinateSystem,
+            featureIds,
+            _offset: 0
+        });
+    }
+    renderLayers() {
+        const { tileset3d, layerMap } = this.state;
+        if (!tileset3d) {
+            return null;
+        }
+        // loaders.gl doesn't provide a type for tileset3d.tiles
+        return tileset3d.tiles
+            .map(tile => {
+            const layerCache = (layerMap[tile.id] = layerMap[tile.id] || { tile });
+            let { layer } = layerCache;
+            if (tile.selected) {
+                // render selected tiles
+                if (!layer) {
+                    // create layer
+                    layer = this._getSubLayer(tile);
+                }
+                else if (layerCache.needsUpdate) {
+                    // props have changed, rerender layer
+                    layer = this._getSubLayer(tile, layer);
+                    layerCache.needsUpdate = false;
+                }
+            }
+            layerCache.layer = layer;
+            return layer;
+        })
+            .filter(Boolean);
+    }
+}
+function getMeshGeometry(contentAttributes) {
+    const attributes = {};
+    attributes.positions = {
+        ...contentAttributes.positions,
+        value: new Float32Array(contentAttributes.positions.value)
+    };
+    if (contentAttributes.normals) {
+        attributes.normals = contentAttributes.normals;
+    }
+    if (contentAttributes.texCoords) {
+        attributes.texCoords = contentAttributes.texCoords;
+    }
+    if (contentAttributes.colors) {
+        attributes.colors = contentAttributes.colors;
+    }
+    if (contentAttributes.uvRegions) {
+        attributes.uvRegions = contentAttributes.uvRegions;
+    }
+    return attributes;
+}

package/{typed → dist}/tile-layer/tile-layer.d.ts

@@ -1,8 +1,8 @@
 import { CompositeLayer, CompositeLayerProps, Layer, LayerProps, UpdateParameters, PickingInfo, GetPickingInfoParams, DefaultProps, FilterContext } from '@deck.gl/core';
 import { LayersList } from '@deck.gl/core';
-import type { TileLoadProps, ZRange } from '../tileset-2d';
-import { Tileset2D, Tile2DHeader, RefinementStrategy, Tileset2DProps } from '../tileset-2d';
-import { URLTemplate } from '../tileset-2d';
+import type { TileLoadProps, ZRange } from "../tileset-2d/index.js";
+import { Tileset2D, Tile2DHeader, RefinementStrategy, Tileset2DProps } from "../tileset-2d/index.js";
+import { URLTemplate } from "../tileset-2d/index.js";
 /** All props supported by the TileLayer */
 export type TileLayerProps<DataT = unknown> = CompositeLayerProps & _TileLayerProps<DataT>;
 /** Props added by the TileLayer */

package/dist/tile-layer/tile-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-layer.d.ts","sourceRoot":"","sources":["../../src/tile-layer/tile-layer.ts"],"names":[],"mappings":"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"}

package/dist/tile-layer/tile-layer.js

@@ -0,0 +1,204 @@
+import { CompositeLayer, _flatten as flatten } from '@deck.gl/core';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { Tileset2D, STRATEGY_DEFAULT } from "../tileset-2d/index.js";
+import { urlType, getURLFromTemplate } from "../tileset-2d/index.js";
+const defaultProps = {
+    TilesetClass: Tileset2D,
+    data: { type: 'data', value: [] },
+    dataComparator: urlType.equal,
+    renderSubLayers: { type: 'function', value: (props) => new GeoJsonLayer(props) },
+    getTileData: { type: 'function', optional: true, value: null },
+    // TODO - change to onViewportLoad to align with Tile3DLayer
+    onViewportLoad: { type: 'function', optional: true, value: null },
+    onTileLoad: { type: 'function', value: tile => { } },
+    onTileUnload: { type: 'function', value: tile => { } },
+    // eslint-disable-next-line
+    onTileError: { type: 'function', value: err => console.error(err) },
+    extent: { type: 'array', optional: true, value: null, compare: true },
+    tileSize: 512,
+    maxZoom: null,
+    minZoom: 0,
+    maxCacheSize: null,
+    maxCacheByteSize: null,
+    refinementStrategy: STRATEGY_DEFAULT,
+    zRange: null,
+    maxRequests: 6,
+    zoomOffset: 0
+};
+/**
+ * The TileLayer is a composite layer that makes it possible to visualize very large datasets.
+ *
+ * Instead of fetching the entire dataset, it only loads and renders what's visible in the current viewport.
+ */
+export default class TileLayer extends CompositeLayer {
+    static { this.defaultProps = defaultProps; }
+    static { this.layerName = 'TileLayer'; }
+    initializeState() {
+        this.state = {
+            tileset: null,
+            isLoaded: false
+        };
+    }
+    finalizeState() {
+        this.state?.tileset?.finalize();
+    }
+    get isLoaded() {
+        return Boolean(this.state?.tileset?.selectedTiles?.every(tile => tile.isLoaded && tile.layers && tile.layers.every(layer => layer.isLoaded)));
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.somethingChanged;
+    }
+    updateState({ changeFlags }) {
+        let { tileset } = this.state;
+        const propsChanged = changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged;
+        const dataChanged = changeFlags.dataChanged ||
+            (changeFlags.updateTriggersChanged &&
+                (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getTileData));
+        if (!tileset) {
+            tileset = new this.props.TilesetClass(this._getTilesetOptions());
+            this.setState({ tileset });
+        }
+        else if (propsChanged) {
+            tileset.setOptions(this._getTilesetOptions());
+            if (dataChanged) {
+                // reload all tiles
+                // use cached layers until new content is loaded
+                tileset.reloadAll();
+            }
+            else {
+                // some render options changed, regenerate sub layers now
+                tileset.tiles.forEach(tile => {
+                    tile.layers = null;
+                });
+            }
+        }
+        this._updateTileset();
+    }
+    _getTilesetOptions() {
+        const { tileSize, maxCacheSize, maxCacheByteSize, refinementStrategy, extent, maxZoom, minZoom, maxRequests, zoomOffset } = this.props;
+        return {
+            maxCacheSize,
+            maxCacheByteSize,
+            maxZoom,
+            minZoom,
+            tileSize,
+            refinementStrategy,
+            extent,
+            maxRequests,
+            zoomOffset,
+            getTileData: this.getTileData.bind(this),
+            onTileLoad: this._onTileLoad.bind(this),
+            onTileError: this._onTileError.bind(this),
+            onTileUnload: this._onTileUnload.bind(this)
+        };
+    }
+    _updateTileset() {
+        const tileset = this.state.tileset;
+        const { zRange, modelMatrix } = this.props;
+        const frameNumber = tileset.update(this.context.viewport, { zRange, modelMatrix });
+        const { isLoaded } = tileset;
+        const loadingStateChanged = this.state.isLoaded !== isLoaded;
+        const tilesetChanged = this.state.frameNumber !== frameNumber;
+        if (isLoaded && (loadingStateChanged || tilesetChanged)) {
+            this._onViewportLoad();
+        }
+        if (tilesetChanged) {
+            // Save the tileset frame number - trigger a rerender
+            this.setState({ frameNumber });
+        }
+        // Save the loaded state - should not trigger a rerender
+        this.state.isLoaded = isLoaded;
+    }
+    _onViewportLoad() {
+        const { tileset } = this.state;
+        const { onViewportLoad } = this.props;
+        if (onViewportLoad) {
+            // This method can only be called when tileset is defined and updated
+            onViewportLoad(tileset.selectedTiles);
+        }
+    }
+    _onTileLoad(tile) {
+        this.props.onTileLoad(tile);
+        tile.layers = null;
+        this.setNeedsUpdate();
+    }
+    _onTileError(error, tile) {
+        this.props.onTileError(error);
+        tile.layers = null;
+        this.setNeedsUpdate();
+    }
+    _onTileUnload(tile) {
+        this.props.onTileUnload(tile);
+    }
+    // Methods for subclass to override
+    getTileData(tile) {
+        const { data, getTileData, fetch } = this.props;
+        const { signal } = tile;
+        tile.url =
+            typeof data === 'string' || Array.isArray(data) ? getURLFromTemplate(data, tile) : null;
+        if (getTileData) {
+            return getTileData(tile);
+        }
+        if (fetch && tile.url) {
+            return fetch(tile.url, { propName: 'data', layer: this, signal });
+        }
+        return null;
+    }
+    renderSubLayers(props) {
+        return this.props.renderSubLayers(props);
+    }
+    getSubLayerPropsByTile(tile) {
+        return null;
+    }
+    getPickingInfo({ info, sourceLayer }) {
+        const sourceTile = sourceLayer.props.tile;
+        if (info.picked) {
+            info.tile = sourceTile;
+        }
+        info.sourceTile = sourceTile;
+        return info;
+    }
+    _updateAutoHighlight(info) {
+        const sourceTile = info.sourceTile;
+        if (sourceTile && sourceTile.layers) {
+            for (const layer of sourceTile.layers) {
+                layer.updateAutoHighlight(info);
+            }
+        }
+    }
+    renderLayers() {
+        return this.state.tileset.tiles.map((tile) => {
+            const subLayerProps = this.getSubLayerPropsByTile(tile);
+            // cache the rendered layer in the tile
+            if (!tile.isLoaded && !tile.content) {
+                // nothing to show
+            }
+            else if (!tile.layers) {
+                const layers = this.renderSubLayers({
+                    ...this.props,
+                    ...this.getSubLayerProps({
+                        id: tile.id,
+                        updateTriggers: this.props.updateTriggers
+                    }),
+                    data: tile.content,
+                    _offset: 0,
+                    tile
+                });
+                tile.layers = flatten(layers, Boolean).map(layer => layer.clone({
+                    tile,
+                    ...subLayerProps
+                }));
+            }
+            else if (subLayerProps &&
+                tile.layers[0] &&
+                Object.keys(subLayerProps).some(propName => tile.layers[0].props[propName] !== subLayerProps[propName])) {
+                tile.layers = tile.layers.map(layer => layer.clone(subLayerProps));
+            }
+            return tile.layers;
+        });
+    }
+    filterSubLayer({ layer, cullRect }) {
+        const { tile } = layer.props;
+        return this.state.tileset.isTileVisible(tile, cullRect);
+    }
+}

package/dist/tileset-2d/index.d.ts

@@ -0,0 +1,7 @@
+export type { TileLoadProps, Bounds, ZRange, GeoBoundingBox, NonGeoBoundingBox, TileBoundingBox } from "./types.js";
+export type { Tileset2DProps, RefinementStrategy } from "./tileset-2d.js";
+export { Tileset2D, STRATEGY_DEFAULT } from "./tileset-2d.js";
+export { Tile2DHeader } from "./tile-2d-header.js";
+export type { URLTemplate } from "./utils.js";
+export { isGeoBoundingBox, isURLTemplate, urlType, getURLFromTemplate, getTileIndices, tileToBoundingBox } from "./utils.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/tileset-2d/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tileset-2d/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,aAAa,EACb,MAAM,EACN,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,eAAe,EAChB,mBAAgB;AAEjB,YAAY,EAAC,cAAc,EAAE,kBAAkB,EAAC,wBAAqB;AACrE,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAC,wBAAqB;AAEzD,OAAO,EAAC,YAAY,EAAC,4BAAyB;AAE9C,YAAY,EAAC,WAAW,EAAC,mBAAgB;AACzC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EAClB,mBAAgB"}

package/dist/tileset-2d/index.js

@@ -0,0 +1,4 @@
+// deck.gl, MIT license
+export { Tileset2D, STRATEGY_DEFAULT } from "./tileset-2d.js";
+export { Tile2DHeader } from "./tile-2d-header.js";
+export { isGeoBoundingBox, isURLTemplate, urlType, getURLFromTemplate, getTileIndices, tileToBoundingBox } from "./utils.js";

package/dist/tileset-2d/memoize.js

@@ -0,0 +1,41 @@
+// deck.gl, MIT license
+// @note - this is a duplicate of the deck.gl core export (because Tileset2D should be deck.gl independent)
+/**
+ * Speed up consecutive function calls by caching the result of calls with identical input
+ * https://en.wikipedia.org/wiki/Memoization
+ * @param compute - the function to be memoized
+ */
+export function memoize(compute) {
+    let cachedArgs = {};
+    let cachedResult;
+    return (args) => {
+        for (const key in args) {
+            if (!isEqual(args[key], cachedArgs[key])) {
+                cachedResult = compute(args);
+                cachedArgs = args;
+                break;
+            }
+        }
+        return cachedResult;
+    };
+}
+function isEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (Array.isArray(a)) {
+        // Special treatment for arrays: compare 1-level deep
+        // This is to support equality of matrix/coordinate props
+        const len = a.length;
+        if (!b || b.length !== len) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (a[i] !== b[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}

package/{typed → dist}/tileset-2d/tile-2d-header.d.ts

@@ -1,5 +1,6 @@
 import { RequestScheduler } from '@loaders.gl/loader-utils';
-import { TileBoundingBox, TileIndex, TileLoadProps } from './types';
+import { TileBoundingBox, TileIndex, TileLoadProps } from "./types.js";
+import type { Layer } from '@deck.gl/core';
 export type TileLoadDataProps<DataT = any> = {
     requestScheduler: RequestScheduler;
     getData: (props: TileLoadProps) => Promise<DataT>;
@@ -14,7 +15,7 @@ export declare class Tile2DHeader<DataT = any> {
     children: Tile2DHeader[] | null;
     content: DataT | null;
     state?: number;
-    layers?: any[] | null;
+    layers?: Layer[] | null;
     id: string;
     zoom: number;
     userData?: Record<string, any>;

package/dist/tileset-2d/tile-2d-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-2d-header.d.ts","sourceRoot":"","sources":["../../src/tileset-2d/tile-2d-header.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAC,eAAe,EAAE,SAAS,EAAE,aAAa,EAAC,mBAAgB;AAClE,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,GAAG,IAAI;IAC3C,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,qBAAa,YAAY,CAAC,KAAK,GAAG,GAAG;IACnC,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,KAAK,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAExB,EAAE,EAAG,MAAM,CAAC;IACZ,IAAI,EAAG,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,WAAW,EAAG,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IAE7C,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,KAAK,CAAmB;gBAEpB,KAAK,EAAE,SAAS;IAiB5B,4CAA4C;IAC5C,IAAI,IAAI,IAAI,eAAe,CAE1B;IAGD,IAAI,IAAI,CAAC,KAAK,EAAE,eAAe,EAgB9B;IAED,IAAI,IAAI,IAAI,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAE/C;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,UAAU,IAAI,MAAM,CAOvB;YAGa,SAAS;IA8DvB,QAAQ,CAAC,IAAI,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;IAShD,cAAc,IAAI,IAAI;IAQtB,KAAK,IAAI,IAAI;CAQd"}