Merge bcbc750 into 9dd1828

visgl · Apr 29, 2020 · 4522848 · 4522848
2 parents 9dd1828 + bcbc750
commit 4522848
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/modules/geo-layers/src/mvt-layer/mvt-layer.js b/modules/geo-layers/src/mvt-layer/mvt-layer.js
@@ -9,6 +9,10 @@ import ClipExtension from './clip-extension';
 
 const WORLD_SIZE = 512;
 
+const defaultProps = {
+  uniquePropertyId: {type: 'string', value: '', compare: false}
+};
+
 export default class MVTLayer extends TileLayer {
   getTileData(tile) {
     const url = getURLFromTemplate(this.props.data, tile);
@@ -30,12 +34,57 @@ export default class MVTLayer extends TileLayer {
 
     const modelMatrix = new Matrix4().translate([xOffset, yOffset, 0]).scale([xScale, yScale, 1]);
 
+    props.autoHighlight = false;
     props.modelMatrix = modelMatrix;
     props.coordinateSystem = COORDINATE_SYSTEM.CARTESIAN;
     props.extensions = [...(props.extensions || []), new ClipExtension()];
 
     return super.renderSubLayers(props);
   }
+
+  onHover(info, pickingEvent) {
+    const {uniquePropertyId, autoHighlight} = this.props;
+
+    if (autoHighlight) {
+      const {highlightedFeatureId} = this.state;
+      const hoveredFeature = info.object;
+      let hoveredFeatureId;
+
+      if (hoveredFeature) {
+        hoveredFeatureId = hoveredFeature
+          ? hoveredFeature.properties[uniquePropertyId]
+          : hoveredFeature.id;
+      }
+
+      if (hoveredFeatureId !== highlightedFeatureId) {
+        this.setState({highlightedFeatureId: hoveredFeatureId});
+      }
+    }
+
+    return super.onHover(info, pickingEvent);
+  }
+
+  getHighlightedObjectIndex(tile) {
+    const {highlightedFeatureId} = this.state;
+    const {uniquePropertyId, highlightedObjectIndex: highlightedIndexProp} = this.props;
+    const {data} = tile;
+
+    if (highlightedIndexProp && highlightedIndexProp > -1) {
+      return highlightedIndexProp;
+    }
+
+    if (!highlightedFeatureId || !Array.isArray(data)) {
+      return -1;
+    }
+
+    return data.findIndex(
+      feature =>
+        feature.id
+          ? feature.id === highlightedFeatureId
+          : feature.properties[uniquePropertyId] === highlightedFeatureId
+    );
+  }
 }
 
 MVTLayer.layerName = 'MVTLayer';
+MVTLayer.defaultProps = defaultProps;
diff --git a/modules/geo-layers/src/tile-layer/tile-layer.js b/modules/geo-layers/src/tile-layer/tile-layer.js
@@ -20,7 +20,8 @@ const defaultProps = {
   maxCacheSize: null,
   maxCacheByteSize: null,
   refinementStrategy: STRATEGY_DEFAULT,
-  zRange: null
+  zRange: null,
+  getHighlightedObjectIndex: {type: 'function', value: () => -1, compare: false}
 };
 
 export default class TileLayer extends CompositeLayer {
@@ -138,6 +139,10 @@ export default class TileLayer extends CompositeLayer {
     return this.props.renderSubLayers(props);
   }
 
+  getHighlightedObjectIndex(tile) {
+    return this.props.getHighlightedObjectIndex(tile);
+  }
+
   getPickingInfo({info, sourceLayer}) {
     info.sourceLayer = sourceLayer;
     info.tile = sourceLayer.props.tile;
@@ -151,6 +156,7 @@ export default class TileLayer extends CompositeLayer {
       // - parent layer must be visible
       // - tile must be visible in the current viewport
       const isVisible = visible && tile.isVisible;
+      const highlightedObjectIndex = this.getHighlightedObjectIndex(tile);
       // cache the rendered layer in the tile
       if (!tile.layers) {
         const layers = this.renderSubLayers(
@@ -159,12 +165,19 @@ export default class TileLayer extends CompositeLayer {
             data: tile.data,
             visible: isVisible,
             _offset: 0,
-            tile
+            tile,
+            highlightedObjectIndex
           })
         );
         tile.layers = flatten(layers, Boolean);
-      } else if (tile.layers[0] && tile.layers[0].props.visible !== isVisible) {
-        tile.layers = tile.layers.map(layer => layer.clone({visible: isVisible}));
+      } else if (
+        tile.layers[0] &&
+        (tile.layers[0].props.visible !== isVisible ||
+          tile.layers[0].props.highlightedObjectIndex !== highlightedObjectIndex)
+      ) {
+        tile.layers = tile.layers.map(layer =>
+          layer.clone({visible: isVisible, highlightedObjectIndex})
+        );
       }
       return tile.layers;
     });