Last active
November 26, 2023 05:55
-
-
Save theplatapi/0a7d789afc8028a3c20b to your computer and use it in GitHub Desktop.
Draw a rectangle in Cesium with shift-click-drag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
what a nice code !