viewer.scene.fog.enabled = false; var oldstyling = null; var dragging = undefined; var drawing = false; var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); var rectVisible = false; var Pickers_3DTile_Activated = true; var bboxactivated = false; var currentLayer; var drawBox = false //draw rectangle function drawBounding() { rectVisible = true; drawing = false; Pickers_3DTile_Activated = false; toggleRectangleAndPins(true); drawBox = true } //fills coordinates array (used to fetch data) function createRequest_BB() { console.log("-->clicked confirm button") if (drawBox === false) { swal("CAN'T LOAD DATA!", "mark an area first!", "error"); } else { var degreeArray = getPinPositionsAsDegreeArray(); degreeArray.forEach(d => { coordinatesBB.push(d) }) processData() document.getElementById("loader").style.visibility = "visible" document.getElementById("cesiumContainer").style.opacity = "0.5"; } } var postServerResult; const loadBBOX_Testbed14 = false; const loadBBOX_STTContainers = true; var tileset; var minlon = 40.71778771238832; var minlat = -74.00635826977239; var maxlon = 40.75070138933127; var maxlat = -73.97393297660074; //reset the 3D visualization and delete rectangle function reset() { //hides drawing drawing = false; rectVisible = false; Pickers_3DTile_Activated = true; toggleRectangleAndPins(false); //resets BB, charts & allert box coordinatesBB = [] resetCharts() drawBox = false console.log("-->data has been reset") } //part for drawing BoundingBox var pinBuilder = new Cesium.PinBuilder(); var pin1 = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(74.018997336757550443, 40.69846622682742776, 0.0), billboard: { image: new Cesium.ConstantProperty(pinBuilder.fromText("1", Cesium.Color.BLUE, 48)), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, show: false, disableDepthTestDistance: "999999" } }); var pin2 = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(73.969593360166612683, 40.758282705492597131, 0.0), billboard: { image: new Cesium.ConstantProperty(pinBuilder.fromText("2", Cesium.Color.BLUE, 48)), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, show: false, disableDepthTestDistance: "999999" } }); var bbRectangle = viewer.entities.add({ rectangle: { coordinates: new Cesium.CallbackProperty(getPinPositions, false), material: Cesium.Color.YELLOW.withAlpha(0.2), outline: true, outlineColor: Cesium.Color.WHITE, extrudedHeight: 2, show: false } }); //Show/hide pins & rectangle function toggleRectangleAndPins(show) { pin1.billboard.show = show; pin2.billboard.show = show; bbRectangle.rectangle.show = show; } handler.setInputAction(function (click) { if (rectVisible) { drawing = true; var position = getMousePosition(click.position); pin1.position._value = position; viewer.scene.screenSpaceCameraController.enableRotate = false; } }, Cesium.ScreenSpaceEventType.LEFT_DOWN); handler.setInputAction(function () { if (rectVisible && drawing) { drawing = false; rectVisible = false; viewer.scene.screenSpaceCameraController.enableRotate = true; } }, Cesium.ScreenSpaceEventType.LEFT_UP); //drag PINs handler.setInputAction(function (movement) { if (rectVisible) { var position = getMousePosition(movement.endPosition); if (position !== -1) { pin2.position._value = position; if (!drawing) { pin1.position._value = position; } } } /* var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); longitudeString = Cesium.Math.toDegrees(cartographic.longitude); latitudeString = Cesium.Math.toDegrees(cartographic.latitude); entity_showLatLon.position = cartesian; entity_showLatLon.label.text = 'Lat: ' + (' ' + latitudeString) + '\u00B0' + '\nLon: ' + (' ' + longitudeString) + '\u00B0'; */ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); //returns the position of the mouse function getMousePosition(mousePosition) { var ray = viewer.camera.getPickRay(mousePosition); var position = viewer.scene.globe.pick(ray, viewer.scene); if (!Cesium.defined(position) || !(dragging !== undefined || rectVisible === true)) { return -1; } return position; } // Returns the positions of the pins in degrees function getPinPositionsAsDegreeArray() { var carto1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pin1.position.getValue(0)); var carto2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pin2.position.getValue(0)); var lon1 = Cesium.Math.toDegrees(carto1.longitude); var lat1 = Cesium.Math.toDegrees(carto1.latitude); var lon2 = Cesium.Math.toDegrees(carto2.longitude); var lat2 = Cesium.Math.toDegrees(carto2.latitude); var leftLat = 0; var rightLat = 0; if (lat1 < lat2) { leftLat = lat1; rightLat = lat2; } else { leftLat = lat2; rightLat = lat1; } var bottomLng = 0; var topLng = 0; if (lon1 < lon2) { bottomLng = lon1; topLng = lon2; } else { bottomLng = lon2; topLng = lon1; } return [bottomLng, leftLat, topLng, rightLat]; } function getPinPositions() { var degreeArray = getPinPositionsAsDegreeArray(); var rectangle = Cesium.Rectangle.fromDegrees(degreeArray[0], degreeArray[1], degreeArray[2], degreeArray[3]); return rectangle; }