Multiple Billboard drag...leaves the earth!

CesiumJS
1

Hi all,

I’m having some trouble implementing a billboard drag feature. I have so far gotten a singular drag to work, but unfortunately am having trouble implementing that with multiple billboards selected at once. The idea is, on selection of one billboard, move all (selected) billboard with it. My result so far can be seen in this Sandcastle, or in this screenshot:

image
image674×492 94.9 KB

I have tried a few different ways to get the icons to stick down on the globe, including setting cartesian3.z = 0, changing to a cartographic and setting that height to 0 but to no avail so far - when doing those, the billboards sometimes all stay on earth but dragging them around results in the billboards no longer being the same distance apart from each other as they started out.

For the purposes of this feature I believe it would be ideal to keep the billboards relative to each other in terms of physical distance (meters, etc), but could also accept relative to initial lat/lon.

Any help is greatly appreciated!!

quick followup - this is one example of keeping the billboards tied to earth but not relative to each other. In this sandcastle I’ve added heightReference: Cesium.HeightReference.CLAMP_TO_GROUND which does lock the billboards on the globe but pretty clearly does not keep them relative to each other as shown in the screenshots:

image
image616×490 73 KB

dragged halfway around the world they are transposed:
image
image561×489 71.8 KB

figured some more context would be helpful :slight_smile:

2

Hi @tyler.1.smith,

It sounds like you’ve found how to clamp the billboards to the ground, which solves part of your problem. The other part is that you want to preserve distance, correct?

Keep in mind, there are a few different ways of calculating distance, such as geodesic, rhumb/loxodrome, or world-space distance that does not conform to the surface of the globe.

As a simple solution, perhaps you could convert the Cartesian3 point that was picked, and convert it to a Cartographic point (latitude, longitude, height) with viewer.scene.ellipsoid.cartesianToCartographic(point), then offset the other billboards by a latitude or longitude value.