Dynamic polyline

CesiumJS
1

Hello
I'm trying to change the end of polyline position to current mouse cursor
position on MOUSE_MOVE event (in the same way as in Picking example we change position for a label), but the line changes position very very slowly.
May be I do something wrong?

The code:

var viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator : false,
    infoBox : false
});

var scene = viewer.scene;
var handler;

Sandcastle.addDefaultToolbarButton('Show Cartographic Position on Mouse Over', function() {
    var entity = viewer.entities.add({
        label : {
            show : false
        }
    });
    
    var redLine = viewer.entities.add({
    name : 'Red line on the surface',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 1,
        material : Cesium.Color.RED
    }
});

    // Mouse over the globe to see the cartographic position
    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(movement) {
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
        if (cartesian) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
            
            //entity.position = cartesian;
            //entity.label.show = true;
            //entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
            redLine.polyline.positions=Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        longitudeString, latitudeString]);
        } else {
            entity.label.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});

2

Hello,

The line is drawing slowly because it is being drawn asynchronously. To force it to draw synchronously, you can use a CallbackProperty. Here is your updated example:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
selectionIndicator : false,
infoBox : false
});

var scene = viewer.scene;
var handler;

var pos1 = Cesium.Cartesian3.fromDegrees(-75, 35);
var pos2 = Cesium.Cartesian3.fromDegrees(-75, 35);
function getLinePositions() {
return [pos1, pos2];
}

var redLine = viewer.entities.add({
name : ‘Red line on the surface’,
polyline : {
positions : new Cesium.CallbackProperty(getLinePositions, false),
width : 1,
material : Cesium.Color.RED
}
});

// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(movement) {
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
if (cartesian) {
pos2 = cartesian;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

``

Best,

Hannah

3

When calling in the context of a class be sure to call it as this.getLinePositions.bind(this)

1 Like