Search code examples
cesiumjs

Cesium label scaleByDistance

I have an array of labels I'm adding to a Cesium globe using a LabelCollection as such:

data.forEach(function(country) {
    countryLabels.add({
        position: new Cesium.Cartesian3.fromDegrees(country.lat, country.lng),
        text: country.name,
        font: "12px arial"
    });
});

It all works great. But the labels are rendered at the same relative scale regardless of my camera's zoom level. Ideally I'd like the labels to be hidden when zoomed far enough out, and only shown when they're not all going to be overlapping eachother.

I know billboards have a scaleByDistance property, but labels do not. Is there any way to achieve this without listening to a zoom event on the camera, and manually clearing/re-populating this LabelCollection?

Thanks in advance.

Label hell

Solution

  • Doing scaleByDistance on labels requires a bit more extra work to get the results you would expect for label scaling. If we were to adapt the same scaleByDistance implementation from Billboards to labels, each character in the label would correctly scale by distance, but the spacing between the labels would remain unchanged. This is due to the way the geometry for the labels is sent to the GPU, where the scaleByDistance transformation is applied.

    Labels do support translucencyByDistance which could be used for decluttering.