@deck.gl/geo-layers 8.6.4 → 8.6.8

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.4",
+  "version": "8.6.8",
   "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/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"
+    "math.gl": "^3.5.6"
   },
   "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": "750695c9f13595fa01982d81cdc2eb11bb5593b7"
+  "gitHead": "5a252f2cb2de10ceeb20a0ecf353034de5366e65"
 }

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

@@ -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-layer/tile-layer.js

@@ -183,8 +183,8 @@ export default class TileLayer extends CompositeLayer {
     return this.props.renderSubLayers(props);
   }
 
-  getHighlightedObjectIndex() {
-    return -1;
+  getSubLayerPropsByTile(tile) {
+    return null;
   }
 
   getPickingInfo({info, sourceLayer}) {
@@ -200,7 +200,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 +215,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

@@ -71,6 +71,9 @@ export default class Tileset2D {
     this._selectedTiles = null;
     this._frameNumber = 0;
 
+    this._modelMatrix = new Matrix4();
+    this._modelMatrixInverse = new Matrix4();
+
     this.setOptions(opts);
   }
 
@@ -87,6 +90,10 @@ export default class Tileset2D {
     return this._selectedTiles.every(tile => tile.isLoaded);
   }
 
+  get needsReload() {
+    return this._selectedTiles.some(tile => tile.needsReload);
+  }
+
   setOptions(opts) {
     Object.assign(this.opts, opts);
     if (Number.isFinite(opts.maxZoom)) {
@@ -131,8 +138,8 @@ export default class Tileset2D {
     const isModelMatrixNew = !modelMatrixAsMatrix4.equals(this._modelMatrix);
     if (!viewport.equals(this._viewport) || isModelMatrixNew) {
       if (isModelMatrixNew) {
-        this._modelMatrixInverse = modelMatrix && modelMatrixAsMatrix4.clone().invert();
-        this._modelMatrix = modelMatrix && modelMatrixAsMatrix4;
+        this._modelMatrixInverse = modelMatrixAsMatrix4.clone().invert();
+        this._modelMatrix = modelMatrixAsMatrix4;
       }
       this._viewport = viewport;
       const tileIndices = this.getTileIndices({
@@ -149,6 +156,11 @@ export default class Tileset2D {
         // Some new tiles are added
         this._rebuildTree();
       }
+      // Check for needed reloads explicitly even if the view/matrix has not changed.
+    } else if (this.needsReload) {
+      this._selectedTiles = this._selectedTiles.map(tile =>
+        this._getTile({x: tile.x, y: tile.y, z: tile.z})
+      );
     }
 
     // Update tile states

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);
 }
 
 /**