Label is gone when it is zoomed out

CesiumJS
1

Hello, I am trying to visualize some labels on symbols I added to cesium js.

image
image937×429 225 KB

When the labels are zoomed out, most of them are gone.

This is one of the code visualizing the symbol and label:

var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/2017_VAgb.kml', kmlOptions);
// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);

    // Get the array of entities
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        if (Cesium.defined(entity.billboard)) {
            // Adjust the vertical origin so pins sit on terrain
            entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            // Disable the labels to reduce clutter
  		// entity.label = undefined;
            // Add distance display condition
            entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
            // Compute latitude and longitude in degrees
            var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
            var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
            var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
            // Modify description
            var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                '</tbody></table>';
            entity.description = description;
        }
    }
});

Hope you can help me. Thanks

2

Hi @fadelkoto, I just want to make sure I understand the problem better. You only has the issue with labels fading out when zooming out right? I make this sandcastle example from your code to replicate it. If the camera zooms in to the US map, the label will appear. But as soon as the camera zooms out, it will fade away and only billboards are rendered. Can you please take a look at it to see if it is the problem you are having? Also can you please share a sandcastle example if mine doesn’t reproduce the problem? You can follow this link for how to do it.

3

It is also possible that the problem is labels are depth tested against the terrain. That’s why some parts of the labels are cut off in your screenshot. You can disable the depth test by setting disableDepthTestDistance. It is the distance from the camera in which the depth test will be disable. If it is set to be 0, the depth test is always on. If it is set to be Number.POSITIVE_INFINITY, the depth test will be off for label. This is the sandcastle example. You can zoom in the US map to begin seeing the labels and billboards. Please let me know if it helps

4

Hello Bao Tran. Your first soultion works. The olny difference with your code probably in the Var Options, I have another parameter clampToGround : true.

var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};

Thank you for the fast response :slightly_smiling_face:

1 Like