How to darken entity color on hover

CesiumJS
1

Is there an easier way to darken the color of a KML polygon/polyline on hover? All the methods I've seen are either very slow and laggy, and/or require a set hover color.

2

Hi there,

This code example will do what you need: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

Look at the ‘Pick Entity’ code.

Hope that helps,

  • Rachel
3

That kind of works, but the hovering is quite slow, taking the polygon at least 1-2 seconds to change color, and unless I store the previous color of the polygon being hovered, then I can't set the polygon back to the original color. This is why a hover color property would be convenient.

4

Hi there,

It shouldn’t take that long for your polygon color to change. Can I see your code?

Best,

  • Rachel
5

Sorry for the late response

Here is a sandcastle demo

In that example, it takes about 4 seconds for one polygon to change color, and this is obviously not ideal. That’s why I suggest some sort of property that you could set, especially because then it would automatically go back to the previous color

6

Hi there,

Setting a new static color value causes the geometry to be recreated/rebatched, which is what’s causing the slow performance. This is definitely something that can be improves. A workaround is to use a dynamic property from the start so that the system expects it to change and will better avoid rebatching.

For an example of how to set a dynamic material, see this code example:

Hope that helps,

  • Rachel
1 Like
7

Those examples are all time variant, and trying to do it with a ColorMaterialProperty didn’t seem to help at all

8

Hi Cody,

The idea is that Cesium treats time invariant and time variant properties differently. By setting your material to be dynamic (even if its doesn’t change until hover), Cesium can make the change more efficiently.

Best,

  • Rachel
9

Would you be able to give a short example? I am having trouble figuring out how to accomplish this.

10

I think I have a basic example going, but it is still pretty slow, and there isn’t really a way to set the color back to what it was before the hover, unless I statically define the color somewhere

11

Hi Cody,

This example should be helpful: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Tiles%20Feature%20Picking.html&label=Showcases

Best,

  • Rachel
12

That is a good example, and using that I got more responsive hover, but for some reason highlighting KML polygons is much slower than highlighting the 3D tiles, and the colors of all the polygons flicker when one entity is hovered