How can I get a billboard to appear above a polyline?

CesiumJS
1

I have a sandcastle.

As I zoom in and out or rotate, the polylines can be drawn on top of the billboard. How can this be prevented?

Additionally, the text drawn on top of the billboard can look wrong (thin, not fully drawn, etc.). Is there any way to have it look normal all of the time?

image

2

Billboard # disableDepthTestDistance

When set to Number.POSITIVE_INFINITY, the depth test is never applied.

3

Thank you. That does resolve the issue of the polylines being drawn on top of the billboard.

However, the label that should be drawn on top of the billboard still looks terrible. I did need to set disableDepthTestDistance: Number.POSITIVE_INFINITY on the label as well otherwise nothing would be drawn. Why? How can I resolve this issue?

Updated sandcastle.

image

4

The image of the billboard can be set with a canvas element Billboard # image.

ss
ss725×493 11 KB

You can customize these parameters according to your ideas.

lineEndpoints.forEach( ( coordinate ) => {
  
    var canvas = document.createElement('canvas');
    canvas.width = 48;
    canvas.height = 48;
    var context = canvas.getContext('2d');
    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.font = "bold 24px Arial";
    context.fillStyle = "black";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText("5", canvas.width/2, canvas.height/2);
  
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1], 100.0),
      billboard: {
        image: canvas,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
      },
  }); 
  
  viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1], 2000),
      label: { text: '5', fillColor: Cesium.Color.BLACK },
  }); 
});
5

Of course, in the above code, you should also not need to add the number 5 using label.

6

Thank you Sayeor.

That information was useful. I hadn’t considered just creating and using a canvas element. I figured the label entity would be the way to go. It is interesting that it is harder to use then I thought it would be for this purpose.

7

Here is the updated sandcastle.