Search code examples
cesiumjs

Selecting Cesium entities through HTML elements

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

  • 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;
  });

});