Cesium-drawLine_1

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

var screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

var startPoint = new Cesium.Cartographic();
var endPoint = new Cesium.Cartographic();


// Event handler for left click
screenSpaceEventHandler.setInputAction(function(click) {

    // get position  of click
    var clickPosition = viewer.camera.pickEllipsoid(click.position);


    // Event handler for mouse movement
    screenSpaceEventHandler.setInputAction(function(movement) {

        // get position of mouse
        var mousePosition = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid, mousePosition);


        // create an empty array where the coordinates of the line will be stored
        var lineArray = [];

        // convert mouse and click position to lon/lat coordinates and add them to the array
        var cartographicMouse = Cesium.Ellipsoid.WGS84.cartesianToCartographic(mousePosition);
        var cartographicClick = Cesium.Ellipsoid.WGS84.cartesianToCartographic(clickPosition);

        startPoint.longitude = cartographicClick.longitude;
        startPoint.latitude = cartographicClick.latitude;
        endPoint.longitude = cartographicMouse.longitude;
        endPoint.latitude = cartographicMouse.latitude;

        var x = Cesium.Math.toDegrees(cartographicMouse.longitude);
        var y = Cesium.Math.toDegrees(cartographicMouse.latitude);
        lineArray.push(x);
        lineArray.push(y);        

        x = Cesium.Math.toDegrees(cartographicClick.longitude);
        y = Cesium.Math.toDegrees(cartographicClick.latitude);
        lineArray.push(x);
        lineArray.push(y);

        // use callback property to get cartesian coordinates for the line; if there is an existing line remove it, store in varible
        var linePosition = new Cesium.CallbackProperty(function(time, result) {
            if (typeof tempLine !== 'undefined') {
                viewer.entities.remove(tempLine);
            }
            return new Cesium.Cartesian3.fromDegreesArray(lineArray);
        }, false);

        // draw tempLine
        var tempLine = viewer.entities.add({
            polyline: {
                positions: linePosition,
                width: 5,
                material: Cesium.Color.RED
            }
        });

        // Event handler for second click; draw line with position from variable linePosition
        screenSpaceEventHandler.setInputAction(function(click) {

            // get position  of click
            var clickPosition = viewer.camera.pickEllipsoid(click.position);

            var Line = viewer.entities.add({
                polyline: {
                    positions: linePosition,
                    width: 5,
                    material: Cesium.Color.RED
                }
            });
            
            screenSpaceEventHandler = screenSpaceEventHandler && screenSpaceEventHandler.destroy();


        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);