Looking to do a popsicle stick in cesium. I can post pictures later currently traveling . What i want is a line going from the ground to the billboard and label. Can this be done with an extruded shape? Any existing examples so im not reinventing the wheel?
Hello Brian,
Here is an example for how to do that using an entity to create a Billboard and a Polyline :
var viewer = new Cesium.Viewer(‘cesiumContainer’, {timeline : false, animation : false});
var position = Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667, 500.0);
var groundPosition = Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667);
var entity = viewer.entities.add({
position : position,
billboard :{
image : ‘…/images/Cesium_Logo_overlay.png’
},
polyline : {
positions : [groundPosition, position],
width : 10,
followSurface : false,
material : Cesium.Color.ROYALBLUE
}
});
viewer.zoomTo(entity);
``
Let me know if this is different from what you were looking for.
Best,
Hannah
Thank you! Here is what I came up with
{
“name”:“EMD Millipore”,
“id”:“172315”,
“show”:true,
“position”:{
“cartographicDegrees”:[
-117.1592478242519,
33.49914637706573,
23
]
},
“parent”:“4723”,
“description”:“some text”,
“billboard”:{
“show”:true,
“horizontalOrigin”:“CENTER”,
“verticalOrigin”:“TOP”,
“image”:"/project/442/BioTech-Final/files/emdMilli.png",
“scale”:0.5,
“color”:{
“rgba”:[
255,
255,
255,
255
]
}
},
“label”:{
“horizontalOrigin”:“CENTER”,
“verticalOrigin”:“BOTTOM”,
“scale”:0,
“style”:“FILL_AND_OUTLINE”,
“text”:“EMD Millipore”,
“fillColor”:{
“rgba”:[
255,
255,
255,
255
]
},
“outlineColor”:{
“rgba”:[
0,
0,
0,
255
]
},
“outlineWidth”:3
},
“polyline” : {
“positions” : { “cartographicDegrees”: [-117.1592478242519,
33.49914637706573,
23, -117.1592478242519,
33.49914637706573,
0]},
“width” : 2,
“followSurface” : false,
“material” : { “solidColor”: { “color”: { “rgba”: [ 0, 255, 255, 178 ] } } }
}
}
The issue I have is I am using the placemark position as the start and then the same with a height of 0 for the bottom however this starts at the top of the billboard. How would I make it start at the bottom?
The line is starting at the top of the billboard because you are using VerticalOrigin.TOP.
Instead, you should set the billboard’s verticalOrigin to VerticalOrigin.BOTTOM, then you can place the label above the billboard using a pixelOffset. A negative Y value equal to the billboard image’s height should do the trick.
-Hannah