Drawing Entity Path & billboard orientation vector

CesiumJS
1

Hello,

I’m using react and cesium integrated all together.

1)I’m updating entity position every X seconds using an external function in the entities handler.

position,billboard(color,image),label is being updated.

but path is neither created nor updated.

any ideas please?

2)I want to add an orientation vector to my entity.billboard image(symbol), haven’t found any,is it possible without adding a real arrow to the image I’m using?

Thanks,

2 
this.track = tracks.entities.add({
    name: aN,
    position: position,
    eyeOffset: eyeOffSet,
    //  orientation : orientation,
    verticalOrigin: verticalOrigin,
    horziontalOrigin: horizontalOrigin,
    billboard: billboard,

    description: this.targetDescription(targetInfo, lat, long),
    label: {
        text: aN,
        font: 'bold 14px sans-serif',
        style: Cesium.LabelStyle.FILL,
        fillColor: Cesium.Color.GOLD,
        pixelOffset: labelPixelOffset
    },
    path: {
        trailTime: 6000,
        leadTime: 5,
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: Cesium.Color.PURPLE
        }),
        width: 50,
        show: true,
    }

updateIcon() {
     let targetInfo=this.identification();
    let symbol=require("../../symbols/"+info.Bitmap);
    let course     = Cesium.Math.toRadians(this.props.track.dynamics.course);
    let billboard = {image: symbol
        , color:targetInfo.advColor,
        scale:1.5,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        rotation: course,
    };
   let aN;
  if(this.props.track.data.available===0){
      if(!this.props.track.identification.nickn)
      {
          let x=this.props.track.generalinfo.id;
          aN=x.toString();
      }
      else{
          aN=this.props.track.identification.nickn;
      }
  }
  else{
      aN = this.props.track.data.n;}

      const long=this.props.track.position.long;
      const lat=this.props.track.position.lat;
      const alt=this.props.track.position.alt;
    if(this.track) {
      Cesium.Cartesian3.fromDegrees(long, lat, alt);
      this.track.position = Cesium.Cartesian3.fromDegrees(long, lat, alt);
         if(aN)
         {this.track.label.text=aN;}
    if(billboard){this.track.billboard=billboard;}
   this.track.path=this.props.track.path;

 }}
3

Try using a callback property to update the position. I think by default a lot of properties are assumed to be static to speed up performance. Here’s an example:

As for an arrow, you could create a polyline with a PolylineArrowMaterialProperty. Example:

Let me know if that helps!

4

Hi Omar,

I’m trying the callback property but getting this error,related to drawing the path?

            this.track = tracks.entities.add({
                name: aN,
                position: new Cesium.CallbackProperty(this.getPos, false),
                eyeOffset: eyeOffSet,
                //  orientation : orientation,
                verticalOrigin: verticalOrigin,
                horziontalOrigin: horizontalOrigin,
                billboard: billboard,

                description: this.targetDescription(targetInfo, lat, long),
                label: {
                    text: aN,
                    font: 'bold 14px sans-serif',
                    style: Cesium.LabelStyle.FILL,
                    fillColor: Cesium.Color.GOLD,
                    pixelOffset: labelPixelOffset
                },
                path: {
                    trailTime: 600,
                    leadTime: 5,
                    resolution: 1,
                    material: new Cesium.PolylineGlowMaterialProperty({
                        glowPower: 0.1,
                        color: Cesium.Color.PURPLE
                    }),
                    width: 50,
                    show: true,
                }
            });
            }

  //  this.updateIcon();
}
getPos()
{
    const long=this.props.track.position.long;
    const lat=this.props.track.position.lat;
    const alt=this.props.track.position.alt;
    return(Cesium.Cartesian3.fromDegrees(long, lat, alt));
}

Am I doing something wrong with the callback function?

error:

An error occurred while rendering. Rendering has stopped.

TypeError: property.getValueInReferenceFrame is not a function
TypeError: property.getValueInReferenceFrame is not a function
at subSampleGenericProperty (http://localhost:3000/static/js/bundle.js:105031:28)
at reallySubSample (http://localhost:3000/static/js/bundle.js:105129:21)
at subSample (http://localhost:3000/static/js/bundle.js:105139:22)
at PolylineUpdater.updateObject (http://localhost:3000/static/js/bundle.js:105245:30)
at PathVisualizer.update (http://localhost:3000/static/js/bundle.js:105348:32)
at DataSourceDisplay.update (http://localhost:3000/static/js/bundle.js:92681:41)
at Viewer._onTick (http://localhost:3000/static/js/bundle.js:280008:49)
at Event.raiseEvent (http://localhost:3000/static/js/bundle.js:30326:30)
at Clock.tick (http://localhost:3000/static/js/bundle.js:16634:21)
at CesiumWidget.render (http://localhost:3000/static/js/bundle.js:273131:43)
at render (http://localhost:3000/static/js/bundle.js:272507:32)

thanks,

Lior.

5

What’s the value of this.getPos? It should be a function that returns a Cartesian3 (see the example above).

6

You can see it beneath the entities addition.
It is returning a cartesian 3.
I've followed the demo it is where I took the example from

Any idea?
Thanks, Lior.

7

Ah, my bad, I didn’t see that.

I think this is a scoping issue. When you pass your function to the CallbackProperty, this no longer refers to your class. It’s referring to the CallbackProperty. You should confirm this by logging this and this.props. You might have to pass a pure function or make sure the original this is accessible in this scope.

8

thank you,
helped a lot.

Lior.