Update billboard image through function "BillboardVisualizer.prototype.update"

CesiumJS
1

Hi guys,

Who knows the relation between Billboard,BillboardGraphics and BillboardVisualizer, I want to update billboard image dynamically through function “BillboardVisualizer.prototype.update”,

but I don’t know how to do that.Thank you so much.

2

How to write the callback function?

3

Hi Yang,

Is there are reason you’re using doing this with the BillboardVisualizer instead of just using the Entity system? Writing a callback property for an Entity is simple – here’s an example with a billboard property. http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=0665acc34189a85edf8b40350da1bda6

Hope that helps,

  • Rachel
4

Hi Rachel,

Thank you for your suggestion.

I want to update billboard image, the image source is canvas.toDataURL(). The billboard disappeared when image callback property is set, I think the rate is too high.

so, I want to update image in “BillboardVisualizer.prototype.update”, the updating process will last 2 seconds,

but the image can’t be really set in BillboardGraphics, after the 2 seconds process, the update will restore to origin.

Do you know how to set value to billboardGraphics,for example(billboardGraphics._image = myImage) ,thus, ‘update’ function will use the last value I set.

BillboardVisualizer.prototype.update = function(time) {

if (!defined(time)) {

throw new DeveloperError(‘time is required.’);

}

var items = this._items.values;

var cluster = this._cluster;

for (var i = 0, len = items.length; i < len; i++) {

var item = items[i];

var entity = item.entity;

var billboardGraphics = entity._billboard;

var textureValue;

var billboard = item.billboard;

var show = entity.isShowing && entity.isAvailable(time) && Property.getValueOrDefault(billboardGraphics._show, time, true);

if (show) {

position = Property.getValueOrUndefined(entity._position, time, position);

textureValue = Property.getValueOrUndefined(billboardGraphics._image, time);

show = defined(position) && defined(textureValue);

}

if (!show) {

//don’t bother creating or updating anything else

returnPrimitive(item, entity, cluster);

continue;

}

if (!Property.isConstant(entity._position)) {

cluster._clusterDirty = true;

}

if (!defined(billboard)) {

billboard = cluster.getBillboard(entity);

billboard.id = entity;

billboard.image = undefined;

item.billboard = billboard;

}

billboard.show = show;

if (!defined(billboard.image) || item.textureValue !== textureValue) {

billboard.image = textureValue;

item.textureValue = textureValue;

}

billboard.position = position;

billboard.color = Property.getValueOrDefault(billboardGraphics._color, time, defaultColor, color);

billboard.eyeOffset = Property.getValueOrDefault(billboardGraphics._eyeOffset, time, defaultEyeOffset, eyeOffset);

billboard.heightReference = Property.getValueOrDefault(billboardGraphics._heightReference, time, defaultHeightReference);

billboard.pixelOffset = Property.getValueOrDefault(billboardGraphics._pixelOffset, time, defaultPixelOffset, pixelOffset);

billboard.scale = Property.getValueOrDefault(billboardGraphics._scale, time, defaultScale);

billboard.rotation = Property.getValueOrDefault(billboardGraphics._rotation, time, defaultRotation);

billboard.alignedAxis = Property.getValueOrDefault(billboardGraphics._alignedAxis, time, defaultAlignedAxis);

billboard.horizontalOrigin = Property.getValueOrDefault(billboardGraphics._horizontalOrigin, time, defaultHorizontalOrigin);

billboard.verticalOrigin = Property.getValueOrDefault(billboardGraphics._verticalOrigin, time, defaultVerticalOrigin);

billboard.width = Property.getValueOrUndefined(billboardGraphics._width, time);

billboard.height = Property.getValueOrUndefined(billboardGraphics._height, time);

billboard.scaleByDistance = Property.getValueOrUndefined(billboardGraphics._scaleByDistance, time, scaleByDistance);

billboard.translucencyByDistance = Property.getValueOrUndefined(billboardGraphics._translucencyByDistance, time, translucencyByDistance);

billboard.pixelOffsetScaleByDistance = Property.getValueOrUndefined(billboardGraphics._pixelOffsetScaleByDistance, time, pixelOffsetScaleByDistance);

billboard.sizeInMeters = Property.getValueOrDefault(billboardGraphics._sizeInMeters, defaultSizeInMeters);

billboard.distanceDisplayCondition = Property.getValueOrUndefined(billboardGraphics._distanceDisplayCondition, time, distanceDisplayCondition);

billboard.isDynamic = Property.getValueOrDefault(billboardGraphics._isDynamic, time, defaultIsDynamic);

var subRegion = Property.getValueOrUndefined(billboardGraphics._imageSubRegion, time, boundingRectangle);

if (defined(subRegion)) {

billboard.setImageSubRegion(billboard._imageId, subRegion);

}

}

return true;

};

Thank you

Harry

在 2017年5月17日星期三 UTC+8上午4:22:13，Rachel Hwang写道：

5

Hi Harry,

I would urge you not to use Billboard graphics – there’s no reason what you need can’t be accomplished via the entity system (working with just Billboards without going down to the primitive level). I’m not sure why your callback didn’t work, but that is a viable approach.

Here’s a simple code example that updates a billboard image every second: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=1261fbe7a01ab0e24e3e4bf277c6f719

Hope that helps,

  • Rachel