@deck.gl/geo-layers 8.6.0-alpha.3 → 8.6.1

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.6.0-alpha.3",
+  "version": "8.6.1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,7 @@
     "@loaders.gl/mvt": "^3.0.8",
     "@loaders.gl/terrain": "^3.0.8",
     "@loaders.gl/tiles": "^3.0.8",
-    "@luma.gl/experimental": "^8.5.5",
+    "@luma.gl/experimental": "^8.5.10",
     "@math.gl/culling": "^3.5.4",
     "@math.gl/web-mercator": "^3.5.4",
     "h3-js": "^3.6.0",
@@ -49,5 +49,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "b43ac51af23cb186e3cbb2ed9c69fddd16483745"
+  "gitHead": "9611fa7fc206cf2970ac4dfdb35a50677b0afa3c"
 }

package/src/h3-layers/h3-hexagon-layer.js

@@ -91,7 +91,7 @@ function mergeTriggers(getHexagon, coverage) {
 
 const defaultProps = {
   ...PolygonLayer.defaultProps,
-  highPrecision: false,
+  highPrecision: 'auto',
   coverage: {type: 'number', min: 0, max: 1, value: 1},
   centerHexagon: null,
   getHexagon: {type: 'accessor', value: x => x.hexagon},
@@ -121,49 +121,59 @@ export default class H3HexagonLayer extends CompositeLayer {
 
   updateState({props, oldProps, changeFlags}) {
     if (
-      changeFlags.dataChanged ||
-      (changeFlags.updateTriggers && changeFlags.updateTriggers.getHexagon)
+      props.highPrecision !== true &&
+      (changeFlags.dataChanged ||
+        (changeFlags.updateTriggers && changeFlags.updateTriggers.getHexagon))
     ) {
-      let resolution = -1;
-      let hasPentagon = false;
-      let hasMultipleRes = false;
-      const {iterable, objectInfo} = createIterable(props.data);
-      for (const object of iterable) {
-        objectInfo.index++;
-        const hexId = props.getHexagon(object, objectInfo);
-        // Take the resolution of the first hex
-        const hexResolution = h3GetResolution(hexId);
-        if (resolution < 0) resolution = hexResolution;
-        else if (resolution !== hexResolution) {
-          hasMultipleRes = true;
-          break;
-        }
-        if (h3IsPentagon(hexId)) {
-          hasPentagon = true;
-          break;
-        }
-      }
-      this.setState({
-        resolution,
-        edgeLengthKM: resolution >= 0 ? edgeLength(resolution, UNITS.km) : 0,
-        hasMultipleRes,
-        hasPentagon
-      });
+      const dataProps = this._calculateH3DataProps(props);
+      this.setState(dataProps);
     }
 
     this._updateVertices(this.context.viewport);
   }
 
+  _calculateH3DataProps(props) {
+    let resolution = -1;
+    let hasPentagon = false;
+    let hasMultipleRes = false;
+
+    const {iterable, objectInfo} = createIterable(props.data);
+    for (const object of iterable) {
+      objectInfo.index++;
+      const hexId = props.getHexagon(object, objectInfo);
+      // Take the resolution of the first hex
+      const hexResolution = h3GetResolution(hexId);
+      if (resolution < 0) {
+        resolution = hexResolution;
+        if (!props.highPrecision) break;
+      } else if (resolution !== hexResolution) {
+        hasMultipleRes = true;
+        break;
+      }
+      if (h3IsPentagon(hexId)) {
+        hasPentagon = true;
+        break;
+      }
+    }
+
+    return {
+      resolution,
+      edgeLengthKM: resolution >= 0 ? edgeLength(resolution, UNITS.km) : 0,
+      hasMultipleRes,
+      hasPentagon
+    };
+  }
+
   _shouldUseHighPrecision() {
-    const {resolution, hasPentagon, hasMultipleRes} = this.state;
-    const {viewport} = this.context;
-    return (
-      this.props.highPrecision ||
-      viewport.resolution ||
-      hasMultipleRes ||
-      hasPentagon ||
-      (resolution >= 0 && resolution <= 5)
-    );
+    if (this.props.highPrecision === 'auto') {
+      const {resolution, hasPentagon, hasMultipleRes} = this.state;
+      const {viewport} = this.context;
+      return (
+        viewport.resolution || hasMultipleRes || hasPentagon || (resolution >= 0 && resolution <= 5)
+      );
+    }
+
+    return this.props.highPrecision;
   }
 
   _updateVertices(viewport) {

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

@@ -18,7 +18,7 @@ const defaultProps = {
   uniqueIdProperty: {type: 'string', value: ''},
   highlightedFeatureId: null,
   loaders: [MVTWorkerLoader],
-  binary: false
+  binary: true
 };
 
 export default class MVTLayer extends TileLayer {
@@ -198,7 +198,7 @@ export default class MVTLayer extends TileLayer {
   getHighlightedObjectIndex(tile) {
     const {hoveredFeatureId, hoveredFeatureLayerName} = this.state;
     const {uniqueIdProperty, highlightedFeatureId, binary} = this.props;
-    const {data} = tile;
+    const data = tile.content;
 
     const isHighlighted = isFeatureIdDefined(highlightedFeatureId);
     const isFeatureIdPresent = isFeatureIdDefined(hoveredFeatureId) || isHighlighted;

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

@@ -99,7 +99,7 @@ export default class Tile3DLayer extends CompositeLayer {
   filterSubLayer({layer, viewport}) {
     const {tile} = layer.props;
     const {id: viewportId} = viewport;
-    return this.props.visible && tile.selected && tile.viewportIds.includes(viewportId);
+    return tile.selected && tile.viewportIds.includes(viewportId);
   }
 
   _updateAutoHighlight(info) {

package/src/tile-layer/tile-2d-header.js

@@ -2,7 +2,7 @@
 import {log} from '@deck.gl/core';
 
 export default class Tile2DHeader {
-  constructor({x, y, z, onTileLoad, onTileError}) {
+  constructor({x, y, z}) {
     this.x = x;
     this.y = y;
     this.z = z;
@@ -12,27 +12,27 @@ export default class Tile2DHeader {
     this.children = [];
 
     this.content = null;
+
+    this._loaderId = 0;
     this._isLoaded = false;
     this._isCancelled = false;
-
-    this.onTileLoad = onTileLoad;
-    this.onTileError = onTileError;
+    this._needsReload = false;
   }
 
   get data() {
-    return this._isLoaded ? this.content : this._loader;
+    return this.isLoading ? this._loader.then(() => this.data) : this.content;
   }
 
   get isLoaded() {
-    return this._isLoaded;
+    return this._isLoaded && !this._needsReload;
   }
 
   get isLoading() {
-    return Boolean(this._loader);
+    return Boolean(this._loader) && !this._isCancelled;
   }
 
-  get isCancelled() {
-    return this._isCancelled;
+  get needsReload() {
+    return this._needsReload || this._isCancelled;
   }
 
   get byteLength() {
@@ -44,8 +44,9 @@ export default class Tile2DHeader {
   }
 
   /* eslint-disable max-statements */
-  async _loadData(getTileData, requestScheduler) {
+  async _loadData({getData, requestScheduler, onLoad, onError}) {
     const {x, y, z, bbox} = this;
+    const loaderId = this._loaderId;
 
     this._abortController = new AbortController(); // eslint-disable-line no-undef
     const {signal} = this._abortController;
@@ -64,47 +65,57 @@ export default class Tile2DHeader {
       return;
     }
 
-    let tileData;
+    let tileData = null;
     let error;
     try {
-      tileData = await getTileData({x, y, z, bbox, signal});
+      tileData = await getData({x, y, z, bbox, signal});
     } catch (err) {
       error = err || true;
     } finally {
       requestToken.done();
-
-      if (this._isCancelled && !tileData) {
-        this._isLoaded = false;
-      } else {
-        // Consider it loaded if we tried to cancel but `getTileData` still returned data
-        this._isLoaded = true;
-        this._isCancelled = false;
-      }
     }
 
-    if (!this._isLoaded) {
+    // If loadData has been called with a newer version, discard the result from this operation
+    if (loaderId !== this._loaderId) {
       return;
     }
+    // Clear the `isLoading` flag
+    this._loader = undefined;
+    // Rewrite tile content with the result of getTileData if successful, or `null` in case of
+    // error or cancellation
+    this.content = tileData;
+    // If cancelled, do not invoke the callbacks
+    // Consider it loaded if we tried to cancel but `getTileData` still returned data
+    if (this._isCancelled && !tileData) {
+      this._isLoaded = false;
+      return;
+    }
+    this._isLoaded = true;
+    this._isCancelled = false;
 
     if (error) {
-      this.onTileError(error, this);
+      onError(error, this);
     } else {
-      this.content = tileData;
-      this.onTileLoad(this);
+      onLoad(this);
     }
   }
   /* eslint-enable max-statements */
 
-  loadData(getTileData, requestScheduler) {
-    if (!getTileData) {
-      return;
-    }
-
+  loadData(opts) {
+    this._isLoaded = false;
     this._isCancelled = false;
-    this._loader = this._loadData(getTileData, requestScheduler);
-    this._loader.finally(() => {
+    this._needsReload = false;
+    this._loaderId++;
+    this._loader = this._loadData(opts);
+    return this._loader;
+  }
+
+  setNeedsReload() {
+    if (this.isLoading) {
+      this.abort();
       this._loader = undefined;
-    });
+    }
+    this._needsReload = true;
   }
 
   abort() {

package/src/tile-layer/tile-2d-traversal.js

@@ -5,6 +5,7 @@ import {
   AxisAlignedBoundingBox,
   makeOrientedBoundingBoxFromPoints
 } from '@math.gl/culling';
+import {lngLatToWorld} from '@math.gl/web-mercator';
 import {osmTile2lngLat} from './utils';
 
 const TILE_SIZE = 512;
@@ -38,10 +39,14 @@ class OSMNode {
   }
 
   update(params) {
-    const {viewport, cullingVolume, elevationBounds, minZ, maxZ, offset, project} = params;
+    const {viewport, cullingVolume, elevationBounds, minZ, maxZ, bounds, offset, project} = params;
     const boundingVolume = this.getBoundingVolume(elevationBounds, offset, project);
 
     // First, check if this tile is visible
+    if (bounds && !this.insideBounds(bounds)) {
+      return false;
+    }
+
     const isInside = cullingVolume.computeVisibility(boundingVolume);
     if (isInside < 0) {
       return false;
@@ -85,6 +90,18 @@ class OSMNode {
     return result;
   }
 
+  insideBounds([minX, minY, maxX, maxY]) {
+    const scale = Math.pow(2, this.z);
+    const extent = TILE_SIZE / scale;
+
+    return (
+      this.x * extent < maxX &&
+      this.y * extent < maxY &&
+      (this.x + 1) * extent > minX &&
+      (this.y + 1) * extent > minY
+    );
+  }
+
   getBoundingVolume(zRange, worldOffset, project) {
     if (project) {
       // Custom projection
@@ -123,7 +140,7 @@ class OSMNode {
   }
 }
 
-export function getOSMTileIndices(viewport, maxZ, zRange) {
+export function getOSMTileIndices(viewport, maxZ, zRange, bounds) {
   const project = viewport.resolution ? viewport.projectPosition : null;
 
   // Get the culling volume of the current camera
@@ -140,6 +157,14 @@ export function getOSMTileIndices(viewport, maxZ, zRange) {
   // Always load at the current zoom level if pitch is small
   const minZ = viewport.pitch <= 60 ? maxZ : 0;
 
+  // Map extent to OSM position
+  if (bounds) {
+    const [minLng, minLat, maxLng, maxLat] = bounds;
+    const topLeft = lngLatToWorld([minLng, maxLat]);
+    const bottomRight = lngLatToWorld([maxLng, minLat]);
+    bounds = [topLeft[0], TILE_SIZE - topLeft[1], bottomRight[0], TILE_SIZE - bottomRight[1]];
+  }
+
   const root = new OSMNode(0, 0, 0);
   const traversalParams = {
     viewport,
@@ -148,6 +173,7 @@ export function getOSMTileIndices(viewport, maxZ, zRange) {
     elevationBounds: [elevationMin, elevationMax],
     minZ,
     maxZ,
+    bounds,
     // num. of worlds from the center. For repeated maps
     offset: 0
   };

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

@@ -42,7 +42,7 @@ export default class TileLayer extends CompositeLayer {
   get isLoaded() {
     const {tileset} = this.state;
     return tileset.selectedTiles.every(
-      tile => tile.layers && tile.layers.every(layer => layer.isLoaded)
+      tile => tile.isLoaded && tile.layers && tile.layers.every(layer => layer.isLoaded)
     );
   }
 
@@ -52,30 +52,28 @@ export default class TileLayer extends CompositeLayer {
 
   updateState({props, changeFlags}) {
     let {tileset} = this.state;
-    const createTileCache =
-      !tileset ||
+    const propsChanged = changeFlags.propsOrDataChanged || changeFlags.updateTriggersChanged;
+    const dataChanged =
       changeFlags.dataChanged ||
       (changeFlags.updateTriggersChanged &&
         (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getTileData));
 
-    if (createTileCache) {
-      if (tileset) {
-        tileset.finalize();
-      }
-      tileset = new Tileset2D({
-        ...this._getTilesetOptions(props),
-        getTileData: this.getTileData.bind(this),
-        onTileLoad: this._onTileLoad.bind(this),
-        onTileError: this._onTileError.bind(this),
-        onTileUnload: this._onTileUnload.bind(this)
-      });
+    if (!tileset) {
+      tileset = new Tileset2D(this._getTilesetOptions(props));
       this.setState({tileset});
-    } else if (changeFlags.propsChanged || changeFlags.updateTriggersChanged) {
+    } else if (propsChanged) {
       tileset.setOptions(this._getTilesetOptions(props));
-      // if any props changed, delete the cached layers
-      this.state.tileset.tiles.forEach(tile => {
-        tile.layers = null;
-      });
+
+      if (dataChanged) {
+        // reload all tiles
+        // use cached layers until new content is loaded
+        tileset.reloadAll();
+      } else {
+        // some render options changed, regenerate sub layers now
+        this.state.tileset.tiles.forEach(tile => {
+          tile.layers = null;
+        });
+      }
     }
 
     this._updateTileset();
@@ -103,7 +101,12 @@ export default class TileLayer extends CompositeLayer {
       refinementStrategy,
       extent,
       maxRequests,
-      zoomOffset
+      zoomOffset,
+
+      getTileData: this.getTileData.bind(this),
+      onTileLoad: this._onTileLoad.bind(this),
+      onTileError: this._onTileError.bind(this),
+      onTileUnload: this._onTileUnload.bind(this)
     };
   }
 
@@ -138,8 +141,8 @@ export default class TileLayer extends CompositeLayer {
   }
 
   _onTileLoad(tile) {
-    const layer = this.getCurrentLayer();
-    layer.props.onTileLoad(tile);
+    this.props.onTileLoad(tile);
+    tile.layers = null;
 
     if (tile.isVisible) {
       this.setNeedsUpdate();
@@ -147,10 +150,8 @@ export default class TileLayer extends CompositeLayer {
   }
 
   _onTileError(error, tile) {
-    const layer = this.getCurrentLayer();
-    layer.props.onTileError(error);
-    // errorred tiles should not block rendering, are considered "loaded" with empty data
-    layer._updateTileset();
+    this.props.onTileError(error);
+    tile.layers = null;
 
     if (tile.isVisible) {
       this.setNeedsUpdate();
@@ -158,15 +159,13 @@ export default class TileLayer extends CompositeLayer {
   }
 
   _onTileUnload(tile) {
-    const layer = this.getCurrentLayer();
-    layer.props.onTileUnload(tile);
+    this.props.onTileUnload(tile);
   }
 
   // Methods for subclass to override
 
   getTileData(tile) {
-    const {data} = this.props;
-    const {getTileData, fetch} = this.getCurrentLayer().props;
+    const {data, getTileData, fetch} = this.props;
     const {signal} = tile;
 
     tile.url = getURLFromTemplate(data, tile);
@@ -203,13 +202,13 @@ export default class TileLayer extends CompositeLayer {
     return this.state.tileset.tiles.map(tile => {
       const highlightedObjectIndex = this.getHighlightedObjectIndex(tile);
       // cache the rendered layer in the tile
-      if (!tile.isLoaded) {
-        // no op
+      if (!tile.isLoaded && !tile.content) {
+        // nothing to show
       } else if (!tile.layers) {
         const layers = this.renderSubLayers({
           ...this.props,
           id: `${this.id}-${tile.x}-${tile.y}-${tile.z}`,
-          data: tile.data,
+          data: tile.content,
           _offset: 0,
           tile
         });
@@ -230,7 +229,7 @@ export default class TileLayer extends CompositeLayer {
   }
 
   filterSubLayer({layer}) {
-    return this.props.visible && layer.props.tile.isVisible;
+    return layer.props.tile.isVisible;
   }
 }
 

package/src/tile-layer/tileset-2d.js

@@ -46,17 +46,14 @@ export default class Tileset2D {
    */
   constructor(opts) {
     this.opts = opts;
-    this._getTileData = opts.getTileData;
 
-    this.onTileError = opts.onTileError;
     this.onTileLoad = tile => {
-      opts.onTileLoad(tile);
+      this.opts.onTileLoad(tile);
       if (this.opts.maxCacheByteSize) {
         this._cacheByteSize += tile.byteLength;
         this._resizeCache();
       }
     };
-    this.onTileUnload = opts.onTileUnload;
 
     this._requestScheduler = new RequestScheduler({
       maxRequests: opts.maxRequests,
@@ -107,6 +104,20 @@ export default class Tileset2D {
         tile.abort();
       }
     }
+    this._cache.clear();
+    this._tiles = [];
+    this._selectedTiles = null;
+  }
+
+  reloadAll() {
+    for (const tileId of this._cache.keys()) {
+      const tile = this._cache.get(tileId);
+      if (!this._selectedTiles.includes(tile)) {
+        this._cache.delete(tileId);
+      } else {
+        tile.setNeedsReload();
+      }
+    }
   }
 
   /**
@@ -304,7 +315,7 @@ export default class Tileset2D {
           // delete tile
           this._cacheByteSize -= opts.maxCacheByteSize ? tile.byteLength : 0;
           _cache.delete(tileId);
-          this.onTileUnload(tile);
+          this.opts.onTileUnload(tile);
         }
         if (_cache.size <= maxCacheSize && this._cacheByteSize <= maxCacheByteSize) {
           break;
@@ -326,21 +337,24 @@ export default class Tileset2D {
   _getTile({x, y, z}, create) {
     const tileId = `${x},${y},${z}`;
     let tile = this._cache.get(tileId);
+    let needsReload = false;
 
     if (!tile && create) {
-      tile = new Tile2DHeader({
-        x,
-        y,
-        z,
-        onTileLoad: this.onTileLoad,
-        onTileError: this.onTileError
-      });
+      tile = new Tile2DHeader({x, y, z});
       Object.assign(tile, this.getTileMetadata(tile));
-      tile.loadData(this._getTileData, this._requestScheduler);
+      needsReload = true;
       this._cache.set(tileId, tile);
       this._dirty = true;
-    } else if (tile && tile.isCancelled && !tile.isLoading) {
-      tile.loadData(this._getTileData, this._requestScheduler);
+    } else if (tile && tile.needsReload) {
+      needsReload = true;
+    }
+    if (needsReload) {
+      tile.loadData({
+        getData: this.opts.getTileData,
+        requestScheduler: this._requestScheduler,
+        onLoad: this.onTileLoad,
+        onError: this.opts.onTileError
+      });
     }
 
     return tile;

package/src/tile-layer/utils.js

@@ -197,7 +197,7 @@ export function getTileIndices({
     transformedExtent = transformBox(extent, modelMatrix);
   }
   return viewport.isGeospatial
-    ? getOSMTileIndices(viewport, z, zRange, extent || DEFAULT_EXTENT)
+    ? getOSMTileIndices(viewport, z, zRange, extent)
     : getIdentityTileIndices(
         viewport,
         z,