CODEWITHSUNDEEP
javascriptcesiumjs
danwild
danwild

Reputation: 2046

How to Set the Default View Location (Cesium 1.6)

I want to set the default view/home location for a cesium app.

I don't just want to flyTo the location once; I want the location set as the default/home - so that it can be used elsewhere in the app - e.g. in the HomeButton Widget.

I've tried setting the Camera.DEFAULT_VIEW_RECTANGLE (docs here) like this:

var extent = Cesium.Rectangle.fromDegrees(117.940573,-29.808406,118.313421,-29.468825);

viewer.camera.DEFAULT_VIEW_RECTANGLE = extent;

But it doesn't work..

For completeness, here's how I'm initializing the app:

var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
        }),
        mapProjection : new Cesium.WebMercatorProjection(),
        timeline: false,
        animation: false,
});

Any suggestions? If any further info is needed please let me know.

Upvotes: 12

Views: 10947

Answers (2)

caohong
caohong

Reputation: 31

overwrite home button event, like this:

 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
   function(e) {
      e.cancel = true;
      viewer.scene.camera.flyTo(homeCameraView);
   });

Upvotes: 3

emackey
emackey

Reputation: 12418

DEFAULT_VIEW_RECTANGLE is a static property on Cesium.Camera. This way, you can assign the value before Viewer is constructed, and then newly constructed widgets will initialize to your custom default view rectangle.

EDIT: Also, be aware of Camera.DEFAULT_VIEW_FACTOR. You can set this to zero, to make the default view match your rectangle exactly. Its default value will make your default view stand well back from your chosen rectangle.

var extent = Cesium.Rectangle.fromDegrees(117.940573,-29.808406,118.313421,-29.468825);

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
    }),
    mapProjection : new Cesium.WebMercatorProjection(),
    timeline: false,
    animation: false,
    baseLayerPicker: false
});

Upvotes: 17

Related Questions