czml stream - animate processed positions

CesiumJS
1

Hello,

I have a webserver which sends data via event-stream to cesium. sample czml (for the event-stream I have event / data and the first line with event / data: document integrated ofc):

{“id”:“Monk_NL”,“position”:{“cartographicDegrees”:[“96.96”,“27.12”,30259.2]},“point”:{“color”:{“rgba”:[0,0,255,255]},“pixelSize”:15},“description”:"\r\n

name: Monk Atmo XS 1
crew: 1
velocity: 0
angular velocity: 0
gravity: 9
mass: 364
Atmospheric fuel: 0
Space fuel: 0
pos: 96.96,27.12,30259.2

"},

``

With the following code I can display all the different dots on the map (I update each point every 5 seconds for now via that event-stream)

var czmlStream = new Cesium.CzmlDataSource();
var czmlEventSource = new EventSource(‘htt://event-stream-source’);
czmlEventSource.addEventListener(‘czml’, function(czmlUpdate) {
var json = JSON.parse(czmlUpdate.data);
id = json.id;

``

This works fine and for me (as someone with no experience in programming) it’s a great achievement :slight_smile:

I also added buttons to the infobox, which work fine too for now.

What I basically want to do is the following:

  • stream hundreds (and maybe thousands) of points to the map (working)

  • show different attributes of that point (=ship) in the infobox (like fuel, range, radar capabilities, position, …) (working)

  • on each point I want to create more buttons to show different things on the map (show/hide radar range, show/hide range of the ship based off of fuel consumption and dynamic data, …) (working)

Now to my questions:

  • is this the right approach to do things? Should I create those buttons differently and not send them with the czml?

  • is there a “best practice” or smth like that on what data should be provided in the czml stream?

  • is there a way to animate such large amount of points?

I already tried this with an example from github (https://gist.github.com/maikuru/841a821bdb347955dca0) just to see if it’s working - it doesn’t :slight_smile:

I tried creating arrays and pushed the position in there like so:

lon = json.position.cartographicDegrees[0];
lat = json.position.cartographicDegrees[1];
alt = json.position.cartographicDegrees[2];

if (id != ‘document’) {
ships.indexOf(id) === -1 ? (ships.push(id), shipsPosStart.push({id: id, lon: lon, lat: lat, alt: alt})) : console.log("ID "+id+“already in array”);
ships.indexOf(id) != -1 ? (shipsPosEnd = JSON.parse(JSON.stringify(shipsPosStart)), shipsPosStart[ships.indexOf(id)].lon = lon, shipsPosStart[ships.indexOf(id)].lat = lat, shipsPosStart[ships.indexOf(id)].alt = alt) : console.log(“POS didn’t change”);

point = {
lat: parseInt(shipsPosStart[ships.indexOf(id)].lat),
lon: parseInt(shipsPosStart[ships.indexOf(id)].lon)
};
finalPoint = {
lat: parseInt(shipsPosEnd[ships.indexOf(id)].lat),
lon: parseInt(shipsPosEnd[ships.indexOf(id)].lon)
};

``

I then tried to animate that stuff with the example from github.

Since I’m rly new to all this and rly don’t know much about programming, please be easy on me with answers :slight_smile: If you need the whole code then I’ll gladly post it too

best wishes

2

Hey, welcome to the Cesium community! I’m glad to hear you’ve found it easy to set up with minimal programming background.

For animating the points, do you know what their positions over time should look like? If so, you can just put the list of positions in the CZML itself, like in this example:

Notice that it has an array for cartographicDegrees, so it’ll tween through these positions based on the availability defined for that entity.

I think the reason your attempt with adding the points to the JSON doesn’t work is because, my best guess is you’re doing this after CesiumJS has already processed the CZML and created the entities.

If you can create a sample (or you full) code on Sandcastle (and you can share it by clicking the “Share” button at the top and pasting a link here), that’d make it easiest for me to take a look and see if there’s an easy way to animate them after they’ve been created.