Dynamically Change PolyLine color/outlineColor to multi-colored line

CesiumJS
1

I’m trying to figure out how to change the Polyline color dynamically as to create a multi-colored line.

I know you can call . . .

entity.polyline.material.color = myColor;

But that changes the color of the entire line. I only want the line to change color from the moment and spot the change color call is made.

My guess is that the old line would stop being drawn and a new line with the new color would be created and pick up where the old line left off? Or is there a way to do it with the existing polyline?

2

I think you have to divide the datasource.

3

image
image1405×548 67.2 KB

Whenever I need the line color to change, I create a new Polyline, in a sense, stomping on the old line. You can see from the image there is a line break between the colors. So there must be a frame or 2 that the line is not created yet. Any ideas how to smooth that out? Do I need to grab the previous position? How to do that?

4

As @terzogenito said you have to divide the datasource. Space between lines seems there is location mismatch between ending points of lines. You need to make sure that starting location (Location’s Array 1st item) of a line should be equal to the ending location (Location’s Array last item) of previous line.

Here’s a pseudocode of what I’m saying.

let line1Location = [point1, point2];
let line2Location = [point2, point3];
let line3Location = [point3, point4];

Regards,

3 Likes
5

This may be a bit tedious but it should work :+1:

6

I’m using a CallbackProperty function in the position property of the Polyline which updates the position each timestep.

polyline:{
            positions: new Cesium.CallbackProperty(()=>{return points;}, false),

“points” is an array of Cesium.Cartesian3.fromDegrees(lon, lat, alt);

On a change of state, I create the new Polyline and start with the previous point.

entityList[name].polyPath = createTrailPolyline();//Overwrites old line
entityList[name].polyPath.points.push(entityList[received.name].prevPosition);
entityList[name].polyPath.entity.polyline.material.color = myNewColor;

//This happens each timestep 
entityList[received.name].polyPath.points.push(position);
entityList[received.name].prevPosition = position;
1 Like