@deck.gl/geo-layers 8.9.14 → 8.9.16

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

@@ -0,0 +1,294 @@
+import GL from '@luma.gl/constants';
+import { Geometry } from '@luma.gl/core';
+import { COORDINATE_SYSTEM, CompositeLayer } 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';
+import { log } from '@deck.gl/core';
+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,
+    data: null,
+    loader: Tiles3DLoader,
+    onTilesetLoad: { type: 'function', value: tileset3d => { }, compare: false },
+    onTileLoad: { type: 'function', value: tileHeader => { }, compare: false },
+    onTileUnload: { type: 'function', value: tileHeader => { }, compare: false },
+    onTileError: { type: 'function', value: (tile, message, url) => { }, compare: false },
+    _getMeshColor: { type: 'function', value: tileHeader => [255, 255, 255], compare: false }
+};
+export default class Tile3DLayer extends CompositeLayer {
+    initializeState() {
+        if ('onTileLoadFail' in this.props) {
+            log.removed('onTileLoadFail', 'onTileError')();
+        }
+        // prop verification
+        this.state = {
+            layerMap: {},
+            tileset3d: null,
+            activeViewports: {},
+            lastUpdatedViewports: null
+        };
+    }
+    get isLoaded() {
+        const { tileset3d } = this.state;
+        return tileset3d && tileset3d.isLoaded();
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.somethingChanged;
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        if (props.data && props.data !== oldProps.data) {
+            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 { layerMap } = this.state;
+        const layerId = sourceLayer && sourceLayer.id;
+        if (layerId) {
+            // layerId: this.id-[scenegraph|pointcloud]-tileId
+            const substr = layerId.substring(this.id.length + 1);
+            const tileId = substr.substring(substr.indexOf('-') + 1);
+            info.object = layerMap[tileId] && layerMap[tileId].tile;
+        }
+        return info;
+    }
+    filterSubLayer({ layer, viewport }) {
+        const { tile } = layer.props;
+        const { id: viewportId } = viewport;
+        return tile.selected && tile.viewportIds.includes(viewportId);
+    }
+    _updateAutoHighlight(info) {
+        if (info.sourceLayer) {
+            info.sourceLayer.updateAutoHighlight(info);
+        }
+    }
+    async _loadTileset(tilesetUrl) {
+        const { loadOptions = {} } = this.props;
+        // TODO: deprecate `loader` in v9.0
+        let loader = this.props.loader || this.props.loaders;
+        if (Array.isArray(loader)) {
+            loader = loader[0];
+        }
+        const options = { loadOptions: { ...loadOptions } };
+        if (loader.preload) {
+            const preloadOptions = await loader.preload(tilesetUrl, loadOptions);
+            if (preloadOptions.headers) {
+                options.loadOptions.fetch = {
+                    ...options.loadOptions.fetch,
+                    headers: preloadOptions.headers
+                };
+            }
+            Object.assign(options, preloadOptions);
+        }
+        const tilesetJson = await load(tilesetUrl, loader, options.loadOptions);
+        const tileset3d = new Tileset3D(tilesetJson, {
+            onTileLoad: this._onTileLoad.bind(this),
+            onTileUnload: this._onTileUnload.bind(this),
+            onTileLoadFail: 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) {
+        const { tileset3d } = this.state;
+        const { timeline } = this.context;
+        const viewportsNumber = Object.keys(viewports).length;
+        if (!timeline || !viewportsNumber || !tileset3d) {
+            return;
+        }
+        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, oldLayer);
+            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({
+                drawMode: GL.TRIANGLES,
+                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;
+        }
+        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;
+}
+Tile3DLayer.layerName = 'Tile3DLayer';
+Tile3DLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,113 @@
+/* eslint-env browser */
+import { log } from '@deck.gl/core';
+export default class Tile2DHeader {
+    constructor(index) {
+        this.index = index;
+        this.isVisible = false;
+        this.isSelected = false;
+        this.parent = null;
+        this.children = [];
+        this.content = null;
+        this._loader = undefined;
+        this._abortController = null;
+        this._loaderId = 0;
+        this._isLoaded = false;
+        this._isCancelled = false;
+        this._needsReload = false;
+    }
+    get data() {
+        return this.isLoading && this._loader ? this._loader.then(() => this.data) : this.content;
+    }
+    get isLoaded() {
+        return this._isLoaded && !this._needsReload;
+    }
+    get isLoading() {
+        return Boolean(this._loader) && !this._isCancelled;
+    }
+    get needsReload() {
+        return this._needsReload || this._isCancelled;
+    }
+    get byteLength() {
+        const result = this.content ? this.content.byteLength : 0;
+        if (!Number.isFinite(result)) {
+            log.error('byteLength not defined in tile data')();
+        }
+        return result;
+    }
+    /* eslint-disable max-statements */
+    async _loadData({ getData, requestScheduler, onLoad, onError }) {
+        const { index, id, bbox, userData, zoom } = this;
+        const loaderId = this._loaderId;
+        this._abortController = new AbortController();
+        const { signal } = this._abortController;
+        // @ts-expect-error (2345) Argument of type '(tile: any) => 1 | -1' is not assignable ...
+        const requestToken = await requestScheduler.scheduleRequest(this, tile => {
+            return tile.isSelected ? 1 : -1;
+        });
+        if (!requestToken) {
+            this._isCancelled = true;
+            return;
+        }
+        // A tile can be cancelled while being scheduled
+        if (this._isCancelled) {
+            requestToken.done();
+            return;
+        }
+        let tileData = null;
+        let error;
+        try {
+            tileData = await getData({ index, id, bbox, userData, zoom, signal });
+        }
+        catch (err) {
+            error = err || true;
+        }
+        finally {
+            requestToken.done();
+        }
+        // If loadData has been called with a newer version, discard the result from this operation
+        if (loaderId !== this._loaderId) {
+            return;
+        }
+        // Clear the `isLoading` flag
+        this._loader = undefined;
+        // Rewrite tile content with the result of getTileData if successful, or `null` in case of
+        // error or cancellation
+        this.content = tileData;
+        // If cancelled, do not invoke the callbacks
+        // Consider it loaded if we tried to cancel but `getTileData` still returned data
+        if (this._isCancelled && !tileData) {
+            this._isLoaded = false;
+            return;
+        }
+        this._isLoaded = true;
+        this._isCancelled = false;
+        if (error) {
+            onError(error, this);
+        }
+        else {
+            onLoad(this);
+        }
+    }
+    loadData(opts) {
+        this._isLoaded = false;
+        this._isCancelled = false;
+        this._needsReload = false;
+        this._loaderId++;
+        this._loader = this._loadData(opts);
+        return this._loader;
+    }
+    setNeedsReload() {
+        if (this.isLoading) {
+            this.abort();
+            this._loader = undefined;
+        }
+        this._needsReload = true;
+    }
+    abort() {
+        if (this.isLoaded) {
+            return;
+        }
+        this._isCancelled = true;
+        this._abortController?.abort();
+    }
+}

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

@@ -0,0 +1,181 @@
+/* eslint-disable complexity */
+import { WebMercatorViewport, _GlobeViewport } from '@deck.gl/core';
+import { CullingVolume, Plane, AxisAlignedBoundingBox, makeOrientedBoundingBoxFromPoints } from '@math.gl/culling';
+import { lngLatToWorld } from '@math.gl/web-mercator';
+import { osmTile2lngLat } from './utils';
+const TILE_SIZE = 512;
+// number of world copies to check
+const MAX_MAPS = 3;
+// for calculating bounding volume of a tile in a non-web-mercator viewport
+const REF_POINTS_5 = [
+    [0.5, 0.5],
+    [0, 0],
+    [0, 1],
+    [1, 0],
+    [1, 1]
+]; // 4 corners and center
+const REF_POINTS_9 = REF_POINTS_5.concat([
+    [0, 0.5],
+    [0.5, 0],
+    [1, 0.5],
+    [0.5, 1]
+]); // 4 corners, center and 4 mid points
+const REF_POINTS_11 = REF_POINTS_9.concat([
+    [0.25, 0.5],
+    [0.75, 0.5]
+]); // 2 additional points on equator for top tile
+class OSMNode {
+    constructor(x, y, z) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+    }
+    get children() {
+        if (!this._children) {
+            const x = this.x * 2;
+            const y = this.y * 2;
+            const z = this.z + 1;
+            this._children = [
+                new OSMNode(x, y, z),
+                new OSMNode(x, y + 1, z),
+                new OSMNode(x + 1, y, z),
+                new OSMNode(x + 1, y + 1, z)
+            ];
+        }
+        return this._children;
+    }
+    update(params) {
+        const { viewport, cullingVolume, elevationBounds, minZ, maxZ, bounds, offset, project } = params;
+        const boundingVolume = this.getBoundingVolume(elevationBounds, offset, project);
+        // First, check if this tile is visible
+        if (bounds && !this.insideBounds(bounds)) {
+            return false;
+        }
+        const isInside = cullingVolume.computeVisibility(boundingVolume);
+        if (isInside < 0) {
+            return false;
+        }
+        // Avoid loading overlapping tiles - if a descendant is requested, do not request the ancester
+        if (!this.childVisible) {
+            let { z } = this;
+            if (z < maxZ && z >= minZ) {
+                // Adjust LOD
+                // If the tile is far enough from the camera, accept a lower zoom level
+                const distance = (boundingVolume.distanceTo(viewport.cameraPosition) * viewport.scale) / viewport.height;
+                z += Math.floor(Math.log2(distance));
+            }
+            if (z >= maxZ) {
+                // LOD is acceptable
+                this.selected = true;
+                return true;
+            }
+        }
+        // LOD is not enough, recursively test child tiles
+        this.selected = false;
+        this.childVisible = true;
+        for (const child of this.children) {
+            child.update(params);
+        }
+        return true;
+    }
+    getSelected(result = []) {
+        if (this.selected) {
+            result.push(this);
+        }
+        if (this._children) {
+            for (const node of this._children) {
+                node.getSelected(result);
+            }
+        }
+        return result;
+    }
+    insideBounds([minX, minY, maxX, maxY]) {
+        const scale = Math.pow(2, this.z);
+        const extent = TILE_SIZE / scale;
+        return (this.x * extent < maxX &&
+            this.y * extent < maxY &&
+            (this.x + 1) * extent > minX &&
+            (this.y + 1) * extent > minY);
+    }
+    getBoundingVolume(zRange, worldOffset, project) {
+        if (project) {
+            // Custom projection
+            // Estimate bounding box from sample points
+            // At low zoom level we need more samples to calculate the bounding volume correctly
+            const refPoints = this.z < 1 ? REF_POINTS_11 : this.z < 2 ? REF_POINTS_9 : REF_POINTS_5;
+            // Convert from tile-relative coordinates to common space
+            const refPointPositions = [];
+            for (const p of refPoints) {
+                const lngLat = osmTile2lngLat(this.x + p[0], this.y + p[1], this.z);
+                lngLat[2] = zRange[0];
+                refPointPositions.push(project(lngLat));
+                if (zRange[0] !== zRange[1]) {
+                    // Account for the elevation volume
+                    lngLat[2] = zRange[1];
+                    refPointPositions.push(project(lngLat));
+                }
+            }
+            return makeOrientedBoundingBoxFromPoints(refPointPositions);
+        }
+        // Use WebMercator projection
+        const scale = Math.pow(2, this.z);
+        const extent = TILE_SIZE / scale;
+        const originX = this.x * extent + worldOffset * TILE_SIZE;
+        // deck's common space is y-flipped
+        const originY = TILE_SIZE - (this.y + 1) * extent;
+        return new AxisAlignedBoundingBox([originX, originY, zRange[0]], [originX + extent, originY + extent, zRange[1]]);
+    }
+}
+export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
+    const project = viewport instanceof _GlobeViewport && viewport.resolution
+        ? // eslint-disable-next-line @typescript-eslint/unbound-method
+            viewport.projectPosition
+        : null;
+    // Get the culling volume of the current camera
+    const planes = Object.values(viewport.getFrustumPlanes()).map(({ normal, distance }) => new Plane(normal.clone().negate(), distance));
+    const cullingVolume = new CullingVolume(planes);
+    // Project zRange from meters to common space
+    const unitsPerMeter = viewport.distanceScales.unitsPerMeter[2];
+    const elevationMin = (zRange && zRange[0] * unitsPerMeter) || 0;
+    const elevationMax = (zRange && zRange[1] * unitsPerMeter) || 0;
+    // Always load at the current zoom level if pitch is small
+    const minZ = viewport instanceof WebMercatorViewport && viewport.pitch <= 60 ? maxZ : 0;
+    // Map extent to OSM position
+    if (bounds) {
+        const [minLng, minLat, maxLng, maxLat] = bounds;
+        const topLeft = lngLatToWorld([minLng, maxLat]);
+        const bottomRight = lngLatToWorld([maxLng, minLat]);
+        bounds = [topLeft[0], TILE_SIZE - topLeft[1], bottomRight[0], TILE_SIZE - bottomRight[1]];
+    }
+    const root = new OSMNode(0, 0, 0);
+    const traversalParams = {
+        viewport,
+        project,
+        cullingVolume,
+        elevationBounds: [elevationMin, elevationMax],
+        minZ,
+        maxZ,
+        bounds,
+        // num. of worlds from the center. For repeated maps
+        offset: 0
+    };
+    root.update(traversalParams);
+    if (viewport instanceof WebMercatorViewport &&
+        viewport.subViewports &&
+        viewport.subViewports.length > 1) {
+        // Check worlds in repeated maps
+        traversalParams.offset = -1;
+        while (root.update(traversalParams)) {
+            if (--traversalParams.offset < -MAX_MAPS) {
+                break;
+            }
+        }
+        traversalParams.offset = 1;
+        while (root.update(traversalParams)) {
+            if (++traversalParams.offset > MAX_MAPS) {
+                break;
+            }
+        }
+    }
+    return root.getSelected();
+}