Highlight SceneLayer

This sample shows how to highlight features in a SceneLayer representing campus buildings. When the SceneLayerView finished updating we loop through all the loaded features and put them in a list. An event listener is added on each list item which zooms to the 3D extent of the feature and highlights it.

To highlight a feature, call the highlight method of the feature's corresponding layerView with the feature or its objectID as parameter.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// add event listener on each list item
li.addEventListener("click", (event) => {
  const target = event.target;
  // get objectId of the feature that we previously stored as a data attribute
  const objectId = parseInt(target.getAttribute("data-object-id"));
  // create an extent query on the layer view that will return the 3D extent of the feature
  const queryExtent = new Query({
    objectIds: [objectId]
  });
  campusLayerView.queryExtent(queryExtent).then((result) => {
    // zoom to the extent of the feature; we use the expand method as we don't want to zoom very close to it
    view.goTo(result.extent.expand(4), { speedFactor: 0.5 });
  });
  // if any, remove the previous highlights
  if (highlight) {
    highlight.remove();
  }
  // highlight the feature with the returned objectId
  highlight = campusLayerView.highlight([objectId]);
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.