CZML point dynamic movement? with updating location?

CesiumJS
1

Hey guys,

I have a question. I am working on this application that tries to plot the location of aircraft in 3D. Please refer to the code below:

The issue I have right now is; i am able to show the CZML points as necessary. However, when update (setInterval), the old CZML points remain and the new ones are also added. This makes it like a chain. I however, need to stop displaying the old points. i.e. @ i when i++ occurs.

function getData(){

var data = null;

var xhr = new XMLHttpRequest();

xhr.withCredentials = true;

xhr.addEventListener(“readystatechange”, function () {

if (this.readyState === this.DONE) {

console.log(this.responseText);

//JSON.parse(this.responseText);

var data_one = JSON.parse(this.responseText);

//var data_done = Object.values(data_one);

console.log(data_one);

var total_numb=data_one.total;

console.log(total_numb);

console.log(data_one.ac[0].lon);

var plane_lon = ;

var plane_lat = ;

var plane_alt = ;

for(var i=0;i<=total_numb;i++)

{

// czml.show = false,

plane_lon.push(parseFloat(data_one.ac[i].lon));

plane_lat.push(parseFloat(data_one.ac[i].lat));

plane_alt.push(parseFloat(data_one.ac[i].alt));

//console.log(plane_lon[i]);

var czml = viewer.entities.add({

name : ‘Green cylinder with black outline’,

position: Cesium.Cartesian3.fromDegrees(plane_lon[i],plane_lat[i],plane_alt[i]),

cylinder : {

length : 20.0,

topRadius : 20.0,

bottomRadius : 20.0,

material : Cesium.Color.RED.withAlpha(0.5),

outline : true,

outlineColor : Cesium.Color.DARK_GREEN

}

});

var dataSourcePromise = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSourcePromise);

//viewer.dataSource.remove(czml)

}

}

});

xhr.open(“GET”, “https://adsbexchange-com1.p.rapidapi.com/json/lat/43.6285/lon/-79.3960/dist/10/”);

xhr.setRequestHeader(“x-rapidapi-host”, “adsbexchange-com1.p.rapidapi.com”);

xhr.setRequestHeader(“x-rapidapi-key”, “----------------------------------------------------------”);

xhr.send(data);

var body = XMLHttpRequest.response;

}

setInterval(getData, 10000);

Please let me know what I am doing wrong here.

Kind Regards

Vamshi

2

The code snippet you’ve shared is not using CZML - you’re adding the points directly with the Entity API to the CesiumJS scene. You can just remove all previous entities each time before you add the new points with:

viewer.entities.removeAll();

``

Alternatively, you can just place one entity for each aircraft, and each time you get an update, you add the new position and timestamp for that update. That way you can playback the movement of all points you’re tracking as well as taking advantage of built-in features like interpolation and extrapolation. This vehicle example is a useful reference here:

https://sandcastle.cesium.com/index.html?src=Time%20Dynamic%20Wheels.html

Here the positions and timestamps are all added ahead of time, but in your case you would add a new position on each data update:

position.addSample(time, location);

``

This sounds like a cool application you’re working on - will it be publicly accessible?

3

Oh no!
Sorry, I pasted the wrong snippet of code. Please take a look at the following:

I am trying to follow the time-dynamic CZML point example, however, I recognize, I do not have a set of cartographic points to describe the path it will take. with the present method i show below, i do not reckon i am still using entities, thus i am not familiar with how i can remove the drawn points already :frowning: . Please refer to the code below. And yes, as a get a prototype done for what I am trying to do I wish to write about it and make it public. The contents of this project are directed towards my PhD thesis is Aerospace Engineering.

function getData(){

var data = null;

var xhr = new XMLHttpRequest();

xhr.withCredentials = true;

xhr.addEventListener(“readystatechange”, function () {

if (this.readyState === this.DONE) {

console.log(this.responseText);

//JSON.parse(this.responseText);

var data_one = JSON.parse(this.responseText);

//var data_done = Object.values(data_one);

console.log(data_one);

var total_numb=data_one.total;

console.log(total_numb);

console.log(data_one.ac[0].lon);

var plane_lon = ;

var plane_lat = ;

var plane_alt = ;

for(var i=0;i<=total_numb;i++)

{

plane_lon.push(parseFloat(data_one.ac[i].lon));

plane_lat.push(parseFloat(data_one.ac[i].lat));

plane_alt.push(parseFloat(data_one.ac[i].alt));

//var j = i–;

var czmlnow = [{

“id” : “document”,

“name” : “CZML Point - Time Dynamic”,

“version” : “1.0”

}, {

“id” : “point”,

//“availability” :“2012-08-04T16:00:00Z/2012-08-04T16:05:00Z”,

“position” : {

“epoch” : “2012-08-04T16:00:00Z”,

“cartographicDegrees” : [plane_lon[i],plane_lat[i],plane_alt[i]]

},

“point” : {

“color” : {

“rgba” : [255, 255, 255, 128]

},

“outlineColor” : {

“rgba” : [255, 0, 0, 128]

},

“outlineWidth” : 2,

“pixelSize” : 10

}

}];

viewer.entities.removeById(“document”) = true;

var dataSourcePromise = Cesium.CzmlDataSource.load(czmlnow);

viewer.dataSources.add(dataSourcePromise);

//viewer.dataSource.remove(czml)

}

}

});

xhr.open(“GET”, “https://adsbexchange-com1.p.rapidapi.com/json/lat/43.6285/lon/-79.3960/dist/10/”);

xhr.setRequestHeader(“x-rapidapi-host”, “adsbexchange-com1.p.rapidapi.com”);

xhr.setRequestHeader(“x-rapidapi-key”, “---------------------------------------------------”);

xhr.send(data);

var body = XMLHttpRequest.response;

}

//czml.show = false;

setInterval(getData, 1000);

Please let me know if this makes any sense and any help is greatly appreciated.

Kind Regards
Vamshi

4

When you load a CZML document in CesiumJS, it does create entities in the scene, so you should be able to use the same code I posted above to cleare the scene of previous entities before adding the new CZML document.

Generally what you do with updating CZML like this create one document, and then process any update packets:

https://cesium.com/docs/cesiumjs-ref-doc/CzmlDataSource.html?classFilter=czml#process

That way you can create the “point” object once, and then the next packets will just change the location of the same point, avoiding the need to delete/recreate anything.

Alternatively, since you’re not actually sending CZML from a server here, why not just create the entities directly? And then when you get the new data just update the entities positions (or add a sample like the example I’ve shown above).

It would certainly be cool to see how you used CesiumJS for your thesis when it’s done!

5

Hey Omar,
Right, that makes sense. I started using the entities directly. and they update and display. Np. However, when I update the position the previous entity remains and a new entity is added. I have multiple entities. I used viewer.entities.removeAll(); as you said and it deletes all entities (which i can update and show again through the for loop) also deleting other entities(such as airports i loaded as entities) . I tried to removeById(varName.Id) and this deletes all the points.

Any idea?

Kind Regards
Vamshi