This probably has what you need to accomplish what you're trying to do, or at least get you closer to it anyways:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Highlight point features | Sample | ArcGIS Maps SDK for JavaScript 4.29
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
background-color: transparent;
color: white;
}
.esri-button-overwrite {
width:auto;
display: table-cell;
margin: 4px;
background-color: white;
color: #0079c1;
}
</style>
<script>
require(["esri/Map", "esri/WebScene", "esri/views/SceneView"], (
Map,
WebScene,
SceneView
) => {
// load webscene from portal item
const webScene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "475a7161ed194460b5b52654e29581a2"
}
});
const view = new SceneView({
map: webScene,
container: "viewDiv",
// set highlightOptions like color and fillOpacity
highlightOptions: {
color: [255, 241, 58],
fillOpacity: 0.4
}
});
// these two highlight handlers are used for selection and hovering over features
let highlightSelect;
webScene.when(() => {
// get layer from webScene
const stationLayer = webScene.layers.getItemAt(1);
// highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(stationLayer).then((layerView) => {
// creates the query that will be used to obtain the features needed for the highlight
const queryStations = stationLayer.createQuery();
// features that are passed in the highlight function need to have an `objectID`
// if the query is built using `new Query()` then `queryStations.outFields = ["objectID"]` should be set
const buttons = document.querySelectorAll("button");
for (let i = 0, button = null; (button = buttons[i]); i++) {
button.addEventListener("mouseover", onClick);
button.addEventListener("mouseout", onMouseOut);
}
function onClick(event) {
queryStations.where = `nom='${event.target.innerText}'`;
stationLayer.queryFeatures(queryStations).then((result) => {
if (typeof view.popup?.clear == "function") {
view.popup.close();
view.popup.clear();
}
// if a feature is already highlighted, then remove the highlight
if (highlightSelect) {
highlightSelect.remove();
highlightSelect = null;
}
// the feature to be highlighted
const feature = result.features[0];
view.openPopup({ features: [feature] });
// use the objectID to highlight the feature
highlightSelect = layerView.highlight(
feature.attributes["OBJECTID"]
);
/*
// center the feature
view
.goTo(
{
target: feature.geometry,
tilt: 70,
zoom: 16
},
{
duration: 2000,
easing: "in-out-expo"
}
)
.catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
*/
});
}
function onMouseOut(evt) {
if (typeof view.popup?.clear == "function") {
view.popup.close();
view.popup.clear();
}
if (highlightSelect) {
highlightSelect.remove();
highlightSelect = null;
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv" class="esri-widget">
<h3>Subway stations</h3>
<button class="esri-button esri-button-overwrite">Valmy</button>
<button class="esri-button esri-button-overwrite">
St-Jean Vieux Lyon
</button>
<button class="esri-button esri-button-overwrite">Charpennes</button>
<button class="esri-button esri-button-overwrite">Sans souci</button>
<button class="esri-button esri-button-overwrite">Hôtel de Ville</button>
<button class="esri-button esri-button-overwrite">Garibaldi</button>
</div>
</body>
</html>
Note that adding and removing a highlight is redundant because the popup adds its own highlight as well. Therefore, in order to get rid of the popup's highlight, I added code to close the popup as well. I also commented out the part where the view zooms to the selected feature...otherwise, the popup would always appear over top of the feature, effectively hiding it.