Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment