czml stream of dynamically updated polylineCollection

CesiumJS
1

Hi,

I would like to draw a dynamically updating path with Cesium using CZML. I currently have a working solution with a dynamically updating point.

I am trying to implement a solution using a polylineCollection and adding polylines to it (code included below).

Where am I going wrong with this?

Thanks,
Kris

//--------------------------------------------------
// CZML packet for one satellite tracked position
// Send as a path.
//--------------------------------------------------
function createMsg1()
{
    var entity = {

        "id" : coordinates[0],
        "description" : animalName + ', tag ID: ' + coordinates[0] + '\n',
        "availability" : dateTime_start + '/' + dateTime_end,
        
        "polylineCollection" : {
          "polyline" : {
            "positions" : {
                "cartographicDegrees" : [
                            coordinates[3], coordinates[4], coordinates[5]
                            ]
            },
            "show" : true,
            "width" : 2,
            "resolution" : 60,
            "material" : {
                "solidColor" : {
                  "color" : {
                    "rgba" : thisTagColour
                  }
                }
            }
          }
        }
    };
   return JSON.stringify(entity);
}

2

Hello,

Can you please explain what’s not working with your code? I don’t see any obvious problems from the code snippet you posted.

Best,

Hannah

3

Hi Hannah,
Thanks for the reply. The problem with the code is that the JSON streams to the browser OK but does not actually draw anything. I was streaming through the same code as for the dynamically updating point and so I assumed that the error was with my CZML for the polyline. Here's some more code and JSON output:

Streaming Code (streams at particular time stamps in the data):
function finishDraw(res)
{
  // dateTime_start is global
  var timeDifference = ;
  
  for (var i = 0; i < intervalList.length; i++)
  {
      var d1 = new Date(intervalList[i]);
      var d2 = new Date(intervalList[i+1]);
      if (d2 > d1)
      {
        timeDifference[i] = d2 - d1;
      }
  }
  
  function streamMsg(t)
  {
      res.write('id: ' + t + '\n');

      if (position.length > 0)
      {
        res.write('data:' + createMsg1() + '\n\n');
      }
  }

  var startDate = new Date(dateTime_start);
  var startMilliseconds = startDate.getTime();

  var tick = startMilliseconds;

  var myFunction = function(){
    clearInterval(interval);
    if (timeDifference.length > -1)
    {
      tick = tick + timeDifference.shift();
      streamMsg(tick);
      interval = setInterval(myFunction, tick);
    }
    else
    {
      streamMsg(1); // last message
      clearInterval(interval);
    }
    
  }
  var interval = setInterval(myFunction, tick);

}

Resulting JSON packets:
{"id":"document","version":"1.0"}

{"id":824,"description":"White Shark, tag ID: 824\n","availability":"2012-10-10T00:00:00Z/2013-05-20T00:00:00Z","polylineCollection":{"polyline":{"positions":{"cartographicDegrees":[152.348,-32.722,0]},"show":true,"width":2,"resolution":60,"material":{"solidColor":{"color":{"rgba":[211.2,90.9,179.2,255]}}}}}}
{"id":824,"description":"White Shark, tag ID: 824\n","availability":"2012-10-10T00:00:00Z/2013-05-20T00:00:00Z","polylineCollection":{"polyline":{"positions":{"cartographicDegrees":[152.31300000000002,-32.548,0]},"show":true,"width":2,"resolution":60,"material":{"solidColor":{"color":{"rgba":[211.2,90.9,179.2,255]}}}}}}
etc...