CesiumWidget / set default extent

CesiumJS
1

hello there,

I’m really impressed by Cesium. Good work! I hope it will be integrated in OpenLayers as soon as possible!

Unfortunately there are just few examples which demostrate the basic functionality of CesiumWidget. For instance, I didnt find a method howto set the initial (default) extent.

Every feedback is appreciated!!

thank you.

jepetko

2

hi,

finally I realized that the Camera object is responsible for changing the map view.

jepetko.

3

I am trying to set a default extent when I start up my app. can't find anything to help guide me? How did you manage to solve this in the end?

4

The Camera Sandcastle example shows how to set the extent of the camera.

http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Camera.html

Using a CesiumWidget (the widget variable below), you can just call something like the following code at startup.

var west = Cesium.Math.toRadians(-77.0);

var south = Cesium.Math.toRadians(38.0);

var east = Cesium.Math.toRadians(-72.0);

var north = Cesium.Math.toRadians(42.0);

var extent = new Cesium.Extent(west, south, east, north);

widget.scene.getCamera().controller.viewExtent(extent);

5

That works perfectly thank you very much!

6

How would I change the height as well?

7

There may be an easier way to do this, but to move the camera closer/farther away from the direction it is currently looking the below 3 lines are all you need. -100000 here will move -100000 meters away from where you are looking, positive values will move you closer.

var camera = scene.getCamera();

var position = camera.direction.multiplyByScalar(-100000);

camera.position = camera.position.add(position);

8

Thank you that is very helpful!

9

Oops, there is an easier way to do it:

scene.getCamera().controller.moveForward(10000);

and

scene.getCamera().controller.moveBackward(10000);

10

Is there a way I can also set my home button to the same default?

11

While not perfect, one way to do this would be to listen to the viewer.homeButton.viewModel.command.beforeExecute event, so you’ll know when the button is clicked. You can then create your own zoom to functionality and cancel the button click.

viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo){

//Zoom to custom extent

//Tell the home button not to do anything.

commandInfo.cancel = true;

});

However, in the long run, I think it would be nice to add a feature to the home button to allow a developer to easily set a default view. I’ll write up an issue for it.

1 Like
12

Thank you very much and yes I think this would be very useful.

13

So I have this which works better it moves to the extent I want it to but it zooms in too far how do I adjust the height for this?

viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo){
//Zoom to custom extent
var west = Cesium.Math.toRadians(-21.0);
var south = Cesium.Math.toRadians(36.0);
var east = Cesium.Math.toRadians(35.0);
var north = Cesium.Math.toRadians(68.0);

        var extent = new Cesium.Extent(west, south, east, north);

        var flight = Cesium.CameraFlightPath.createAnimationExtent(scene, {
            destination : extent
        });
        scene.getAnimations().add(flight);

//Tell the home button not to do anything.
commandInfo.cancel = true;
});

14

Adam, what do you mean that it zooms to far? It zooms exactly to the extent that you provided it, doesn’t it?

15

Yes sorry I have since fixed this issue.