@deck.gl/geo-layers 8.10.0-alpha.6 → 9.0.0-alpha.3

package/src/tile-3d-layer/tile-3d-layer.ts.disabled

@@ -0,0 +1,436 @@
+import {GL} from '@luma.gl/constants';
+import {Geometry} from '@luma.gl/engine';
+
+import {
+  Accessor,
+  Color,
+  CompositeLayer,
+  CompositeLayerProps,
+  COORDINATE_SYSTEM,
+  FilterContext,
+  GetPickingInfoParams,
+  Layer,
+  LayersList,
+  log,
+  PickingInfo,
+  UpdateParameters,
+  Viewport,
+  DefaultProps
+} 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 {load} from '@loaders.gl/core';
+import {MeshAttributes} from '@loaders.gl/schema';
+import {Tileset3D, Tile3D, TILE_TYPE} from '@loaders.gl/tiles';
+import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
+
+const SINGLE_DATA = [0];
+
+const defaultProps: DefaultProps<Tile3DLayerProps> = {
+  getPointColor: {type: 'accessor', value: [0, 0, 0, 255]},
+  pointSize: 1.0,
+
+  // Disable async data loading (handling it in _loadTileSet)
+  data: '',
+  loader: Tiles3DLoader,
+
+  onTilesetLoad: {type: 'function', value: tileset3d => {}},
+  onTileLoad: {type: 'function', value: tileHeader => {}},
+  onTileUnload: {type: 'function', value: tileHeader => {}},
+  onTileError: {type: 'function', value: (tile, message, url) => {}},
+  _getMeshColor: {type: 'function', value: tileHeader => [255, 255, 255]}
+};
+
+/** All properties supported by Tile3DLayer */
+export type Tile3DLayerProps<DataT = unknown> = _Tile3DLayerProps<DataT> & CompositeLayerProps;
+
+/** Props added by the Tile3DLayer */
+type _Tile3DLayerProps<DataT> = {
+  data: string;
+  /** Color Accessor for point clouds. **/
+  getPointColor?: Accessor<DataT, Color>;
+
+  /** Global radius of all points in pixels. **/
+  pointSize?: number;
+
+  /** A loader which is used to decode the fetched tiles.
+   * @deprecated Use `loaders` instead
+   */
+  loader?: typeof Tiles3DLoader;
+
+  /** Called when Tileset JSON file is loaded. **/
+  onTilesetLoad?: (tile: Tileset3D) => void;
+
+  /** Called when a tile in the tileset hierarchy is loaded. **/
+  onTileLoad?: (tile: Tile3D) => void;
+
+  /** Called when a tile is unloaded. **/
+  onTileUnload?: (tile: Tile3D) => void;
+
+  /** Called when a tile fails to load. **/
+  onTileError?: (tile: Tile3D, url: string, message: string) => void;
+
+  /** (Experimental) Accessor to change color of mesh based on properties. **/
+  _getMeshColor?: (tile: Tile3D) => Color;
+};
+
+/** Render 3d tiles data formatted according to the [3D Tiles Specification](https://www.opengeospatial.org/standards/3DTiles) and [`ESRI I3S`](https://github.com/Esri/i3s-spec) */
+export default class Tile3DLayer<DataT = any, ExtraPropsT extends {} = {}> extends CompositeLayer<
+  ExtraPropsT & Required<_Tile3DLayerProps<DataT>>
+> {
+  static defaultProps = defaultProps;
+  static layerName = 'Tile3DLayer';
+
+  state!: {
+    activeViewports: {};
+    frameNumber?: number;
+    lastUpdatedViewports: {[viewportId: string]: Viewport} | null;
+    layerMap: {[layerId: string]: any};
+    tileset3d: Tileset3D | null;
+  };
+
+  initializeState() {
+    if ('onTileLoadFail' in this.props) {
+      log.removed('onTileLoadFail', 'onTileError')();
+    }
+    // prop verification
+    this.state = {
+      layerMap: {},
+      tileset3d: null,
+      activeViewports: {},
+      lastUpdatedViewports: null
+    };
+  }
+
+  get isLoaded(): boolean {
+    const {tileset3d} = this.state;
+    return tileset3d !== null && tileset3d.isLoaded();
+  }
+
+  shouldUpdateState({changeFlags}: UpdateParameters<this>): boolean {
+    return changeFlags.somethingChanged;
+  }
+
+  updateState({props, oldProps, changeFlags}: UpdateParameters<this>): void {
+    if (props.data && props.data !== oldProps.data) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      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: Viewport): void {
+    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}: GetPickingInfoParams) {
+    const sourceTile = sourceLayer && (sourceLayer.props as any).tile;
+    if (info.picked) {
+      info.object = sourceTile;
+    }
+    (info as any).sourceTile = sourceTile;
+
+    return info;
+  }
+
+  filterSubLayer({layer, viewport}: FilterContext): boolean {
+    // All sublayers will have a tile prop
+    const {tile} = layer.props as unknown as {tile: Tile3D};
+    const {id: viewportId} = viewport;
+    return tile.selected && tile.viewportIds.includes(viewportId);
+  }
+
+  protected _updateAutoHighlight(info: PickingInfo): void {
+    const sourceTile = (info as any).sourceTile;
+    const layerCache = this.state.layerMap[sourceTile?.id];
+    if (layerCache && layerCache.layer) {
+      layerCache.layer.updateAutoHighlight(info);
+    }
+  }
+
+  private async _loadTileset(tilesetUrl) {
+    const {loadOptions = {}} = this.props;
+
+    // TODO: deprecate `loader` in v9.0
+    // @ts-ignore
+    const loaders = this.props.loader || this.props.loaders;
+    const loader = Array.isArray(loaders) ? loaders[0] : loaders;
+
+    const options = {loadOptions: {...loadOptions}};
+    let actualTilesetUrl = tilesetUrl;
+    // @ts-expect-error preload
+    if (loader.preload) {
+      // @ts-expect-error preload
+      const preloadOptions = await loader.preload(tilesetUrl, loadOptions);
+      if (preloadOptions.url) {
+        actualTilesetUrl = preloadOptions.url;
+      }
+
+      if (preloadOptions.headers) {
+        options.loadOptions.fetch = {
+          ...options.loadOptions.fetch,
+          headers: preloadOptions.headers
+        };
+      }
+      Object.assign(options, preloadOptions);
+    }
+    const tilesetJson = await load(actualTilesetUrl, loader, options.loadOptions);
+
+    const tileset3d = new Tileset3D(tilesetJson, {
+      onTileLoad: this._onTileLoad.bind(this),
+      onTileUnload: this._onTileUnload.bind(this),
+      onTileError: this.props.onTileError,
+      ...options
+    });
+
+    this.setState({
+      tileset3d,
+      layerMap: {}
+    });
+
+    this._updateTileset(this.state.activeViewports);
+    this.props.onTilesetLoad(tileset3d);
+  }
+
+  private _onTileLoad(tileHeader: Tile3D): void {
+    const {lastUpdatedViewports} = this.state;
+    this.props.onTileLoad(tileHeader);
+    this._updateTileset(lastUpdatedViewports);
+    this.setNeedsUpdate();
+  }
+
+  private _onTileUnload(tileHeader: Tile3D): void {
+    // Was cleaned up from tileset cache. We no longer need to track it.
+    delete this.state.layerMap[tileHeader.id];
+    this.props.onTileUnload(tileHeader);
+  }
+
+  private _updateTileset(viewports: {[viewportId: string]: Viewport} | null): void {
+    if (!viewports) {
+      return;
+    }
+    const {tileset3d} = this.state;
+    const {timeline} = this.context;
+    const viewportsNumber = Object.keys(viewports).length;
+    if (!timeline || !viewportsNumber || !tileset3d) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    tileset3d.selectTiles(Object.values(viewports)).then(frameNumber => {
+      const tilesetChanged = this.state.frameNumber !== frameNumber;
+      if (tilesetChanged) {
+        this.setState({frameNumber});
+      }
+    });
+  }
+
+  private _getSubLayer(
+    tileHeader: Tile3D,
+    oldLayer?: Layer
+  ): MeshLayer<DataT> | PointCloudLayer<DataT> | ScenegraphLayer<DataT> | null {
+    if (!tileHeader.content) {
+      return null;
+    }
+
+    switch (tileHeader.type) {
+      case TILE_TYPE.POINTCLOUD:
+        return this._makePointCloudLayer(tileHeader, oldLayer as PointCloudLayer<DataT>);
+      case TILE_TYPE.SCENEGRAPH:
+        return this._make3DModelLayer(tileHeader);
+      case TILE_TYPE.MESH:
+        return this._makeSimpleMeshLayer(tileHeader, oldLayer as MeshLayer<DataT>);
+      default:
+        throw new Error(`Tile3DLayer: Failed to render layer of type ${tileHeader.content.type}`);
+    }
+  }
+
+  private _makePointCloudLayer(
+    tileHeader: Tile3D,
+    oldLayer?: PointCloudLayer<DataT>
+  ): PointCloudLayer<DataT> | null {
+    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
+      }
+    );
+  }
+
+  private _make3DModelLayer(tileHeader: Tile3D): ScenegraphLayer<DataT> {
+    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
+      }
+    );
+  }
+
+  private _makeSimpleMeshLayer(tileHeader: Tile3D, oldLayer?: MeshLayer<DataT>): MeshLayer<DataT> {
+    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({
+        topology: 'triangle-list',
+        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(): Layer | null | LayersList {
+    const {tileset3d, layerMap} = this.state;
+    if (!tileset3d) {
+      return null;
+    }
+
+    // loaders.gl doesn't provide a type for tileset3d.tiles
+    return (tileset3d.tiles as Tile3D[])
+      .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: MeshAttributes): MeshAttributes {
+  const attributes: MeshAttributes = {};
+  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;
+}

package/src/tile-layer/tile-layer.ts

@@ -27,7 +27,7 @@ const defaultProps: DefaultProps<TileLayerProps> = {
   TilesetClass: Tileset2D,
   data: {type: 'data', value: []},
   dataComparator: urlType.equal,
-  renderSubLayers: {type: 'function', value: props => new GeoJsonLayer(props)},
+  renderSubLayers: {type: 'function', value: (props: any) => new GeoJsonLayer(props)},
   getTileData: {type: 'function', optional: true, value: null},
   // TODO - change to onViewportLoad to align with Tile3DLayer
   onViewportLoad: {type: 'function', optional: true, value: null},
@@ -48,7 +48,7 @@ const defaultProps: DefaultProps<TileLayerProps> = {
 };
 
 /** All props supported by the TileLayer */
-export type TileLayerProps<DataT = any> = CompositeLayerProps & _TileLayerProps<DataT>;
+export type TileLayerProps<DataT = unknown> = CompositeLayerProps & _TileLayerProps<DataT>;
 
 /** Props added by the TileLayer */
 type _TileLayerProps<DataT> = {
@@ -153,6 +153,12 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   static defaultProps: DefaultProps = defaultProps;
   static layerName = 'TileLayer';
 
+  state!: {
+    tileset: Tileset2D | null;
+    isLoaded: boolean;
+    frameNumber?: number;
+  };
+
   initializeState() {
     this.state = {
       tileset: null,
@@ -165,9 +171,12 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   }
 
   get isLoaded(): boolean {
-    return this.state?.tileset?.selectedTiles?.every(
-      tile => tile.isLoaded && tile.layers && tile.layers.every(layer => layer.isLoaded)
-    );
+    const selectedTiles = this.state?.tileset?.selectedTiles;
+    return selectedTiles
+      ? selectedTiles.every(
+          tile => tile.isLoaded && tile.layers && tile.layers.every(layer => layer.isLoaded)
+        )
+      : false;
   }
 
   shouldUpdateState({changeFlags}): boolean {
@@ -194,7 +203,7 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
         tileset.reloadAll();
       } else {
         // some render options changed, regenerate sub layers now
-        this.state.tileset.tiles.forEach(tile => {
+        tileset.tiles.forEach(tile => {
           tile.layers = null;
         });
       }
@@ -235,7 +244,7 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   }
 
   private _updateTileset(): void {
-    const {tileset} = this.state;
+    const tileset = this.state.tileset!;
     const {zRange, modelMatrix} = this.props;
     const frameNumber = tileset.update(this.context.viewport, {zRange, modelMatrix});
     const {isLoaded} = tileset;
@@ -260,7 +269,8 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
     const {onViewportLoad} = this.props;
 
     if (onViewportLoad) {
-      onViewportLoad(tileset.selectedTiles);
+      // This method can only be called when tileset is defined and updated
+      onViewportLoad(tileset!.selectedTiles!);
     }
   }
 
@@ -334,7 +344,7 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   }
 
   renderLayers(): Layer | null | LayersList {
-    return this.state.tileset.tiles.map((tile: Tile2DHeader) => {
+    return this.state.tileset!.tiles.map((tile: Tile2DHeader) => {
       const subLayerProps = this.getSubLayerPropsByTile(tile);
       // cache the rendered layer in the tile
       if (!tile.isLoaded && !tile.content) {
@@ -371,6 +381,6 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
 
   filterSubLayer({layer, cullRect}: FilterContext) {
     const {tile} = (layer as Layer<{tile: Tile2DHeader}>).props;
-    return this.state.tileset.isTileVisible(tile, cullRect);
+    return this.state.tileset!.isTileVisible(tile, cullRect);
   }
 }

package/src/tileset-2d/tile-2d-traversal.ts

@@ -183,7 +183,7 @@ class OSMNode {
 export function getOSMTileIndices(
   viewport: Viewport,
   maxZ: number,
-  zRange: ZRange | undefined,
+  zRange?: ZRange | null,
   bounds?: Bounds
 ): TileIndex[] {
   const project: ((xyz: number[]) => number[]) | null =

package/src/tileset-2d/tileset-2d.ts

@@ -1,7 +1,7 @@
 import {Viewport} from '@deck.gl/core';
 
 import {RequestScheduler} from '@loaders.gl/loader-utils';
-import {Matrix4, equals} from '@math.gl/core';
+import {Matrix4, equals, NumericArray} from '@math.gl/core';
 
 import {Tile2DHeader} from './tile-2d-header';
 
@@ -123,7 +123,7 @@ export class Tileset2D {
 
   private _cacheByteSize: number;
   private _viewport: Viewport | null;
-  private _zRange?: ZRange;
+  private _zRange?: ZRange | null;
   private _selectedTiles: Tile2DHeader[] | null;
   private _frameNumber: number;
   private _modelMatrix: Matrix4;
@@ -226,9 +226,9 @@ export class Tileset2D {
    */
   update(
     viewport: Viewport,
-    {zRange, modelMatrix}: {zRange?: ZRange; modelMatrix?: Matrix4} = {}
+    {zRange, modelMatrix}: {zRange?: ZRange | null; modelMatrix?: NumericArray | null} = {}
   ): number {
-    const modelMatrixAsMatrix4 = new Matrix4(modelMatrix);
+    const modelMatrixAsMatrix4 = modelMatrix ? new Matrix4(modelMatrix) : new Matrix4();
     const isModelMatrixNew = !modelMatrixAsMatrix4.equals(this._modelMatrix);
     if (
       !this._viewport ||
@@ -326,7 +326,7 @@ export class Tileset2D {
     viewport: Viewport;
     maxZoom?: number;
     minZoom?: number;
-    zRange: ZRange | undefined;
+    zRange?: ZRange | null;
     tileSize?: number;
     modelMatrix?: Matrix4;
     modelMatrixInverse?: Matrix4;
@@ -359,8 +359,7 @@ export class Tileset2D {
   /** Returns additional metadata to add to tile, bbox by default */
   getTileMetadata(index: TileIndex): Record<string, any> {
     const {tileSize} = this.opts;
-    // @ts-expect-error
-    return {bbox: tileToBoundingBox(this._viewport, index.x, index.y, index.z, tileSize)};
+    return {bbox: tileToBoundingBox(this._viewport!, index.x, index.y, index.z, tileSize)};
   }
 
   /** Returns index of the parent tile */

package/src/tileset-2d/utils.ts

@@ -132,18 +132,18 @@ function getBoundingBox(viewport: Viewport, zRange: number[] | null, extent: Bou
 /** Get culling bounds in world space */
 export function getCullBounds({
   viewport,
-  z = 0,
+  z,
   cullRect
 }: {
   /** Current viewport */
   viewport: Viewport;
   /** Current z range */
-  z: ZRange | number | undefined;
+  z?: ZRange | number | null;
   /** Culling rectangle in screen space */
   cullRect: {x: number; y: number; width: number; height: number};
 }): [number, number, number, number][] {
   const subViewports = viewport.subViewports || [viewport];
-  return subViewports.map(v => getCullBoundsInViewport(v, z, cullRect));
+  return subViewports.map(v => getCullBoundsInViewport(v, z || 0, cullRect));
 }
 
 function getCullBoundsInViewport(
@@ -273,7 +273,7 @@ export function getTileIndices({
   viewport: Viewport;
   maxZoom?: number;
   minZoom?: number;
-  zRange: ZRange | undefined;
+  zRange?: ZRange | null;
   extent?: Bounds;
   tileSize?: number;
   modelMatrix?: Matrix4;

package/src/trips-layer/trips-layer.ts

@@ -26,14 +26,14 @@ const defaultProps: DefaultProps<TripsLayerProps> = {
   fadeTrail: true,
   trailLength: {type: 'number', value: 120, min: 0},
   currentTime: {type: 'number', value: 0, min: 0},
-  getTimestamps: {type: 'accessor', value: d => d.timestamps}
+  getTimestamps: {type: 'accessor', value: (d: any) => d.timestamps}
 };
 
 /** All properties supported by TripsLayer. */
-export type TripsLayerProps<DataT = any> = _TripsLayerProps<DataT> & PathLayerProps<DataT>;
+export type TripsLayerProps<DataT = unknown> = _TripsLayerProps<DataT> & PathLayerProps<DataT>;
 
 /** Properties added by TripsLayer. */
-type _TripsLayerProps<DataT = any> = {
+type _TripsLayerProps<DataT = unknown> = {
   /**
    * Whether or not the path fades out.
    * @default true

package/src/wms-layer/wms-layer.ts

@@ -16,7 +16,8 @@ import {
   _deepEqual as deepEqual
 } from '@deck.gl/core';
 import {BitmapLayer} from '@deck.gl/layers';
-import type {ImageSourceMetadata, ImageType, ImageServiceType} from '@loaders.gl/wms';
+import type {GetImageParameters, ImageSourceMetadata, ImageType} from '@loaders.gl/loader-utils';
+import type {ImageServiceType} from '@loaders.gl/wms';
 import {ImageSource, createImageSource} from '@loaders.gl/wms';
 import {WGS84ToPseudoMercator} from './utils';
 
@@ -206,17 +207,20 @@ export class WMSLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<
       // BitmapLayer only supports LNGLAT or CARTESIAN (Web-Mercator)
       srs = viewport.resolution ? 'EPSG:4326' : 'EPSG:3857';
     }
-    const requestParams = {
+    const requestParams: GetImageParameters = {
       width,
       height,
-      bbox: bounds,
+      boundingBox: [
+        [bounds[0], bounds[1]],
+        [bounds[2], bounds[3]]
+      ],
       layers,
-      srs
+      crs: srs
     };
     if (srs === 'EPSG:3857') {
-      const [minX, minY] = WGS84ToPseudoMercator([bounds[0], bounds[1]]);
-      const [maxX, maxY] = WGS84ToPseudoMercator([bounds[2], bounds[3]]);
-      requestParams.bbox = [minX, minY, maxX, maxY];
+      const min = WGS84ToPseudoMercator([bounds[0], bounds[1]]);
+      const max = WGS84ToPseudoMercator([bounds[2], bounds[3]]);
+      requestParams.boundingBox = [min, max];
     }
 
     try {

package/typed/geo-cell-layer/GeoCellLayer.d.ts

@@ -1,7 +1,7 @@
 import { CompositeLayer, Layer, LayersList, DefaultProps } from '@deck.gl/core/typed';
 import { PolygonLayerProps } from '@deck.gl/layers/typed';
 /** All properties supported by GeoCellLayer. */
-export declare type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT>;
+export declare type GeoCellLayerProps<DataT = unknown> = PolygonLayerProps<DataT>;
 export default class GeoCellLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<Required<GeoCellLayerProps<DataT>> & ExtraProps> {
     static layerName: string;
     static defaultProps: DefaultProps;

package/typed/geo-cell-layer/GeoCellLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeoCellLayer.d.ts","sourceRoot":"","sources":["../../src/geo-cell-layer/GeoCellLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAe,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAMhE,gDAAgD;AAChD,oBAAY,iBAAiB,CAAC,KAAK,GAAG,GAAG,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,cAAc,CAC/F,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAChD;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,EAAE,YAAY,CAAgB;IAEjD,sDAAsD;IACtD,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;IAItD,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CAiE1C"}
+{"version":3,"file":"GeoCellLayer.d.ts","sourceRoot":"","sources":["../../src/geo-cell-layer/GeoCellLayer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAe,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAMhE,gDAAgD;AAChD,oBAAY,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE1E,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,KAAK,GAAG,GAAG,EAAE,UAAU,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,cAAc,CAC/F,QAAQ,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAChD;IACC,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,EAAE,YAAY,CAAgB;IAEjD,sDAAsD;IACtD,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI;IAItD,YAAY,IAAI,KAAK,GAAG,IAAI,GAAG,UAAU;CAiE1C"}