CZML polygon change color on mouse hover

CesiumJS
1

I need to make a polygon drawn with CZML highlight on mouse hover and restore its color and appearance once the mouse is moved out of the polygon.

I tried this with ScreenSpaceEventType.MOUSE_MOVE event handler but I am not able to restore the appearance when mouse is moved out of polygon in this case.

I referred this https://cesiumjs.org/Cesium/Apps/Sandcastle/gallery/Picking.html but how can this be applied to polygons that are loaded by CZML?

Is there any way in cesium to achieve this?

2

Hello,

Here is an example:

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

var promise = Cesium.CzmlDataSource.load(‘path/to/file’);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
    var pickedObject = scene.pick(click.position);
    var entity = pickedObject.id;
    if (dataSource.entities.contains(entity)) {
        entity.polygon.material = Cesium.Color.RED;
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

});

``

Best,

Hannah

3

Be aware of this bug:
https://github.com/AnalyticalGraphicsInc/cesium/issues/3807

I ran into it while doing something very similar to what you’re trying to do.

Kevin

4

Thanks Hannah!!

It woks well on left-click event, but I want to implement this for mouse-move event. Can you suggest anything for it?

5

Yes, you can change the event type to ScreenSpaceEventHandler.MOUSE_MOVE, then look for click.endPosition instead of click.position
Take a look at this picking demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases
It shows you how to add a mouse move listener.

-Hannah

6

Hi All,

I’m attempting to replicate this effect (colour change on mouse hover) for glTF files and by using the “EntityModelColor.js”.

In my case it seems to work but I have come across the situation where an object(s) stays selected (as depicted in the image below) even after the mouse cursor position is away from it, which is not desirable. Might you know what this is caused by?

Below is the section of the JavaScript code used for the selection which is a slightly modified version the original “EntityModelColor.js”.

//Change color on mouse over. This relies on the fact that given a primitive,

//you can retrieve an associted en

var lastColor;

var lastPick;

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

handler.setInputAction(function(movement) {

var primitive;

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

if (pickedObject) {

primitive = pickedObject.primitive;

if (pickedObject !== lastPick && primitive instanceof Cesium.Model) {

//We don’t use the entity here, but if you need to color based on

//some entity property, you can get to that data it here.

var entity = primitive.id;

var material = primitive.getMaterial(‘Material_0’);

//var material = primitive.getMaterial(‘Red’); - original line

lastColor = material.getValue(‘diffuse’).clone();

//material.setValue(‘diffuse’, Cesium.Cartesian4.fromColor(Cesium.Color.BLUE));

material.setValue(‘diffuse’, Cesium.Cartesian4.fromColor(Cesium.Color.YELLOW));

lastPick = pickedObject;

}

} else if (lastPick) {

primitive = lastPick.primitive;

var material = primitive.getMaterial(‘Material_0’);

//var material = primitive.getMaterial(‘Red’); - original line

material.setValue(‘diffuse’, lastColor);

lastPick = undefined;

}

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

Thanks

Kabiro

7

Hi All,

Are there any known performance issues from wiring in a call to drillPick to a mouse move event listener?

I’m seeing slow performance of this sandcastle on a slow machine: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=e3c00abae7d6a0ca741a85359cb803d6

Thanks!

8

I don’t see slow performance in that example. It might be because that demo is calling console.log on mouse move as well.

Try removing that line and see if performance is any better.

-Hannah

9

No, removing the console log does not help.

10

Okay, it might just be your machine. What OS and browser are you using?

-Hannah

11

From a machine-independent perspective, the drillpick algorithm seems to be CPU intensive.

Using the above sandcastle and moving the mouse over the globe, it looks like drillPick is by far the biggest user of CPU time.

I’ve attached a little snippet to show this.

SandcastleProfile.PNG
SandcastleProfile.PNG850×82 2.61 KB

12

The real culprit seems to be scene.pick (rather than drillPick). It looks like readPixels is slow.

After a little digging, I found this: https://github.com/AnalyticalGraphicsInc/cesium/issues/630