Limit movements area

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

});