Limit movements area

CesiumJS
1

Hi,

I need to limit the area that the user can move and zoom the map to an extent.

The user can’t see out of the extent. Is it possible? How can I do that?

Thanks!

2

Do you want to limit the viewable area on the screen (where the camera can look) or simply limit the camera position (the area the camera can be.). In 2D, this are almost the same thing, but they are completely different in 3D and Columbus View.

3

I want to limit the viewable area on the screen. And I need it just for 2D.

4

I was curious, so I threw this together.

Go to http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Cesium%20Viewer%20Widget.html and paste the below code. When you switch to 2D mode, you should have what you want. I shut inertia off because it created some unpleasant jumpiness along the edges. This isn’t perfect, and it only works for 2D, but it should get you started.

require([‘Cesium’], function(Cesium) {

“use strict”;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

//Set up the max extent.

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 maxExtent = new Cesium.Extent(west, south, east, north);

viewer.scene.getScreenSpaceCameraController().inertiaTranslate = 0;

viewer.clock.onTick.addEventListener(function() {

if (viewer.scene.mode === Cesium.SceneMode.SCENE2D) {

var topLeft = viewer.scene.getCamera().controller.pickEllipsoid(new Cesium.Cartesian2(0, 0));

var topRight = viewer.scene.getCamera().controller.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth, 0));

var bottomLeft = viewer.scene.getCamera().controller.pickEllipsoid(new Cesium.Cartesian2(0, viewer.canvas.clientHeight));

var bottomRight = viewer.scene.getCamera().controller.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth, viewer.canvas.clientHeight));

if (topLeft && topRight && bottomLeft && bottomRight) {

topLeft = Cesium.Ellipsoid.WGS84.cartesianToCartographic(topLeft);

topRight = Cesium.Ellipsoid.WGS84.cartesianToCartographic(topRight);

bottomLeft = Cesium.Ellipsoid.WGS84.cartesianToCartographic(bottomLeft);

bottomRight = Cesium.Ellipsoid.WGS84.cartesianToCartographic(bottomRight);

var visibleExtent = Cesium.Extent.fromCartographicArray([topLeft, topRight, bottomLeft, bottomRight]);

if (!maxExtent.contains(visibleExtent)) {

var validExtent = visibleExtent.intersectWith(maxExtent);

viewer.scene.getCamera().controller.viewExtent(validExtent, Cesium.Ellipsoid.WGS84);

}

} else {

viewer.scene.getCamera().controller.viewExtent(maxExtent, Cesium.Ellipsoid.WGS84);

}

}

});

Sandcastle.finishedLoading();

});