Modify Cesium Framework to include possibility to draw lines and dotted lines

CesiumJS
1

I want to change the Cesium Framework code to be able to draw a line to connect a billboard to a label. The line must be able to adapt in size and length when the billboard or label change position.

Anyone knows where in the Cesium code I could modify to achieve this kind of features? I would like to have regular lines and dotted lines.

Thanks!

2

Hello,

There is nothing like this built into Cesium, so you would have to write custom code to handle this functionality.

This demo will show you how to get the Cartesian3 position from a mouse screen position: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

There is demo code in forum this post for drawing a wall between two billboards. You can do the same thing using a Polyline instead of a Wall.

https://groups.google.com/forum/#!searchin/cesium-dev/CallbackProperty|sort:date/cesium-dev/nypZFdPLjhs/rRH_NdUvhVIJ

There is a demo for drawing polylines here: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polyline.html&label=Geometries

However, there isn’t a way to draw dotted lines. You would have to write a custom material.

Hope this helps!

Hannah

3

Dotted/dashed lines are actually difficult to do properly in 3D but they are on the roadmap (though we don’t have an ETA yet) keep an eye on this issue for updates: https://github.com/AnalyticalGraphicsInc/cesium/issues/2584

Connecting to Entities like you describe is fairly easy to do out of the box. Here’s some code you can paste into Sandcastle and play with to get started. There are several different ways to do it but they all involve creating a polyline with positions that reference the connected entities’ positions. This code is for predominately static data. If the positions of your objects are moving frequently, you’ll want to use an appropriate dynamic property (such as SampledPositionProperty). The setValue in the toolbar button is just to change the values, normally you wouldn’t do it this way unless your data was mostly static.

Hope this helps, let me know if you have any questions.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var entity1 = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(0, 0, 10000),

label : {

text: ‘Hello!’

}

});

var entity2 =viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(0, 0, 0),

billboard : {

image : ‘…/images/Cesium_Logo_overlay.png’

}

});

var connection =viewer.entities.add({

polyline : {

positions : new Cesium.PositionPropertyArray([entity1.position, entity2.position])

}

});

Sandcastle.addToolbarButton(‘Change positions’, function(){

entity1.position.setValue(Cesium.Cartesian3.fromDegrees(Math.random()-0.5, Math.random()-0.5, 10000));

entity2.position.setValue(Cesium.Cartesian3.fromDegrees(Math.random()-0.5, Math.random()-0.5, 0));

});

viewer.zoomTo(viewer.entities);

4

Hello!

First of all, thanks for taking some time to help me.

I need a solution that changes the pixelOffset (or eyeOffset) of the label.

Hannah’s solution allows to drag things around, and I will need that, but in a particular way:

  • When I click the billboard and drag it I want to change its position and drag the label and line along. (they should move as they are one object)
  • When I click the label and drag it I just want to change the offset of the label and maintain the position of the label, billboard and line (the line just need to adapt to mantain the connection. In this case the billboard do not move on the map).

Is there a way to do that?

Thanks a lot!