Syncing the View of Two Cesium Viewer

CesiumJS
1

I have two cesiumViewer on the same page showing different data. What is the best way to sync the view, so if the user rotates one globe the other viewer also changes it's camera to the same location as the other automatically.

2

Give this a try.

var masterCamera = masterViewer.scene.camera;

var slaveCamera = slaveViewer.scene.camera;

slaveViewer.scene.preRender.addEventListener(function(){

Cesium.Cartesian3.clone(masterCamera.position, slaveCamera.position);

Cesium.Cartesian3.clone(masterCamera.direction, slaveCamera.direction);

Cesium.Cartesian3.clone(masterCamera.up, slaveCamera.up);

Cesium.Cartesian3.clone(masterCamera.write, slaveCamera.write);

slaveCamera.lookAtTransform(masterCamera.transform);

});

3

How can we get the the camera to sync zoom levels between 3D (master) and a 2D (slave)?

I have a tri viewer that I want the top left to track a selected entity from the 3D bottom viewer and the top right to be a 2D viewer with the same zoom level as the 3D.

Here is my rough first cut...with the help of Hannah earlier today :slight_smile:

var topLeftDiv = document.createElement('div');
var topRightDiv = document.createElement('div');
var bottomDiv = document.createElement('div');
topLeftDiv.style.height='30%';
topLeftDiv.style.width='50%';
topLeftDiv.style.float= 'left';
topRightDiv.style.height='30%';
topRightDiv.style.width='50%';
topRightDiv.style.float= 'left';
bottomDiv.style.height='70%';
document.body.appendChild(topLeftDiv);
document.body.appendChild(topRightDiv);
document.body.appendChild(bottomDiv);

var viewerTopLeft = new Cesium.Viewer(topLeftDiv, {
    timeline : false,
    animation : false,
    useDefaultRenderLoop : false,
    infoBox : false,
    selectionIndicator : false,
    navigationHelpButton: false,
    geocoder: false,
    homeButton: false,
    baseLayerPicker :false,
    fullscreenButton: false,
    sceneModePicker : false
});

var viewerTopRight = new Cesium.Viewer(topRightDiv, {
    timeline : false,
    animation : false,
    //sceneMode : Cesium.SceneMode.SCENE2D,
    useDefaultRenderLoop : false,
    infoBox : false,
    selectionIndicator : false,
    navigationHelpButton: false,
    baseLayerPicker :false,
    geocoder: false,
    homeButton: false,
    fullscreenButton: false,
    sceneModePicker : false
});

var viewerBottom = new Cesium.Viewer(bottomDiv, {
    //imageryProvider: baseImagery
    fullscreenButton: false,
    navigationHelpButton: false,
    geocoder: false
});

//Diable animation because we will manually be updating the clock
viewerTopLeft.clock.animating = false;
viewerTopRight.clock.animating = false;

//Slave the top widgets to render to the bottom.
viewerBottom.clock.onTick.addEventListener(function(clock, currentTime) {
    viewerTopLeft.clock.currentTime = clock.currentTime;
    viewerTopRight.clock.currentTime = clock.currentTime;
    viewerTopLeft.clock.onTick.raiseEvent(viewerTopLeft.clock);
    viewerTopRight.clock.onTick.raiseEvent(viewerTopRight.clock);
    viewerTopLeft.resize();
    viewerTopRight.resize();
    viewerTopLeft.render();
    viewerTopRight.render();
});

//Slave the top right camera zoom to bottom
var masterCamera = viewerBottom.scene.camera;
var slaveCamera = viewerTopRight.scene.camera;

viewerTopRight.scene.preRender.addEventListener(function(){
    Cesium.Cartesian3.clone(masterCamera.position, slaveCamera.position);
    Cesium.Cartesian3.clone(masterCamera.direction, slaveCamera.direction);
    Cesium.Cartesian3.clone(masterCamera.up, slaveCamera.up);
    Cesium.Cartesian3.clone(masterCamera.write, slaveCamera.write);
    slaveCamera.lookAtTransform(masterCamera.transform);
});

var topLeftData = viewerTopLeft.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));
var topRightData = viewerTopRight.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));
viewerBottom.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));

Cesium.knockout.getObservable(viewerBottom.infoBox.viewModel, 'titleText').subscribe(function(data){
    if (viewerBottom.selectedEntity){
        viewerTopLeft.trackedEntity = viewerTopLeft.dataSources.get(0).entities.getById(viewerBottom.selectedEntity.id);
        //viewerTopLeft.zoomTo(viewerTopLeft.dataSources.get(0).entities.getById(viewerBottom.selectedEntity.id));
    }
});

Sandcastle.finishedLoading();

4

Sorry for never getting back to you on this. Something like the below should work in all scene modes.

var masterViewer = new Cesium.Viewer(‘cesiumContainer’);

var slaveViewer = new Cesium.Viewer(‘cesiumContainer2’);

var masterCamera = masterViewer.scene.camera;

var slaveCamera = slaveViewer.scene.camera;

slaveViewer.scene.preRender.addEventListener(function(){

if(slaveViewer.scene.mode !== Cesium.SceneMode.MORPHING){

slaveCamera.setView({

position : masterCamera.position,

heading : masterCamera.heading,

pitch : masterCamera.pitch,

roll : masterCamera.roll

});

}

});