GeoJsonDataSource - Change Opacity For Each Entity

CesiumJS
1

I’m currently loading up a GeoJsonDataSource that contains ~3000 entities. After they are loaded and rendered, I would like to be able to change the opacity (alpha) values for each entity in the collection based on user input. The color/alpha values are static otherwise and do not change with time. What is the best way to do this?

My current brute-force approach has been to loop over the datasource’s EntityCollection and change the individual color properties to add the new alpha value for each entity, but this takes a few minutes on each button press and has a tendency to lock up the browser. Any ideas on a better way?

My current approach:

var entityProperties = {
box: [‘material’, ‘outlineColor’],
corridor: [‘material’, ‘outlineColor’],
cylinder: [‘material’, ‘outlineColor’],
ellipse: [‘material’, ‘outlineColor’],
ellipsoid: [‘material’, ‘outlineColor’],
point: [‘material’, ‘outlineColor’],
polygon: [‘material’, ‘outlineColor’],
label: [‘fillColor’, ‘outlineColor’],
path: [‘material’],
polyline: [‘material’],
polylineVolume: [‘material’, ‘outlineColor’],
rectangle: [‘material’, ‘outlineColor’],
wall: [‘material’, ‘outlineColor’],
billboard: [‘color’]
}

function changeEntityOpacity(entity, opacity) {
.each(.pairs(entityProperties), function(propertyDef) {
var property = propertyDef[0], colorProperties = propertyDef[1], propertyToChange = entity[property];

          if (propertyToChange) {
              _.each(colorProperties, function(colorProperty) {
                     if (propertyToChange[colorProperty]) {
                         if (colorProperty === 'material') {
                             propertyToChange.material.color = propertyToChange.material.color._value.withAlpha(opacity);
                         } else {
                             propertyToChange[colorProperty] = propertyToChange[colorProperty]._value.withAlpha(opacity);
                         }
                     }
             });
          }
  });

}

function changeDataSourceOpacity(datasource, opacity) {
datasource.entities.suspendEvents();

  _.each(this.datasource.entities.values, function(entity) {
        changeEntityOpacity(entity, opacity);
  });

  datasource.entities.resumeEvents();

}

``

I’ve attached the GeoJson I’m trying this with.

gz_2010_us_050_00_20m.json (3.28 MB)

2

Hello,

You should be able to use the style.fill-opactiy property in your geojson file to set the opacity value of the entity. This is a decimal value between 0 and 1.

Best,

Hannah