You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to highlight features in a SceneLayer representing Esri offices. 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.

// add event listener on each list item
li.addEventListener("click", function(event) {
  var target = event.target;
  // get objectId of the feature that we previously stored as a data attribute
  var objectId = parseInt(target.getAttribute("data-object-id"));
  // create an extent query on the layer view that will return the 3D extent of the feature
  var queryExtent = new Query({
    objectIds: [objectId]
  });
  officeLayerView.queryExtent(queryExtent).then(function(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(7), { speedFactor: 0.5 });
  });
  // if any, remove the previous highlights
  if (highlight) {
    highlight.remove();
  }
  // highlight the feature with the returned objectId
  highlight = officeLayerView.highlight([objectId]);
});

Sample search results

TitleSample
Loading...