Creating a trailing path to follow a moving entity (billboard)

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I would like to have a trailing orange path behind movement of my billboard entity. I am programmatically controlling its movement (it is coming from a live remote sensor). The the actual SVG/Canvas for the symbol comes from: https://github.com/spatialillusions/milsymbol

But the point is that I am clearly making an error in how to setup the PATH attribute of the entity. I don’t see a trailing or leading path. What am I doing wrong?

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

makeGlyph(sprite) {

let milSym = milSymbols[sprite.type]

if (milSym === undefined) milSym = milSymbols[“UFO”]

sprite.mps = 0

sprite.symbol = milSym

let sym2 = new ms.Symbol(milSym, { size: 26, type: sprite.marking, speed: sprite.mps + ’ mps’, direction: sprite.heading, infoColor: “red” })

let glyph = new Cesium.Entity({

name: sprite.marking,

id: sprite.id,

position: Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude),

billboard: {

image: sym2.asCanvas(), //Get the canvas for the billboard

// heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,

pixelOffset: new Cesium.Cartesian2(-sym2.markerAnchor.x, -sym2.markerAnchor.y), // Symbol offset

eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default

horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default

verticalOrigin: Cesium.VerticalOrigin.TOP

},

path: {

leadTime: 100,

trailTime: 100,

width: 1,

material: new Cesium.ColorMaterialProperty({

color : Cesium.Color.ORANGE,

})

},

label: {

text: sprite.marking,

font: ‘14pt monospace’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth: 1,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

pixelOffset: new Cesium.Cartesian2(0, -20)

}

})

sprite.glyph = glyph

this.infoBox(sprite)

this.viewer.entities.add(glyph)

}

updateGlyph(sprite) {

this.viewer.entities.suspendEvents()

let loc = Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude)

sprite.mps = sprite.speed[0] + sprite.speed[1] + sprite.speed[2]

sprite.glyph.position = loc;

this.infoBox(sprite)

this.viewer.entities.resumeEvents()

}

killGlyph(sprite) {

this.viewer.entities.removeById(sprite.id)

}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

We are tracking live aircraft and pedestrians, and we are showing the current map position with a billboard. But we would like to see a trailing path of where they have traveled for the last N seconds. We thought that Entity.path was the correct attribute to set on creation.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.39, Chrome 61

2

Make sure you are viewing it within +/- 100 seconds of it's last position. You could try changing the trail/lead time to 1000000 and see if it shows up. Also try removing the trailTime and leadTime options and verify the entire path shows up (which is what should happen if you don't specify a trailTime and leadTime).

How are you controlling the position? You set the position as a Cartesian3, which doesn't have any time associated with it. You probably need to be using a SampledPositionProperty, like this:

var position = new Cesium.SampledPositionProperty();
position.addSample(time, pos); // where time is a JulianDate and pos is a Cartesian3

Then:
glyph = new Cesium.Entity({
   ...
   position: position,
   ...
});

Later you can add more positions by:
var entity = this.viewer.entities.getById(id);
entity.position.addSample(time, pos);

Hope that helps.

3

Hi there,

Steven is correct. a Path Entity is just a Polyline which describes the entity’s path. You need to define the position as a property that can be sampled with time, rather than directly updating the position to a constant.

Thanks,

Gabby