How to change height/altitude of billboard

CesiumJS
1

How does one update/change the altitude of a billboard with respect to the terrain? I'd like a user to click a point and eventually update/change altitude above the ground/terrain. I know how to clamp to ground, but relative to ground doesn't seem to work as expected.

I've tried the following:

var terrainModels = Cesium.createDefaultTerrainProviderViewModels();
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProviderViewModels: terrainModels,
    selectedTerrainProviderViewModel: terrainModels[1] // Select STK High-res terrain
});

var scene = viewer.scene;

viewer.scene.globe.depthTestAgainstTerrain = true;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

var buildboardCollection = scene.primitives.add(new Cesium.BillboardCollection({
    scene: viewer.scene
}));
            
handler.setInputAction(createPointEventHandler, Cesium.ScreenSpaceEventType.LEFT_CLICK);

function createPointEventHandler(event)
{
    var ray = viewer.camera.getPickRay(event.position);
    var position = viewer.scene.globe.pick(ray, viewer.scene);
    var pinBuilder = new Cesium.PinBuilder();
    if (Cesium.defined(position)) {
        // I'd like to change the position's height
        buildboardCollection.add({
            position: position,
            image: pinBuilder.fromText("P", Cesium.Color.YELLOW, 30).toDataURL(),
            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        });
    }
} // end if hit globe

Thanks in advance for any help.

2

Hello,

I think you are getting unexpected behavior because the height of your billboard position isn’t zero since you are using a ray for picking. This will pick the terrain and give the position a height equal to the height of the terrain at that position. This height is different depending on what level of detail you have loaded for the terrain. If you want the billboard to start with height=0, you can use

position = viewer.scene.globe.ellipsoid.scaleToGeodeticSurface(position);

``

Alternatively, you could convert the position to a Cartographic, change the height, then convert it back to a Cartesian3

var ellipsoid = viewer.scene.globe.ellipsoid;
var cartographic = ellipsoid.cartesianToCartographic(position);
cartographic.height = desiredHeight;
position = ellipsoid.cartographicToCartesian(cartographic);

``

Hope this helps!

Best,

Hannah

3

Helped a ton! Thanks!