Label positioned behind billboard/point

CesiumJS
1

After the 1.28 update, I noticed that labels are moved to behind points and billboards. Is there a way to move the label to front? I have a sandcastle below. You can see that 11 is behind the orange point and 8 is behind the facility icon.

2

Hello,

You can add a small eyeOffset to the label so it renders in front of the point. Here is the updated example:

label : {
    font : '24pt sans-serif',
    text : '11',
    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
    verticalOrigin : Cesium.VerticalOrigin.CENTER,
    fillColor : Cesium.Color.WHITE,
    eyeOffset: new Cesium.Cartesian3(0, 0, -5)
},

``

Best,

Hannahj

3

Thanks Hannah. Using eyeOffset works most of the time but I could still see the 11 flicker to behind the point at certain zoom levels. To reproduce, try zooming into that point by mouse wheel in the bird-view perspective but in a slower increments. Its also reproducible at near highest zoom level.

Also I noticed that there are dark outlines surrounding 11 against the orange point. Changing the outline color didn't seem to make this go away.

4

Any thoughts?

5

Sorry, using eyeOffset is the best workaround we have for this at the moment.
If you make the value larger, you shouldn’t see this flickering as you zoom in and out. Try -50 instead of -10.

Best,

Hannah

6

Oh, this wasn’t just me and my code; yes, after v1.28 update, I noticed all my left-justified label entities, created after their billboards (image URL to 32x32 png), are anchored behind/underneath the billboard image, partially or totally obscuring the first character of text in the label.
Thanks to John…@gmail for raising the question in this forum, and thanks Hannah for recommending the eyeOffset: workaround.

7

In 2020, eyeoffset helping me! Thanks Hannah