@deck.gl/geo-layers 8.7.7 → 8.8.0-alpha.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/geo-layers",
   "description": "deck.gl layers supporting geospatial use cases and GIS formats",
   "license": "MIT",
-  "version": "8.7.7",
+  "version": "8.8.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -29,16 +29,16 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "^3.1.5",
-    "@loaders.gl/gis": "^3.1.5",
-    "@loaders.gl/loader-utils": "^3.1.5",
-    "@loaders.gl/mvt": "^3.1.5",
-    "@loaders.gl/terrain": "^3.1.5",
-    "@loaders.gl/tiles": "^3.1.5",
+    "@loaders.gl/3d-tiles": "^3.2.0-alpha.4",
+    "@loaders.gl/gis": "^3.2.0-alpha.4",
+    "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
+    "@loaders.gl/mvt": "^3.2.0-alpha.4",
+    "@loaders.gl/terrain": "^3.2.0-alpha.4",
+    "@loaders.gl/tiles": "^3.2.0-alpha.4",
     "@luma.gl/experimental": "^8.5.10",
-    "@math.gl/core": "^3.5.7",
-    "@math.gl/culling": "^3.5.7",
-    "@math.gl/web-mercator": "^3.5.7",
+    "@math.gl/core": "3.6.0-alpha.5",
+    "@math.gl/culling": "3.6.0-alpha.5",
+    "@math.gl/web-mercator": "3.6.0-alpha.5",
     "h3-js": "^3.6.0",
     "long": "^3.2.0"
   },
@@ -49,5 +49,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "5a7e586411cb538d3319e35f8e07d61c9a3efb6d"
+  "gitHead": "a52215449dff06fb683f5afd6399526353d11f35"
 }

package/src/index.ts

@@ -31,3 +31,8 @@ export {default as TerrainLayer} from './terrain-layer/terrain-layer';
 export {default as MVTLayer} from './mvt-layer/mvt-layer';
 
 export {getURLFromTemplate as _getURLFromTemplate} from './tile-layer/utils';
+export {default as _Tileset2D} from './tile-layer/tileset-2d';
+
+// Types
+
+export type {TileLayerProps} from './tile-layer/tile-layer';

package/src/mvt-layer/mvt-layer.js

@@ -116,14 +116,14 @@ export default class MVTLayer extends TileLayer {
     let loadOptions = this.getLoadOptions();
     const {binary} = this.state;
     const {fetch} = this.props;
-    const {signal, x, y, z} = tile;
+    const {signal, index} = tile;
     loadOptions = {
       ...loadOptions,
       mimeType: 'application/x-protobuf',
       mvt: {
         ...loadOptions?.mvt,
         coordinates: this.context.viewport.resolution ? 'wgs84' : 'local',
-        tileIndex: {x, y, z}
+        tileIndex: index
         // Local worker debug
         // workerUrl: `modules/mvt/dist/mvt-loader.worker.js`
         // Set worker to null to skip web workers
@@ -135,14 +135,14 @@ export default class MVTLayer extends TileLayer {
   }
 
   renderSubLayers(props) {
-    const {tile} = props;
-    const worldScale = Math.pow(2, tile.z);
+    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 * tile.x) / worldScale;
-    const yOffset = WORLD_SIZE * (1 - tile.y / worldScale);
+    const xOffset = (WORLD_SIZE * x) / worldScale;
+    const yOffset = WORLD_SIZE * (1 - y / worldScale);
 
     const modelMatrix = new Matrix4().scale([xScale, yScale, 1]);
 

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

@@ -167,11 +167,12 @@ export default class Tile3DLayer extends CompositeLayer {
     if (!timeline || !viewportsNumber || !tileset3d) {
       return;
     }
-    const frameNumber = tileset3d.update(Object.values(viewports));
-    const tilesetChanged = this.state.frameNumber !== frameNumber;
-    if (tilesetChanged) {
-      this.setState({frameNumber});
-    }
+    tileset3d.selectTiles(Object.values(viewports)).then(frameNumber => {
+      const tilesetChanged = this.state.frameNumber !== frameNumber;
+      if (tilesetChanged) {
+        this.setState({frameNumber});
+      }
+    });
   }
 
   _getSubLayer(tileHeader, oldLayer) {

package/src/tile-layer/{tile-2d-header.js → tile-2d-header.ts}

@@ -1,11 +1,38 @@
 /* eslint-env browser */
-import {log} from '@deck.gl/core';
-
+import {Layer, log} from '@deck.gl/core';
+import {RequestScheduler} from '@loaders.gl/loader-utils';
+import {TileBoundingBox, TileIndex, TileLoadProps} from './types';
+
+export type TileLoadDataProps = {
+  requestScheduler: RequestScheduler;
+  getData: (props: TileLoadProps) => Promise<any>;
+  onLoad: (tile: Tile2DHeader) => void;
+  onError: (error: any, tile: Tile2DHeader) => void;
+};
 export default class Tile2DHeader {
-  constructor({x, y, z}) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
+  index: TileIndex;
+  isVisible: boolean;
+  isSelected: boolean;
+  parent: Tile2DHeader | null;
+  children: Tile2DHeader[] | null;
+  content: any;
+  state?: number;
+  layers?: Layer[] | null;
+
+  id!: string; // assigned _always_ with result of `getTileId`
+  bbox!: TileBoundingBox; // assigned _always_ with result of `getTileMetadata`
+  zoom!: number; // assigned _always_ with result of `getTileZoom`
+  userData?: Record<string, any>; // _may be_ assigned with result of `getTileMetadata`
+
+  private _abortController: AbortController | null;
+  private _loader: Promise<void> | undefined;
+  private _loaderId: number;
+  private _isLoaded: boolean;
+  private _isCancelled: boolean;
+  private _needsReload: boolean;
+
+  constructor(index: TileIndex) {
+    this.index = index;
     this.isVisible = false;
     this.isSelected = false;
     this.parent = null;
@@ -13,6 +40,8 @@ export default class Tile2DHeader {
 
     this.content = null;
 
+    this._loader = undefined;
+    this._abortController = null;
     this._loaderId = 0;
     this._isLoaded = false;
     this._isCancelled = false;
@@ -20,7 +49,7 @@ export default class Tile2DHeader {
   }
 
   get data() {
-    return this.isLoading ? this._loader.then(() => this.data) : this.content;
+    return this.isLoading && this._loader ? this._loader.then(() => this.data) : this.content;
   }
 
   get isLoaded() {
@@ -44,13 +73,19 @@ export default class Tile2DHeader {
   }
 
   /* eslint-disable max-statements */
-  async _loadData({getData, requestScheduler, onLoad, onError}) {
-    const {x, y, z, bbox} = this;
+  private async _loadData({
+    getData,
+    requestScheduler,
+    onLoad,
+    onError
+  }: TileLoadDataProps): Promise<void> {
+    const {index, id, bbox, userData, zoom} = this;
     const loaderId = this._loaderId;
 
-    this._abortController = new AbortController(); // eslint-disable-line no-undef
+    this._abortController = new AbortController();
     const {signal} = this._abortController;
 
+    // @ts-expect-error (2345) Argument of type '(tile: any) => 1 | -1' is not assignable ...
     const requestToken = await requestScheduler.scheduleRequest(this, tile => {
       return tile.isSelected ? 1 : -1;
     });
@@ -68,7 +103,7 @@ export default class Tile2DHeader {
     let tileData = null;
     let error;
     try {
-      tileData = await getData({x, y, z, bbox, signal});
+      tileData = await getData({index, id, bbox, userData, zoom, signal});
     } catch (err) {
       error = err || true;
     } finally {
@@ -99,9 +134,8 @@ export default class Tile2DHeader {
       onLoad(this);
     }
   }
-  /* eslint-enable max-statements */
 
-  loadData(opts) {
+  loadData(opts: TileLoadDataProps): Promise<void> {
     this._isLoaded = false;
     this._isCancelled = false;
     this._needsReload = false;
@@ -110,7 +144,7 @@ export default class Tile2DHeader {
     return this._loader;
   }
 
-  setNeedsReload() {
+  setNeedsReload(): void {
     if (this.isLoading) {
       this.abort();
       this._loader = undefined;
@@ -118,12 +152,12 @@ export default class Tile2DHeader {
     this._needsReload = true;
   }
 
-  abort() {
+  abort(): void {
     if (this.isLoaded) {
       return;
     }
 
     this._isCancelled = true;
-    this._abortController.abort();
+    this._abortController?.abort();
   }
 }

package/src/tile-layer/{tile-2d-traversal.js → tile-2d-traversal.ts}

@@ -1,4 +1,5 @@
 /* eslint-disable complexity */
+import {Viewport, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
 import {
   CullingVolume,
   Plane,
@@ -6,6 +7,7 @@ import {
   makeOrientedBoundingBoxFromPoints
 } from '@math.gl/culling';
 import {lngLatToWorld} from '@math.gl/web-mercator';
+import {Bounds, TileIndex, ZRange} from './types';
 import {osmTile2lngLat} from './utils';
 
 const TILE_SIZE = 512;
@@ -31,6 +33,15 @@ const REF_POINTS_11 = REF_POINTS_9.concat([
 ]); // 2 additional points on equator for top tile
 
 class OSMNode {
+  x: number;
+  y: number;
+  z: number;
+
+  private childVisible?: boolean;
+  private selected?: boolean;
+
+  private _children?: OSMNode[];
+
   constructor(x, y, z) {
     this.x = x;
     this.y = y;
@@ -52,7 +63,16 @@ class OSMNode {
     return this._children;
   }
 
-  update(params) {
+  update(params: {
+    viewport: Viewport;
+    project: ((xyz: number[]) => number[]) | null;
+    cullingVolume: CullingVolume;
+    elevationBounds: ZRange;
+    minZ: number;
+    maxZ: number;
+    bounds?: Bounds;
+    offset: number;
+  }) {
     const {viewport, cullingVolume, elevationBounds, minZ, maxZ, bounds, offset, project} = params;
     const boundingVolume = this.getBoundingVolume(elevationBounds, offset, project);
 
@@ -92,7 +112,7 @@ class OSMNode {
     return true;
   }
 
-  getSelected(result = []) {
+  getSelected(result: OSMNode[] = []): OSMNode[] {
     if (this.selected) {
       result.push(this);
     }
@@ -104,7 +124,7 @@ class OSMNode {
     return result;
   }
 
-  insideBounds([minX, minY, maxX, maxY]) {
+  insideBounds([minX, minY, maxX, maxY]: Bounds): boolean {
     const scale = Math.pow(2, this.z);
     const extent = TILE_SIZE / scale;
 
@@ -116,7 +136,11 @@ class OSMNode {
     );
   }
 
-  getBoundingVolume(zRange, worldOffset, project) {
+  getBoundingVolume(
+    zRange: ZRange,
+    worldOffset: number,
+    project: ((xyz: number[]) => number[]) | null
+  ) {
     if (project) {
       // Custom projection
       // Estimate bounding box from sample points
@@ -124,9 +148,9 @@ class OSMNode {
       const refPoints = this.z < 1 ? REF_POINTS_11 : this.z < 2 ? REF_POINTS_9 : REF_POINTS_5;
 
       // Convert from tile-relative coordinates to common space
-      const refPointPositions = [];
+      const refPointPositions: number[][] = [];
       for (const p of refPoints) {
-        const lngLat = osmTile2lngLat(this.x + p[0], this.y + p[1], this.z);
+        const lngLat: number[] = osmTile2lngLat(this.x + p[0], this.y + p[1], this.z);
         lngLat[2] = zRange[0];
         refPointPositions.push(project(lngLat));
 
@@ -154,11 +178,20 @@ class OSMNode {
   }
 }
 
-export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
-  const project = viewport.resolution ? viewport.projectPosition : null;
+export function getOSMTileIndices(
+  viewport: Viewport,
+  maxZ: number,
+  zRange: ZRange | undefined,
+  bounds?: Bounds
+): TileIndex[] {
+  const project: ((xyz: number[]) => number[]) | null =
+    viewport instanceof _GlobeViewport && viewport.resolution
+      ? // eslint-disable-next-line @typescript-eslint/unbound-method
+        viewport.projectPosition
+      : null;
 
   // Get the culling volume of the current camera
-  const planes = Object.values(viewport.getFrustumPlanes()).map(
+  const planes: Plane[] = Object.values(viewport.getFrustumPlanes()).map(
     ({normal, distance}) => new Plane(normal.clone().negate(), distance)
   );
   const cullingVolume = new CullingVolume(planes);
@@ -169,7 +202,7 @@ export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
   const elevationMax = (zRange && zRange[1] * unitsPerMeter) || 0;
 
   // Always load at the current zoom level if pitch is small
-  const minZ = viewport.pitch <= 60 ? maxZ : 0;
+  const minZ = viewport instanceof WebMercatorViewport && viewport.pitch <= 60 ? maxZ : 0;
 
   // Map extent to OSM position
   if (bounds) {
@@ -184,7 +217,7 @@ export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
     viewport,
     project,
     cullingVolume,
-    elevationBounds: [elevationMin, elevationMax],
+    elevationBounds: [elevationMin, elevationMax] as ZRange,
     minZ,
     maxZ,
     bounds,
@@ -194,7 +227,11 @@ export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
 
   root.update(traversalParams);
 
-  if (viewport.subViewports && viewport.subViewports.length > 1) {
+  if (
+    viewport instanceof WebMercatorViewport &&
+    viewport.subViewports &&
+    viewport.subViewports.length > 1
+  ) {
     // Check worlds in repeated maps
     traversalParams.offset = -1;
     while (root.update(traversalParams)) {

package/src/tile-layer/{tile-layer.js → tile-layer.ts}

@@ -1,10 +1,22 @@
-import {CompositeLayer, _flatten as flatten} from '@deck.gl/core';
+import {
+  assert,
+  ChangeFlags,
+  CompositeLayer,
+  CompositeLayerProps,
+  Layer,
+  LayerProps,
+  _flatten as flatten
+} from '@deck.gl/core';
 import {GeoJsonLayer} from '@deck.gl/layers';
+import {LayersList} from 'modules/core/src/lib/layer-manager';
+import Tile2DHeader from './tile-2d-header';
 
-import Tileset2D, {STRATEGY_DEFAULT} from './tileset-2d';
+import Tileset2D, {RefinementStrategy, STRATEGY_DEFAULT, Tileset2DProps} from './tileset-2d';
+import {TileLoadProps, ZRange} from './types';
 import {urlType, getURLFromTemplate} from './utils';
 
 const defaultProps = {
+  TilesetClass: Tileset2D,
   data: [],
   dataComparator: urlType.equals,
   renderSubLayers: {type: 'function', value: props => new GeoJsonLayer(props), compare: false},
@@ -27,7 +39,96 @@ const defaultProps = {
   zoomOffset: 0
 };
 
-export default class TileLayer extends CompositeLayer {
+export type TileLayerProps<DataT = any> = CompositeLayerProps<DataT> & {
+  /**
+   * Renders one or an array of Layer instances.
+   */
+  renderSubLayers: (
+    props: TileLayerProps & {
+      id: string;
+      data: any;
+      _offset: number;
+      tile: Tile2DHeader;
+    }
+  ) => LayersList;
+  /**
+   * If supplied, `getTileData` is called to retrieve the data of each tile.
+   */
+  getTileData: (props: TileLoadProps) => Promise<any> | any;
+
+  /** Called when all tiles in the current viewport are loaded. */
+  onViewportLoad?: (tiles: Tile2DHeader[]) => void;
+
+  /** Called when a tile successfully loads. */
+  onTileLoad: (tile: Tile2DHeader) => void;
+
+  /** Called when a tile is cleared from cache. */
+  onTileUnload: (tile: Tile2DHeader) => void;
+
+  /** Called when a tile failed to load. */
+  onTileError: (err: any) => void;
+
+  /** The bounding box of the layer's data. */
+  extent: number[] | undefined | null;
+
+  /** The pixel dimension of the tiles, usually a power of 2. */
+  tileSize: number;
+
+  /** The max zoom level of the layer's data.  */
+  maxZoom: number;
+
+  /** The min zoom level of the layer's data.  */
+  minZoom: number;
+
+  /** The maximum number of tiles that can be cached. */
+  maxCacheSize: number | undefined | null;
+
+  /**
+   * The maximum memory used for caching tiles.
+   *
+   * @default null
+   */
+  maxCacheByteSize: number | undefined;
+
+  /**
+   * How the tile layer refines the visibility of tiles.
+   *
+   * @default 'best-available'
+   */
+  refinementStrategy: RefinementStrategy;
+
+  /** Range of minimum and maximum heights in the tile. */
+  zRange: ZRange | null;
+
+  /**
+   * The maximum number of concurrent getTileData calls.
+   *
+   * @default 6
+   */
+  maxRequests: number;
+
+  /**
+   * This offset changes the zoom level at which the tiles are fetched.
+   *
+   * Needs to be an integer.
+   *
+   * @default 0
+   */
+  zoomOffset: number;
+};
+
+/**
+ * The TileLayer is a composite layer that makes it possible to visualize very large datasets.
+ *
+ * Instead of fetching the entire dataset, it only loads and renders what's visible in the current viewport.
+ */
+export default class TileLayer<
+  DataT = any,
+  PropsT extends TileLayerProps<DataT> = TileLayerProps<DataT>
+> extends CompositeLayer<PropsT> {
+  static defaultProps = defaultProps as any;
+  static layerName = 'TileLayer';
+
   initializeState() {
     this.state = {
       tileset: null,
@@ -36,21 +137,30 @@ export default class TileLayer extends CompositeLayer {
   }
 
   finalizeState() {
-    this.state.tileset?.finalize();
+    this.state?.tileset?.finalize();
   }
 
-  get isLoaded() {
-    const {tileset} = this.state;
-    return tileset.selectedTiles.every(
+  get isLoaded(): boolean {
+    return this.state?.tileset?.selectedTiles.every(
       tile => tile.isLoaded && tile.layers && tile.layers.every(layer => layer.isLoaded)
     );
   }
 
-  shouldUpdateState({changeFlags}) {
+  shouldUpdateState({changeFlags}): boolean {
     return changeFlags.somethingChanged;
   }
 
-  updateState({props, changeFlags}) {
+  updateState({
+    props,
+    changeFlags
+  }: {
+    props: TileLayerProps;
+    oldProps: TileLayerProps;
+    context: any;
+    changeFlags: ChangeFlags;
+  }) {
+    assert(this.state);
+
     let {tileset} = this.state;
     const propsChanged = changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged;
     const dataChanged =
@@ -59,7 +169,7 @@ export default class TileLayer extends CompositeLayer {
         (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getTileData));
 
     if (!tileset) {
-      tileset = new Tileset2D(this._getTilesetOptions(props));
+      tileset = new this.props.TilesetClass(this._getTilesetOptions(props));
       this.setState({tileset});
     } else if (propsChanged) {
       tileset.setOptions(this._getTilesetOptions(props));
@@ -79,7 +189,7 @@ export default class TileLayer extends CompositeLayer {
     this._updateTileset();
   }
 
-  _getTilesetOptions(props) {
+  _getTilesetOptions(props: TileLayerProps): Tileset2DProps {
     const {
       tileSize,
       maxCacheSize,
@@ -110,7 +220,8 @@ export default class TileLayer extends CompositeLayer {
     };
   }
 
-  _updateTileset() {
+  _updateTileset(): void {
+    assert(this.state && this.context);
     const {tileset} = this.state;
     const {zRange, modelMatrix} = this.props;
     const frameNumber = tileset.update(this.context.viewport, {zRange, modelMatrix});
@@ -131,7 +242,9 @@ export default class TileLayer extends CompositeLayer {
     this.state.isLoaded = isLoaded;
   }
 
-  _onViewportLoad() {
+  _onViewportLoad(): void {
+    assert(this.state);
+
     const {tileset} = this.state;
     const {onViewportLoad} = this.props;
 
@@ -140,46 +253,54 @@ export default class TileLayer extends CompositeLayer {
     }
   }
 
-  _onTileLoad(tile) {
+  _onTileLoad(tile: Tile2DHeader): void {
     this.props.onTileLoad(tile);
     tile.layers = null;
 
     this.setNeedsUpdate();
   }
 
-  _onTileError(error, tile) {
+  _onTileError(error: any, tile: Tile2DHeader) {
     this.props.onTileError(error);
     tile.layers = null;
 
     this.setNeedsUpdate();
   }
 
-  _onTileUnload(tile) {
+  _onTileUnload(tile: Tile2DHeader) {
     this.props.onTileUnload(tile);
   }
 
   // Methods for subclass to override
 
-  getTileData(tile) {
+  getTileData(tile: TileLoadProps) {
     const {data, getTileData, fetch} = this.props;
     const {signal} = tile;
 
-    tile.url = getURLFromTemplate(data, tile);
+    tile.url =
+      typeof data === 'string' || Array.isArray(data) ? getURLFromTemplate(data, tile) : null;
 
     if (getTileData) {
       return getTileData(tile);
     }
-    if (tile.url) {
+    if (fetch && tile.url) {
       return fetch(tile.url, {propName: 'data', layer: this, signal});
     }
     return null;
   }
 
-  renderSubLayers(props) {
+  renderSubLayers(
+    props: TileLayerProps & {
+      id: string;
+      data: any;
+      _offset: number;
+      tile: Tile2DHeader;
+    }
+  ): LayersList {
     return this.props.renderSubLayers(props);
   }
 
-  getSubLayerPropsByTile(tile) {
+  getSubLayerPropsByTile(tile: Tile2DHeader): LayerProps | null {
     return null;
   }
 
@@ -194,8 +315,9 @@ export default class TileLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
-    return this.state.tileset.tiles.map(tile => {
+  renderLayers(): Layer[] {
+    assert(this.state);
+    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) {
@@ -203,7 +325,7 @@ export default class TileLayer extends CompositeLayer {
       } else if (!tile.layers) {
         const layers = this.renderSubLayers({
           ...this.props,
-          id: `${this.id}-${tile.x}-${tile.y}-${tile.z}`,
+          id: `${this.id}-${tile.id}`,
           data: tile.content,
           _offset: 0,
           tile
@@ -218,7 +340,7 @@ export default class TileLayer extends CompositeLayer {
         subLayerProps &&
         tile.layers[0] &&
         Object.keys(subLayerProps).some(
-          propName => tile.layers[0].props[propName] !== subLayerProps[propName]
+          propName => tile.layers![0].props[propName] !== subLayerProps[propName]
         )
       ) {
         tile.layers = tile.layers.map(layer => layer.clone(subLayerProps));
@@ -231,6 +353,3 @@ export default class TileLayer extends CompositeLayer {
     return layer.props.tile.isVisible;
   }
 }
-
-TileLayer.layerName = 'TileLayer';
-TileLayer.defaultProps = defaultProps;