@deck.gl/geo-layers 8.8.0-beta.5 → 8.8.0

package/typed/s2-layer/s2-utils.js

@@ -0,0 +1,88 @@
+// s2-geometry is a pure JavaScript port of Google/Niantic's S2 Geometry library
+// which is perfect since it works in the browser.
+import { toHilbertQuadkey, FromHilbertQuadKey, IJToST, STToUV, FaceUVToXYZ, XYZToLngLat } from './s2-geometry';
+import Long from 'long';
+/**
+ * Given an S2 token this function convert the token to 64 bit id
+   https://github.com/google/s2-geometry-library-java/blob/c04b68bf3197a9c34082327eeb3aec7ab7c85da1/src/com/google/common/geometry/S2CellId.java#L439
+ * */
+function getIdFromToken(token) {
+    // pad token with zeros to make the length 16
+    const paddedToken = token.padEnd(16, '0');
+    return Long.fromString(paddedToken, 16);
+}
+const MAX_RESOLUTION = 100;
+/* Adapted from s2-geometry's S2Cell.getCornerLatLngs */
+/* eslint-disable max-statements */
+function getGeoBounds({ face, ij, level }) {
+    const offsets = [
+        [0, 0],
+        [0, 1],
+        [1, 1],
+        [1, 0],
+        [0, 0]
+    ];
+    // The S2 cell edge is curved: http://s2geometry.io/
+    // This is more prominent at lower levels
+    // resolution is the number of segments to generate per edge.
+    // We exponentially reduce resolution as level increases so it doesn't affect perf
+    // when there are a large number of cells
+    const resolution = Math.max(1, Math.ceil(MAX_RESOLUTION * Math.pow(2, -level)));
+    const result = new Float64Array(4 * resolution * 2 + 2);
+    let ptIndex = 0;
+    let prevLng = 0;
+    for (let i = 0; i < 4; i++) {
+        const offset = offsets[i].slice(0);
+        const nextOffset = offsets[i + 1];
+        const stepI = (nextOffset[0] - offset[0]) / resolution;
+        const stepJ = (nextOffset[1] - offset[1]) / resolution;
+        for (let j = 0; j < resolution; j++) {
+            offset[0] += stepI;
+            offset[1] += stepJ;
+            // Cell can be represented by coordinates IJ, ST, UV, XYZ
+            // http://s2geometry.io/devguide/s2cell_hierarchy#coordinate-systems
+            const st = IJToST(ij, level, offset);
+            const uv = STToUV(st);
+            const xyz = FaceUVToXYZ(face, uv);
+            const lngLat = XYZToLngLat(xyz);
+            // Adjust longitude for Web Mercator projection
+            if (Math.abs(lngLat[1]) > 89.999) {
+                lngLat[0] = prevLng;
+            }
+            const deltaLng = lngLat[0] - prevLng;
+            lngLat[0] += deltaLng > 180 ? -360 : deltaLng < -180 ? 360 : 0;
+            result[ptIndex++] = lngLat[0];
+            result[ptIndex++] = lngLat[1];
+            prevLng = lngLat[0];
+        }
+    }
+    // close the loop
+    result[ptIndex++] = result[0];
+    result[ptIndex++] = result[1];
+    return result;
+}
+/* eslint-enable max-statements */
+export function getS2QuadKey(token) {
+    if (typeof token === 'string') {
+        if (token.indexOf('/') > 0) {
+            // is Hilbert quad key
+            return token;
+        }
+        // is S2 token
+        token = getIdFromToken(token);
+    }
+    // is Long id
+    return toHilbertQuadkey(token.toString());
+}
+/**
+ * Get a polygon with corner coordinates for an s2 cell
+ * @param {*} cell - This can be an S2 key or token
+ * @return {Array} - a simple polygon in array format: [[lng, lat], ...]
+ *   - each coordinate is an array [lng, lat]
+ *   - the polygon is closed, i.e. last coordinate is a copy of the first coordinate
+ */
+export function getS2Polygon(token) {
+    const key = getS2QuadKey(token);
+    const s2cell = FromHilbertQuadKey(key);
+    return getGeoBounds(s2cell);
+}

package/typed/terrain-layer/terrain-layer.js

@@ -0,0 +1,226 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { CompositeLayer, log } from '@deck.gl/core';
+import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
+import { COORDINATE_SYSTEM } from '@deck.gl/core';
+import { TerrainWorkerLoader } from '@loaders.gl/terrain';
+import TileLayer from '../tile-layer/tile-layer';
+import { urlType, getURLFromTemplate } from '../tile-layer/utils';
+const DUMMY_DATA = [1];
+const defaultProps = {
+    ...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 },
+    // Color to use if texture is unavailable
+    color: { type: 'color', value: [255, 255, 255] },
+    // 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: { type: 'string', value: null },
+    // Same as SimpleMeshLayer wireframe
+    wireframe: false,
+    material: true,
+    loaders: [TerrainWorkerLoader]
+};
+// Turns array of templates into a single string to work around shallow change
+function urlTemplateToUpdateTrigger(template) {
+    if (Array.isArray(template)) {
+        return template.join(';');
+    }
+    return template;
+}
+/**
+ * state: {
+ *   isTiled: True renders TileLayer of many SimpleMeshLayers, false renders one SimpleMeshLayer
+ *   terrain: Mesh object. Only defined when isTiled is false.
+ * }
+ */
+export default class TerrainLayer extends CompositeLayer {
+    updateState({ props, oldProps }) {
+        const elevationDataChanged = props.elevationData !== oldProps.elevationData;
+        if (elevationDataChanged) {
+            const { elevationData } = props;
+            const isTiled = elevationData &&
+                (Array.isArray(elevationData) ||
+                    (elevationData.includes('{x}') && elevationData.includes('{y}')));
+            this.setState({ isTiled });
+        }
+        // Reloading for single terrain mesh
+        const shouldReload = elevationDataChanged ||
+            props.meshMaxError !== oldProps.meshMaxError ||
+            props.elevationDecoder !== oldProps.elevationDecoder ||
+            props.bounds !== oldProps.bounds;
+        if (!this.state.isTiled && shouldReload) {
+            const terrain = this.loadTerrain(props);
+            this.setState({ terrain });
+        }
+        // TODO - remove in v9
+        if (props.workerUrl) {
+            log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
+        }
+    }
+    loadTerrain({ elevationData, bounds, elevationDecoder, meshMaxError, signal }) {
+        if (!elevationData) {
+            return null;
+        }
+        let loadOptions = this.getLoadOptions();
+        loadOptions = {
+            ...loadOptions,
+            terrain: {
+                skirtHeight: this.state.isTiled ? meshMaxError * 2 : 0,
+                ...loadOptions?.terrain,
+                bounds,
+                meshMaxError,
+                elevationDecoder
+            }
+        };
+        const { fetch } = this.props;
+        return fetch(elevationData, { propName: 'elevationData', layer: this, loadOptions, signal });
+    }
+    getTiledTerrainData(tile) {
+        const { elevationData, fetch, texture, elevationDecoder, meshMaxError } = this.props;
+        const { viewport } = this.context;
+        const dataUrl = getURLFromTemplate(elevationData, tile);
+        const textureUrl = getURLFromTemplate(texture, tile);
+        const { bbox, signal } = tile;
+        const bottomLeft = viewport.isGeospatial
+            ? viewport.projectFlat([bbox.west, bbox.south])
+            : [bbox.left, bbox.bottom];
+        const topRight = viewport.isGeospatial
+            ? viewport.projectFlat([bbox.east, bbox.north])
+            : [bbox.right, bbox.top];
+        const bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+        const terrain = this.loadTerrain({
+            elevationData: dataUrl,
+            bounds,
+            elevationDecoder,
+            meshMaxError,
+            signal
+        });
+        const surface = textureUrl
+            ? // If surface image fails to load, the tile should still be displayed
+                fetch(textureUrl, { propName: 'texture', layer: this, loaders: [], signal }).catch(_ => null)
+            : Promise.resolve(null);
+        return Promise.all([terrain, surface]);
+    }
+    renderSubLayers(props) {
+        const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
+        const { data, color } = props;
+        if (!data) {
+            return null;
+        }
+        const [mesh, texture] = data;
+        return new SubLayerClass(props, {
+            data: DUMMY_DATA,
+            mesh,
+            texture,
+            _instanced: false,
+            coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+            getPosition: d => [0, 0, 0],
+            getColor: color
+        });
+    }
+    // Update zRange of viewport
+    onViewportLoad(tiles) {
+        if (!tiles) {
+            return;
+        }
+        const { zRange } = this.state;
+        const ranges = tiles
+            .map(tile => tile.content)
+            .filter(Boolean)
+            .map(arr => {
+            const bounds = arr[0].header.boundingBox;
+            return 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: [minZ, maxZ] });
+        }
+    }
+    renderLayers() {
+        const { color, material, elevationData, texture, wireframe, meshMaxError, elevationDecoder, tileSize, maxZoom, minZoom, extent, maxRequests, onTileLoad, onTileUnload, onTileError, maxCacheSize, maxCacheByteSize, refinementStrategy } = this.props;
+        if (this.state.isTiled) {
+            return new TileLayer(this.getSubLayerProps({
+                id: 'tiles'
+            }), {
+                wireframe,
+                color,
+                material,
+                getTileData: this.getTiledTerrainData.bind(this),
+                renderSubLayers: this.renderSubLayers.bind(this),
+                updateTriggers: {
+                    getTileData: {
+                        elevationData: urlTemplateToUpdateTrigger(elevationData),
+                        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
+            });
+        }
+        const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
+        return new SubLayerClass(this.getSubLayerProps({
+            id: 'mesh'
+        }), {
+            data: DUMMY_DATA,
+            mesh: this.state.terrain,
+            texture,
+            _instanced: false,
+            getPosition: d => [0, 0, 0],
+            getColor: color,
+            material,
+            wireframe
+        });
+    }
+}
+TerrainLayer.layerName = 'TerrainLayer';
+TerrainLayer.defaultProps = defaultProps;

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;