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

CesiumJS
1

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 .

2

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

});

``

3

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.

4

Thanks for your answer!

Now it works.

Dmitri Pisarenko

5

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.