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.