draw.js

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;
}