Selecting Cesium entities through HTML elements

Selecting Cesium entities through HTML elements

Problem Description:

Is it possible to select Cesium entities created on the Cesium viewer and select them through HTML elements, for example a button? Or is it possible to select them only through the viewer itself?

Solution – 1

It’s possible to select them from code. Assign viewer.selectedEntity to the desired entity. You may also assign viewer.trackedEntity to zoom to the entity and follow it with the camera.

Here’s a Sandcastle Demo.

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

Cesium.CzmlDataSource.load("../SampleData/simple.czml").then(function(dataSource) {
  viewer.dataSources.add(dataSource);
  
  var iss = dataSource.entities.getById("Satellite/ISS");
  var agi = dataSource.entities.getById("Facility/AGI");
  
  Sandcastle.addDefaultToolbarButton("Select ISS", function () {
    viewer.selectedEntity = iss;
  });

  Sandcastle.addDefaultToolbarButton("Select AGI", function () {
    viewer.selectedEntity = agi;
  });

  Sandcastle.addDefaultToolbarButton("Deselect", function () {
    viewer.selectedEntity = undefined;
  });

});