Moving Polylines with Mouse

CesiumJS
1

Hi,

Using the CallBack function, I have been able to make points and boxes and most other entities move with the mouse in a drag-and-drop way. For some reason, however, I cannot get it to work with polylines.

Here is an example with a few points

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

var west = -110;
var south = 20;
var east = -100;
var north = 25;

var point = viewer.entities.add({
    position : new Cesium.CallbackProperty(function() {
        return Cesium.Cartesian3.fromDegrees(west, (north + south) / 2);
    }, false),
    point : {
        pixelSize : 10,
        color : Cesium.Color.YELLOW
    }
});

var point2 = viewer.entities.add({
    position : new Cesium.CallbackProperty(function() {
        return Cesium.Cartesian3.fromDegrees(west, (north + 20 + south) / 2);
    }, false),
    point : {
        pixelSize : 10,
        color : Cesium.Color.YELLOW
    }
});

var dragging;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(click) {
    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject) && pickedObject.id === point) {
        dragging = pickedObject;
        viewer.scene.screenSpaceCameraController.enableRotate = false;
    }
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function() {
    if (Cesium.defined(dragging)) {
        dragging = undefined;
        viewer.scene.screenSpaceCameraController.enableRotate = true;
    }
}, Cesium.ScreenSpaceEventType.LEFT_UP);

handler.setInputAction(function(movement) {
    var position = viewer.camera.pickEllipsoid(movement.endPosition);
    if (!Cesium.defined(position) || !dragging) {
        return;
    }
    
    var positionCartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);

    west = Cesium.Math.toDegrees(positionCartographic.longitude);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.zoomTo(viewer.entities);

and here is an example of a polyline where it does not work; however, if you comment the polyline out and use the red box, it will work.

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

/*
var entity = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});
*/

var polyline = viewer.entities.add({
    name : "Polyline",
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([0, 0, 10, 0, 10, 10, 20, 10]),
        width : 2,
        material : Cesium.Color.BLUE
    }
});

var mousePosition = new Cesium.Cartesian2();
var mousePositionProperty = new Cesium.CallbackProperty(function(time, result){
    var position = scene.camera.pickEllipsoid(mousePosition, undefined, result);
    var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
    cartographic.height = 300000.0;
    return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
}, false);

var scene = viewer.scene;
var dragging = false;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(
    function(click) {
        var pickedObject = scene.pick(click.position);
        if (Cesium.defined(pickedObject) && (pickedObject.id === polyline)) {
            dragging = true;
            scene.screenSpaceCameraController.enableRotate = false;
            Cesium.Cartesian2.clone(click.position, mousePosition);
            polyline.position = mousePositionProperty;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_DOWN
);

handler.setInputAction(
    function(movement) {
        if (dragging) {
            Cesium.Cartesian2.clone(movement.endPosition, mousePosition);
        }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

handler.setInputAction(
    function(click) {
        if(dragging) {
          dragging = false;
          scene.screenSpaceCameraController.enableRotate = true;
          polyline.positions = scene.camera.pickEllipsoid(click.position);
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

Any suggestions is very appreciated because I cannot figure this out. Thank you.

2

Hello,

In your LEFT_DOWN handler, setting polyline.position = mousePositionProperty; isn’t doing anything because ‘position’ isn’t a property of polyline. Instead, you need to alter the values in the ‘polyline.positions’ array

Best,

Hannah