Dynamically Changing Polyline Colors

CesiumJS
1

Hi there!

I am trying to dynamically change the color/material of a number of polyline entities. I started this by using the Spectrum Colorpicker and I found that the color actually changes correctly only on the last one of the entities as they are written in the script. After some time I realized that the same behaviour appears also with other jquery or javascript color-pickers as well as the non-javascript html5 new input type.

In fact, each time a new color is selected, Cesium adds another polyline with the selected color in the same position, instead of just changing the color. Hence, a mixed color is shown for all polylines with except for the last one in the script (Y-Axis in my example attached).
Attached, you may find a piece of my code that you can try. After you change once or twice the color, you will clearly see different colors between the two polylines.

Please let me know if this a Cesium bug, or I could achieve the dynamically colors change in a different way.

Thanks for your time,
Nikos

Cesium Version: 1.29
Windows 10, Firefox 50.1.0, node.js 7.2.1 (x64) and npm

test.html (2.76 KB)

2

Hello,

Thanks for reporting this and including the code sample! That made it really easy to reproduce the problem.

This looks like a bug. I filed an issue on our GitHub for us to look into this: https://github.com/AnalyticalGraphicsInc/cesium/issues/4951

In the meantime, the issue doesn’t appear to happen when using a color material, so you can switch to that until we have a fix for the arrow material. I posted a link to this forum post in the GitHub issue so we can notify you when it’s fixed.

Best,

Hannah

3

Actually, Denver Pierce posted this workaround in the GitHub issue I wrote:

line1.polyline.material.color.setValue(newColor);
line2.polyline.material.color.setValue(newColor);

``

That way you can still use a polyline arrow material.

Best,

Hannah

4

Dear Hannah,

thanks a lot for your prompt response. The color material is fine for me.

Best,
Nikos

Τη Δευτέρα, 6 Φεβρουαρίου 2017 - 4:12:14 μ.μ. UTC+2, ο χρήστης Hannah Pinkos έγραψε:

5

Hi,
I tried this hack too, but the color's alpha attribute wont change.

6

Hi there,

I was able to set the alpha of the lines with that workaround.

var newColor = Cesium.Color.BLUE.withAlpha(0.3);

Axis_Z.polyline.material.color.setValue(newColor);

Axis_Y.polyline.material.color.setValue(newColor);

``

Thanks,

Gabby