Creating a label works incorrectly

CesiumJS
1

Hello folks,

I have problems with the display of a label.
The creation works so far, but depending on the viewing angle, some places are illegible because it slips under the ground.

I created 2 label points here:

image
image803×358 69.7 KB

So you can see that the label “TEST TEST TEST” is not completely legible, at least in the middle.

If I zoom in now, it gets even worse:

image
image806×368 79.6 KB

If I zoom in even further, then the label has disappeared completely underground.

image
image814×346 64.4 KB

image
image800×256 35.1 KB

How can I make it readable in any position and angle and always in the foreground?

The dark red point here is a point with a pixel size of 20 (so that I can see something). Otherwise at 3 or 5 the point also disappears when zooming in and out. As is the case with the labels, I have the same problem with the point

viewer.entities.add({
   position: Cesium.Cartesian3({x,y,z}),
   label: {
            text: 'Test TEST TEST',
            scale: 1.0,
            pixelOffset: new Cesium.Cartesian2(-120, 150),
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            font: '32px Helvetica',
            fillColor: Cesium.Color.YELLOW,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 130,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        }
});

Here in the code I played around with the pixelOffset and outlineWidth. But that and the colors there didn’t do anything. As if these properties were not set at all.

I ask for help.

2

Hi, You can check my this post for similar issue’s solution.

3

Hi Jacky,

Thanks for your help.

Yes, that worked great.
I was missing the “disableDepthTestDistance: Number.POSITIVE_INFINITY” property.

But I got a problem with the billboard.

Suppose here is my location:
image

Now without changing the location, I rotate the viewing angle with the mouse, so the billboard icon stays fixed in the middle, but the needle tip no longer shows the point where my location was.
image

As I have now indicated in the screenshot with the red arrow, it has migrated. What can I do to keep the points / billboards / etc. exactly on the coordinates?

How can I apply the above solution (disableDepthTestDistance: Number.POSITIVE_INFINITY) to polylines and poligons as well?

4

I must correct myself.

That “disableDepthTestDistance: Number.POSITIVE_INFINITY” worked on Billboard Icon. However, as far as the labels are concerned, it didn’t work

image

5

It’s working with Labels also. Example

6

Wow great that worked. I thank you.
But I had to comment out clampToGround: true as it gave an error.

image
image747×557 73.5 KB

I have defined a class called Label and am passing the Label as a parameter to the constructor.
Since the Type is: Cesium.LabelGraphics.ConstructorOptions the error is:

(property) clampToGround: boolean
The type "{ show: true; showBackground: true; scale: number; pixelOffset: Cesium.Cartesian2;
eyeOffset: Cesium.Cartesian3; horizontalOrigin: Cesium.HorizontalOrigin.CENTER;
verticalOrigin: Cesium.VerticalOrigin.TOP; ... 7 more . ..; clampToGround: boolean; }" cannot be 
assigned to type "ConstructorOptions".
   The object literal can only specify known properties, and clampToGround does not exist on
the ConstructorOptions type.ts(2322)
7

You can remove “clampToGround”. I don’t think it will affect the result.

8

ok thanks for the help…
I have another problem here and would be very happy if you could take a look at it.

Here the link: