Is there any status or ETA on adding Z-index support to Cesium? We have a project where we need to display symbols on top of a polyline graphic to display a route with waypoints.
Thanks,
Lori
I’m not sure if this is exactly what you’re looking for, but with labels you can use the eyeOffset to raise the label above the entity it’s attached to.
What I am looking for is to be able to guarantee that an entity will be displayed on top of another entity. For instance I have a polyline entity and I want to ensure that another billboard entity will be displayed on top of it.
Is there currently a way to do this? I have looked at other postings for this group and they indicate that this is not currently available.
Regards,
Lori
By on top of I mean that where there is overlap between the two entities, one entity always covers the other. It is not a y axis on top of.
Regards,
Lori
I’m not really sure how to enforce that without adding a transform to the entity you want always on top to raise it slightly above the others. Otherwise you’ll pretty much always end up with z-buffer collisions since they are occupying the same space.
Lori, while there’s no official ETA for z-index support, it is an important feature we would like to get to soon. The vector data on terrain support that is actively being worked lays the ground work needed for sorting ground-based visualization, so that has to be done first. The behavior you describe is definitely something we’ll want to handle. I’ll try to remember to update this thread with more information when it’s available.
I have one particularly tricky issue related to this. I created a custom air corridor with transparent corridor legs. it is required to have labels for each segment ( ideally the same color as the leg and inside the corridor). I have attached a screenshot. Right now they are a canvas attached to a billboard that is then rotated. The labels also need to be parallel to the leg.It is difficult to see when over the transparent corridor ( even when they are a different color ). One of the required colors is yellow which is the worst case. We want to make the labels more visible. Are you developing a solution for this? One workaround I have thought about is creating a custom eyeOffset for each label to put them just out side the corridor? Is there a better alternative to this?
Thanks,
Lori
Hello Lori,
Right now, setting the eyeOffset property for the labels is your best bet. A negative z value should put them in front of the corridors.
Best,
Hannah
Thank you so much!!! That did the trick. I had been using positive value for z eyeOffset because I assumed that it was like an altitude. The negative value worked.
Thanks Much,
Lori
I have some issue with this one (this issue is quite a pain…).
This effect changes in different zoom levels. I’ve set the z value to -10000.
When I zoom out, the billboards are covered again. Moreover, when I zoom in, I’d might not see the billbards at all…
Since I want to allow my users to zoom in/out, I have to dynamically change the z value according to camera height.
Here’s the callback function (a very rough version, but this one does work in all the cases I’ve checked):
var cameraHeight = -1;
var eyeOffsetCallback = new Cesium.CallbackProperty(function(){
var zIndex = -1;
var currCameraHeight = viewer.camera.positionCartographic.height;
if (currCameraHeight > 85000 && cameraHeight <= 85000){
zIndex = -10000;
}
if (currCameraHeight <= 85000 && currCameraHeight >= 500 && (cameraHeight <= 500 || cameraHeight > 85000){
zIndex = -500;
}
if (currCameraHeight <= 500 && cameraHeight > 500){
zIndex = -100;
}
if (zIndex == -1){
return this;
}
return new Cesium.Cartesian3(0.0, 0.0, zIndex);
}, false);
``
… somewhere, in a far far away galaxy of code …
viewer.entities.add({
billboard: {
eyeOffset: eyeOffsetCallback,
image: myImageUrl
}
);
``
That’s a super greedy and naive solution for this issue at the moment.
I have 3 questions:
-
Had anyone notice this behavior?
-
Does returning “this” in the case there’s no change saves anything when it comes to performance (imagine an app with around 30,000+ entities…).
-
Is there a more elegant/effective solution for this problem?
Thanks 
I did just notice the same behavior you mention when zooming in. I set a large static eyeOffset and worked pretty well if you were at whole world, but as you zoomed in the billboard would disappear. I can also recreate the issue using the cesium sandcastle billboard demo.
I will implement your solution and see how it works for me.
Thanks,
Lori
There are several other problems with this method. For instance… you can’t really clamp to ground.
Any notes on this one?
Here’s an example in the sandcastle that shows the issue:
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var billboardDS = new Cesium.CustomDataSource(‘billboard’);
var polygonDS = new Cesium.CustomDataSource(‘polygon’);
viewer.dataSources.add(billboardDS);
viewer.dataSources.add(polygonDS);
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-65, 0, 10),
billboard: {
image: ‘…/images/facility.gif’
}
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75, 0),
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([-60, -5, -70, -5, -70, 5, -60, 5])
}
}
});
billboardDS.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75, 0, 10),
billboard: {
image: ‘…/images/facility.gif’
}
});
polygonDS.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75, 0),
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([-70, -5, -80, -5, -80, 5, -70, 5])
}
}
});
Here’s the screenshot of how it looks.
I’ve added the examples both to the viewer entities and to different dataSources and tried to play around with it. In any event, the polygon and billboards are fighting over dominion, causing some bad user experience. Adding height to the billboard doesn’t help (the billboard in the example is at height 10 meters while the polygon is at 0). Adding a lot of height to the billboard would help (much like eyeoffset), but with bad user experience.
Any solution?
בתאריך יום רביעי, 17 ביוני 2015 בשעה 04:33:51 UTC+3, מאת Lori Peck:
Is there any status or ETA on adding Z-index support to Cesium? We have a project where we need to display symbols on top of a polyline graphic to display a route with waypoints.
Thanks,
Lori
I found another way to calculate the zIndex:
let zIndex = ctrl.cesium.camera.frustum.near * 100 - Cesium.Cartesian3.distance( entity.position.getValue(), ctrl.cesium.camera.position);
Hey Matthew,
Is there any update on z-index support?
It’d be amazing if I could control which entities are displayed on top of others.
Kind Regards,
Harry
Hi there,
Unfortunately we don’t have any updates to share currently.
Best,
- Rachel
Hi all, I really hope someone figure out some way to solve it.
1 Like