I need to highlight multiple IDs and want to zoom the page to focus on these highlighted objects after highlighting them

[gzcqy]

How should I do this? I saw the example only has viewer.zoomTo(pickedId), and the ID here cannot be multiple.

[gzcqy]

Sure, here's the translation:

---

Alright, I know what to do now. It turns out I need to use the getProductsWithState function to get the highlighted objects. However, after using zoomTo, the view is in a top-down perspective, which feels quite odd.

viewer.setState(State.HIGHLIGHTED, ids);
const elements = viewer.getProductsWithState(State.HIGHLIGHTED);
viewer.zoomTo(elements);

[andyward]

Check out the docs on viewer.zoomTo.

You'll need to map your selected ids to the model id they belong to.
i.e.
viewer.zoomTo([{id:923, model:1}, {id:952, model:1}])

will zoom to products 923 and 952, both of which are in the model with id 1. Because we can federate models in the viewer we can't guarantee the entity ids are unique so zooming requires the model be specified.

getProductsWithState does this mapping for you which is how your code above works, you can do the same without the additional steps. The recommended approach is to use the model tag as an identifier to locate the internal model id from the activeHandles array.

In terms of top down perspective, check out the checkVisibility flag which, if true will attempt to show the best viewpoint for the selected items based on the size of the bounding box. For things like doors and walls this ought to be 'face on' but for something like a slab or roof (or a lot of items over a wide area) might be top-down.