trying to add a simple, moving billboard using javascript

CesiumJS
1

I want to add to a billboard collection billboards with time-dependent positions.

My static billboards are fine, but something must be wrong with my javascript-produced "position", because my billboards end up at a lat/lon of 0/0.

I am setting the clockviewModel and the timeline for the hours corresponding to the movement of the billboard.

var dots = new Cesium.BillboardCollection();
dots.setTextureAtlas(...);

//where 'pos' is defined
var pos = {};
pos['epoch'] = boatCoords[0].getDate();
pos['cartographicDegrees'] = ;
for (var i = 0; i < boatCoords.length; i++) {
  pos['cartographicDegrees'].push(epSec(boatCoords[i].getDate()) - epSec(boatCoords[0].getDate()));
  pos['cartographicDegrees'].push(boatCoords[i].lon);
  pos['cartographicDegrees'].push(boatCoords[i].lat);
  pos['cartographicDegrees'].push(boatCoords[i].alt);
}
pos['nextTime'] = 10000;
pos['interpolationAlgorithm'] = "LAGRANGE";
pos['interpolationDegree'] = 1;

var dot = {};
dot['color'] = Cesium.Color.fromCssColorString(clr1);
dot['scale'] = 1;
dot['imageIndex'] = 4;
dot['id'] = "UniqueID";
dot['position'] = pos;
dots.add(dot);

Thanks for the help!

2

The basic BillboardCollection primitive only supports static positions. To easily render time-varying billboards, you may want to use CzmlDataSource, which hooks into the clock and automatically updates primitives based on the current time.

3

Great. Can you direct me to any SandCastle --or other examples/tutorials-- that make use of DynamicBillboards and CzmlDataSource. What would be very useful is a simple page with a couple vehicles that move back and forth based on button clicks.

4

Great. Can you direct me to any SandCastle --or other examples-- that make use of DynamicBillboards and CzmlDataSource. What would be very useful is a simple page with a couple vehicles that move back and forth based on button clicks.

5

The CZML Sandcastle example has an example (Built-in CZML) of loading data into a CzmlDataSource to display a time-varying billboard for a vehicle:

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases

6

Thanks for your help. Here is some code I came up with (below) that visualizes an array of objects using a CZMLDataSource. Question: I tried using setting the DynamicPath in the DynamicObject, but I end up with lines that appear to be inertial streaks and not fixed trails of the moving objects' position. What am I missing?

////////////////////////////////
function ezAddMovingDB(vehicles, startDate, hoursDuration, imageNmbr) {
  require(['Cesium'], function (Cesium) {
    "use strict";
    try {
      var czmlDS = new Cesium.CzmlDataSource();
      var clr = new Cesium.Color(1, 0.5, 0, 1);
      var transClr = new Cesium.Color(clr.red, clr.green, clr.blue, .8);
      var whiteClr = new Cesium.Color(1, 1, 1, 1);
      // DynObj
      for (var i = 0; i < vehicles.length; i++) {
      var dyo = czmlDS.getDynamicObjectCollection().getOrCreateObject(vehicles[i][0].otherData[0]);
      // DynLabel
      var dyl = new Cesium.DynamicLabel();
      dyl.fillColor = ezGetTICColor(vehicles[i], startDate, hoursDuration, clr, whiteClr);
      dyl.font = new Cesium.ConstantProperty('18px Tahoma');
      dyl.outlineColor = new Cesium.ConstantProperty(transClr);
      dyl.pixelOffset = new Cesium.ConstantProperty(new Cesium.Cartesian2(30, 10));
      dyl.style = new Cesium.ConstantProperty(Cesium.LabelStyle.FILL_AND_OUTLINE);
      dyl.text = ezGetTICText(vehicles[i], startDate);
      dyl.translucencyByDistance = new Cesium.ConstantProperty(new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e6, 0.8));
      dyo.label = dyl;
      // DynBill
      var dyb = new Cesium.DynamicBillboard();
      dyb.image = new Cesium.ConstantProperty('../img/GroundVehicle.png');
      dyb.scale = new Cesium.ConstantProperty(1);
      dyo.billboard = dyb;
      //DynPos
      dyo.position = ezGetSPosProp(vehicles[i], startDate, hoursDuration);
      }
      //
      viewer.dataSources.add(czmlDS);
    } catch (e) {
      alert(e);
    }
  });
}
////////////////////////////////
// supporting methods
////////////////////////////////
function ezGetTICColor(events, startDate, hours, regColor, hilightColor) {
  try {
    var ticp = new Cesium.TimeIntervalCollectionProperty();
    var ell = viewer.centralBody.getEllipsoid();
    var currJDate = Cesium.JulianDate.fromDate(getZuluDateFromLocalDate(startDate));
    var ti;
    ti = new Cesium.TimeInterval(currJDate, currJDate.addHours(hours), true, false, regColor);
    ticp.intervals.addInterval(ti);
    for (var i = 0; i < events.length; i++) {
      currJDate = Cesium.JulianDate.fromDate(getZuluDateFromJSON(events[i]._date));
      ti = new Cesium.TimeInterval(currJDate, currJDate.addMinutes(5), true, false, hilightColor);
      ticp.intervals.addInterval(ti);
    }
    return ticp;
  } catch (e) {
    alert("error on line " + ' ' + e);
    throw e;
  }
}
function ezGetTICText(events, startDate) {
  try {
    var ticp = new Cesium.TimeIntervalCollectionProperty();
    var ell = viewer.centralBody.getEllipsoid();
    var currJDate = Cesium.JulianDate.fromDate(getZuluDateFromLocalDate(startDate));
    
    var ti;
    ti = new Cesium.TimeInterval(currJDate, Cesium.JulianDate.fromDate(getZuluDateFromJSON(events[0]._date)), true, false, events[0].otherData[0]);
    ticp.intervals.addInterval(ti);
    for (var i = 0; i < events.length - 1; i++) {
      ti = new Cesium.TimeInterval(Cesium.JulianDate.fromDate(getZuluDateFromJSON(events[i]._date)),
                                  Cesium.JulianDate.fromDate(getZuluDateFromJSON(events[i + 1]._date)),
                                  true, false, events[i].otherData[0] + "_" + events[i].otherData[1]);
      ticp.intervals.addInterval(ti);
    }
    return ticp;
  } catch (e) {
    throw e;
  }
}
function ezGetSPosProp(events, startDate, hours) {
  var dyPos = new Cesium.SampledPositionProperty();
  var ell = viewer.centralBody.getEllipsoid();
  dyPos.interpolationDegree = 1;
  dyPos.interpolationAlgorithm = Cesium.LinearApproximation;
  var currJDate = Cesium.JulianDate.fromDate(getZuluDateFromLocalDate(startDate));

  var loc = ell.cartographicToCartesian(Cesium.Cartographic.fromDegrees(events[0].lon, events[0].lat));
  dyPos.addSample(currJDate, loc);

  for (var i = 0; i < events.length; i++) {
    loc = ell.cartographicToCartesian(Cesium.Cartographic.fromDegrees(events[i].lon, events[i].lat));
    dyPos.addSample(Cesium.JulianDate.fromDate(getZuluDateFromJSON(events[i]._date)), loc);
  }

  var loc = ell.cartographicToCartesian(Cesium.Cartographic.fromDegrees(events[i-1].lon, events[i-1].lat));
  dyPos.addSample(currJDate.addHours(hours), loc);

  return dyPos;
}
function getDateFromJSON(val) {
  return new Date(epochSecsFromJSON(val));
}
function epochSecsFromJSON(val) {
  return val.substr(6, 13) * 1;
}
function getZuluDateFromJSON(val) {
  return getZuluDateFromLocalDate(getDateFromJSON(val));
}
function getZuluDateFromLocalDate(lclDate) {
  return new Date(lclDate.getTime() - 60000 * lclDate.getTimezoneOffset());
}