This sample shows how to highlight features in a SceneLayer representing campus buildings. Once the SceneLayerView finishes updating, we loop through all the loaded features and add them to a list. Event listeners are added to each list item that enable the user to highlight a building and zoom to its 3D extent.
To highlight a feature, call the highlight method of the feature's corresponding layerView. You can specify one or more features to highlight by passing a target graphic or object in the first parameter. You can specify the name of the highlight to apply in the second parameter. This should be the name of one of the HighlightOptions included in the highlights collection of the Scene component.
If you apply more than one highlight to a feature, the one that is last within the highlights collection will be applied. In this sample, you can select one or more items in the buildings list, which will apply a blue highlight to the corresponding buildings in the scene. Hovering over a list item will highlight the corresponding building with the higher priority yellow highlight option. This allows you to quickly locate a specific building from the list.
const objectId = feature.attributes.OID; // When the list item is hovered over, highlight the corresponding building in gold li.addEventListener("mouseenter", () => { // Since no highlight name is provided, the default will be used hoverHighlight = layerView.highlight(feature); }); // Remove the hover highlight when the list item is no longer hovered over li.addEventListener("mouseleave", () => { hoverHighlight?.remove(); }); // When the list item is selected, highlight the corresponding building in blue // Each list item needs a highlight handler so the highlight can be removed from each building independently let selectionHighlight = null; li.addEventListener("calciteListItemSelect", (event) => { if (event.target.selected) { // A feature can also be highlighted using its object ID selectionHighlight = layerView.highlight(objectId, { name: "multiselect" }); } else { selectionHighlight?.remove(); } }); 
