How to set opacity of the svg billboards in Cesium map

CesiumJS
1

Hello all,

have svg point billboards in Cesium 3D Map and would like to make them 20% opacity in certain cases, also use json file for styling where alpha = 0..x works for lines and areas, but not for svg point billboards.

.json snippet for particular billboard role >
“RP_BLUE_LIGHT”: {
“icon”: “./icons/RP_BLUE_LIGHT.svg”,
“scale”: 0.2
},

lines working fine with alpha, as shown in this snippet>

"Etapa": {
  "color": "#0000FF",
  "width": 7,
  "alpha": 0.6
},

Any recommendation how to set transparency in code?

crop_rp
crop_rp347×243 147 KB

example of billboards in map

2

Hi @Davor_Fiedler,

So you want the billboard icon itself to have a transparency? I think what you want is the Color property of billboards, not alpha. Try adding a billboard with:

color: new Cesium.Color(1.0, 1.0, 1.0, 0.2) // 20% opacity

(That would be if you create the billboard in JS. Might be different if you’re defining the billboard in a json file). Let me know if that works.

Best,
Matt

3

Thank you Matt,

working now, like this:

if (dimmed) {

    graphic\[propertyName\] = new Cesium.ConstantProperty(new Cesium.Color(1.0, 1.0, 1.0, 0.2));

} else if …

dimm_blbrd
dimm_blbrd346×405 48.1 KB

Best regards,

Davor