1. A concise explanation of the problem you're experiencing.
I'm trying to attach a poly line to two point entities and make it so that if i move a point, it will automatically move the polyline as well.
I was thinking i could possibly use Cesium.ReferenceProperty because i was able to make a single point attach to another point and move along with it, but i couldn't get it to work with polyline... maybe there's a better way
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
var vm = {};
vm.viewer = new Cesium.Viewer('cesiumContainer');
var scene = vm.viewer.scene;
function disableCameraMotion(state){
vm.viewer.scene.screenSpaceCameraController.enableRotate = state;
vm.viewer.scene.screenSpaceCameraController.enableZoom = state;
vm.viewer.scene.screenSpaceCameraController.enableLook = state;
vm.viewer.scene.screenSpaceCameraController.enableTilt = state;
vm.viewer.scene.screenSpaceCameraController.enableTranslate = state;
}
var position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0);
var positionCBP = function(){
return position;
};
var position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0);
var positionCBP = function(){
return position;
};
var myEllipse = vm.viewer.entities.add({
id: 'ID1',
name : 'Red Ellipse on surface',
position: new Cesium.CallbackProperty(positionCBP, false),
point: {
pixelSize: 30,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1.5
}
});
var myEllipse2 = vm.viewer.entities.add({
id: 'ID2',
name : 'Red Ellipse on surface',
position: Cesium.Cartesian3.fromDegrees(-114.0, 36.0),
point: {
pixelSize: 30,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1.5
}
});
// i get a rendering error if i try to do this, i think it doesn't like ReferenceProperty, and/or PositionPropertyArray
var myLeg = vm.viewer.entities.add({
polyline: {
positions: new Cesium.PositionPropertyArray([
new Cesium.ReferenceProperty(vm.viewer.entities, 'ID1', [ 'position' ] ),
new Cesium.ReferenceProperty(vm.viewer.entities, 'ID2', [ 'position' ] )
]),
width: 5,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.RED,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2.5
})
}
});
// Using this for mouse click and drag movement
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject) && pickedObject.id === myEllipse){
vm.picked = true;
disableCameraMotion(false);
console.log('here');
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function(movement) {
if (!vm.picked){
return;
}
position = vm.viewer.camera.pickEllipsoid(movement.endPosition,
scene.globe.ellipsoid);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
// if picked
vm.picked = false;
disableCameraMotion(true);
}, Cesium.ScreenSpaceEventType.LEFT_UP);
// What's strange is ReferenceProperty works for position on a point entity.... when i move my first entity, it moves this new object as well
var object2 = new Cesium.Entity({id:'object2', point: {
pixelSize: 10,
color: Cesium.Color.GREEN,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 1.5
}});
object2.model = new Cesium.ModelGraphics();
object2.position = new Cesium.ReferenceProperty(vm.viewer.entities, 'ID1', ['position']);
vm.viewer.entities.add(object2);
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I need to be able to move, edit, or add points that connect polylines. e.g. A polyline is in between two point entities. If i click and drag a point on one end to move it, i want that poly line to update with it.
4. The Cesium version you're using, your operating system and browser.
Windows 10
Chrome
Cesium 1.50
Does anyone know if its possible to achieve what I need to do?