@deck.gl/geo-layers 9.0.0-beta.1 → 9.0.0-beta.3

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

@@ -0,0 +1,234 @@
+import { getOSMTileIndices } from "./tile-2d-traversal.js";
+const TILE_SIZE = 512;
+const DEFAULT_EXTENT = [-Infinity, -Infinity, Infinity, Infinity];
+export const urlType = {
+    type: 'object',
+    value: null,
+    validate: (value, propType) => (propType.optional && value === null) ||
+        typeof value === 'string' ||
+        (Array.isArray(value) && value.every(url => typeof url === 'string')),
+    equal: (value1, value2) => {
+        if (value1 === value2) {
+            return true;
+        }
+        if (!Array.isArray(value1) || !Array.isArray(value2)) {
+            return false;
+        }
+        const len = value1.length;
+        if (len !== value2.length) {
+            return false;
+        }
+        for (let i = 0; i < len; i++) {
+            if (value1[i] !== value2[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+};
+function transformBox(bbox, modelMatrix) {
+    const transformedCoords = [
+        // top-left
+        modelMatrix.transformAsPoint([bbox[0], bbox[1]]),
+        // top-right
+        modelMatrix.transformAsPoint([bbox[2], bbox[1]]),
+        // bottom-left
+        modelMatrix.transformAsPoint([bbox[0], bbox[3]]),
+        // bottom-right
+        modelMatrix.transformAsPoint([bbox[2], bbox[3]])
+    ];
+    const transformedBox = [
+        // Minimum x coord
+        Math.min(...transformedCoords.map(i => i[0])),
+        // Minimum y coord
+        Math.min(...transformedCoords.map(i => i[1])),
+        // Max x coord
+        Math.max(...transformedCoords.map(i => i[0])),
+        // Max y coord
+        Math.max(...transformedCoords.map(i => i[1]))
+    ];
+    return transformedBox;
+}
+function stringHash(s) {
+    return Math.abs(s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0));
+}
+export function getURLFromTemplate(template, tile) {
+    if (!template || !template.length) {
+        return null;
+    }
+    const { index, id } = tile;
+    if (Array.isArray(template)) {
+        const i = stringHash(id) % template.length;
+        template = template[i];
+    }
+    let url = template;
+    for (const key of Object.keys(index)) {
+        const regex = new RegExp(`{${key}}`, 'g');
+        url = url.replace(regex, String(index[key]));
+    }
+    // Back-compatible support for {-y}
+    if (Number.isInteger(index.y) && Number.isInteger(index.z)) {
+        url = url.replace(/\{-y\}/g, String(Math.pow(2, index.z) - index.y - 1));
+    }
+    return url;
+}
+/**
+ * gets the bounding box of a viewport
+ */
+function getBoundingBox(viewport, zRange, extent) {
+    let bounds;
+    if (zRange && zRange.length === 2) {
+        const [minZ, maxZ] = zRange;
+        const bounds0 = viewport.getBounds({ z: minZ });
+        const bounds1 = viewport.getBounds({ z: maxZ });
+        bounds = [
+            Math.min(bounds0[0], bounds1[0]),
+            Math.min(bounds0[1], bounds1[1]),
+            Math.max(bounds0[2], bounds1[2]),
+            Math.max(bounds0[3], bounds1[3])
+        ];
+    }
+    else {
+        bounds = viewport.getBounds();
+    }
+    if (!viewport.isGeospatial) {
+        return [
+            // Top corner should not be more then bottom corner in either direction
+            Math.max(Math.min(bounds[0], extent[2]), extent[0]),
+            Math.max(Math.min(bounds[1], extent[3]), extent[1]),
+            // Bottom corner should not be less then top corner in either direction
+            Math.min(Math.max(bounds[2], extent[0]), extent[2]),
+            Math.min(Math.max(bounds[3], extent[1]), extent[3])
+        ];
+    }
+    return [
+        Math.max(bounds[0], extent[0]),
+        Math.max(bounds[1], extent[1]),
+        Math.min(bounds[2], extent[2]),
+        Math.min(bounds[3], extent[3])
+    ];
+}
+/** Get culling bounds in world space */
+export function getCullBounds({ viewport, z, cullRect }) {
+    const subViewports = viewport.subViewports || [viewport];
+    return subViewports.map(v => getCullBoundsInViewport(v, z || 0, cullRect));
+}
+function getCullBoundsInViewport(
+/** Current viewport */
+viewport, 
+/** At altitude */
+z, 
+/** Culling rectangle in screen space */
+cullRect) {
+    if (!Array.isArray(z)) {
+        const x = cullRect.x - viewport.x;
+        const y = cullRect.y - viewport.y;
+        const { width, height } = cullRect;
+        const unprojectOption = { targetZ: z };
+        const topLeft = viewport.unproject([x, y], unprojectOption);
+        const topRight = viewport.unproject([x + width, y], unprojectOption);
+        const bottomLeft = viewport.unproject([x, y + height], unprojectOption);
+        const bottomRight = viewport.unproject([x + width, y + height], unprojectOption);
+        return [
+            Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+            Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]),
+            Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+            Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1])
+        ];
+    }
+    const bounds0 = getCullBoundsInViewport(viewport, z[0], cullRect);
+    const bounds1 = getCullBoundsInViewport(viewport, z[1], cullRect);
+    return [
+        Math.min(bounds0[0], bounds1[0]),
+        Math.min(bounds0[1], bounds1[1]),
+        Math.max(bounds0[2], bounds1[2]),
+        Math.max(bounds0[3], bounds1[3])
+    ];
+}
+function getIndexingCoords(bbox, scale, modelMatrixInverse) {
+    if (modelMatrixInverse) {
+        const transformedTileIndex = transformBox(bbox, modelMatrixInverse).map(i => (i * scale) / TILE_SIZE);
+        return transformedTileIndex;
+    }
+    return bbox.map(i => (i * scale) / TILE_SIZE);
+}
+function getScale(z, tileSize) {
+    return (Math.pow(2, z) * TILE_SIZE) / tileSize;
+}
+// https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Lon..2Flat._to_tile_numbers_2
+export function osmTile2lngLat(x, y, z) {
+    const scale = getScale(z, TILE_SIZE);
+    const lng = (x / scale) * 360 - 180;
+    const n = Math.PI - (2 * Math.PI * y) / scale;
+    const lat = (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+    return [lng, lat];
+}
+function tile2XY(x, y, z, tileSize) {
+    const scale = getScale(z, tileSize);
+    return [(x / scale) * TILE_SIZE, (y / scale) * TILE_SIZE];
+}
+export function tileToBoundingBox(viewport, x, y, z, tileSize = TILE_SIZE) {
+    if (viewport.isGeospatial) {
+        const [west, north] = osmTile2lngLat(x, y, z);
+        const [east, south] = osmTile2lngLat(x + 1, y + 1, z);
+        return { west, north, east, south };
+    }
+    const [left, top] = tile2XY(x, y, z, tileSize);
+    const [right, bottom] = tile2XY(x + 1, y + 1, z, tileSize);
+    return { left, top, right, bottom };
+}
+function getIdentityTileIndices(viewport, z, tileSize, extent, modelMatrixInverse) {
+    const bbox = getBoundingBox(viewport, null, extent);
+    const scale = getScale(z, tileSize);
+    const [minX, minY, maxX, maxY] = getIndexingCoords(bbox, scale, modelMatrixInverse);
+    const indices = [];
+    /*
+        |  TILE  |  TILE  |  TILE  |
+          |(minX)            |(maxX)
+     */
+    for (let x = Math.floor(minX); x < maxX; x++) {
+        for (let y = Math.floor(minY); y < maxY; y++) {
+            indices.push({ x, y, z });
+        }
+    }
+    return indices;
+}
+/**
+ * Returns all tile indices in the current viewport. If the current zoom level is smaller
+ * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
+ * return tiles that are on maxZoom.
+ */
+// eslint-disable-next-line complexity
+export function getTileIndices({ viewport, maxZoom, minZoom, zRange, extent, tileSize = TILE_SIZE, modelMatrix, modelMatrixInverse, zoomOffset = 0 }) {
+    let z = viewport.isGeospatial
+        ? Math.round(viewport.zoom + Math.log2(TILE_SIZE / tileSize)) + zoomOffset
+        : Math.ceil(viewport.zoom) + zoomOffset;
+    if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
+        if (!extent) {
+            return [];
+        }
+        z = minZoom;
+    }
+    if (typeof maxZoom === 'number' && Number.isFinite(maxZoom) && z > maxZoom) {
+        z = maxZoom;
+    }
+    let transformedExtent = extent;
+    if (modelMatrix && modelMatrixInverse && extent && !viewport.isGeospatial) {
+        transformedExtent = transformBox(extent, modelMatrix);
+    }
+    return viewport.isGeospatial
+        ? getOSMTileIndices(viewport, z, zRange, extent)
+        : getIdentityTileIndices(viewport, z, tileSize, transformedExtent || DEFAULT_EXTENT, modelMatrixInverse);
+}
+/**
+ * Returns true if s is a valid URL template
+ */
+export function isURLTemplate(s) {
+    return /(?=.*{z})(?=.*{x})(?=.*({y}|{-y}))/.test(s);
+}
+export function isGeoBoundingBox(v) {
+    return (Number.isFinite(v.west) &&
+        Number.isFinite(v.north) &&
+        Number.isFinite(v.east) &&
+        Number.isFinite(v.south));
+}

package/dist/trips-layer/trips-layer.js

@@ -0,0 +1,93 @@
+// 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 { PathLayer } from '@deck.gl/layers';
+const defaultProps = {
+    fadeTrail: true,
+    trailLength: { type: 'number', value: 120, min: 0 },
+    currentTime: { type: 'number', value: 0, min: 0 },
+    getTimestamps: { type: 'accessor', value: (d) => d.timestamps }
+};
+/** Render animated paths that represent vehicle trips. */
+export default class TripsLayer extends PathLayer {
+    static { this.layerName = 'TripsLayer'; }
+    static { this.defaultProps = defaultProps; }
+    getShaders() {
+        const shaders = super.getShaders();
+        shaders.inject = {
+            'vs:#decl': `\
+uniform float trailLength;
+in float instanceTimestamps;
+in float instanceNextTimestamps;
+out float vTime;
+`,
+            // Timestamp of the vertex
+            'vs:#main-end': `\
+vTime = instanceTimestamps + (instanceNextTimestamps - instanceTimestamps) * vPathPosition.y / vPathLength;
+`,
+            'fs:#decl': `\
+uniform bool fadeTrail;
+uniform float trailLength;
+uniform float currentTime;
+in float vTime;
+`,
+            // Drop the segments outside of the time window
+            'fs:#main-start': `\
+if(vTime > currentTime || (fadeTrail && (vTime < currentTime - trailLength))) {
+  discard;
+}
+`,
+            // Fade the color (currentTime - 100%, end of trail - 0%)
+            'fs:DECKGL_FILTER_COLOR': `\
+if(fadeTrail) {
+  color.a *= 1.0 - (currentTime - vTime) / trailLength;
+}
+`
+        };
+        return shaders;
+    }
+    initializeState() {
+        super.initializeState();
+        const attributeManager = this.getAttributeManager();
+        attributeManager.addInstanced({
+            timestamps: {
+                size: 1,
+                accessor: 'getTimestamps',
+                shaderAttributes: {
+                    instanceTimestamps: {
+                        vertexOffset: 0
+                    },
+                    instanceNextTimestamps: {
+                        vertexOffset: 1
+                    }
+                }
+            }
+        });
+    }
+    draw(params) {
+        const { fadeTrail, trailLength, currentTime } = this.props;
+        params.uniforms = {
+            ...params.uniforms,
+            fadeTrail,
+            trailLength,
+            currentTime
+        };
+        super.draw(params);
+    }
+}

package/dist/wms-layer/utils.js

@@ -0,0 +1,13 @@
+import { lngLatToWorld } from '@math.gl/web-mercator';
+// https://epsg.io/3857
+// +proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs
+const HALF_EARTH_CIRCUMFERENCE = 6378137 * Math.PI;
+/** Projects EPSG:4326 to EPSG:3857
+ * This is a lightweight replacement of proj4. Use tests to ensure conformance.
+ */
+export function WGS84ToPseudoMercator(coord) {
+    const mercator = lngLatToWorld(coord);
+    mercator[0] = (mercator[0] / 256 - 1) * HALF_EARTH_CIRCUMFERENCE;
+    mercator[1] = (mercator[1] / 256 - 1) * HALF_EARTH_CIRCUMFERENCE;
+    return mercator;
+}

package/dist/wms-layer/wms-layer.js

@@ -0,0 +1,192 @@
+// deck.gl, MIT license
+// Attributions:
+// Copyright 2022 Foursquare Labs, Inc.
+/* eslint-disable camelcase */ // Some WMS parameters are not in camel case
+/* global setTimeout, clearTimeout */
+import { CompositeLayer, COORDINATE_SYSTEM, _deepEqual as deepEqual } from '@deck.gl/core';
+import { BitmapLayer } from '@deck.gl/layers';
+import { ImageSource, createImageSource } from '@loaders.gl/wms';
+import { WGS84ToPseudoMercator } from "./utils.js";
+const defaultProps = {
+    id: 'imagery-layer',
+    data: '',
+    serviceType: 'auto',
+    srs: 'auto',
+    layers: { type: 'array', compare: true, value: [] },
+    onMetadataLoad: { type: 'function', value: () => { } },
+    // eslint-disable-next-line
+    onMetadataLoadError: { type: 'function', value: console.error },
+    onImageLoadStart: { type: 'function', value: () => { } },
+    onImageLoad: { type: 'function', value: () => { } },
+    onImageLoadError: {
+        type: 'function',
+        compare: false,
+        // eslint-disable-next-line
+        value: (requestId, error) => console.error(error, requestId)
+    }
+};
+/**
+ * The layer is used in Hex Tile layer in order to properly discard invisible elements during animation
+ */
+export class WMSLayer extends CompositeLayer {
+    static { this.layerName = 'WMSLayer'; }
+    static { this.defaultProps = defaultProps; }
+    /** Returns true if all async resources are loaded */
+    get isLoaded() {
+        // Track the explicit loading done by this layer
+        return this.state?.loadCounter === 0 && super.isLoaded;
+    }
+    /** Lets deck.gl know that we want viewport change events */
+    shouldUpdateState() {
+        return true;
+    }
+    initializeState() {
+        // intentionally empty, initialization is done in updateState
+        this.state._nextRequestId = 0;
+        this.state.lastRequestId = -1;
+        this.state.loadCounter = 0;
+    }
+    updateState({ changeFlags, props, oldProps }) {
+        const { viewport } = this.context;
+        // Check if data source has changed
+        if (changeFlags.dataChanged || props.serviceType !== oldProps.serviceType) {
+            this.state.imageSource = this._createImageSource(props);
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._loadMetadata();
+            this.debounce(() => this.loadImage(viewport, 'image source changed'), 0);
+        }
+        else if (!deepEqual(props.layers, oldProps.layers, 1)) {
+            this.debounce(() => this.loadImage(viewport, 'layers changed'), 0);
+        }
+        else if (changeFlags.viewportChanged) {
+            this.debounce(() => this.loadImage(viewport, 'viewport changed'));
+        }
+    }
+    finalizeState() {
+        // TODO - we could cancel outstanding requests
+    }
+    renderLayers() {
+        // TODO - which bitmap layer is rendered should depend on the current viewport
+        // Currently Studio only uses one viewport
+        const { bounds, image, lastRequestParameters } = this.state;
+        return (image &&
+            new BitmapLayer({
+                ...this.getSubLayerProps({ id: 'bitmap' }),
+                _imageCoordinateSystem: lastRequestParameters.srs === 'EPSG:4326'
+                    ? COORDINATE_SYSTEM.LNGLAT
+                    : COORDINATE_SYSTEM.CARTESIAN,
+                bounds,
+                image
+            }));
+    }
+    async getFeatureInfoText(x, y) {
+        const { lastRequestParameters } = this.state;
+        if (lastRequestParameters) {
+            // @ts-expect-error Undocumented method
+            const featureInfo = await this.state.imageSource.getFeatureInfoText?.({
+                ...lastRequestParameters,
+                query_layers: lastRequestParameters.layers,
+                x,
+                y,
+                info_format: 'application/vnd.ogc.gml'
+            });
+            return featureInfo;
+        }
+        return '';
+    }
+    _createImageSource(props) {
+        if (props.data instanceof ImageSource) {
+            return props.data;
+        }
+        if (typeof props.data === 'string') {
+            return createImageSource({
+                url: props.data,
+                loadOptions: props.loadOptions,
+                type: props.serviceType
+            });
+        }
+        throw new Error('invalid image source in props.data');
+    }
+    /** Run a getMetadata on the image service */
+    async _loadMetadata() {
+        const { imageSource } = this.state;
+        try {
+            this.state.loadCounter++;
+            const metadata = await imageSource.getMetadata();
+            // If a request takes a long time, it may no longer be expected
+            if (this.state.imageSource === imageSource) {
+                this.getCurrentLayer()?.props.onMetadataLoad(metadata);
+            }
+        }
+        catch (error) {
+            this.getCurrentLayer()?.props.onMetadataLoadError(error);
+        }
+        finally {
+            this.state.loadCounter--;
+        }
+    }
+    /** Load an image */
+    async loadImage(viewport, reason) {
+        const { layers, serviceType } = this.props;
+        // TODO - move to ImageSource?
+        if (serviceType === 'wms' && layers.length === 0) {
+            return;
+        }
+        const bounds = viewport.getBounds();
+        const { width, height } = viewport;
+        const requestId = this.getRequestId();
+        let { srs } = this.props;
+        if (srs === 'auto') {
+            // BitmapLayer only supports LNGLAT or CARTESIAN (Web-Mercator)
+            srs = viewport.resolution ? 'EPSG:4326' : 'EPSG:3857';
+        }
+        const requestParams = {
+            width,
+            height,
+            boundingBox: [
+                [bounds[0], bounds[1]],
+                [bounds[2], bounds[3]]
+            ],
+            layers,
+            crs: srs
+        };
+        if (srs === 'EPSG:3857') {
+            const min = WGS84ToPseudoMercator([bounds[0], bounds[1]]);
+            const max = WGS84ToPseudoMercator([bounds[2], bounds[3]]);
+            requestParams.boundingBox = [min, max];
+        }
+        try {
+            this.state.loadCounter++;
+            this.props.onImageLoadStart(requestId);
+            const image = await this.state.imageSource.getImage(requestParams);
+            // If a request takes a long time, later requests may have already loaded.
+            if (this.state.lastRequestId < requestId) {
+                this.getCurrentLayer()?.props.onImageLoad(requestId);
+                // Not type safe...
+                this.setState({
+                    image,
+                    bounds,
+                    lastRequestParameters: requestParams,
+                    lastRequestId: requestId
+                });
+            }
+        }
+        catch (error) {
+            this.raiseError(error, 'Load image');
+            this.getCurrentLayer()?.props.onImageLoadError(requestId, error);
+        }
+        finally {
+            this.state.loadCounter--;
+        }
+    }
+    // HELPERS
+    /** Global counter for issuing unique request ids */
+    getRequestId() {
+        return this.state._nextRequestId++;
+    }
+    /** Runs an action in the future, cancels it if the new action is issued before it executes */
+    debounce(fn, ms = 500) {
+        clearTimeout(this.state._timeoutId);
+        this.state._timeoutId = setTimeout(() => fn(), ms);
+    }
+}