@deck.gl/geo-layers 8.7.0-alpha.3 → 8.7.0-beta.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.7.0-alpha.3",
+  "version": "8.7.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -29,18 +29,18 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/3d-tiles": "^3.0.8",
-    "@loaders.gl/gis": "^3.0.8",
-    "@loaders.gl/loader-utils": "^3.0.8",
-    "@loaders.gl/mvt": "^3.0.8",
-    "@loaders.gl/terrain": "^3.0.8",
-    "@loaders.gl/tiles": "^3.0.8",
+    "@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",
     "@luma.gl/experimental": "^8.5.10",
-    "@math.gl/culling": "^3.5.4",
-    "@math.gl/web-mercator": "^3.5.4",
+    "@math.gl/core": "^3.5.6",
+    "@math.gl/culling": "^3.5.6",
+    "@math.gl/web-mercator": "^3.5.6",
     "h3-js": "^3.6.0",
-    "long": "^3.2.0",
-    "math.gl": "^3.5.4"
+    "long": "^3.2.0"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
@@ -49,5 +49,5 @@
     "@deck.gl/mesh-layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "03fd8c4caae96d66bd651cb76e11a6d05acf8f8c"
+  "gitHead": "0297ca9d2c85d980b075e2af4cfbeb75e31db55a"
 }

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

@@ -8,7 +8,7 @@ import {
   edgeLength,
   UNITS
 } from 'h3-js';
-import {lerp} from 'math.gl';
+import {lerp} from '@math.gl/core';
 import {CompositeLayer, createIterable} from '@deck.gl/core';
 import {ColumnLayer, PolygonLayer} from '@deck.gl/layers';
 
@@ -304,6 +304,7 @@ export default class H3HexagonLayer extends CompositeLayer {
       forwardProps,
       this.getSubLayerProps({
         id: 'hexagon-cell',
+        flatShading: true,
         updateTriggers: forwardProps.updateTriggers
       }),
       {

package/src/{index.js → index.ts}

@@ -28,3 +28,5 @@ export {default as H3HexagonLayer} from './h3-layers/h3-hexagon-layer';
 export {default as Tile3DLayer} from './tile-3d-layer/tile-3d-layer';
 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';

package/src/mesh-layer/mesh-layer-vertex.glsl.js

@@ -26,12 +26,18 @@ out vec3 normals_commonspace;
 out vec4 position_commonspace;
 out vec4 vColor;
 
-void main(void) {
-  // https://github.com/Esri/i3s-spec/blob/master/docs/1.7/geometryUVRegion.cmn.md
-  vec2 uv = fract(texCoords) * (uvRegions.zw - uvRegions.xy) + uvRegions.xy;
+vec2 applyUVRegion(vec2 uv) {
+  #ifdef HAS_UV_REGIONS
+    // https://github.com/Esri/i3s-spec/blob/master/docs/1.7/geometryUVRegion.cmn.md
+    return fract(uv) * (uvRegions.zw - uvRegions.xy) + uvRegions.xy;
+  #else
+    return uv;
+  #endif
+}
 
+void main(void) {
+  vec2 uv = applyUVRegion(texCoords);
   geometry.uv = uv;
-  geometry.uv = texCoords;
 
   if (u_pickFeatureIds) {
     geometry.pickingColor = featureIdsPickingColors;
@@ -39,26 +45,9 @@ void main(void) {
     geometry.pickingColor = instancePickingColors;
   }
 
-  #ifdef MODULE_PBR
-    // set PBR data
-    #ifdef HAS_NORMALS
-      pbr_vNormal = project_normal(instanceModelMatrix * normals);
-      geometry.normal = pbr_vNormal;
-    #endif
-
-    #ifdef HAS_UV
-      pbr_vUV = uv;
-    #else
-      pbr_vUV = vec2(0., 0.);
-    #endif
-    geometry.uv = pbr_vUV;
-  #endif
-
   vTexCoord = uv;
   cameraPosition = project_uCameraPosition;
-  normals_commonspace = project_normal(instanceModelMatrix * normals);
   vColor = vec4(colors * instanceColors.rgb, instanceColors.a);
-  geometry.normal = normals_commonspace;
 
   vec3 pos = (instanceModelMatrix * positions) * sizeScale;
   vec3 projectedPosition = project_position(positions);
@@ -66,13 +55,25 @@ void main(void) {
   gl_Position = project_common_position_to_clipspace(position_commonspace);
 
   geometry.position = position_commonspace;
+  normals_commonspace = project_normal(instanceModelMatrix * normals);
+  geometry.normal = normals_commonspace;
+
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   #ifdef MODULE_PBR
     // set PBR data
     pbr_vPosition = geometry.position.xyz;
-  #endif
+    #ifdef HAS_NORMALS
+      pbr_vNormal = geometry.normal;
+    #endif
 
-  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+    #ifdef HAS_UV
+      pbr_vUV = uv;
+    #else
+      pbr_vUV = vec2(0., 0.);
+    #endif
+    geometry.uv = pbr_vUV;
+  #endif
 
   DECKGL_FILTER_COLOR(vColor, geometry);
 }

package/src/mesh-layer/mesh-layer.js

@@ -11,9 +11,6 @@ function validateGeometryAttributes(attributes) {
   if (!hasColorAttribute) {
     attributes.colors = {constant: true, value: new Float32Array([1, 1, 1])};
   }
-  if (!attributes.uvRegions) {
-    attributes.uvRegions = {constant: true, value: new Float32Array([0, 0, 1, 1])};
-  }
 }
 
 const defaultProps = {
@@ -76,7 +73,11 @@ export default class _MeshLayer extends SimpleMeshLayer {
       ...this.getShaders(),
       id,
       geometry: mesh,
-      defines: {...shaders.defines, ...materialParser?.defines},
+      defines: {
+        ...shaders.defines,
+        ...materialParser?.defines,
+        HAS_UV_REGIONS: mesh.attributes.uvRegions
+      },
       parameters: materialParser?.parameters,
       isInstanced: true
     });

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

@@ -1,4 +1,4 @@
-import {lerp} from 'math.gl';
+import {lerp} from '@math.gl/core';
 
 const availableTransformations = {
   Point,

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

@@ -1,5 +1,5 @@
 import {log} from '@deck.gl/core';
-import {Matrix4} from 'math.gl';
+import {Matrix4} from '@math.gl/core';
 import {MVTWorkerLoader} from '@loaders.gl/mvt';
 import {binaryToGeojson} from '@loaders.gl/gis';
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
@@ -43,6 +43,10 @@ export default class MVTLayer extends TileLayer {
       super.updateState({props, oldProps, context, changeFlags});
       this._setWGS84PropertyForTiles();
     }
+    const {highlightColor} = props;
+    if (highlightColor !== oldProps.highlightColor && Array.isArray(highlightColor)) {
+      this.setState({highlightColor});
+    }
   }
 
   /* eslint-disable complexity */
@@ -167,12 +171,17 @@ export default class MVTLayer extends TileLayer {
       newHoveredFeatureId = getFeatureUniqueId(hoveredFeature, uniqueIdProperty);
       newHoveredFeatureLayerName = getFeatureLayerName(hoveredFeature);
     }
+    let {highlightColor} = this.props;
+    if (typeof highlightColor === 'function') {
+      highlightColor = highlightColor(info);
+    }
 
     if (
       hoveredFeatureId !== newHoveredFeatureId ||
       hoveredFeatureLayerName !== newHoveredFeatureLayerName
     ) {
       this.setState({
+        highlightColor,
         hoveredFeatureId: newHoveredFeatureId,
         hoveredFeatureLayerName: newHoveredFeatureLayerName
       });
@@ -195,6 +204,13 @@ export default class MVTLayer extends TileLayer {
     return info;
   }
 
+  getSubLayerPropsByTile(tile) {
+    return {
+      highlightedObjectIndex: this.getHighlightedObjectIndex(tile),
+      highlightColor: this.state.highlightColor
+    };
+  }
+
   getHighlightedObjectIndex(tile) {
     const {hoveredFeatureId, hoveredFeatureLayerName} = this.state;
     const {uniqueIdProperty, highlightedFeatureId, binary} = this.props;

package/src/terrain-layer/terrain-layer.js

@@ -20,7 +20,7 @@
 
 import {CompositeLayer, log} from '@deck.gl/core';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
-import {WebMercatorViewport, COORDINATE_SYSTEM} from '@deck.gl/core';
+import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import {TerrainWorkerLoader} from '@loaders.gl/terrain';
 import TileLayer from '../tile-layer/tile-layer';
 import {urlType, getURLFromTemplate} from '../tile-layer/utils';
@@ -123,17 +123,17 @@ export default class TerrainLayer extends CompositeLayer {
 
   getTiledTerrainData(tile) {
     const {elevationData, fetch, texture, elevationDecoder, meshMaxError} = this.props;
+    const {viewport} = this.context;
     const dataUrl = getURLFromTemplate(elevationData, tile);
     const textureUrl = getURLFromTemplate(texture, tile);
 
-    const {bbox, signal, z} = tile;
-    const viewport = new WebMercatorViewport({
-      longitude: (bbox.west + bbox.east) / 2,
-      latitude: (bbox.north + bbox.south) / 2,
-      zoom: z
-    });
-    const bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
-    const topRight = viewport.projectFlat([bbox.east, bbox.north]);
+    const {bbox, signal} = tile;
+    const bottomLeft = viewport.isGeospatial
+      ? viewport.projectFlat([bbox.west, bbox.south])
+      : [bbox.left, bbox.bottom];
+    const topRight = viewport.isGeospatial
+      ? viewport.projectFlat([bbox.east, bbox.north])
+      : [bbox.right, bbox.top];
     const bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
 
     const terrain = this.loadTerrain({
@@ -165,6 +165,7 @@ export default class TerrainLayer extends CompositeLayer {
       data: DUMMY_DATA,
       mesh,
       texture,
+      _instanced: false,
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       getPosition: d => [0, 0, 0],
       getColor: color

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

@@ -262,7 +262,15 @@ export default class Tile3DLayer extends CompositeLayer {
 
   _makeSimpleMeshLayer(tileHeader, oldLayer) {
     const content = tileHeader.content;
-    const {attributes, indices, modelMatrix, cartographicOrigin, material, featureIds} = content;
+    const {
+      attributes,
+      indices,
+      modelMatrix,
+      cartographicOrigin,
+      coordinateSystem = COORDINATE_SYSTEM.METER_OFFSETS,
+      material,
+      featureIds
+    } = content;
     const {_getMeshColor} = this.props;
 
     const geometry =
@@ -288,7 +296,7 @@ export default class Tile3DLayer extends CompositeLayer {
         pbrMaterial: material,
         modelMatrix,
         coordinateOrigin: cartographicOrigin,
-        coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
+        coordinateSystem,
         featureIds,
         _offset: 0
       }

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

@@ -144,18 +144,14 @@ export default class TileLayer extends CompositeLayer {
     this.props.onTileLoad(tile);
     tile.layers = null;
 
-    if (tile.isVisible) {
-      this.setNeedsUpdate();
-    }
+    this.setNeedsUpdate();
   }
 
   _onTileError(error, tile) {
     this.props.onTileError(error);
     tile.layers = null;
 
-    if (tile.isVisible) {
-      this.setNeedsUpdate();
-    }
+    this.setNeedsUpdate();
   }
 
   _onTileUnload(tile) {
@@ -183,8 +179,8 @@ export default class TileLayer extends CompositeLayer {
     return this.props.renderSubLayers(props);
   }
 
-  getHighlightedObjectIndex() {
-    return -1;
+  getSubLayerPropsByTile(tile) {
+    return null;
   }
 
   getPickingInfo({info, sourceLayer}) {
@@ -200,7 +196,7 @@ export default class TileLayer extends CompositeLayer {
 
   renderLayers() {
     return this.state.tileset.tiles.map(tile => {
-      const highlightedObjectIndex = this.getHighlightedObjectIndex(tile);
+      const subLayerProps = this.getSubLayerPropsByTile(tile);
       // cache the rendered layer in the tile
       if (!tile.isLoaded && !tile.content) {
         // nothing to show
@@ -215,14 +211,17 @@ export default class TileLayer extends CompositeLayer {
         tile.layers = flatten(layers, Boolean).map(layer =>
           layer.clone({
             tile,
-            highlightedObjectIndex
+            ...subLayerProps
           })
         );
       } else if (
+        subLayerProps &&
         tile.layers[0] &&
-        tile.layers[0].props.highlightedObjectIndex !== highlightedObjectIndex
+        Object.keys(subLayerProps).some(
+          propName => tile.layers[0].props[propName] !== subLayerProps[propName]
+        )
       ) {
-        tile.layers = tile.layers.map(layer => layer.clone({highlightedObjectIndex}));
+        tile.layers = tile.layers.map(layer => layer.clone(subLayerProps));
       }
       return tile.layers;
     });

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

@@ -1,10 +1,11 @@
 import Tile2DHeader from './tile-2d-header';
 import {getTileIndices, tileToBoundingBox} from './utils';
 import {RequestScheduler} from '@loaders.gl/loader-utils';
-import {Matrix4} from 'math.gl';
+import {Matrix4} from '@math.gl/core';
 
-const TILE_STATE_UNKNOWN = 0;
-const TILE_STATE_VISIBLE = 1;
+// bit masks
+const TILE_STATE_VISITED = 1;
+const TILE_STATE_VISIBLE = 2;
 /*
    show cached parent tile if children are loading
    +-----------+       +-----+            +-----+-----+
@@ -23,10 +24,6 @@ const TILE_STATE_VISIBLE = 1;
    +-------+----  -->  |
    |       |           |
  */
-const TILE_STATE_PLACEHOLDER = 3;
-const TILE_STATE_HIDDEN = 4;
-// tiles that should be displayed in the current viewport
-const TILE_STATE_SELECTED = 5;
 
 export const STRATEGY_NEVER = 'never';
 export const STRATEGY_REPLACE = 'no-overlap';
@@ -34,6 +31,12 @@ export const STRATEGY_DEFAULT = 'best-available';
 
 const DEFAULT_CACHE_SCALE = 5;
 
+const STRATEGIES = {
+  [STRATEGY_DEFAULT]: updateTileStateDefault,
+  [STRATEGY_REPLACE]: updateTileStateReplace,
+  [STRATEGY_NEVER]: () => {}
+};
+
 /**
  * Manages loading and purging of tiles data. This class caches recently visited tiles
  * and only create new tiles if they are present.
@@ -153,6 +156,7 @@ export default class Tileset2D {
 
     // Update tile states
     const changed = this.updateTileStates();
+    this._pruneRequests();
 
     if (this._dirty) {
       // cache size is either the user defined maxSize or 5 * number of current tiles in the viewport.
@@ -201,46 +205,63 @@ export default class Tileset2D {
 
   // Returns true if any tile's visibility changed
   updateTileStates() {
-    this._updateTileStates(this.selectedTiles);
+    const refinementStrategy = this.opts.refinementStrategy || STRATEGY_DEFAULT;
 
-    const {maxRequests} = this.opts;
+    const visibilities = new Array(this._cache.size);
+    let i = 0;
+    // Reset state
+    for (const tile of this._cache.values()) {
+      // save previous state
+      visibilities[i++] = tile.isVisible;
+      tile.isSelected = false;
+      tile.isVisible = false;
+    }
+    for (const tile of this._selectedTiles) {
+      tile.isSelected = true;
+      tile.isVisible = true;
+    }
 
-    const abortCandidates = [];
-    let ongoingRequestCount = 0;
-    let changed = false;
+    // Strategy-specific state logic
+    (typeof refinementStrategy === 'function'
+      ? refinementStrategy
+      : STRATEGIES[refinementStrategy])(Array.from(this._cache.values()));
+
+    i = 0;
+    // Check if any visibility has changed
     for (const tile of this._cache.values()) {
-      const isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
-      if (tile.isVisible !== isVisible) {
-        changed = true;
-        tile.isVisible = isVisible;
+      if (visibilities[i++] !== tile.isVisible) {
+        return true;
       }
+    }
+
+    return false;
+  }
+
+  /* Private methods */
 
-      // isSelected used in request scheduler
-      tile.isSelected = tile.state === TILE_STATE_SELECTED;
+  _pruneRequests() {
+    const {maxRequests} = this.opts;
 
+    const abortCandidates = [];
+    let ongoingRequestCount = 0;
+    for (const tile of this._cache.values()) {
       // Keep track of all the ongoing requests
       if (tile.isLoading) {
         ongoingRequestCount++;
-        if (!tile.isSelected) {
+        if (!tile.isSelected && !tile.isVisible) {
           abortCandidates.push(tile);
         }
       }
     }
 
-    if (maxRequests > 0) {
-      while (ongoingRequestCount > maxRequests && abortCandidates.length > 0) {
-        // There are too many ongoing requests, so abort some that are unselected
-        const tile = abortCandidates.shift();
-        tile.abort();
-        ongoingRequestCount--;
-      }
+    while (maxRequests > 0 && ongoingRequestCount > maxRequests && abortCandidates.length > 0) {
+      // There are too many ongoing requests, so abort some that are unselected
+      const tile = abortCandidates.shift();
+      tile.abort();
+      ongoingRequestCount--;
     }
-
-    return changed;
   }
 
-  /* Private methods */
-
   // This needs to be called every time some tiles have been added/removed from cache
   _rebuildTree() {
     const {_cache} = this;
@@ -261,40 +282,6 @@ export default class Tileset2D {
     }
   }
 
-  // A selected tile is always visible.
-  // Never show two overlapping tiles.
-  // If a selected tile is loading, try showing a cached ancester with the closest z
-  // If a selected tile is loading, and no ancester is shown - try showing cached
-  // descendants with the closest z
-  _updateTileStates(selectedTiles) {
-    const {_cache} = this;
-    const refinementStrategy = this.opts.refinementStrategy || STRATEGY_DEFAULT;
-
-    // Reset states
-    for (const tile of _cache.values()) {
-      tile.state = TILE_STATE_UNKNOWN;
-    }
-
-    // For all the selected && pending tiles:
-    // - pick the closest ancestor as placeholder
-    // - if no ancestor is visible, pick the closest children as placeholder
-    for (const tile of selectedTiles) {
-      tile.state = TILE_STATE_SELECTED;
-    }
-
-    if (refinementStrategy === STRATEGY_NEVER) {
-      return;
-    }
-    for (const tile of selectedTiles) {
-      getPlaceholderInAncestors(tile, refinementStrategy);
-    }
-    for (const tile of selectedTiles) {
-      if (needsPlaceholder(tile)) {
-        getPlaceholderInChildren(tile);
-      }
-    }
-  }
-
   /**
    * Clear tiles that are not visible when the cache is full
    */
@@ -375,44 +362,70 @@ export default class Tileset2D {
   }
 }
 
-// A selected tile needs placeholder from its children if
-// - it is not loaded
-// - none of its ancestors is visible and loaded
-function needsPlaceholder(tile) {
-  let t = tile;
-  while (t) {
-    if (t.state & (TILE_STATE_VISIBLE === 0)) {
-      return true;
-    }
-    if (t.isLoaded) {
-      return false;
+/* -- Refinement strategies --*/
+/* eslint-disable max-depth */
+
+// For all the selected && pending tiles:
+// - pick the closest ancestor as placeholder
+// - if no ancestor is visible, pick the closest children as placeholder
+function updateTileStateDefault(allTiles) {
+  for (const tile of allTiles) {
+    tile.state = 0;
+  }
+  for (const tile of allTiles) {
+    if (tile.isSelected && !getPlaceholderInAncestors(tile)) {
+      getPlaceholderInChildren(tile);
     }
-    t = t.parent;
   }
-  return true;
+  for (const tile of allTiles) {
+    tile.isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
+  }
 }
 
-function getPlaceholderInAncestors(tile, refinementStrategy) {
-  let parent;
-  let state = TILE_STATE_PLACEHOLDER;
-  while ((parent = tile.parent)) {
-    if (tile.isLoaded) {
-      // If a tile is loaded, mark all its ancestors as hidden
-      state = TILE_STATE_HIDDEN;
-      if (refinementStrategy === STRATEGY_DEFAULT) {
-        return;
+// Until a selected tile and all its selected siblings are loaded, use the closest ancestor as placeholder
+function updateTileStateReplace(allTiles) {
+  for (const tile of allTiles) {
+    tile.state = 0;
+  }
+  for (const tile of allTiles) {
+    if (tile.isSelected) {
+      getPlaceholderInAncestors(tile);
+    }
+  }
+  // Always process parents first
+  const sortedTiles = Array.from(allTiles).sort((t1, t2) => t1.z - t2.z);
+  for (const tile of sortedTiles) {
+    tile.isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
+
+    if (tile.isVisible || tile.state & TILE_STATE_VISITED) {
+      // If the tile is rendered, or if the tile has been explicitly hidden, hide all of its children
+      for (const child of tile.children) {
+        child.state = TILE_STATE_VISITED;
       }
+    } else if (tile.isSelected) {
+      getPlaceholderInChildren(tile);
+    }
+  }
+}
+
+// Walk up the tree until we find one ancestor that is loaded. Returns true if successful.
+function getPlaceholderInAncestors(tile) {
+  while (tile) {
+    if (tile.isLoaded || tile.content) {
+      tile.state |= TILE_STATE_VISIBLE;
+      return true;
     }
-    parent.state = Math.max(parent.state, state);
-    tile = parent;
+    tile = tile.parent;
   }
+  return false;
 }
 
 // Recursively set children as placeholder
 function getPlaceholderInChildren(tile) {
   for (const child of tile.children) {
-    child.state = Math.max(child.state, TILE_STATE_PLACEHOLDER);
-    if (!child.isLoaded) {
+    if (child.isLoaded || child.content) {
+      child.state |= TILE_STATE_VISIBLE;
+    } else {
       getPlaceholderInChildren(child);
     }
   }

package/src/tile-layer/utils.js

@@ -65,10 +65,10 @@ export function getURLFromTemplate(template, properties) {
 
   const {x, y, z} = properties;
   return template
-    .replace('{x}', x)
-    .replace('{y}', y)
-    .replace('{z}', z)
-    .replace('{-y}', Math.pow(2, z) - y - 1);
+    .replace(/\{x\}/g, x)
+    .replace(/\{y\}/g, y)
+    .replace(/\{z\}/g, z)
+    .replace(/\{-y\}/g, Math.pow(2, z) - y - 1);
 }
 
 /**