Cesium billboard modify

CesiumJS
1

Is there a source that changes the image when the mouse is over an image added with cesium billboard?

2

Hi @11167, thanks for the question!

You can change properties of a billboard when hovering by hooking up to a ScreenSpaceEventHandler and detecting what is picked in the scene. We have a sandcastle example showing off Picking in general. I’ve modified it slightly to show it’s possible to also change the Billboard.image in addition to size and color which you can view here

Hopefully that helps but please ask if you’re still have issues!

3

billboard.color is not applied in mouseMove. Is there a source for changing the color?

4

Hi @11167
I just wrote this code for you.
You can test this code in cesium sandcastle.


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

    const billboardEntity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      billboard: {
        image: "../images/Cesium_Logo_overlay.png",
      },
    });

    const defaultImage = "../images/Cesium_Logo_overlay.png";
    const hoverImage = "../images/normalmap.png";

    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handler.setInputAction(function (movement) {
      const pickedObject = viewer.scene.pick(movement.endPosition);

      if (Cesium.defined(pickedObject) && pickedObject.id === billboardEntity) {
        billboardEntity.billboard.image = hoverImage;
      } else {
        billboardEntity.billboard.image = defaultImage;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Sandcastle Here

5

And this code is to change the color of text billboard.

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

  const billboardEntity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    label: {
      text: "Hover over me!", // Text displayed on the billboard
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE, // Default text color
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // Position text above the point
      pixelOffset: new Cesium.Cartesian2(0, -20), // Offset to position the text
    },
  });

  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  handler.setInputAction(function (movement) {
    const pickedObject = viewer.scene.pick(movement.endPosition);

    if (Cesium.defined(pickedObject) && pickedObject.id === billboardEntity) {
      billboardEntity.label.fillColor = Cesium.Color.RED;
    } else {
      billboardEntity.label.fillColor = Cesium.Color.WHITE;
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Sandcastle Here