Initial commit

Lts/Tools/Mout/ShowVWM/3DVMModel.js

@@ -0,0 +1,296 @@
+class polyoli {
+    constructor(name) {
+        this.path = [];
+        this.graphic = null;
+        this.name = name;
+        this.alternativGraphic = null;
+    }
+    closeRing() {
+        this.path.push(this.path[0]);
+    }
+}
+
+
+var parser, xmlDoc, PolyArray;
+var XMLFile = null;
+var wallnumber = 0;
+var PolygonObj = [];
+var refPoint = {
+    y: 493081,
+    x: 5878329,
+};
+parser = new DOMParser();
+var graphicLayer = null;
+var PolyObjArray = [];
+var selected = null;
+var alternativeSymbol = {
+    type: "simple-fill",
+    color: [128, 0, 0, 0.5],
+    outline: {
+        color: [0, 0, 0],
+        width: 1
+    }
+};
+
+
+window.onload = function () {
+    document.getElementById('fileUpload').addEventListener('change', updateFile, false);
+    generateMap();
+}
+
+function generateMap() {
+    require([
+        "esri/Map",
+        "esri/views/SceneView",
+        "esri/layers/TileLayer",
+        "esri/layers/SceneLayer",
+        "esri/layers/GraphicsLayer",
+        "dojo/domReady!",
+    ],
+        function (
+            Map,
+            SceneView,
+            TileLayer,
+            SceneLayer,
+            GraphicsLayer,
+        ) {
+            map = new Map({
+                // basemap: "topo"
+            });
+            view = new SceneView({
+                container: "mapDiv",
+                map: map,
+                scale: 1000,
+                camera: { // autocasts as new Camera()
+                    position: { // autocasts as new Point()
+                        x: 8.896638,
+                        y: 53.054441,
+                        z: 40
+                    }
+                }
+            });
+            tile = new TileLayer({
+                url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/Hemelingen_TIF_WebMerc/MapServer",
+            })
+            feature = new SceneLayer({
+                url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer",
+            });
+            map.add(feature);
+            map.add(tile);
+            graphicLayer = new GraphicsLayer();
+            map.add(graphicLayer);
+            view.on("click", eventHandler);
+            function eventHandler(event) {
+                view.hitTest(event).then(getGraphics);
+                function getGraphics(response) {
+                    selected = response.results[0].graphic.__accessor__.store._values.attributes.name;
+                }
+            };
+            view.popup.on("trigger-action", function (event) {
+                if (event.action.id === "highlight") {
+                    PolyObjArray.forEach(polyObj => {
+                        if (polyObj.name == selected) {
+                            var newGraphic = polyObj.graphic.clone();
+                            newGraphic.symbol = alternativeSymbol;
+                            graphicLayer.remove(polyObj.graphic);
+                            polyObj.alternativGraphic = newGraphic;
+                            graphicLayer.add(polyObj.alternativGraphic);
+                        }
+                    });
+                }
+            });
+        });
+}
+
+function updateFile(event) {
+    event.preventDefault();
+    XMLFile = event.target.files[0];
+    parseXML();
+}
+
+function parseXML() {
+    var file = XMLFile;
+    var reader = new FileReader();
+    reader.onload = function (event) {
+        readXML = event.target.result;
+        xmlDoc = parser.parseFromString(readXML, "application/xml");
+    }
+    reader.readAsText(file);
+    createModel();
+}
+
+function createModel() {
+    require([
+        "esri/geometry/projection",
+    ],
+        function (
+            projection,
+        ) {
+            projection.load().then(function () {
+                tile.load().then(function () {
+                    PolyArray = Array.from(xmlDoc.getElementsByTagName("OuterWallAreaElement"));
+                    PolyArray.forEach(polygon => {
+                        var polyObj = new polyoli(wallnumber);
+                        var vertexes = Array.from(polygon.children);
+                        for (var x = 0; x < vertexes.length; x++) {
+                            var pp = createPathPoint(Array.from(vertexes[x].children));
+                            polyObj.path.push(pp);
+                        }
+                        wallnumber++;
+                        polyObj.closeRing();
+                        var graphic = createGraphic(polyObj);
+                        polyObj.graphic = graphic;
+                        PolyObjArray.push(polyObj);
+                    });
+                    placeAndCreateToggles();
+                    XMLFile = null;
+                    PolyArray = null;
+                })
+            })
+        })
+}
+
+
+function placeAndCreateToggles() {
+    var counter = 0;
+    var wallDiv = document.getElementById("wallToggle");
+    var checkboxes = null;
+    checkboxes = "<table><tr>"
+    PolyObjArray.forEach(wall => {
+        graphicLayer.add(wall.graphic);
+        if (counter % 4 == 0 && counter != 0) checkboxes += `</tr><tr>`;
+        checkboxes += `<td><div style="width:20%; display:inline-block;">${wall.name}</div><input class="wallsCheck" type="checkbox" value="${wall.name}" name="WallRequests" style="float:right;" onchange="checkBoxTrigger()"></input></td><td></td>`;
+        counter++;
+    });
+    checkboxes += "</table>"
+    wallDiv.innerHTML += checkboxes;
+}
+function getWkid() {
+    var wkid = view.spatialReference.__accessor__.store._values.wkid;
+    return (wkid);
+}
+function getSpatialRefOut() {
+    var spatialOut = view.spatialReference;
+    return spatialOut;
+}
+function createEsriP(vertextChildren) {
+    var ReturnEsriP = null;
+    require([
+        "esri/geometry/Point",
+    ],
+        function (
+            Point,
+        ) {
+            var esriP = new Point({
+                y: parseFloat(vertextChildren[0].innerHTML) + refPoint.x,
+                x: parseFloat(vertextChildren[1].innerHTML) + refPoint.y,
+                z: parseFloat(vertextChildren[2].innerHTML),
+                spatialReference: { wkid: 32632 }
+            })
+            ReturnEsriP = esriP;
+        })
+    return (ReturnEsriP);
+}
+
+function project(esriP) {
+    var ReturnProjection = null;
+    require([
+        "esri/geometry/projection",
+    ],
+        function (
+            projection,
+        ) {
+            var point = projection.project(esriP, getSpatialRefOut());
+            ReturnProjection = [point.__accessor__.store._values.x, point.__accessor__.store._values.y, point.__accessor__.store._values.z];
+        })
+    return (ReturnProjection);
+}
+function createGraphic(polyObj) {
+    var highlight = {
+        title: "SetPosition",
+        id: "highlight",
+        image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
+    };
+    var remove = {
+        title: "SetPosition",
+        id: "place-this",
+        image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
+    };
+    var graphic = null;
+    require([
+        "esri/Graphic",
+    ],
+        function (
+            Graphic,
+        ) {
+            var polygon = {
+                type: "polygon",
+                rings: polyObj.path,
+                spatialReference: { wkid: getWkid() }
+            };
+            var fillSymbol = {
+                type: "simple-fill",
+                color: [255, 255, 255, 0.5],
+                outline: {
+                    color: [0, 0, 0],
+                    width: 1
+                }
+            };
+            let wallAttribs = {
+                name: polyObj.name,
+            }
+            polygraphic = new Graphic({
+                geometry: polygon,
+                symbol: fillSymbol,
+                attributes: wallAttribs,
+                popupTemplate: {
+                    title: "Wall",
+                    content: [{
+                        type: "fields",
+                        fieldInfos: [{
+                            fieldName: "name"
+                        }]
+                    }],
+                    actions: [highlight, remove]
+                }
+            });
+            graphic = polygraphic;
+        }
+    )
+    return (graphic);
+}
+
+
+function createPathPoint(point) {
+    var tempEsriP = null;
+    tempEsriP = createEsriP(point);
+    pp = project(tempEsriP);
+    return (pp);
+}
+
+function checkBoxTrigger() {
+    graphicLayer.removeAll();
+    var selects = document.getElementsByName("WallRequests");
+    selects.forEach(select => {
+        if (select.checked) {
+            PolyObjArray.forEach(polyObj => {
+                if (select.value == polyObj.name) {
+                    var newGraphic = polyObj.graphic.clone();
+                    newGraphic.symbol = alternativeSymbol;
+                    graphicLayer.remove(polyObj.graphic);
+                    polyObj.alternativGraphic = newGraphic;
+                    graphicLayer.add(polyObj.alternativGraphic);
+                }
+            });
+        } else {
+            PolyObjArray.forEach(polyObj => {
+                if (select.value == polyObj.name) {
+                    graphicLayer.add(polyObj.graphic);
+                }
+            });
+        }
+
+    });
+}
+
+