Clamping Billboard to ground with Terrain enabled

1. A concise explanation of the problem you’re experiencing.

If you go to: https://spatialillusions.com/Demos/cesium/ and turn on STK terrain you will see that the billboard military symbols are being clipped in half.

My issue is very similar. I am getting the entity elevation information from a DIS simulations, but trying to show it on with the STK terrain, which has different heights, I figured I could do a clamp to ground, and that would fix it, but I get the same result as the folks from spatial illusions

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

I tried this type of solution: https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=https%3A%2F%2Fcesiumjs.org%2Fforum%2F#!searchin/cesium-dev/billboard$20clamp/cesium-dev/PsfINmAvdmA/hazPRQ6UEQAJ

terrainProvider = viewer.terrainProvider;

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({

   url : '[https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles](https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles)'

});

viewer.scene.globe.depthTestAgainstTerrain = true;

viewer.entities.add({

   position : Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),

   billboard : {

       image : '../images/facility.gif',

       heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,

   }

});

``

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Right now, I can just bias the altitude by 500 meters, and it is a crude but workable solution. But I would like to fix it. The full code for adding a glyph is below:

Enter code here… makeGlyph(sprite) {

``
let milSym = milSymbols[sprite.type]

if (milSym === undefined) milSym = milSymbols[“UFO”]

sprite.symbol = milSym

let sym2 = new ms.Symbol(milSym, { size: 28, type: sprite.marking, speed: ‘5 kph’, direction: 90, infoColor: “red” })

let glyph = new Cesium.Entity({

name: sprite.marking,

id: sprite.id,

position: Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude + 500.0),

billboard: {

image: sym2.asCanvas(), //Get the canvas for the billboard

// heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,

pixelOffset: new Cesium.Cartesian2(-sym2.markerAnchor.x, -sym2.markerAnchor.y), // Symbol offset

eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default

horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default

verticalOrigin: Cesium.VerticalOrigin.TOP

},

label: {

text: sprite.marking,

font: ‘14pt monospace’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth: 1,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

pixelOffset: new Cesium.Cartesian2(0, -20)

}

})

sprite.glyph = glyph

this.viewer.entities.add(glyph)

}

``

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.39, Chrome 61

Hi there,

I see you are setting the billboard’s verticalOrigin to the top:

verticalOrigin: Cesium.VerticalOrigin.TOP

Do you have any luck setting it to the bottom?

Thanks,

Gabby

Forgot to link to the documentation:

Billboard.verticalOrigin

Yes, Much better, Thank you