Cesium - Using scaleByDistance for a billboard created through CZML

Question

I am trying to show an icon as a billboard and scale it by distance. I can manage fine, but as soon as I load the billboard through CZML instead of directly in JS, I cannot get the billboard the resize.

In my JS file I have:

var czmlDataSource = new Cesium.CzmlDataSource();
czmlDataSource.loadUrl('airports.czml');
viewer.dataSources.add(czmlDataSource);

My CZML file shows:

[
  {
    "id":"document",
    "version":"1.0"
  },
  {
    "id":"test",
    "billboard":{
      "image":"airport.png",
      "verticalOrigin":"BOTTOM",
      "show":true
    },
    "position":{
      "cartographicDegrees":[
        0.055278, 51.505278, 0
      ]
    }
  }
]

Before I used this:

entity.billboard.scaleByDistance = new Cesium.ConstantProperty(new Cesium.NearFarScalar(1.5e3, 0.3, 3.5e5, 0.0));

Obviously this now doesn't work. But I cannot find a way how to maybe get the ID of the billboard and use the scaleByDistance.

Answer 1

CZML doesn't have support for scaleByDistance embedded in it yet. But you can still do what you suggest at the bottom of your post, which is find the ID and apply the property that way.

Remember that loadUrl is async, so you can't get the ID until after it loads. The code looks like this:

var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlDataSource);
czmlDataSource.loadUrl('airports.czml').then(function() {
    var entity = czmlDataSource.entities.getById('test');
    entity.billboard.scaleByDistance = new Cesium.ConstantProperty(
            new Cesium.NearFarScalar(1.5e3, 0.3, 3.5e5, 0.0));
});