CZML Flight Path

CesiumJS
1

I am trying to display an airplane and it’s flight path. I do not want to display the future path, only where it has previously flown. Currently I am able to get the data and move the plane to where it should be, but I am unable to draw the previous path the plane took. I was under the impression that if I added a path element to the czml, the path would be drawn as the packets came in. Here is the current code I am using to display the moving airplane.

czml packet: lon/lat change with each new packet

[{
        "id":"Plane",
        "model" : {
          "gltf" : '../models/Cesium_Air.json',
          "scale" : 500.0
        },
        "path":{
          "color":[{"rgba":[255,255,0,255]}],
          "outlineWidth":0.0,
          "width":[{"number":5.0}],
          "show":[{"boolean":false}]
        },
        "position":{
          "interpolationAlgorithm":"LAGRANGE",
          "interpolationDegree":1,
          "cartographicDegrees":[lon, lat, 100],
        }
}]

java script code: processes the czml packets as they are received

var viewer = new Cesium.Viewer('cesiumContainer');
var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.removeAll();
czmlDataSource.process(modelData, 'model json');
viewer.dataSources.add(czmlDataSource);

I’m wondering if I need to be using a DynamicPath somehow, but am unsure how that would fit in with the czml packet and the 3d model. Any help/examples would be greatly appreciated!

2

In your CZML, you are explicitly settings “path.show” to false, it should be true. If you only want to show the past and not the future, set the “trailTime” property to 0.

3

Matt,
I actually had had the show set to true initially, but I changed it back and tried setting the trail time as well and am still not seeing the path. Do you have any other suggestions?

4

Here is my test code I am using, the increment function is called when a button is pushed. So I am creating and processing czml packets that only have the lat/lon changing.

   var viewer = new Cesium.Viewer('cesiumContainer');
   var count = 0;
  
   function increment() {
      var x = count * .0025;
      var msgData = [{  "id":"Plane",
                                      "model" : {
                                          "gltf" : '../lib/models/Cesium_Air.json',
                                          "scale" : 100.0
                                        },
                                        "path":{
                                          "color":[{"rgba":[255,255,0,255]}],
                                          "outlineWidth":0.0,
                                          "width":[{"number":5.0}],
                                          "show":[{"boolean":true}],
                                          "trailTime": 0
                                        },
                                        "position":{
                                          "interpolationAlgorithm":"LAGRANGE",
                                          "interpolationDegree":1,
                                          "cartographicDegrees":[-87.6278 + x, 41.8819 + x, 1000]
                                        }}];

      var czmlDataSource = new Cesium.CzmlDataSource();
      viewer.dataSources.removeAll();
      czmlDataSource.process(msgData, 'model json');
      viewer.dataSources.add(czmlDataSource);
     
      count++;
    }

Has anyone seen any examples of this done anywhere? I can only find examples that have the entire path in one packet.