get a point from a pointcollection

CesiumJS
1

Based on the picking tutorial, I am using scene.pick(movement.endPosition) to determine which point of a PointPrimitiveCollection is selected on MouseMove.

I am unable to get/set the color property of this object. I can read the ID but then I’m not sure how to modify the color.

Main code:

// the collection
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());

// then each point is added
  points.add({
      id: someid,
      position : new Cesium.Cartesian3.fromDegrees(lon,lat),
      color: new Cesium.Color(1, 0.01, 0.01, 1),
      pixelSize : 20
  });

// then picked
var pickedObject = scene.pick(movement.endPosition);

``

I want to get the point itself via pickedObject.id

It’s worth noting that I have 100k+ points so storing an extra array and looping through might not be ideal.

Thanks

2

Hello,

This even handler should accomplish what you’re trying to do:

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
    var pickedObject = scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject) && (pickedObject.collection === pointPrimitives)) {
        pickedObject.primitive.color = Cesium.Color.YELLOW;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

pickedObject.primitive will get you the point.

Best,

Hannah

3

this worked

thanks, Hannah!

how do i restore the point to its original color once the mouse moves out of the point? i tried applying a CallbackProperty but couldn’t figure it out.

4

I ended up using an array where I push pickedPoints to and I empty onMouseMove:

var pickedEntities = ;

function clearPicked() {
var entity;
while (pickedEntities.length>0) {
entity = pickedEntities.splice(0, 1)[0];
entity.primitive.color = new Cesium.Color(1, 0.01, 0.01, 1);
}
}

``

I clear/push them like so:

handler.setInputAction(function(movement) {
    clearPicked();
    var pickedObject = scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject) && (pickedObject.collection === pointPrimitives)) {
        pickedEntities.push(pickedObject);
        pickedObject.primitive.color = new Cesium.Color(1, 1, 0.01, 1);
   }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

There’s probably a better performing way to do this?

5

This is the right idea, but from what I can tell there’s only going to be one point picked at a time, so you could store the picked point in a variable instead of an array. This way it is also easy to check if the same point is picked on the next mousemove, and only to change the color if a different point is picked.

-Hannah

6

Done.

Does perform better.

Thanks