[GIS] Cesium js, Draw line binding a label to a position

cesiumlabelinglinepixel

I would like to draw a line binding a entity to its label with an offset.
CesiumJS allows to offset the label, however its not possible to draw a line (or polyline) from a position to an offset like the red line in this image.

enter image description here

How can i do it? any sugestion?

i'm using pixel offset. but there is no problem to use eye offset

 labels.add({
        position: Cesium.Cartesian3.fromDegrees(-75.1641667, 29.9522222),
        text: 'Another label',
        pixelOffset: new Cesium.Cartesian2(100,-100)

    });

Best Answer

The best way to do this is probably a billboard with an image of the line on it. The length will never change if it's a pixelOffset. You can put an image of a white line, and use the color property to set any other color.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var labels = scene.primitives.add(new Cesium.LabelCollection());
labels.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 29.9522222),
    text: 'Another label',
    pixelOffset: new Cesium.Cartesian2(100, -100)
});

var billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
    color : Cesium.Color.RED,
    image : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAyUlEQVR42u3RQRHAMBADsQRWwRRosBTMxSzqh3bGBKy19Hsz82QnG28UYQApw0ifV4owstczRRjZ9g4MGDBgCAYMwYAhGDAEA4ZgwIABAwYMGIIBQzBgCAYMwYAhGDBgwIABA4ZgwBAMGIIBQzBgCAYMGDBgwIAhGDAEA4ZgwBAMGIIBAwYMGDBgCAYMwYAhGDAEA4ZgwIABAwYMGIIBQzBgCAYMwYAhGDBgwIABA4ZgwBAMGIIBQzBgCAYMGDBgwKgDgVEGAqOoCyAqoIT32fmkAAAAAElFTkSuQmCC',
    pixelOffset: new Cesium.Cartesian2(50, -50),
    position : Cesium.Cartesian3.fromDegrees(-75.1641667, 29.9522222)
});
Related Question