test.js

var conditions = [[true, true]];
var url;
var position;
var model;

var state = 0;

function updateHideCondition(gmlId) {
    conditions.unshift(['${gml_id} === "' + gmlId + '"', false]);
}


function tryGetMap() {
    var vc_map = vcs.vcm.Framework.getInstance().getActiveMap();
    console.log(vc_map.getScene().canvas);
    var cesiumMapLayer;
    for (const map of vc_map.layerCollection) {
        if (map.name === "3D-Objekt Ebene") {
            cesiumMapLayer = map;
        }
    }

    var scene = vc_map.getScene();
    scene.pickTranslucentDepth = true;
    vc_map.mapElement.addEventListener('click', function (e) {
        console.log(e);
        if (e.button === 0 && state === 0) {
            const feature = scene.pick(new Cesium.Cartesian2(e.layerX, e.layerY));
            if (feature) {
                updateHideCondition(feature.getProperty("gml_id"));
                feature.tileset.style = new Cesium.Cesium3DTileStyle({
                    show: {
                        conditions: conditions,
                    },
                });
                position = new Cesium.Cartesian2(e.layerX, e.layerY);
                uploadModel(vc_map);
            }
        }
        if (e.button === 0 && state === 1) {
            state = 2;
        }
        if (e.button === 0 && state === 2) {
            const feature = scene.pick(new Cesium.Cartesian2(e.layerX, e.layerY));
            if (feature) {
                console.log(feature);
                if (feature === model) {
                    openForm();
                }
            }
        }
        vc_map.mapElement.addEventListener("mousemove", (e) => {
            if (state === 1 && model !== undefined) {
                position = new Cesium.Cartesian2(e.layerX, e.layerY);
                var center = vc_map.getScene().pickPosition(position);
                console.log("Picked position: " + center);
                console.log("Converted: " + convert(center));
                model.position = center;
            }
        });

        vc_map.pointerInteractionEvent.addEventListener(function (e) {


        });

    });
}

function convert(pos) {
    let cart = Cesium.Cartographic.fromCartesian(pos);
    //console.log("long: " + cart.longitude + ", lat: " + cart.latitude);
    return Cesium.Cartesian3.fromDegrees(cart.longitude, cart.latitude, 0);

}

function toDegrees(cartesian3Pos) {
    let pos = Cesium.Cartographic.fromCartesian(cartesian3Pos)
    return [pos.longitude / Math.PI * 180, pos.latitude / Math.PI * 180, pos.altitude]
}

// This function is called when the file is uploaded or dropped into the upload window
function uploadModel(vc_map) {
    // Create an input element
    var inputElement = document.createElement("input");

    // Set its type to file
    inputElement.type = "file";

    // Set accept to the file types you want the user to select. 
    // Include both the file extension and the mime type
    inputElement.accept = ".glb, .gltf";

    // set onchange event to call callback when user has selected file
    inputElement.addEventListener("change", function (e) {
        var fileInput = e.target;
        var file = fileInput.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var content = e.target.result;
            var blob = new Blob([content], {
                type: "application/octet-stream",
            });
            url = URL.createObjectURL(blob);
            var center = vc_map.getScene().pickPosition(position);
            console.log(center);

            // Add the model to the viewer
            model = vc_map.getEntities().add({
                name: "gltf",
                position: center,
                model: {
                    uri: url,
                    show: true,
                    scale: 1.0,
                },
            });

            state = 1;
        }
        reader.readAsArrayBuffer(file); // glTF files are binary, so use readAsArrayBuffer instead of readAsText
        console.log(e);
    });


    // dispatch a click event to open the file dialog
    inputElement.dispatchEvent(new MouseEvent("click"));
}

setTimeout(tryGetMap, 1000);  // Retry after 0.5 seconds


window.onclick = function (event) {
    let modal = document.getElementById('loginPopup');
    if (event.target == modal) {
        closeForm();
    }
}