CesiumJS how to keep the zoom level of a Cesium.Viewer when the viewer.trackedEntity is changed

Question

I have 2 different Cesium.Viewer instances, I want sync the 2 viewers when user zoom either one of them.

How to do that?

update: In my app, I have 2 different Cesium.Viewer instances. But for this question here, I think it has nothing to do with the number of Cesium.Viewer. So I updated the question as below:

I have 2 planes flying on a Cesium.Viewer as shown in the attached screenshot, one is on the red course (ref as red plane) and the other is on the red course (ref as red plane).

Step-1: I tracked the yellow plane by double click it, then it looks like pic-1;

Step-2: I zoom out it to pic-2;

Step-3: I changed to track the red plane by double click it, and it looks like pic-3;

Step-4: I zoom out it to pic-4;

Whenever I changed the tracked entity (as step-3), I need to zoom out it manually again.

So, my question is how to keep the zoom level when changing the tracked entity?

Answer 1

1. Save current camera.view.scene
2. Detect moment when trackedEntity changed
3. Restore camera.view.scene

To save and restore you can use this code as an example:

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

Cesium.CzmlDataSource.load('../../SampleData/simple.czml').then(function(dataSource) {
    viewer.dataSources.add(dataSource);

    Sandcastle.addToolbarButton('Save View', function() {
        savedView.offset = viewer.scene.camera.position.clone();
    });

    Sandcastle.addToolbarButton('Restore View', function() {
        viewer.trackedEntity._viewFrom._value = savedView.offset;
    });
});

Note: viewFrom param should be in source czml for track. Smth like:

 "viewFrom": {
    "cartesian": [
      -2080,
      -1715,
      779
    ]
  },