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)
}
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 = performance.now();
return new Cesium.CallbackProperty(function(time, result){
if(!Cesium.defined(result)){
result = ;
}
var now = performance.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);
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;
viewer.entities.add({
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
}
});