How to center CesiumJS map in Columbus view at a particular point?

[dmitri.p...@gmail.com]

Hello!

I need to configure my Cesium viewer so that it always centered at certain point (coordinates 43.350116,132.159633) in Columbus mode (2.5D). Whenever I open my page with the Cesium JS viewer, it schould look like this: http://i.stack.imgur.com/RExUz.png .

In order to do this, I started with the following code:

var viewer = new Cesium.Viewer('cesiumContainer',
{
timeline: false,
animation: false,
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW
});

var x = 43.350116;
var y = 132.159633;

var offsetX = 0.07;
var offsetY = 0.07;

var scene = viewer.scene;
var ellipsoid = Cesium.Ellipsoid.WGS84;
var west = Cesium.Math.toRadians(y - offsetY);
var south = Cesium.Math.toRadians(x + offsetX);
var east = Cesium.Math.toRadians(y + offsetY);
var north = Cesium.Math.toRadians(x - offsetX);

var extent = new Cesium.Rectangle(west, south, east, north);
scene.camera.viewRectangle(extent, ellipsoid);


One thing is missing here: In an answer on StackOverflow to a similar question ( http://stackoverflow.com/questions/23779136/cesium-js-center-map-in-2d-scene-mode ) user Sean suggested to call camera.setPositionCartographic ( Cesium.Cartographic.fromDegrees(a,b,c));.

When I try to call

scene.camera.setPositionCartographic(Cesium.Cartographic.fromDegrees(-90, 45,2));

I get the error

Uncaught TypeError: scene.camera.viewPositionCartographic is not a function.

How can I fix it (make sure that the Columbus view is centered at 43.350116,132.159633 when I open the browser) ?

Thanks in advance

Dmitri Pisarenko

P. S.: You can earn StackOverflow reputation points by answering the question there - http://stackoverflow.com/questions/30007546/how-to-center-cesiumjs-map-in-columbus-view-at-a-particular-point .

[Hyper Sonic]

What about using lookAt? This seems to work in 3D and Columbus mode

Sandcastle.addToolbarButton('view', function() {

    var center = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116);

    var heading = Cesium.Math.toRadians(0);

    var pitch = Cesium.Math.toRadians(-40.0);

    var range = 25000.0;

    viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

});

[Hyper Sonic]

Add 

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

if you want to revert the camera's transform back to Earth Fixed.

Rectangle is a special case of parallelogram where all 4 angles are the same, which is only achieved with -90 pitch in Columbus view using a pyramidal perspective frustum.

function rectangleCameraPositionColumbusView https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Camera.js#L1720

Doesn't seem to factor in pitch, only straight down views.

[dmitri.p...@gmail.com]

Thanks for your answer!

Now it works.

Dmitri Pisarenko

[Hyper Sonic]

You're welcome. I was thinking that for Columbus mode defining a parallelogram view might work for non-rolled pitched views: north, south, center, and pitch. From that it calculates what range is needed to make that happen.