@deck.gl/geo-layers 8.8.23 → 8.8.24

package/typed/mesh-layer/mesh-layer.js

@@ -0,0 +1,110 @@
+import { GLTFMaterialParser } from '@luma.gl/experimental';
+import { Model, pbr } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
+import vs from './mesh-layer-vertex.glsl';
+import fs from './mesh-layer-fragment.glsl';
+function validateGeometryAttributes(attributes) {
+    const hasColorAttribute = attributes.COLOR_0 || attributes.colors;
+    if (!hasColorAttribute) {
+        attributes.colors = { constant: true, value: new Float32Array([1, 1, 1]) };
+    }
+}
+const defaultProps = {
+    // PBR material object. _lighting must be pbr for this to work
+    pbrMaterial: { type: 'object', value: null },
+    featureIds: { type: 'array', value: null, optional: true }
+};
+export default class _MeshLayer extends SimpleMeshLayer {
+    getShaders() {
+        const shaders = super.getShaders();
+        const modules = shaders.modules;
+        modules.push(pbr);
+        return { ...shaders, vs, fs };
+    }
+    initializeState() {
+        const { featureIds } = this.props;
+        super.initializeState();
+        if (featureIds) {
+            this.state.attributeManager.add({
+                featureIdsPickingColors: {
+                    type: GL.UNSIGNED_BYTE,
+                    size: 3,
+                    noAlloc: true,
+                    update: this.calculateFeatureIdsPickingColors
+                }
+            });
+        }
+    }
+    updateState({ props, oldProps, changeFlags }) {
+        super.updateState({ props, oldProps, changeFlags });
+        if (props.pbrMaterial !== oldProps.pbrMaterial) {
+            this.updatePbrMaterialUniforms(props.pbrMaterial);
+        }
+    }
+    draw(opts) {
+        const { featureIds } = this.props;
+        if (!this.state.model) {
+            return;
+        }
+        this.state.model.setUniforms({
+            // Needed for PBR (TODO: find better way to get it)
+            u_Camera: this.state.model.getUniforms().project_uCameraPosition,
+            u_pickFeatureIds: Boolean(featureIds)
+        });
+        super.draw(opts);
+    }
+    getModel(mesh) {
+        const { id, pbrMaterial } = this.props;
+        const materialParser = this.parseMaterial(pbrMaterial, mesh);
+        const shaders = this.getShaders();
+        validateGeometryAttributes(mesh.attributes);
+        const model = new Model(this.context.gl, {
+            ...this.getShaders(),
+            id,
+            geometry: mesh,
+            defines: {
+                ...shaders.defines,
+                ...materialParser?.defines,
+                HAS_UV_REGIONS: mesh.attributes.uvRegions
+            },
+            parameters: materialParser?.parameters,
+            isInstanced: true
+        });
+        return model;
+    }
+    updatePbrMaterialUniforms(pbrMaterial) {
+        const { model } = this.state;
+        if (model) {
+            const { mesh } = this.props;
+            const materialParser = this.parseMaterial(pbrMaterial, mesh);
+            model.setUniforms(materialParser.uniforms);
+        }
+    }
+    parseMaterial(pbrMaterial, mesh) {
+        const unlit = Boolean(pbrMaterial.pbrMetallicRoughness && pbrMaterial.pbrMetallicRoughness.baseColorTexture);
+        const materialParser = new GLTFMaterialParser(this.context.gl, {
+            attributes: { NORMAL: mesh.attributes.normals, TEXCOORD_0: mesh.attributes.texCoords },
+            material: { unlit, ...pbrMaterial },
+            pbrDebug: false,
+            imageBasedLightingEnvironment: null,
+            lights: true,
+            useTangents: false
+        });
+        return materialParser;
+    }
+    calculateFeatureIdsPickingColors(attribute) {
+        const { featureIds } = this.props;
+        const value = new Uint8ClampedArray(featureIds.length * attribute.size);
+        const pickingColor = [];
+        for (let index = 0; index < featureIds.length; index++) {
+            this.encodePickingColor(featureIds[index], pickingColor);
+            value[index * 3] = pickingColor[0];
+            value[index * 3 + 1] = pickingColor[1];
+            value[index * 3 + 2] = pickingColor[2];
+        }
+        attribute.value = value;
+    }
+}
+_MeshLayer.layerName = '_MeshLayer';
+_MeshLayer.defaultProps = defaultProps;

package/typed/mvt-layer/coordinate-transform.js

@@ -0,0 +1,41 @@
+import { lerp } from '@math.gl/core';
+const availableTransformations = {
+    Point,
+    MultiPoint,
+    LineString,
+    MultiLineString,
+    Polygon,
+    MultiPolygon
+};
+function Point([pointX, pointY], [nw, se], viewport) {
+    const x = lerp(nw[0], se[0], pointX);
+    const y = lerp(nw[1], se[1], pointY);
+    return viewport.unprojectFlat([x, y]);
+}
+function getPoints(geometry, bbox, viewport) {
+    return geometry.map(g => Point(g, bbox, viewport));
+}
+function MultiPoint(multiPoint, bbox, viewport) {
+    return getPoints(multiPoint, bbox, viewport);
+}
+function LineString(line, bbox, viewport) {
+    return getPoints(line, bbox, viewport);
+}
+function MultiLineString(multiLineString, bbox, viewport) {
+    return multiLineString.map(lineString => LineString(lineString, bbox, viewport));
+}
+function Polygon(polygon, bbox, viewport) {
+    return polygon.map(polygonRing => getPoints(polygonRing, bbox, viewport));
+}
+function MultiPolygon(multiPolygon, bbox, viewport) {
+    return multiPolygon.map(polygon => Polygon(polygon, bbox, viewport));
+}
+export function transform(geometry, bbox, viewport) {
+    const nw = viewport.projectFlat([bbox.west, bbox.north]);
+    const se = viewport.projectFlat([bbox.east, bbox.south]);
+    const projectedBbox = [nw, se];
+    return {
+        ...geometry,
+        coordinates: availableTransformations[geometry.type](geometry.coordinates, projectedBbox, viewport)
+    };
+}

package/typed/mvt-layer/find-index-binary.js

@@ -0,0 +1,96 @@
+const GEOM_TYPES = ['points', 'lines', 'polygons'];
+/**
+ * Return the index of feature (numericProps or featureIds) for given feature id
+ * Example: findIndexBinary(data, 'id', 33) will return the index in the array of numericProps
+ * of the feature 33.
+ * @param {Object} data - The data in binary format
+ * @param {String} uniqueIdProperty - Name of the unique id property
+ * @param {Number|String} featureId - feature id to find
+ * @param {String} layerName - the layer to search in
+ */
+export default function findIndexBinary(data, uniqueIdProperty, featureId, layerName) {
+    for (const gt of GEOM_TYPES) {
+        const index = data[gt] && findIndexByType(data[gt], uniqueIdProperty, featureId, layerName);
+        if (index >= 0) {
+            return index;
+        }
+    }
+    return -1;
+}
+function findIndexByType(geomData, uniqueIdProperty, featureId, layerName) {
+    const featureIds = geomData.featureIds.value;
+    if (!featureIds.length) {
+        return -1;
+    }
+    let startFeatureIndex = 0;
+    let endFeatureIndex = featureIds[featureIds.length - 1] + 1;
+    if (layerName) {
+        const layerRange = getLayerRange(geomData, layerName);
+        if (layerRange) {
+            startFeatureIndex = layerRange[0];
+            endFeatureIndex = layerRange[1] + 1;
+        }
+        else {
+            return -1;
+        }
+    }
+    // Look for the uniqueIdProperty
+    let featureIndex = -1;
+    if (uniqueIdProperty in geomData.numericProps) {
+        const vertexIndex = geomData.numericProps[uniqueIdProperty].value.findIndex((x, i) => x === featureId && featureIds[i] >= startFeatureIndex && featureIds[i] < endFeatureIndex);
+        return vertexIndex >= 0 ? geomData.globalFeatureIds.value[vertexIndex] : -1;
+    }
+    else if (uniqueIdProperty) {
+        featureIndex = findIndex(geomData.properties, elem => elem[uniqueIdProperty] === featureId, startFeatureIndex, endFeatureIndex);
+    }
+    else if (geomData.fields) {
+        featureIndex = findIndex(geomData.fields, (elem) => elem.id === featureId, startFeatureIndex, endFeatureIndex);
+    }
+    return featureIndex >= 0 ? getGlobalFeatureId(geomData, featureIndex) : -1;
+}
+// Returns [firstFeatureIndex, lastFeatureIndex]
+// MVTLoader parses tiles layer-by-layer, so each layer is a continuous range
+function getLayerRange(geomData, layerName) {
+    if (!geomData.__layers) {
+        // Cache a map from properties.layerName to index ranges
+        const layerNames = {};
+        const { properties } = geomData;
+        for (let i = 0; i < properties.length; i++) {
+            const { layerName: key } = properties[i];
+            if (!key) {
+                // ignore
+            }
+            else if (layerNames[key]) {
+                layerNames[key][1] = i;
+            }
+            else {
+                layerNames[key] = [i, i];
+            }
+        }
+        geomData.__layers = layerNames;
+    }
+    return geomData.__layers[layerName];
+}
+// Returns global feature id
+function getGlobalFeatureId(geomData, featureIndex) {
+    if (!geomData.__ids) {
+        // Cache a map from featureId to globalFeatureId
+        const result = [];
+        const featureIds = geomData.featureIds.value;
+        const globalFeatureIds = geomData.globalFeatureIds.value;
+        for (let i = 0; i < featureIds.length; i++) {
+            result[featureIds[i]] = globalFeatureIds[i];
+        }
+        geomData.__ids = result;
+    }
+    return geomData.__ids[featureIndex];
+}
+// Like array.findIndex, but only search within a range
+function findIndex(array, predicate, startIndex, endIndex) {
+    for (let i = startIndex; i < endIndex; i++) {
+        if (predicate(array[i], i)) {
+            return i;
+        }
+    }
+    return -1;
+}

package/typed/mvt-layer/mvt-layer.js

@@ -0,0 +1,297 @@
+import { log, COORDINATE_SYSTEM } from '@deck.gl/core';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { Matrix4 } from '@math.gl/core';
+import { MVTWorkerLoader } from '@loaders.gl/mvt';
+import { binaryToGeojson } from '@loaders.gl/gis';
+import { ClipExtension } from '@deck.gl/extensions';
+import TileLayer from '../tile-layer/tile-layer';
+import { getURLFromTemplate, isGeoBoundingBox, isURLTemplate } from '../tile-layer/utils';
+import { transform } from './coordinate-transform';
+import findIndexBinary from './find-index-binary';
+const WORLD_SIZE = 512;
+const defaultProps = {
+    ...GeoJsonLayer.defaultProps,
+    uniqueIdProperty: { type: 'string', value: '' },
+    highlightedFeatureId: null,
+    loaders: [MVTWorkerLoader],
+    binary: true
+};
+export default class MVTLayer extends TileLayer {
+    initializeState() {
+        super.initializeState();
+        // GlobeView doesn't work well with binary data
+        const binary = this.context.viewport.resolution !== undefined ? false : this.props.binary;
+        this.setState({
+            binary,
+            data: null,
+            tileJSON: null
+        });
+    }
+    get isLoaded() {
+        return this.state && this.state.data && this.state.tileset && super.isLoaded;
+    }
+    updateState({ props, oldProps, context, changeFlags }) {
+        if (changeFlags.dataChanged) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._updateTileData();
+        }
+        if (this.state?.data) {
+            super.updateState({ props, oldProps, context, changeFlags });
+            this._setWGS84PropertyForTiles();
+        }
+        const { highlightColor } = props;
+        if (highlightColor !== oldProps.highlightColor && Array.isArray(highlightColor)) {
+            this.setState({ highlightColor });
+        }
+    }
+    /* eslint-disable complexity */
+    async _updateTileData() {
+        let data = this.props.data;
+        let tileJSON = null;
+        if (typeof data === 'string' && !isURLTemplate(data)) {
+            const { onDataLoad, fetch } = this.props;
+            this.setState({ data: null, tileJSON: null });
+            try {
+                tileJSON = await fetch(data, { propName: 'data', layer: this, loaders: [] });
+            }
+            catch (error) {
+                this.raiseError(error, 'loading TileJSON');
+                data = null;
+            }
+            if (onDataLoad) {
+                onDataLoad(tileJSON, { propName: 'data', layer: this });
+            }
+        }
+        else if (data.tilejson) {
+            tileJSON = data;
+        }
+        if (tileJSON) {
+            data = tileJSON.tiles;
+        }
+        this.setState({ data, tileJSON });
+    }
+    _getTilesetOptions() {
+        const opts = super._getTilesetOptions();
+        const tileJSON = this.state.tileJSON;
+        const { minZoom, maxZoom } = this.props;
+        if (tileJSON) {
+            if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > minZoom) {
+                opts.minZoom = tileJSON.minzoom;
+            }
+            if (Number.isFinite(tileJSON.maxzoom) &&
+                (!Number.isFinite(maxZoom) || tileJSON.maxzoom < maxZoom)) {
+                opts.maxZoom = tileJSON.maxzoom;
+            }
+        }
+        return opts;
+    }
+    /* eslint-disable complexity */
+    renderLayers() {
+        if (!this.state?.data)
+            return null;
+        return super.renderLayers();
+    }
+    getTileData(loadProps) {
+        const { data, binary } = this.state;
+        const { index, signal } = loadProps;
+        const url = getURLFromTemplate(data, loadProps);
+        if (!url) {
+            return Promise.reject('Invalid URL');
+        }
+        let loadOptions = this.getLoadOptions();
+        const { fetch } = this.props;
+        loadOptions = {
+            ...loadOptions,
+            mimeType: 'application/x-protobuf',
+            mvt: {
+                ...loadOptions?.mvt,
+                coordinates: this.context.viewport.resolution ? 'wgs84' : 'local',
+                tileIndex: index
+                // Local worker debug
+                // workerUrl: `modules/mvt/dist/mvt-loader.worker.js`
+                // Set worker to null to skip web workers
+                // workerUrl: null
+            },
+            gis: binary ? { format: 'binary' } : {}
+        };
+        return fetch(url, { propName: 'data', layer: this, loadOptions, signal });
+    }
+    renderSubLayers(props) {
+        const { x, y, z } = props.tile.index;
+        const worldScale = Math.pow(2, z);
+        const xScale = WORLD_SIZE / worldScale;
+        const yScale = -xScale;
+        const xOffset = (WORLD_SIZE * x) / worldScale;
+        const yOffset = WORLD_SIZE * (1 - y / worldScale);
+        const modelMatrix = new Matrix4().scale([xScale, yScale, 1]);
+        props.autoHighlight = false;
+        if (!this.context.viewport.resolution) {
+            props.modelMatrix = modelMatrix;
+            props.coordinateOrigin = [xOffset, yOffset, 0];
+            props.coordinateSystem = COORDINATE_SYSTEM.CARTESIAN;
+            props.extensions = [...(props.extensions || []), new ClipExtension()];
+        }
+        const subLayers = super.renderSubLayers(props);
+        if (this.state.binary && !(subLayers instanceof GeoJsonLayer)) {
+            log.warn('renderSubLayers() must return GeoJsonLayer when using binary:true')();
+        }
+        return subLayers;
+    }
+    _updateAutoHighlight(info) {
+        const { uniqueIdProperty } = this.props;
+        const { hoveredFeatureId, hoveredFeatureLayerName } = this.state;
+        const hoveredFeature = info.object;
+        let newHoveredFeatureId;
+        let newHoveredFeatureLayerName;
+        if (hoveredFeature) {
+            newHoveredFeatureId = getFeatureUniqueId(hoveredFeature, uniqueIdProperty);
+            newHoveredFeatureLayerName = getFeatureLayerName(hoveredFeature);
+        }
+        let { highlightColor } = this.props;
+        if (typeof highlightColor === 'function') {
+            highlightColor = highlightColor(info);
+        }
+        if (hoveredFeatureId !== newHoveredFeatureId ||
+            hoveredFeatureLayerName !== newHoveredFeatureLayerName) {
+            this.setState({
+                highlightColor,
+                hoveredFeatureId: newHoveredFeatureId,
+                hoveredFeatureLayerName: newHoveredFeatureLayerName
+            });
+        }
+    }
+    getPickingInfo(params) {
+        const info = super.getPickingInfo(params);
+        const isWGS84 = Boolean(this.context.viewport.resolution);
+        if (this.state.binary && info.index !== -1) {
+            const { data } = params.sourceLayer.props;
+            info.object = binaryToGeojson(data, { globalFeatureId: info.index });
+        }
+        if (info.object && !isWGS84) {
+            info.object = transformTileCoordsToWGS84(info.object, info.tile.bbox, this.context.viewport);
+        }
+        return info;
+    }
+    getSubLayerPropsByTile(tile) {
+        return {
+            highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
+            highlightColor: this.state.highlightColor
+        };
+    }
+    getHighlightedObjectIndex(tile) {
+        const { hoveredFeatureId, hoveredFeatureLayerName, binary } = this.state;
+        const { uniqueIdProperty, highlightedFeatureId } = this.props;
+        const data = tile.content;
+        const isHighlighted = isFeatureIdDefined(highlightedFeatureId);
+        const isFeatureIdPresent = isFeatureIdDefined(hoveredFeatureId) || isHighlighted;
+        if (!isFeatureIdPresent) {
+            return -1;
+        }
+        const featureIdToHighlight = isHighlighted ? highlightedFeatureId : hoveredFeatureId;
+        // Iterable data
+        if (Array.isArray(data)) {
+            return data.findIndex(feature => {
+                const isMatchingId = getFeatureUniqueId(feature, uniqueIdProperty) === featureIdToHighlight;
+                const isMatchingLayer = isHighlighted || getFeatureLayerName(feature) === hoveredFeatureLayerName;
+                return isMatchingId && isMatchingLayer;
+            });
+            // Non-iterable data
+        }
+        else if (data && binary) {
+            // Get the feature index of the selected item to highlight
+            return findIndexBinary(data, uniqueIdProperty, featureIdToHighlight, isHighlighted ? '' : hoveredFeatureLayerName);
+        }
+        return -1;
+    }
+    _pickObjects(maxObjects) {
+        const { deck, viewport } = this.context;
+        const width = viewport.width;
+        const height = viewport.height;
+        const x = viewport.x;
+        const y = viewport.y;
+        const layerIds = [this.id];
+        return deck.pickObjects({ x, y, width, height, layerIds, maxObjects });
+    }
+    /** Get the rendered features in the current viewport. */
+    getRenderedFeatures(maxFeatures = null) {
+        const features = this._pickObjects(maxFeatures);
+        const featureCache = new Set();
+        const renderedFeatures = [];
+        for (const f of features) {
+            const featureId = getFeatureUniqueId(f.object, this.props.uniqueIdProperty);
+            if (featureId === undefined) {
+                // we have no id for the feature, we just add to the list
+                renderedFeatures.push(f.object);
+            }
+            else if (!featureCache.has(featureId)) {
+                // Add removing duplicates
+                featureCache.add(featureId);
+                renderedFeatures.push(f.object);
+            }
+        }
+        return renderedFeatures;
+    }
+    _setWGS84PropertyForTiles() {
+        const propName = 'dataInWGS84';
+        const tileset = this.state.tileset;
+        // @ts-expect-error selectedTiles are always initialized when tile is being processed
+        tileset.selectedTiles.forEach((tile) => {
+            if (!tile.hasOwnProperty(propName)) {
+                // eslint-disable-next-line accessor-pairs
+                Object.defineProperty(tile, propName, {
+                    get: () => {
+                        // Still loading or encountered an error
+                        if (!tile.content) {
+                            return null;
+                        }
+                        if (this.state.binary && Array.isArray(tile.content) && !tile.content.length) {
+                            // TODO: @loaders.gl/mvt returns [] when no content. It should return a valid empty binary.
+                            // https://github.com/visgl/loaders.gl/pull/1137
+                            return [];
+                        }
+                        const { bbox } = tile;
+                        if (tile._contentWGS84 === undefined && isGeoBoundingBox(bbox)) {
+                            // Create a cache to transform only once
+                            const content = this.state.binary ? binaryToGeojson(tile.content) : tile.content;
+                            tile._contentWGS84 = content.map(feature => transformTileCoordsToWGS84(feature, bbox, this.context.viewport));
+                        }
+                        return tile._contentWGS84;
+                    }
+                });
+            }
+        });
+    }
+}
+MVTLayer.layerName = 'MVTLayer';
+MVTLayer.defaultProps = defaultProps;
+function getFeatureUniqueId(feature, uniqueIdProperty) {
+    if (feature.properties && uniqueIdProperty) {
+        return feature.properties[uniqueIdProperty];
+    }
+    if ('id' in feature) {
+        return feature.id;
+    }
+    return undefined;
+}
+function getFeatureLayerName(feature) {
+    return feature.properties?.layerName || null;
+}
+function isFeatureIdDefined(value) {
+    return value !== undefined && value !== null && value !== '';
+}
+function transformTileCoordsToWGS84(object, bbox, viewport) {
+    const feature = {
+        ...object,
+        geometry: {
+            type: object.geometry.type
+        }
+    };
+    // eslint-disable-next-line accessor-pairs
+    Object.defineProperty(feature.geometry, 'coordinates', {
+        get: () => {
+            const wgs84Geom = transform(object.geometry, bbox, viewport);
+            return wgs84Geom.coordinates;
+        }
+    });
+    return feature;
+}

package/typed/quadkey-layer/quadkey-layer.js

@@ -0,0 +1,18 @@
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import { getQuadkeyPolygon } from './quadkey-utils';
+const defaultProps = {
+    getQuadkey: { type: 'accessor', value: d => d.quadkey }
+};
+export default class QuadkeyLayer extends GeoCellLayer {
+    indexToBounds() {
+        const { data, getQuadkey } = this.props;
+        return {
+            data,
+            _normalize: false,
+            positionFormat: 'XY',
+            getPolygon: (x, objectInfo) => getQuadkeyPolygon(getQuadkey(x, objectInfo))
+        };
+    }
+}
+QuadkeyLayer.layerName = 'QuadkeyLayer';
+QuadkeyLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,26 @@
+import { worldToLngLat } from '@math.gl/web-mercator';
+const TILE_SIZE = 512;
+export function quadkeyToWorldBounds(quadkey) {
+    let x = 0;
+    let y = 0;
+    let mask = 1 << quadkey.length;
+    const scale = mask / TILE_SIZE;
+    for (let i = 0; i < quadkey.length; i++) {
+        mask >>= 1;
+        const q = parseInt(quadkey[i]);
+        if (q % 2)
+            x |= mask;
+        if (q > 1)
+            y |= mask;
+    }
+    return [
+        [x / scale, TILE_SIZE - y / scale],
+        [(x + 0.99) / scale, TILE_SIZE - (y + 0.99) / scale]
+    ];
+}
+export function getQuadkeyPolygon(quadkey) {
+    const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
+    const [w, n] = worldToLngLat(topLeft);
+    const [e, s] = worldToLngLat(bottomRight);
+    return [e, n, e, s, w, s, w, n, e, n];
+}