@deck.gl/geo-layers 8.9.0-alpha.5 → 8.9.0-beta.2

package/typed/tile-layer/tile-layer.js

@@ -0,0 +1,192 @@
+import { CompositeLayer, _flatten as flatten } from '@deck.gl/core';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import Tileset2D, { STRATEGY_DEFAULT } from './tileset-2d';
+import { urlType, getURLFromTemplate } from './utils';
+const defaultProps = {
+    TilesetClass: Tileset2D,
+    data: [],
+    dataComparator: urlType.equals,
+    renderSubLayers: { type: 'function', value: props => new GeoJsonLayer(props), compare: false },
+    getTileData: { type: 'function', optional: true, value: null, compare: false },
+    // TODO - change to onViewportLoad to align with Tile3DLayer
+    onViewportLoad: { type: 'function', optional: true, value: null, compare: false },
+    onTileLoad: { type: 'function', value: tile => { }, compare: false },
+    onTileUnload: { type: 'function', value: tile => { }, compare: false },
+    // eslint-disable-next-line
+    onTileError: { type: 'function', value: err => console.error(err), compare: false },
+    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 {
+    initializeState() {
+        this.state = {
+            tileset: null,
+            isLoaded: false
+        };
+    }
+    finalizeState() {
+        this.state?.tileset?.finalize();
+    }
+    get isLoaded() {
+        return 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
+                this.state.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;
+        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) {
+            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 }) {
+        info.tile = sourceLayer.props.tile;
+        return info;
+    }
+    _updateAutoHighlight(info) {
+        if (info.sourceLayer) {
+            info.sourceLayer.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,
+                    id: `${this.id}-${tile.id}`,
+                    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 }) {
+        return layer.props.tile.isVisible;
+    }
+}
+TileLayer.defaultProps = defaultProps;
+TileLayer.layerName = 'TileLayer';

package/typed/tile-layer/tileset-2d.d.ts.map

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

package/typed/tile-layer/tileset-2d.js

@@ -0,0 +1,399 @@
+import Tile2DHeader from './tile-2d-header';
+import { getTileIndices, tileToBoundingBox } from './utils';
+import { RequestScheduler } from '@loaders.gl/loader-utils';
+import { Matrix4 } from '@math.gl/core';
+// bit masks
+const TILE_STATE_VISITED = 1;
+const TILE_STATE_VISIBLE = 2;
+/*
+   show cached parent tile if children are loading
+   +-----------+       +-----+            +-----+-----+
+   |           |       |     |            |     |     |
+   |           |       |     |            |     |     |
+   |           |  -->  +-----+-----+  ->  +-----+-----+
+   |           |             |     |      |     |     |
+   |           |             |     |      |     |     |
+   +-----------+             +-----+      +-----+-----+
+
+   show cached children tiles when parent is loading
+   +-------+----       +------------
+   |       |           |
+   |       |           |
+   |       |           |
+   +-------+----  -->  |
+   |       |           |
+ */
+export const STRATEGY_NEVER = 'never';
+export const STRATEGY_REPLACE = 'no-overlap';
+export const STRATEGY_DEFAULT = 'best-available';
+const DEFAULT_CACHE_SCALE = 5;
+const STRATEGIES = {
+    [STRATEGY_DEFAULT]: updateTileStateDefault,
+    [STRATEGY_REPLACE]: updateTileStateReplace,
+    [STRATEGY_NEVER]: () => { }
+};
+/**
+ * Manages loading and purging of tile data. This class caches recently visited tiles
+ * and only creates new tiles if they are present.
+ */
+export default class Tileset2D {
+    /**
+     * Takes in a function that returns tile data, a cache size, and a max and a min zoom level.
+     * Cache size defaults to 5 * number of tiles in the current viewport
+     */
+    constructor(opts) {
+        this.opts = opts;
+        this.onTileLoad = tile => {
+            this.opts.onTileLoad(tile);
+            if (this.opts.maxCacheByteSize) {
+                this._cacheByteSize += tile.byteLength;
+                this._resizeCache();
+            }
+        };
+        this._requestScheduler = new RequestScheduler({
+            maxRequests: opts.maxRequests,
+            throttleRequests: opts.maxRequests > 0
+        });
+        // Maps tile id in string {z}-{x}-{y} to a Tile object
+        this._cache = new Map();
+        this._tiles = [];
+        this._dirty = false;
+        this._cacheByteSize = 0;
+        // Cache the last processed viewport
+        this._viewport = null;
+        this._selectedTiles = null;
+        this._frameNumber = 0;
+        this._modelMatrix = new Matrix4();
+        this._modelMatrixInverse = new Matrix4();
+        this.setOptions(opts);
+    }
+    /* Public API */
+    get tiles() {
+        return this._tiles;
+    }
+    get selectedTiles() {
+        return this._selectedTiles;
+    }
+    get isLoaded() {
+        return this._selectedTiles !== null && this._selectedTiles.every(tile => tile.isLoaded);
+    }
+    get needsReload() {
+        return this._selectedTiles !== null && this._selectedTiles.some(tile => tile.needsReload);
+    }
+    setOptions(opts) {
+        Object.assign(this.opts, opts);
+        if (Number.isFinite(opts.maxZoom)) {
+            this._maxZoom = Math.floor(opts.maxZoom);
+        }
+        if (Number.isFinite(opts.minZoom)) {
+            this._minZoom = Math.ceil(opts.minZoom);
+        }
+    }
+    // Clean up any outstanding tile requests.
+    finalize() {
+        for (const tile of this._cache.values()) {
+            if (tile.isLoading) {
+                tile.abort();
+            }
+        }
+        this._cache.clear();
+        this._tiles = [];
+        this._selectedTiles = null;
+    }
+    reloadAll() {
+        for (const id of this._cache.keys()) {
+            const tile = this._cache.get(id);
+            if (!this._selectedTiles || !this._selectedTiles.includes(tile)) {
+                this._cache.delete(id);
+            }
+            else {
+                tile.setNeedsReload();
+            }
+        }
+    }
+    /**
+     * Update the cache with the given viewport and model matrix and triggers callback onUpdate.
+     */
+    update(viewport, { zRange, modelMatrix } = {}) {
+        const modelMatrixAsMatrix4 = new Matrix4(modelMatrix);
+        const isModelMatrixNew = !modelMatrixAsMatrix4.equals(this._modelMatrix);
+        if (!this._viewport || !viewport.equals(this._viewport) || isModelMatrixNew) {
+            if (isModelMatrixNew) {
+                this._modelMatrixInverse = modelMatrixAsMatrix4.clone().invert();
+                this._modelMatrix = modelMatrixAsMatrix4;
+            }
+            this._viewport = viewport;
+            const tileIndices = this.getTileIndices({
+                viewport,
+                maxZoom: this._maxZoom,
+                minZoom: this._minZoom,
+                zRange,
+                modelMatrix: this._modelMatrix,
+                modelMatrixInverse: this._modelMatrixInverse
+            });
+            this._selectedTiles = tileIndices.map(index => this._getTile(index, true));
+            if (this._dirty) {
+                // Some new tiles are added
+                this._rebuildTree();
+            }
+            // Check for needed reloads explicitly even if the view/matrix has not changed.
+        }
+        else if (this.needsReload) {
+            this._selectedTiles = this._selectedTiles.map(tile => this._getTile(tile.index, true));
+        }
+        // Update tile states
+        const changed = this.updateTileStates();
+        this._pruneRequests();
+        if (this._dirty) {
+            // cache size is either the user defined maxSize or 5 * number of current tiles in the viewport.
+            this._resizeCache();
+        }
+        if (changed) {
+            this._frameNumber++;
+        }
+        return this._frameNumber;
+    }
+    /* Public interface for subclassing */
+    /** Returns array of tile indices in the current viewport */
+    getTileIndices({ viewport, maxZoom, minZoom, zRange, modelMatrix, modelMatrixInverse }) {
+        const { tileSize, extent, zoomOffset } = this.opts;
+        return getTileIndices({
+            viewport,
+            maxZoom,
+            minZoom,
+            zRange,
+            tileSize,
+            extent: extent,
+            modelMatrix,
+            modelMatrixInverse,
+            zoomOffset
+        });
+    }
+    /** Returns unique string key for a tile index */
+    getTileId(index) {
+        return `${index.x}-${index.y}-${index.z}`;
+    }
+    /** Returns a zoom level for a tile index */
+    getTileZoom(index) {
+        return index.z;
+    }
+    /** Returns additional metadata to add to tile, bbox by default */
+    getTileMetadata(index) {
+        const { tileSize } = this.opts;
+        // @ts-expect-error
+        return { bbox: tileToBoundingBox(this._viewport, index.x, index.y, index.z, tileSize) };
+    }
+    /** Returns index of the parent tile */
+    getParentIndex(index) {
+        const x = Math.floor(index.x / 2);
+        const y = Math.floor(index.y / 2);
+        const z = index.z - 1;
+        return { x, y, z };
+    }
+    // Returns true if any tile's visibility changed
+    updateTileStates() {
+        const refinementStrategy = this.opts.refinementStrategy || STRATEGY_DEFAULT;
+        const visibilities = new Array(this._cache.size);
+        let i = 0;
+        // Reset state
+        for (const tile of this._cache.values()) {
+            // save previous state
+            visibilities[i++] = tile.isVisible;
+            tile.isSelected = false;
+            tile.isVisible = false;
+        }
+        // @ts-expect-error called only when _selectedTiles is already defined
+        for (const tile of this._selectedTiles) {
+            tile.isSelected = true;
+            tile.isVisible = true;
+        }
+        // Strategy-specific state logic
+        (typeof refinementStrategy === 'function'
+            ? refinementStrategy
+            : STRATEGIES[refinementStrategy])(Array.from(this._cache.values()));
+        i = 0;
+        // Check if any visibility has changed
+        for (const tile of this._cache.values()) {
+            if (visibilities[i++] !== tile.isVisible) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /* Private methods */
+    _pruneRequests() {
+        const { maxRequests } = this.opts;
+        const abortCandidates = [];
+        let ongoingRequestCount = 0;
+        for (const tile of this._cache.values()) {
+            // Keep track of all the ongoing requests
+            if (tile.isLoading) {
+                ongoingRequestCount++;
+                if (!tile.isSelected && !tile.isVisible) {
+                    abortCandidates.push(tile);
+                }
+            }
+        }
+        while (maxRequests > 0 && ongoingRequestCount > maxRequests && abortCandidates.length > 0) {
+            // There are too many ongoing requests, so abort some that are unselected
+            const tile = abortCandidates.shift();
+            tile.abort();
+            ongoingRequestCount--;
+        }
+    }
+    // This needs to be called every time some tiles have been added/removed from cache
+    _rebuildTree() {
+        const { _cache } = this;
+        // Reset states
+        for (const tile of _cache.values()) {
+            tile.parent = null;
+            if (tile.children) {
+                tile.children.length = 0;
+            }
+        }
+        // Rebuild tree
+        for (const tile of _cache.values()) {
+            const parent = this._getNearestAncestor(tile);
+            tile.parent = parent;
+            if (parent?.children) {
+                parent.children.push(tile);
+            }
+        }
+    }
+    /**
+     * Clear tiles that are not visible when the cache is full
+     */
+    /* eslint-disable complexity */
+    _resizeCache() {
+        const { _cache, opts } = this;
+        const maxCacheSize = opts.maxCacheSize ||
+            // @ts-expect-error called only when selectedTiles is initialized
+            (opts.maxCacheByteSize ? Infinity : DEFAULT_CACHE_SCALE * this.selectedTiles.length);
+        const maxCacheByteSize = opts.maxCacheByteSize || Infinity;
+        const overflown = _cache.size > maxCacheSize || this._cacheByteSize > maxCacheByteSize;
+        if (overflown) {
+            for (const [id, tile] of _cache) {
+                if (!tile.isVisible) {
+                    // delete tile
+                    this._cacheByteSize -= opts.maxCacheByteSize ? tile.byteLength : 0;
+                    _cache.delete(id);
+                    this.opts.onTileUnload(tile);
+                }
+                if (_cache.size <= maxCacheSize && this._cacheByteSize <= maxCacheByteSize) {
+                    break;
+                }
+            }
+            this._rebuildTree();
+            this._dirty = true;
+        }
+        if (this._dirty) {
+            // sort by zoom level so that smaller tiles are displayed on top
+            this._tiles = Array.from(this._cache.values()).sort((t1, t2) => t1.zoom - t2.zoom);
+            this._dirty = false;
+        }
+    }
+    _getTile(index, create) {
+        const id = this.getTileId(index);
+        let tile = this._cache.get(id);
+        let needsReload = false;
+        if (!tile && create) {
+            tile = new Tile2DHeader(index);
+            Object.assign(tile, this.getTileMetadata(tile.index));
+            Object.assign(tile, { id, zoom: this.getTileZoom(tile.index) });
+            needsReload = true;
+            this._cache.set(id, tile);
+            this._dirty = true;
+        }
+        else if (tile && tile.needsReload) {
+            needsReload = true;
+        }
+        if (tile && needsReload) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            tile.loadData({
+                getData: this.opts.getTileData,
+                requestScheduler: this._requestScheduler,
+                onLoad: this.onTileLoad,
+                onError: this.opts.onTileError
+            });
+        }
+        return tile;
+    }
+    _getNearestAncestor(tile) {
+        const { _minZoom = 0 } = this;
+        let index = tile.index;
+        while (this.getTileZoom(index) > _minZoom) {
+            index = this.getParentIndex(index);
+            const parent = this._getTile(index);
+            if (parent) {
+                return parent;
+            }
+        }
+        return null;
+    }
+}
+/* -- Refinement strategies --*/
+/* eslint-disable max-depth */
+// For all the selected && pending tiles:
+// - pick the closest ancestor as placeholder
+// - if no ancestor is visible, pick the closest children as placeholder
+function updateTileStateDefault(allTiles) {
+    for (const tile of allTiles) {
+        tile.state = 0;
+    }
+    for (const tile of allTiles) {
+        if (tile.isSelected && !getPlaceholderInAncestors(tile)) {
+            getPlaceholderInChildren(tile);
+        }
+    }
+    for (const tile of allTiles) {
+        tile.isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
+    }
+}
+// Until a selected tile and all its selected siblings are loaded, use the closest ancestor as placeholder
+function updateTileStateReplace(allTiles) {
+    for (const tile of allTiles) {
+        tile.state = 0;
+    }
+    for (const tile of allTiles) {
+        if (tile.isSelected) {
+            getPlaceholderInAncestors(tile);
+        }
+    }
+    // Always process parents first
+    const sortedTiles = Array.from(allTiles).sort((t1, t2) => t1.zoom - t2.zoom);
+    for (const tile of sortedTiles) {
+        tile.isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
+        if (tile.children && (tile.isVisible || tile.state & TILE_STATE_VISITED)) {
+            // If the tile is rendered, or if the tile has been explicitly hidden, hide all of its children
+            for (const child of tile.children) {
+                child.state = TILE_STATE_VISITED;
+            }
+        }
+        else if (tile.isSelected) {
+            getPlaceholderInChildren(tile);
+        }
+    }
+}
+// Walk up the tree until we find one ancestor that is loaded. Returns true if successful.
+function getPlaceholderInAncestors(startTile) {
+    let tile = startTile;
+    while (tile) {
+        if (tile.isLoaded || tile.content) {
+            tile.state |= TILE_STATE_VISIBLE;
+            return true;
+        }
+        tile = tile.parent;
+    }
+    return false;
+}
+// Recursively set children as placeholder
+function getPlaceholderInChildren(tile) {
+    for (const child of tile.children) {
+        if (child.isLoaded || child.content) {
+            child.state |= TILE_STATE_VISIBLE;
+        }
+        else {
+            getPlaceholderInChildren(child);
+        }
+    }
+}

package/typed/tile-layer/types.js

@@ -0,0 +1 @@
+export {};

package/typed/tile-layer/utils.d.ts

@@ -24,7 +24,7 @@ export declare function getCullBounds({ viewport, z, cullRect }: {
         width: number;
         height: number;
     };
-}): [number, number, number, number];
+}): [number, number, number, number][];
 export declare function osmTile2lngLat(x: number, y: number, z: number): [number, number];
 export declare function tileToBoundingBox(viewport: Viewport, x: number, y: number, z: number, tileSize?: number): TileBoundingBox;
 /**

package/typed/tile-layer/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tile-layer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AACvC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAKnF,eAAO,MAAM,OAAO;;;;;CAyBnB,CAAC;AA8BF,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,EAC3B,IAAI,EAAE;IACJ,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,GACA,MAAM,GAAG,IAAI,CAsBf;AAsCD,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,CAAC,EACD,QAAQ,EACT,EAAE;IACD,uBAAuB;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,sBAAsB;IACtB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAC;CACjE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CA8BnC;AAiBD,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAMhF;AAMD,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,EAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,GAAE,MAAkB,GAC3B,eAAe,CASjB;AA0BD;;;;GAIG;AAEH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAoB,EACpB,WAAW,EACX,kBAAkB,EAClB,UAAc,EACf,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,eA0BA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,IAAI,cAAc,CAO5D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tile-layer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AACvC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAKnF,eAAO,MAAM,OAAO;;;;;CAyBnB,CAAC;AA8BF,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,EAC3B,IAAI,EAAE;IACJ,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,GACA,MAAM,GAAG,IAAI,CAsBf;AAsCD,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,CAAK,EACL,QAAQ,EACT,EAAE;IACD,uBAAuB;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,sBAAsB;IACtB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAC;CACjE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAGrC;AAwDD,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAMhF;AAMD,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,QAAQ,EAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,GAAE,MAAkB,GAC3B,eAAe,CASjB;AA0BD;;;;GAIG;AAEH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAoB,EACpB,WAAW,EACX,kBAAkB,EAClB,UAAc,EACf,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,eA0BA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,IAAI,cAAc,CAO5D"}