Picked Entity color undefined

CesiumJS
1

Hi,

I am trying to highlight features on hover. In order to do that I started from the sandcastle example

and then extracted the part (without silouette).

// Information about the currently highlighted feature
const highlighted = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};

// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  // If a feature was previously highlighted, undo the highlight
  if (Cesium.defined(highlighted.feature)) {
    highlighted.feature.color = highlighted.originalColor;
    highlighted.feature = undefined;
  }
  // Pick a new feature
  const pickedFeature = viewer.scene.pick(movement.endPosition);

  // Highlight the feature if it's not already selected.
  if (pickedFeature !== selected.feature) {
    highlighted.feature = pickedFeature;
    console.log(pickedFeature.color);
    console.log(highlighted.originalColor);
    Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
    pickedFeature.color = Cesium.Color.YELLOW;
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

It seems to work, but I receive several errors the console as soon as I have clicked on an entity

Uncaught TypeError: Cannot read properties of undefined (reading 'color')
    at onMouseMove (app.js:144:31)
    at Ute (Cesium.js:91:118581)
    at QRe (Cesium.js:91:122879)
    at HTMLCanvasElement.o (Cesium.js:91:116280)

The color of the picked feature is undefined.

I keep looking at the original example, but I am struggling to see what I am missing. Any suggestion?

2

It would be easier to reproduce the error if you posted it as a sandcastle. From a quick look at the code that you posted, and some guesses about you have changed the given sandcastle:

  • When you clicked a feature, then there was some line that said

    selected.feature = pickedFeature;

  • When you later move the mouse, and the mouse is not over a feature (but over the background), then the pickedFeature at

    // Pick a new feature
const pickedFeature = viewer.scene.pick(movement.endPosition);

    will be undefined.

Later, you are doing this:

  // Highlight the feature if it's not already selected.
  if (pickedFeature !== selected.feature) {
    highlighted.feature = pickedFeature;
    console.log(pickedFeature.color); // <------------- !!!

The pickedFeatureis undefined, and this will cause the !!! line to produce an error.

You probably want the if-statement to be

  // Highlight the feature if it's not already selected.
  if (Cesium.defined(pickedFeature) && pickedFeature !== selected.feature) { ...

(but it’s not entirely clear which behavior you exactly want to achieve…)

1 Like
3

Thanks Marco. That worked. I was simply trying to remove the error from the console. There were many of them and even if they did not affect the user interaction, they made very difficult to read the other messages.

This was just my addition to check what was undefined.

This was the line that was generating the issue initially.