Billboard below polyline in 2D but not 3D

CesiumJS
1

Billboards appear below polylines in 3D view, but below polylines in 2D view. I need them to be above polylines, but I can't figure out a way to make it do that in 2D view.

Am I missing something?

2

Hello,

Try using the Billboard.eyeOffset property. A negative Z value (eyeOffset: new Cesium.Cartesian3(0,0,-100) ) will make the billboard layer closer to the camera, which should make it show above the polyline.

Best,

Hannah

3

That works fine in 3D scene mode. Positive makes it appear below the line, negative makes it appear above the line. However in 2D there is no difference even if it's +10000 or -10000. The billboard always appears below the line. I am using TimeIntervalCollections for colour, location and eyeoffset if that makes any difference.

4

I’ve had similar issue with polygons. Luckily, ground primitives solved that for me. Can you use one of the valid polygons in order to use groundPrimitive (CircleGeometry, CorridorGeometry, EllipseGeometry, PolygonGeometry, and [RectangleGeometry](https://cesiumjs.org/Cesium/Build/Documentation/RectangleGeometry.html))?

5

Hmm, I’m not sure why that would be happening. This is the example I’ve been using, and it seems to work fine in 2D:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {sceneMode: Cesium.SceneMode.SCENE2D});

var redLine = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
-100, 35,
-125, 35]),
width : 5,
material : Cesium.Color.RED
}
});

viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-100, 35),
billboard :{
image : ‘…/images/Cesium_Logo_overlay.png’,
eyeOffset: new Cesium.Cartesian3(0,0,-100)
}
});

viewer.zoomTo(viewer.entities);

``

Could you please paste a code sample of how you’re adding your polylines and billboards? Hopefully that will help me track down the cause of the problem.

Thanks,

Hannah

6

Delayed response, but I've managed to re-create the problem and narrow down the cause. I've pasted the Sandcastle code below.

It seems to be entirely related to the use of 'Cesium.SampledPositionProperty' for the polyline endpoints. Please see the below example. I am unable to make the polyline appear below either of the billboards in 2D. It works exactly as you would expect in 3D, however.

Thank you for your time.

<code>
var viewer = new Cesium.Viewer('cesiumContainer', {sceneMode: Cesium.SceneMode.SCENE2D});
var colour = Cesium.Color.RED.withAlpha(0.5);

//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 = 1;

//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);
    }
    return property;
}

// Create position SampledPositionProperties
var positionProperty1 = computeCirclularFlight(-75, 35, 0.03);
var positionProperty2 = computeCirclularFlight(-75, 35, 0.010);

// Create first billboard
var billboard1 = viewer.entities.add({
    position : positionProperty1,
    billboard :{
        image : '../images/Cesium_Logo_overlay.png',
        eyeOffset: new Cesium.Cartesian3(0,0,100000),
        color : new Cesium.Color(0.0, 1.0, 0.0, 0.5)
    }
    
});

var billboard2 = viewer.entities.add({
    position : positionProperty2,
    showCollection: true,
    billboard :{
        image : '../images/Cesium_Logo_overlay.png',
        eyeOffset: new Cesium.Cartesian3(0,0,-100000),
        color : new Cesium.Color(1.0, 1.0, 1.0, 0.5)
    }
    
});

// Create PositionPropertyArray from the two billboard locations to be used with the polyline
var positionsArray = new Cesium.PositionPropertyArray([positionProperty1, positionProperty2]);

var redLine = viewer.entities.add({
    polyline : {
        positions : positionsArray,
        width : 10,
        followSurface : false,
        material: Cesium.Color.RED,
    }
});

viewer.zoomTo(viewer.entities);
</code>

7

Hello,

I think your eyeOffset values may be too large. The camera is close to the billboards than that, which may be causing the issue.

Using a z value of -50 worked for me:

var billboard1 = viewer.entities.add({
position : positionProperty1,
billboard :{
image : ‘…/images/Cesium_Logo_overlay.png’,
eyeOffset: new Cesium.Cartesian3(0,0,-50),
color : new Cesium.Color(0.0, 1.0, 0.0, 0.5)
}
});

``

Best,

Hannah

8

Thanks for your reply Hannah.

Unfortunately, still no luck.

If I replace the offset z value with -50 for both, and zoom in and out, at no point is the line below the billboards. Either when zoomed all the way in, or all the way out.

The billboards are below the line in both Firefox and Chrome. This is what I see: http://imgur.com/FR47VxH

In 3D mode it works fine at all zoom levels.

9

Okay, thanks. I submitted an issue to our GitHub so we can look into it further.

Best,

Hannah

10

Thanks Hannah, I appreciate it!