I am trying to load a different image into a billboard based on the time. I can do this by setting a different url in the data field of a timeIntervalCollectionProperty and setting this to the billboard.image property. However, I had thought that it would be best-practice to do the following:
Use Cesium.When with LoadImage and first load all of the images. Then, when loaded, set the image to a timeIntervalCollectionProperty that has the data set to the loaded image (not the url.
Below is an adjustment to one of the sandbox examples that shows my issue. Using billboard : bb2 works, while using billboard:bb does not work.
Is it acceptable to just use the url? Will Cesium re-use the image in the background if it is used by another entry in the timeIntervalCollectionProperty?
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProviderViewModels : , //Disable terrain changing
infoBox : false, //Disable InfoBox widget
selectionIndicator : false //Disable selection indicator
});
//Set the random number seed for consistent results.
Cesium.Math.setRandomNumberSeed(3);
//Set bounds of our simulation time
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//Make sure viewer is at the desired time.
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
viewer.clock.multiplier = 10;
//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
//Generate a random circular pattern with varying heights.
function computeCirclularFlight(lon, lat, radius) {
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
property.addSample(time, position);
//Also create a point for each sample we generate.
viewer.entities.add({
position : position,
point:pp
});
}
return property;
}
function computeCirclularFlightImage(lon, lat, radius,images) {
var property = new Cesium.TimeIntervalCollectionProperty();
var startTime = start;
for (var i = 0; i <= 360; i += 45) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
var image = images[1];
if (i > 100){
image = images[0];
}
if (i > 200){
image = images[1];
}
if (i > 300){
image = images[0];
}
property.intervals.addInterval({start:startTime,stop:time,data:image});
startTime=time;
}
return property;
}
var pp = new Cesium.PointGraphics();
pp.pixelSize=8;
//Compute the entity position property.
var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);
var bb =new Cesium.BillboardGraphics();
bb.width=32;
bb.height=32;
bb.scale = 1.0;
bb.show = true;
var bb2 =new Cesium.BillboardGraphics();
bb2.width=32;
bb2.height=32;
bb2.scale = 1.0;
bb2.show = true;
var imgUrls=['../images/facility.gif','../images/Cesium_Logo_overlay.png'];
bb2.image = computeCirclularFlightImage(-112.110693, 36.0994841, 0.03,imgUrls);
var setImages = function(images){
bb.image = computeCirclularFlightImage(-112.110693, 36.0994841, 0.03,images);
};
//Cesium.when.all([Cesium.loadImage('../images/facility.gif'), Cesium.loadImage('../images/Cesium_Logo_overlay.png')]).then(setImages);
//Actually create the entity
var entity = viewer.entities.add({
//Use our computed positions
position : position,
billboard :bb2 //using bb here does NOT work
});
//Add button to view the path from the top down
Sandcastle.addDefaultToolbarButton('View Top Down', function() {
viewer.trackedEntity = undefined;
viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
});