Highlight picked billboard from CZML

CesiumJS
1

Hi,

I’m trying to set the scale of a picked element (a billboard) which is added to the scene through CZMLDataSource.

I successfully picked the primitive in the MOUSE_MOVE event and then set it’s scale like this:

var scenePick = scn.pick(movement.endPosition);

…

var pickedObject = scenePick.primitive;

pickedObject.scale = pickedObject.scale*1.4;

, but this had no effect on the billboard.

I figured out that the scale was being “reset” at the update function of the BillboardVisualizer.js. By commenting the line:

//billboard.scale = Property.getValueOrDefault(billboardGraphics._scale, time, defaultScale);

the billboard scale effect is now visible.

If I understand correctly the “reset” of these properties in the update function is to maintain the values defined at the CZML, is this correct?

My question is if there’s some way to get this done by not messing with the Cesium code.

Thanks,

Andreas

2

Andreas,

Could you make a function that writes a czml update packet? This would override the original scale value, so it should work without messing with the Cesium code.

All you would need to grab is the object id and the new scale value, my first thought for the code would be something like:

var objectID = pickedObject.id;
var objectScale = pickedObject.scale * 1.4;

var updatePacket = ‘[{“id”: "’ + objectID + '", “billboard”:{ “scale” : ’ + objectScale.toString() + ‘}}]’;

czmlDataSource.process(updatePacket);

``

My formatting for the czml might be a bit off, but if you put that inside a mouse_move event or whichever you used it should send the update packet without needing comment out that Cesium code.

Chris

3

Chris, thank you for the quick reply.

my only problem with your approach is that I don’t know which datasource does the pickedObject belongs to (this is because our application have several CZMLDataSources added to the dataSources Collection).

Is there any way to get the datasource of this object without the need of iterate through all?

Terça-feira, 21 de Outubro de 2014 17:09:10 UTC+1, Chris M. escreveu:

4

I was able to find this thread:

https://groups.google.com/forum/#!searchin/cesium-dev/datasource/cesium-dev/wbQBC7MIhkI/hc4tTkiMmBwJ

It doesn’t seem like there’s a built-in way to determine the DataSource, but there are a couple workarounds mentioned in that post. Hopefully one of them works for you.

5

Rather than generate and load CZML packets, you may find it simpler to just change the properties on the entity to be what you want.

For example:

var gallery = ‘…/…/SampleData/’;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var czmlDataSource = new Cesium.CzmlDataSource();

czmlDataSource.loadUrl(gallery + ‘Vehicle.czml’);

viewer.dataSources.add(czmlDataSource);

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(

function (movement) {

var pickedObject = scene.pick(movement.endPosition);

if (Cesium.defined(pickedObject)) {

var entity = pickedObject.primitive.id;

if (Cesium.defined(entity) && Cesium.defined(entity.billboard)) {

entity.billboard.scale = new Cesium.ConstantProperty(5.0);

}

}

},

Cesium.ScreenSpaceEventType.MOUSE_MOVE);

For more sophisticated logic, you may consider using a CompositeEntityCollection, containing one EntityCollection with values loaded from CZML, and another EntityCollection that contains client-side property overrides, such as changing the scale, so that you can easily restore the properties back to the definitions from the CZML.