Cesium: Trigger event when a point is selected

user_6648958 0
Viewed 1787

I am sure this is simple but I have searched and searched and looked at the documentation for Cesium. I have mapped several points on the canvas. They are colour coded according to what they represent. I now want to "click" on a point and instigate an action in JS. I have successfully captured the click event...(left mouse)..but I would like to know which point I clicked over. Is this possible? If so how would it look?

viewer.screenSpaceEventHandler.setInputAction(function() {
alert("left click");}, Cesium.ScreenSpaceEventType.LEFT_DOWN);`
cesiumjs point event-handling select
1 Answers

There are different ways to do this. If the points have been created as Cesium "entities" then you can use the viewer.selectedEntityChanged event to track the changes.

Here's a live demo. Click the "Console" tab at the bottom first, then click the yellow & blue points.

var viewer = new Cesium.Viewer("cesiumContainer");

viewer.entities.add({
  name: "Yellow Point",
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
  },
});

viewer.entities.add({
  name: "Blue Point",
  position: Cesium.Cartesian3.fromDegrees(-79.59777, 40.03883),
  point: {
    pixelSize: 10,
    color: Cesium.Color.BLUE,
  },
});

viewer.selectedEntityChanged.addEventListener(function(selectedEntity) {
  if (Cesium.defined(selectedEntity)) {
      if (Cesium.defined(selectedEntity.name)) {
        console.log('Selected ' + selectedEntity.name);
      } else {
        console.log('Unknown entity selected.');
      }
  } else {
    console.log('Deselected.');
  }
});

If the points aren't entities though (for example, graphics primitives), or if you need more manual control over the selection process, then what you're looking for is a system called "Picking." Here's a Sandcastle Demo showing Picking, and if you build Sandcastle locally, there are additional demos of picking to be found in the developer section. Picking is a low-level system where Cesium re-renders a small section of the scene internally for the sake of figuring out what's at a given screen space location, such as the mouse pointer or touch location. It's what powers almost all selection in Cesium, but it has performance consequences, particularly when used incorrectly. The viewer's selectedEntity mechanism uses picking under the hood.

But, if you just have a couple entities and want to track selection, the selectedEntityChanged event is the one to use, it's much simpler.

user_8367080
Related