CODEWITHSUNDEEP
giscesiumjs
Emmanuel Buckshi
Emmanuel Buckshi

Reputation: 566

Cesium - Placing billboards/map pins on polygons with extrudedHeight set

I have had a lot of difficulty trying to get a map pin to display consistently well on polygons that have their heights extruded. In my app, I am extruding heights of buildings based on an arbitrary value.

Later, upon selecting them, I add a billboard supplied with a custom image of a map pin.

//Get position of selected entity and add billboard at same position

var mPos = pCoords.positions[0];

var selectedPin = viewer.entities.add({

    name : 'selBoutique',
    position : mPos,
    billboard : {
        image : './img/marker.png',
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        eyeOffset: new Cesium.Cartesian3(0, 4, 0)
    }

});

I am setting the vertical origin to bottom, in order to keep its display consistent, and have been experimenting with offset in order to find a setting which works well for buildings of various heights in 3D view.

Are there any other factors I should be considering when trying to achieve a position for these pins which is never blocked by buildings of differing heights? I attempted to set the value of the offset dynamically based on the building's height. Perhaps I will play with this some more in the meantime.

Screenshots:

angled view screenshot

top view screnshot

Upvotes: 3

Views: 1719

Answers (1)

emackey
emackey

Reputation: 12448

Modify the pin's actual position by the height of the building. Essentially, position the pin at the center of the roof of the building, not the ground floor of it. Then, turn off the eyeOffset, but keep your VerticalOrigin.BOTTOM setting.

Upvotes: 2

Related Questions