@deck.gl/geo-layers 8.7.8 → 8.8.0-alpha.3

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.8",
+  "version": "8.8.0-alpha.3",
   "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": "2172dfe62ab2963f755601c1338e98e72cf032e7"
+  "gitHead": "edad7cf75b75a137d63ec89d2d644727d3082e25"
 }

package/src/geo-cell-layer/{GeoCellLayer.js → GeoCellLayer.ts}

@@ -1,17 +1,24 @@
-import {CompositeLayer} from '@deck.gl/core';
-import {PolygonLayer} from '@deck.gl/layers';
+import {CompositeLayer, Layer, LayersList} from '@deck.gl/core';
+import {PolygonLayer, PolygonLayerProps} from '@deck.gl/layers';
 
 const defaultProps = {
   ...PolygonLayer.defaultProps
 };
 
-export default class GeoCellLayer extends CompositeLayer {
-  // Implement to generate props to create geometry
-  indexToBounds() {
+export type GeoCellLayerProps<DataT = any> = PolygonLayerProps<DataT>;
+
+export default class GeoCellLayer<DataT = any, ExtraProps = {}> extends CompositeLayer<
+  Required<GeoCellLayerProps<DataT>> & ExtraProps
+> {
+  static layerName = 'GeoCellLayer';
+  static defaultProps = defaultProps;
+
+  /** Implement to generate props to create geometry. */
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
     return null;
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null | LayersList {
     // Rendering props underlying layer
     const {
       elevationScale,
@@ -64,7 +71,7 @@ export default class GeoCellLayer extends CompositeLayer {
       },
       this.getSubLayerProps({
         id: 'cell',
-        updateTriggers: {
+        updateTriggers: updateTriggers && {
           getElevation: updateTriggers.getElevation,
           getFillColor: updateTriggers.getFillColor,
           getLineColor: updateTriggers.getLineColor,
@@ -75,6 +82,3 @@ export default class GeoCellLayer extends CompositeLayer {
     );
   }
 }
-
-GeoCellLayer.layerName = 'GeoCellLayer';
-GeoCellLayer.defaultProps = defaultProps;

package/src/index.ts

@@ -31,3 +31,9 @@ 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';
+export type {QuadkeyLayerProps} from './quadkey-layer/quadkey-layer';

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

@@ -82,18 +82,19 @@ export default class MVTLayer extends TileLayer {
     this.setState({data, tileJSON});
   }
 
-  _getTilesetOptions(props) {
-    const opts = super._getTilesetOptions(props);
+  _getTilesetOptions() {
+    const opts = super._getTilesetOptions();
     const {tileJSON} = this.state;
+    const {minZoom, maxZoom} = this.props;
 
     if (tileJSON) {
-      if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > props.minZoom) {
+      if (Number.isFinite(tileJSON.minzoom) && tileJSON.minzoom > minZoom) {
         opts.minZoom = tileJSON.minzoom;
       }
 
       if (
         Number.isFinite(tileJSON.maxzoom) &&
-        (!Number.isFinite(props.maxZoom) || tileJSON.maxzoom < props.maxZoom)
+        (!Number.isFinite(maxZoom) || tileJSON.maxzoom < maxZoom)
       ) {
         opts.maxZoom = tileJSON.maxzoom;
       }
@@ -116,14 +117,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 +136,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/quadkey-layer/quadkey-layer.ts

@@ -0,0 +1,39 @@
+import {AccessorFunction} from '@deck.gl/core';
+import GeoCellLayer from '../geo-cell-layer/GeoCellLayer';
+import {getQuadkeyPolygon} from './quadkey-utils';
+
+const defaultProps = {
+  getQuadkey: {type: 'accessor', value: d => d.quadkey}
+};
+
+/**
+ * Properties of `QuadkeyLayer`.
+ */
+type QuadkeyLayerProps<DataT = any> = {
+  /**
+   * Called for each data object to retrieve the quadkey string identifier.
+   *
+   * By default, it reads `quadkey` property of data object.
+   */
+  getQuadkey?: AccessorFunction<DataT, string>;
+};
+
+export default class QuadkeyLayer<DataT = any, ExtraProps = {}> extends GeoCellLayer<
+  DataT,
+  Required<QuadkeyLayerProps> & ExtraProps
+> {
+  static layerName = 'QuadkeyLayer';
+  static defaultProps: any = defaultProps;
+
+  indexToBounds(): Partial<GeoCellLayer['props']> | null {
+    const {data, getQuadkey} = this.props;
+
+    return {
+      data,
+      _normalize: false,
+      positionFormat: 'XY',
+
+      getPolygon: (x: DataT, objectInfo) => getQuadkeyPolygon(getQuadkey(x, objectInfo))
+    };
+  }
+}

package/src/quadkey-layer/{quadkey-utils.js → quadkey-utils.ts}

@@ -2,7 +2,7 @@ import {worldToLngLat} from '@math.gl/web-mercator';
 
 const TILE_SIZE = 512;
 
-export function quadkeyToWorldBounds(quadkey) {
+export function quadkeyToWorldBounds(quadkey: string): [number[], number[]] {
   let x = 0;
   let y = 0;
   let mask = 1 << quadkey.length;
@@ -20,7 +20,7 @@ export function quadkeyToWorldBounds(quadkey) {
   ];
 }
 
-export function getQuadkeyPolygon(quadkey) {
+export function getQuadkeyPolygon(quadkey: string): number[] {
   const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
   const [w, n] = worldToLngLat(topLeft);
   const [e, s] = worldToLngLat(bottomRight);

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)) {