Add zRange prop to TileLayer for use with TerrainLayer

modules/geo-layers/src/terrain-layer/terrain-layer.js

@@ -65,6 +65,18 @@ function urlTemplateToUpdateTrigger(template) {
   return template;
 }
 
+// Get [min, max] elevation range of terrain mesh
+function getZRange(positions) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (let i = 2; i < positions.length; i += 3) {
+    const ele = positions[i];
+    min = ele < min ? ele : min;
+    max = ele > max ? ele : max;
+  }
+  return [min, max];
+}
+
 /**
  * state: {
  *   isTiled: True renders TileLayer of many SimpleMeshLayers, false renders one SimpleMeshLayer
@@ -168,6 +180,16 @@ export default class TerrainLayer extends CompositeLayer {
     });
   }
 
+  // Update zRange of viewport
+  onViewportLoad(data) {
+    const ranges = data.map(arr => {
+      return getZRange(arr[0].attributes.POSITION.value);
+    });
+    const minZ = Math.min(...ranges.flatMap(x => x[0]));
+    const maxZ = Math.max(...ranges.flatMap(x => x[1]));
+    this.setState({zRange: [minZ, maxZ]});
+  }
+
   renderLayers() {
     const {
       color,
@@ -197,7 +219,9 @@ export default class TerrainLayer extends CompositeLayer {
               meshMaxError,
               elevationDecoder
             }
-          }
+          },
+          onViewportLoad: this.onViewportLoad.bind(this),
+          zRange: this.state.zRange || null
         }
       );
     }

modules/geo-layers/src/tile-layer/tile-layer.js

@@ -19,7 +19,8 @@ const defaultProps = {
   minZoom: 0,
   maxCacheSize: null,
   maxCacheByteSize: null,
-  refinementStrategy: STRATEGY_DEFAULT
+  refinementStrategy: STRATEGY_DEFAULT,
+  zRange: null
 };
 
 export default class TileLayer extends CompositeLayer {
@@ -85,8 +86,8 @@ export default class TileLayer extends CompositeLayer {
 
   _updateTileset() {
     const {tileset} = this.state;
-    const {onViewportLoad} = this.props;
-    const frameNumber = tileset.update(this.context.viewport);
+    const {onViewportLoad, zRange} = this.props;
+    const frameNumber = tileset.update(this.context.viewport, {zRange});
     const {isLoaded} = tileset;
 
     const loadingStateChanged = this.state.isLoaded !== isLoaded;

modules/geo-layers/src/tile-layer/tileset-2d.js

@@ -97,13 +97,14 @@ export default class Tileset2D {
    * @param {*} viewport
    * @param {*} onUpdate
    */
-  update(viewport) {
+  update(viewport, {zRange}) {
     if (viewport !== this._viewport) {
       this._viewport = viewport;
       const tileIndices = this.getTileIndices({
         viewport,
         maxZoom: this._maxZoom,
-        minZoom: this._minZoom
+        minZoom: this._minZoom,
+        zRange
       });
       this._selectedTiles = tileIndices.map(index => this._getTile(index, true));
 
@@ -130,8 +131,8 @@ export default class Tileset2D {
   /* Public interface for subclassing */
 
   // Returns array of {x, y, z}
-  getTileIndices({viewport, maxZoom, minZoom}) {
-    return getTileIndices(viewport, maxZoom, minZoom, this.opts.tileSize);
+  getTileIndices({viewport, maxZoom, minZoom, zRange}) {
+    return getTileIndices(viewport, maxZoom, minZoom, zRange, this.opts.tileSize);
   }
 
   // Add custom metadata to tiles

modules/geo-layers/src/tile-layer/utils.js

@@ -42,7 +42,29 @@ export function getURLFromTemplate(template, properties) {
 /**
  * gets the bounding box of a viewport
  */
-function getBoundingBox(viewport) {
+function getBoundingBox(viewport, zRange) {
+  if (zRange && zRange.length === 2) {
+    const corners = [
+      // Lower zRange
+      viewport.unproject([0, 0], {targetZ: zRange[0]}),
+      viewport.unproject([viewport.width, 0], {targetZ: zRange[0]}),
+      viewport.unproject([0, viewport.height], {targetZ: zRange[0]}),
+      viewport.unproject([viewport.width, viewport.height], {targetZ: zRange[0]}),
+
+      // Upper zRange
+      viewport.unproject([0, 0], {targetZ: zRange[1]}),
+      viewport.unproject([viewport.width, 0], {targetZ: zRange[1]}),
+      viewport.unproject([0, viewport.height], {targetZ: zRange[1]}),
+      viewport.unproject([viewport.width, viewport.height], {targetZ: zRange[1]})
+    ];
+    return [
+      Math.min(...corners.flatMap(arr => arr[0])),
+      Math.min(...corners.flatMap(arr => arr[1])),
+      Math.max(...corners.flatMap(arr => arr[0])),
+      Math.max(...corners.flatMap(arr => arr[1]))
+    ];
+  }
+
   const corners = [
     viewport.unproject([0, 0]),
     viewport.unproject([viewport.width, 0]),
@@ -122,8 +144,8 @@ function getIdentityTileIndices(viewport, z, tileSize) {
   return indices;
 }
 
-function getOSMTileIndices(viewport, z) {
-  const bbox = getBoundingBox(viewport);
+function getOSMTileIndices(viewport, z, zRange) {
+  const bbox = getBoundingBox(viewport, zRange);
   const scale = getScale(z);
   /*
     minX, maxX could be out of bounds if longitude is near the 180 meridian or multiple worlds
@@ -160,7 +182,7 @@ function getOSMTileIndices(viewport, z) {
  * than minZoom, return an empty array. If the current zoom level is greater than maxZoom,
  * return tiles that are on maxZoom.
  */
-export function getTileIndices(viewport, maxZoom, minZoom, tileSize = TILE_SIZE) {
+export function getTileIndices(viewport, maxZoom, minZoom, zRange, tileSize = TILE_SIZE) {
   let z = Math.ceil(viewport.zoom);
   if (Number.isFinite(minZoom) && z < minZoom) {
     return [];
@@ -170,6 +192,6 @@ export function getTileIndices(viewport, maxZoom, minZoom, tileSize = TILE_SIZE)
   }
 
   return viewport.isGeospatial
-    ? getOSMTileIndices(viewport, z)
+    ? getOSMTileIndices(viewport, z, zRange)
     : getIdentityTileIndices(viewport, z, tileSize);
 }