I have a collection of entities which have both billboards and labels. Each entity's position gets updated by datasource events/updates such that the entities move with both image (billboard) and labels moving in tandem. In addition to this I have a handler which looks for MOUSE_MOVE to update the label's pixelOffset such that the labels may be dragged away from their associtated billboard, but still both move in tandem as per the datasource updates. My question is: Is there a way to join a billboard and its entity paired label with a line? I've tried adapting emackey's solution, but no luck.
The following will correctly update the position of my label but no line gets drawn:
handler.setInputAction((( movement ) => {
if (dragging) {
res = new Cesium.Cartesian2();
let end = movement.endPosition;
Cesium.Cartesian2.subtract(end, start, res);
console.log('MOUSE_MOVE ', res);
entity.label.pixelOffset = res;
var canvas = document.createElement('canvas');
var context2D = canvas.getContext('2d');
var billboards = viewer.scene.primitives.add( new Cesium.BillboardCollection() );
var offsetX = res.x, offsetY = res.y;
canvas.width = Math.abs(offsetX);
canvas.height = Math.abs(offsetY);
context2D.beginPath();
context2D.lineWidth = 2;
context2D.strokeStyle = '#ffffff';
context2D.moveTo((offsetX < 0) ? -offsetX : 0, (offsetY < 0) ? -offsetY : 0);
context2D.lineTo((offsetX < 0) ? 0 : offsetX, (offsetY < 0) ? 0 : offsetY);
context2D.stroke();
var redLine = billboards.add({
color : Cesium.Color.RED,
image : canvas,
pixelOffset: new Cesium.Cartesian2(offsetX * 0.5, offsetY * 0.5),
position : entity.position
});
}
}), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
Any help would be greatly appreciated.
Thanks,
Ian