Line animation


I'm drawing a line showing a traffic flow from one node to another. I'd like to show that the transfer is active and thus animate the line and arrow material. Is there a way to do it? And if not, how could it be visualized any other way?

I tried to use periodic redrawal of the line and it was rather unconvenient as it's quite a challenge to hit the line with mouse every time and the target frame is moving with the line which is confusing.

Currently the following code snippet is being used:

var purpleArrow = viewer.entities.add({
                name : 'Purple straight arrow at height',
                polyline : {
                    positions: createTrafficLineAnimation(node1, node2, 2000),
                    width : 10,
                    followSurface : true,
                    material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)

Thank you!


Could I see your createTrafficLIneAnimation function? That would give me a better idea of what your’e trying to do. I think you can accomplish what you want by using a CallbackProperty for the positions.




function createTrafficLIneAnimation(startEntity, endEntity, duration){
        var startTime =;
        return new Cesium.CallbackProperty(function(time, result){
                result = ;
            var now =;
            var start = startEntity.position.getValue(time, result[0]);
            var end = endEntity.position.getValue(time, result[1]);

            var t = Math.min(1.0, (now - startTime) / duration);
            Cesium.Cartesian3.lerp(start, end, t, end);
            // Cesium.Cartesian3.lerp(end, start, t, start);
            result[0] = start;
            result[1] = end;
            result.length = 2;
            return result;
        }, false);

Yes. I used CallbackProperty for animated draw line. But now I'd like to show the transfer being active on this line. It could be dots or arrows moving on the line - in other words, the animation of line material itself.
Maybe it would be like a straight line and an animated circle moving on this line to present an impulse animation of dynamic activity of the line.

Oh okay. I understand now. There isn’t anything in Cesium to do this automatically. The best solution would be to write a custom polyline material to do this. Alternatively, you could use a point and handle the animation by changing it’s position with a callback property. Here’s a quick example of that:

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

var startLongitude = -75;
var endLongitude = -125;
var latitude = 43;
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([startLongitude, latitude,
endLongitude, latitude]),
width : 10,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)

var geodesic = new Cesium.EllipsoidGeodesic(Cesium.Cartographic.fromDegrees(startLongitude, latitude), Cesium.Cartographic.fromDegrees(endLongitude, latitude));
var value = 0;
var cartographicPosition = new Cesium.Cartographic();
var point = viewer.entities.add({
position: new Cesium.CallbackProperty(function(){
var cartographic = geodesic.interpolateUsingFraction(value, cartographicPosition);
var position = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
value = value > 1 ? 0 : value + 0.005;
return position;
}, false),
point: {
color : Cesium.Color.PURPLE,
pixelSize : 20



Hope this helps!


Thank you very much!!!