Initial commit

Lts/Tools/EsriHTML/MapView/MapView2.0.js

@@ -0,0 +1,560 @@
+class Footprint {
+
+    constructor(name, id, path, refPoint, z, mseId) {
+        this.name = name;
+        this.id = id;
+        this.path = path;
+        this.refPoint = refPoint;
+        this.type = "footprint";
+        this.graphic = null;
+        this.status = "not ready";
+        this.z = z;
+        this.mseId = mseId;
+    }
+}
+
+class MountingPoint {
+
+    constructor(name, id, levelId, objId, position, roomId, supportedAsset) {
+        this.name = name;
+        this.id = id;
+        this.levelId = levelId;
+        this.objId = objId;
+        this.position = position; //wird als positionsObjekt übergeben. Bezieht sich auf Referenzpunkt des zugehörigen Gebäudes
+        this.roomId = roomId;
+        this.supportedAsset = supportedAsset;
+        this.type = "mountingPoint";
+        this.graphic = null;
+        this.status = "not ready";
+    }
+}
+
+class layer {
+
+    constructor(name) {
+        this.name = name;
+        this.ids = [];
+        this.layer = null;
+    }
+}
+
+let ipadresse = "localhost:";
+let ipadresseSendPos = "localhost:";
+let port = "2080";
+let portSendPos = "12346";
+let layerArr = [];
+let objArr = [];
+let AssetTypeArr = [];
+let socket;
+let equipmentNumber = "3801";
+let outSpatialReference = {
+    wkid: 4326
+};
+let buildHigh = 0;
+let mseId = 0;
+
+function reconnect() {
+
+    ipadresse = document.getElementById("ipadresse").value;
+    document.getElementById("Serverconnect").innerHTML = "Server: not connected";
+    document.getElementById("Serverconnect").style.color = "red";
+
+    getEssentials();
+}
+
+function connectSendPos() {
+
+    ipadresseSendPos = document.getElementById("ipadresseSendPos").value;
+    portSendPos = document.getElementById("portSendPos").value;
+
+    socket = new WebSocket("ws://" + ipadresseSendPos + portSendPos);     // connected on the port 12346
+
+    socket.onopen = function () {   // if the connection is established, a port query will be sent to port 12346
+        document.getElementById("SendPosServerconnect").innerHTML = "Server: connected";
+        document.getElementById("SendPosServerconnect").style.color = "green"
+    };
+}
+
+window.onload = function () {
+
+    let selects = document.getElementsByName("layerSelect");
+
+    selects.forEach(selectable => {
+        selectable.checked = false;
+    });
+
+    document.getElementById("ipadresseSendPos").value = "";
+    document.getElementById("ipadresseSendPos").value = ipadresseSendPos;
+    document.getElementById("portSendPos").value = "";
+    document.getElementById("portSendPos").value = portSendPos;
+    document.getElementById("equipmentNumber").value = "";
+    document.getElementById("equipmentNumber").value = equipmentNumber;
+
+    getEssentials();
+}
+
+// Step 1 - Essentials are loaded
+function getEssentials() {
+
+    if ("WebSocket" in window) {
+        let exampleSocket = new WebSocket("ws://" + ipadresse + port); //connected standartmäßig auf den port 2080
+        layerArr = [];
+
+        document.getElementById("layers").innerHTML = "";
+        document.getElementById("ipadresse").value = "";
+        document.getElementById("ipadresse").value = ipadresse;
+        document.getElementById("port").value = "";
+        document.getElementById("port").value = port;
+
+        exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 2080 geschickt
+            document.getElementById("Serverconnect").innerHTML = "Server: connected";
+            document.getElementById("Serverconnect").style.color = "green"
+
+            exampleSocket.send(JSON.stringify({
+                type: "getEssentials",
+                uuid: "UUID"
+            }));
+        };
+
+        exampleSocket.onmessage = function (event) {
+            let msg = JSON.parse(event.data);
+            let essentialArrays = msg.data;
+            AssetTypeArr = essentialArrays.assetTypes;
+
+            createObjects(essentialArrays);
+        };
+    } else {
+        alert("WebSocket is NOT supported by your Browser!");
+    }
+}
+
+//Step 2 - Creating objects of the essentials
+function createObjects(essentialArrays) {
+
+    let levelCompareArr = [];
+
+    require([
+        "esri/layers/GraphicsLayer",
+    ],
+        function (
+            GraphicsLayer
+        ) {
+            //Buildings(footPrints)
+            essentialArrays.objects.forEach(building => {
+                if (building.path.length <= 0) {
+                    building.path = null;
+                }
+
+                let footprintObj = new Footprint(building.designation, building.id, building.path, building.refPoint, building.z, building.mseId);
+
+                objArr.push(footprintObj);
+            });
+
+            //Layer für Levels
+            essentialArrays.levels.forEach(level => {
+                if (!levelCompareArr.includes(level.designation)) {
+                    let layerObj = new layer(level.designation);
+
+                    layerObj.ids.push(level.id);
+                    layerObj.layer = new GraphicsLayer({});
+                    layerArr.push(layerObj);
+                    levelCompareArr.push(layerObj.name);
+                } else {
+                    layerArr.forEach(layer => {
+                        if (layer.name === level.designation) {
+                            layer.ids.push(level.id);
+                        }
+                    });
+                }
+            });
+
+            let outdoorLayer = new layer("outdoorLayer");
+            outdoorLayer.layer = new GraphicsLayer({});
+            outdoorLayer.ids.push(-1);
+            layerArr.push(outdoorLayer);
+
+            let footprintLayer = new layer("footprintLayer");
+            footprintLayer.layer = new GraphicsLayer({});
+            layerArr.push(footprintLayer);
+
+            //Mountingpoints
+            essentialArrays.mountingPoints.forEach(mountingP => {
+                let mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
+                objArr.push(mountingPointObj);
+            });
+
+            createLayerSelection();
+            createMap();
+        }
+    )
+
+};
+
+function formatObjs() {
+
+    require([
+        "esri/geometry/Point",
+        "esri/geometry/projection",
+        "esri/Graphic",
+    ], function (
+        Point,
+        projection,
+        Graphic) {
+            projection.load().then(function () {
+                objArr.forEach(obj => {
+                    switch (obj.type) {
+
+                        case "footprint":
+
+                            if (obj.status == "not ready") {
+                                let footprintEsriP = new Point({
+                                    y: (obj.refPoint.lat * 180) / Math.PI,
+                                    x: (obj.refPoint.lon * 180) / Math.PI
+                                });
+
+                                if (obj.id === 25) {
+                                    buildHigh = obj.z;
+                                    mseId = obj.mseId;
+                                };
+
+                                footprintEsriP = projection.project(footprintEsriP, getSpatialRefOut());
+                                obj.refPoint = footprintEsriP;
+
+                                if (obj.path !== null) {
+                                    let x = 0;
+
+                                    obj.path.forEach(pathPoint => {
+                                        esriPathPoint = new Point({
+                                            y: (pathPoint.lat * 180) / Math.PI,
+                                            x: (pathPoint.lon * 180) / Math.PI,
+                                        });
+
+                                        esriPathPoint = projection.project(esriPathPoint, getSpatialRefOut());
+                                        obj.path[x] = [esriPathPoint.__accessor__.store._values.x, esriPathPoint.__accessor__.store._values.y];
+                                        x++;
+                                    });
+                                }
+
+                                let polygon = {
+                                    type: "polygon",
+                                    rings: obj.path,
+                                    spatialReference: { wkid: getWkid() }
+                                };
+
+                                let fillSymbol = {
+                                    type: "simple-fill",
+                                    color: [227, 139, 79, 0.8],
+                                    outline: {
+                                        color: [255, 255, 255],
+                                        width: 1
+                                    }
+                                };
+
+                                let buildingAtr = {
+                                    BuildingName: obj.name,
+                                    type: obj.type
+                                }
+
+                                obj.graphic = new Graphic({                     // Grafik des Footlayer
+                                    geometry: polygon,
+                                    symbol: fillSymbol,
+                                    attributes: buildingAtr
+                                });
+
+                                obj.status = "ready";
+                            }
+                            break;
+
+                        case "mountingPoint":
+
+                            if (obj.status == "not ready") {
+                                objArr.forEach(subObj => {
+                                    if (subObj.type === "footprint") {
+                                        if (obj.objId === subObj.id && subObj.path != null) {
+                                            // Drehung der Mountingpoints um 318.82°
+                                            rad = 318.82 * Math.PI / 180;
+                                            x = obj.position.x;
+                                            y = obj.position.y;
+
+                                            obj.position.x = x * Math.cos(rad) - y * Math.sin(rad);
+                                            obj.position.y = x * Math.sin(rad) + y * Math.cos(rad);
+
+                                            obj.position.x += subObj.refPoint.__accessor__.store._values.x;
+                                            obj.position.y += subObj.refPoint.__accessor__.store._values.y;
+                                        }
+                                    }
+                                });
+
+                                let mountingPointEsriP = new Point({
+                                    y: obj.position.y,
+                                    x: obj.position.x,
+                                    spatialReference: getSpatialRefOut()
+                                });
+
+                                let mountingPointS = {
+                                    type: "simple-marker",
+                                    color: "black",
+                                }
+
+                                let mountingPointEventAttribs = {
+                                    name: obj.name,
+                                    objectId: obj.objId,
+                                    id: obj.id,
+                                    levelId: obj.levelId,
+                                    roomId: obj.roomId,
+                                    supportedAssets: obj.supportedAsset,
+                                    type: obj.type,
+                                    z: obj.position.z,
+                                }
+
+                                obj.graphic = new Graphic({                         // Grafik von einem Mountingpoint 
+                                    geometry: mountingPointEsriP,
+                                    symbol: mountingPointS,
+                                    attributes: mountingPointEventAttribs,
+                                    popupTemplate: {
+                                        actions: [{
+                                            title: "SendParticipantPos",
+                                            id: "sendPartPos",
+                                            className: "esri-icon-contact"
+                                        }],
+                                        title: "MountingPoint",
+                                        content: [{
+                                            type: "fields",
+                                            fieldInfos: [{
+                                                fieldName: "name"
+                                            }, {
+                                                fieldName: "objectId"
+                                            }, {
+                                                fieldName: "id"
+                                            }, {
+                                                fieldName: "levelId"
+                                            }, {
+                                                fieldName: "roomId"
+                                            }, {
+                                                fieldName: "supportedAssets"
+                                            }],
+                                        }]
+                                    }
+                                });
+
+                                obj.status = "ready";
+                            }
+                            break;
+                    }
+                });
+
+                createDropDownAssets();
+
+                // Fires the sendPartPos() function after holding a mouse button on the view for a short amount of time
+                view.on("hold", function (event) {
+
+                    mapPointClone = event.mapPoint;
+                    mapPointClone = projection.project(mapPointClone, outSpatialReference);
+
+                    positionY = mapPointClone.__accessor__.store._values.y;
+                    positionX = mapPointClone.__accessor__.store._values.x;
+                    positionZ = 0;
+                    lvlId = -1;
+                    rmId = -1;
+                    objectId = -1;
+
+                    sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId);
+                });
+
+                /*  Quick and Dirty-Methode! Event vom Action-Trigger sehr verschachtelt, die nötigen Attribute einzeln rausgesucht. 
+                    Noch auf der Suche nach einem Weg die Zugriffe zu vereinfachen  */
+
+                // Action-Trigger PopupTemplate
+                view.popup.on("trigger-action", function (event) {
+                    // If the sendPartPos action is clicked, fire the sendPartPos() function
+                    if (event.action.id === "sendPartPos") {
+                        geometryClone = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.geometry;
+                        geometryClone = projection.project(geometryClone, outSpatialReference);
+
+                        positionY = geometryClone.__accessor__.store._values.y;
+                        positionX = geometryClone.__accessor__.store._values.x;
+                        positionZ = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.z + buildHigh;
+                        lvlId = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.levelId;
+                        rmId = event.target.__accessor__.store._values.selectedFeature.__accessor__.store._values.attributes.roomId;
+                        objectId = mseId;
+
+                        sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId);
+                    }
+                });
+            });
+        }
+    );
+};
+
+//Step 3 - Connection to new websocket to retrieve the existing exercises
+function createMap() {
+
+    require([
+        "esri/Map",
+        "esri/views/MapView",
+        "esri/layers/TileLayer",
+        "esri/geometry/Point",
+        "dojo/domReady!",
+    ],
+        function (
+            Map,
+            MapView,
+            TileLayer,
+            Point
+        ) {
+            map = new Map({
+            });
+
+            view = new MapView({
+                container: "mapDiv",
+                map: map,
+                scale: 500
+            });
+
+            view.center = new Point({               // Center vom View auf Gebäude 56 setzen
+                x: 493066.09059222677,
+                y: 5878330.0818853425,
+                spatialReference: 32632
+            });
+
+            tile = new TileLayer({
+                url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Bremen/BremenHemelingenAerialGeoAmt_32632/MapServer",
+            });
+
+            tile.load().then(function () {
+                map.layers.add(tile);
+                formatObjs();
+            })
+        }
+    );
+};
+
+function getSpatialRefOut() {
+
+    let spatialOut = view.spatialReference;
+    return spatialOut;
+}
+
+function getWkid() {
+
+    let wkid = view.spatialReference.__accessor__.store._values.wkid;
+    return (wkid);
+}
+
+// Die jeweiligen Points/Footprints des ausgewählten Layer auf der Map anzeigen
+function place() {
+
+    let filter = document.getElementById("AssetTypes").value;
+
+    layerArr.forEach(layer => {
+        layer.layer.removeAll();
+    });
+
+    objArr.forEach(obj => {
+        switch (obj.type) {
+
+            case "mountingPoint":
+
+                layerArr.forEach(layer => {
+                    if (layer.ids.includes(obj.levelId) && obj.supportedAsset == filter) {
+                        layer.layer.add(obj.graphic);
+                    }
+                });
+                break;
+
+            case "footprint":
+
+                layerArr.forEach(layer => {
+                    if (layer.name === "footprintLayer") {
+                        layer.layer.add(obj.graphic);
+                    }
+                });
+        }
+    });
+}
+
+// Ausgewähltes Layer dem "layer"-Attribut der Map zuweisen
+function toggleLayer() {
+
+    place();
+
+    layerArr.forEach(layer => {
+        map.remove(layer.layer);
+    });
+
+    let selectedLayers = document.getElementsByName('layerSelect');
+
+    for (let x = selectedLayers.length - 1; x >= 0; x--) {
+        if (selectedLayers[x].checked) {
+            layerArr.forEach(layer => {
+                if (layer.name === selectedLayers[x].value) {
+                    map.add(layer.layer)
+                }
+            });
+        }
+    }
+}
+
+// Das Drop-Down Menü für die Assets generieren 
+function createDropDownAssets() {
+
+    let dropDdiv = document.getElementById("AssetTypesDiv");
+    let dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
+
+    AssetTypeArr.forEach(AssetType => {
+        dropD += "<option  value=" + AssetType.id + ">" + AssetType.designation + "</option>"
+    });
+
+    dropD += "</select>"
+    dropDdiv.innerHTML = dropD;
+}
+
+// Die Auswahl der Layer füllen (Container rechts eben der Map)
+function createLayerSelection() {
+
+    let layerDiv = document.getElementById("layers");
+    let append = "";
+
+    layerArr.forEach(layer => {
+        if (layer.name != undefined) {
+            append += `<div class="checkbox"><input class="layer" type="checkbox" value=${layer.name} name="layerSelect" onchange="toggleLayer()">${layer.name}</input></div>`;
+        }
+    });
+
+    layerDiv.innerHTML += append;
+}
+
+// Die ausgewählte Position an Port 12346 senden um den Teilnehmer zu positionieren
+function sendPartPos(positionY, positionX, positionZ, lvlId, rmId, objectId) {
+
+    // zu lat/long umrechnen
+    positionY = (positionY * Math.PI) / 180;
+    positionX = (positionX * Math.PI) / 180;
+    equipmentNumber = Number(document.getElementById("equipmentNumber").value);
+
+    var type = "PositionReport";
+    var timestamp = Date.now();
+    var jsonMsg = JSON.stringify({                      //make JSON-string from the data
+        data: {
+            equipmentNumber: equipmentNumber,
+            lat: positionY,
+            lon: positionX,
+            moutAreaId: lvlId,
+            moutObjectId: objectId,
+            moutRoomId: rmId,
+            timestamp: timestamp,
+            z: positionZ
+        },
+        type: type
+    });
+
+    var jsonOb = JSON.parse(jsonMsg);
+
+    if (socket != undefined) {
+        readout = "Equipment Number: " + jsonOb.data.equipmentNumber + "\n" + "Latitude: " + jsonOb.data.lat + "\n" + "Longitude: " + jsonOb.data.lon + "\n" + "Z: " + jsonOb.data.z + "\n" + "Area ID: " + jsonOb.data.moutAreaId + "\n" + "Object ID: " + jsonOb.data.moutObjectId + "\n" + "Room ID: " + jsonOb.data.moutRoomId + "\n" + "Time: " + jsonOb.data.timestamp;
+        socket.send(jsonMsg);                           // if the server is connected send the JSON telegram
+        alert("Current position sent!" + "\n" + readout);
+    } else {
+        alert("Server not connected!");
+    }
+}