Labels based in distance/scale

CesiumJS
1

Folks,

Any guidance on how to display different amount of labels based on distance from the earth.

We have an existing leaflet application and we have different label sets for each zoom level and this works very well.

Thanks

Ian

2

There’s no out-of-the-box feature in Cesium to easily do exactly what you are describing. Zoom levels don’t normally make sense in 3D because the camera is not always look straight down and any given view can have data from multiple zoom levels. We will have min and maximum view distances (based on label distance from the camera) at some point in the future, but there’s no timeframe yet. You might be able to get part of the way there with the label translucencyByDistance property, which would let you have labels appear as the camera gets closer, but you can’t turn them on/off at a specific zoom level.

3

I think you can achieve what you want using translucencyByDistance property as Matthew suggested.

You can set the translucency, on a scale of 0.0 (completely transparent) to 1.0 (fully visible) for both near and far distances. As your distance in the range changes, the translucency will fade proportionately.

For your case, you would set your near distance to the distance you want the label to become visible and with a translucency of 1.0. You would make your far distance just slightly farther and with a translucency of 0.0. The end result is your label will go from not visible to visible at the desired distance.

var entity = viewer.entities.add({
    id: id,
    name: name,
    label: {
      text: labelText,
      translucencyByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 1.0e2+1, 0.0)
    },
    position: position
});

4

We have tried and can look again as it did not seem to do what we wanted.

As we currently have separate sets of labels for each zoom level we would need to set the visibility distance for each label based on which data set (zoom level) they belong to.

Thanks, Ian

5

Have a look at the DistanceDisplayCondition work-in-progress in the gfx branch: https://github.com/AnalyticalGraphicsInc/cesium/compare/gfx#diff-b832c4f75489059abbd236f5f953e3f7R2 It may help nudge you in the right direction