Syncing the View of Two Cesium Viewer

[mabo...@gmail.com]

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.

[Matthew Amato]

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);

});

On Thu, Jul 16, 2015 at 5:22 PM, <mabo...@gmail.com> wrote:

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.

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ow...@minutesmatter.com]

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 :)

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();

[Matthew Amato]

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

      });

    }

});