Adding images next to labels?

CesiumJS
1

Hello Cesium!

Question for you all. I know you guys are currently working on getting KML to CZML conversion thing going on here, but are you guys ever planning to add the following feature:

Capabilities of adding images to the LEFT or RIGHT side of labels

3d map had this feature. Just wondering how difficult would it be or if there is a workaround. Thanks Cesium!

Tony

2

This is already easy to do using billboards and labels. I don’t have a primitive example handy, so I’ll use this as an chance to show off the new Entity API that will be available with our next release. The settings all have the same names as their primitive counterparts, so you should be able to figure it out easy enough. Basically both labels and billboards have verticalOrigin and horizontalOrigin properties, so by setting them and assigning a pixelOffset, the result is the label is always to the left/right/top/bottom of the billboard. You can paste the below code at this hosted beta to see it in action.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var entity = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),

label : {

text : ‘This is on the right’,

pixelOffset : new Cesium.Cartesian2(10, 0),

horizontalOrigin : Cesium.HorizontalOrigin.LEFT

},

billboard : {

image : ‘…/images/facility.gif’

}

});

viewer.trackedEntity = entity;

3

Hello again, Matthew!

Oops.. I forgot to mention.

I'm already using entities (czmlDataSource). So by default, I already have a billboard and a label. =) On the label, however, is where I actually want another image. Sorry for not clarifying this.

4

It's okay if there isn't a way. I can use webgl to handle it if anything. But anyways Matthew, you saved me last time. I am wondering if you could give me an example of how setImageSubRegion works? That'd be great. =)