Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Draw a rectangle in Cesium with shift-click-drag
var viewer = new Cesium.Viewer('cesiumContainer', {
targetFrameRate: 60,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
baseLayerPicker: false,
clock: new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601('1880-01-01'),
currentTime: Cesium.JulianDate.fromIso8601('1880-01-01'),
stopTime: Cesium.JulianDate.fromIso8601("2013-12-01"),
clockRange: Cesium.ClockRange.CLAMPED,
canAnimate: false,
shouldAnimate: false,
multiplier: 31622400 //Fast forward 1 year a second
}),
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer',
enablePickFeatures: false
}),
//Saves GPU memory
scene3DOnly: true,
automaticallyTrackDataSourceClocks: false
});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.screenSpaceCameraController.enableTranslate = false;
viewer.scene.screenSpaceCameraController.enableTilt = false;
viewer.scene.screenSpaceCameraController.enableLook = false;
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
viewer.imageryLayers.get(0).brightness = 0.7;
var selector;
var rectangleSelector = new Cesium.Rectangle();
var screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var cartesian = new Cesium.Cartesian3();
var tempCartographic = new Cesium.Cartographic();
var center = new Cesium.Cartographic();
var firstPoint = new Cesium.Cartographic();
var firstPointSet = false;
var mouseDown = false;
var camera = viewer.camera;
//Draw the selector while the user drags the mouse while holding shift
screenSpaceEventHandler.setInputAction(function drawSelector(movement) {
if (!mouseDown) {
return;
}
cartesian = camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid, cartesian);
if (cartesian) {
//mouse cartographic
tempCartographic = Cesium.Cartographic.fromCartesian(cartesian, Cesium.Ellipsoid.WGS84, tempCartographic);
if (!firstPointSet) {
Cesium.Cartographic.clone(tempCartographic, firstPoint);
firstPointSet = true;
}
else {
rectangleSelector.east = Math.max(tempCartographic.longitude, firstPoint.longitude);
rectangleSelector.west = Math.min(tempCartographic.longitude, firstPoint.longitude);
rectangleSelector.north = Math.max(tempCartographic.latitude, firstPoint.latitude);
rectangleSelector.south = Math.min(tempCartographic.latitude, firstPoint.latitude);
selector.show = true;
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE, Cesium.KeyboardEventModifier.SHIFT);
var getSelectorLocation = new Cesium.CallbackProperty(function getSelectorLocation(time, result) {
return Cesium.Rectangle.clone(rectangleSelector, result);
}, false);
screenSpaceEventHandler.setInputAction(function startClickShift() {
mouseDown = true;
selector.rectangle.coordinates = getSelectorLocation;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN, Cesium.KeyboardEventModifier.SHIFT);
screenSpaceEventHandler.setInputAction(function endClickShift() {
mouseDown = false;
firstPointSet = false;
selector.rectangle.coordinates = rectangleSelector;
}, Cesium.ScreenSpaceEventType.LEFT_UP, Cesium.KeyboardEventModifier.SHIFT);
//Hide the selector by clicking anywhere
screenSpaceEventHandler.setInputAction(function hideSelector() {
selector.show = false;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
selector = viewer.entities.add({
selectable: false,
show: false,
rectangle: {
coordinates: getSelectorLocation,
material: Cesium.Color.BLACK.withAlpha(0.5)
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.