Initial commit
This commit is contained in:
torsten committed
commit
b7d90b9afe
16245 files changed
+3396666
No files matched your search
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Positionseinspeisung</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.headcol {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
height: 760px;
|
||||
width: 72.5%;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
#infoDiv input {
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
|
||||
<script src="https://js.arcgis.com/4.7/"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="positionseinspeisung.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<hr>
|
||||
<table style="width:25%;display:inline-block" id="HeaderTable">
|
||||
<tr id="HeaderTableRow">
|
||||
<td>
|
||||
<form>
|
||||
<input type="text" value="" id="ipadresse" />
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<div id="Serverconnect">
|
||||
<font color="red">
|
||||
Server: not connected
|
||||
</font>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<table style="width:35%;display:inline-block">
|
||||
<td>
|
||||
<div id="auswahl" style="float:right; font-size: 13px;">Aktuelle Auswahl:
|
||||
<input type="text">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="newPosition" style="float:right;font-size: 13px;">Neue Position: None</div>
|
||||
</td>
|
||||
<td>
|
||||
<button style="float:right;" onclick="placeFunction()">submit</button>
|
||||
</td>
|
||||
</table>
|
||||
<hr>
|
||||
<div style="height:89%; border-left: 2px solid black; position:absolute; left: 73%;top: 9.5%; "></div>
|
||||
<div id="layers" style="float:right; overflow-x: auto; height: 500px;width: 25%; ">
|
||||
</div>
|
||||
<div id="mapDiv">
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1,388 @@
|
||||
class Footprint {
|
||||
constructor(name, id, path, refPoint) {
|
||||
this.name = name;
|
||||
this.id = id;
|
||||
this.path = path;
|
||||
this.refPoint = refPoint;
|
||||
this.type = "footprint";
|
||||
this.graphic = null;
|
||||
this.status = "not ready";
|
||||
}
|
||||
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
var ipadresse = "EXCTDS01:";
|
||||
var port = "2080";
|
||||
var layerArr = [];
|
||||
var objArr = [];
|
||||
var AssetTypeArr = [];
|
||||
let currentGraphic = null;
|
||||
let newPosition = null;
|
||||
let placeFunction = function () {
|
||||
if (newPosition == null) {
|
||||
alert("Bitte eine gültige position angeben!");
|
||||
} else {
|
||||
objArr.forEach(obj => {
|
||||
if (obj.graphic == currentGraphic.graphic) {
|
||||
console.log(`Wollen sie ${obj.graphic.__accessor__.store._values.attributes.name} mit folgenden Koordinaten x: ${newPosition.x}/ y: ${newPosition.y} neu platzieren?`);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
window.onload = function () {
|
||||
var selects = document.getElementsByName("layerSelect");
|
||||
selects.forEach(selectable => {
|
||||
selectable.checked = false;
|
||||
});
|
||||
getEssentials();
|
||||
}
|
||||
// Schritt 1 - Essentials werden geladen (Alle Objekte die für jede Übung relevant sind)
|
||||
function getEssentials() {
|
||||
if ("WebSocket" in window) {
|
||||
{
|
||||
var exampleSocket = new WebSocket("ws://" + ipadresse + port) //connected standartmäßig auf den port 7300
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
exampleSocket.onopen = function () { //ist die Verbindung hergestellt so wird eine Portabfrage an den port 7300 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) {
|
||||
var msg = JSON.parse(event.data);
|
||||
var essentialArrays = msg.data;
|
||||
AssetTypeArr = essentialArrays.assetTypes;
|
||||
createObjects(essentialArrays);
|
||||
};
|
||||
}
|
||||
else {
|
||||
alert("WebSocket is NOT supported by your Browser!");
|
||||
}
|
||||
}
|
||||
//Schritt 2 - Erstellen von Objekten der Essentials
|
||||
function createObjects(essentialArrays) {
|
||||
var levelCompareArr = [];
|
||||
require([
|
||||
"esri/layers/GraphicsLayer",
|
||||
],
|
||||
function (
|
||||
GraphicsLayer
|
||||
) {
|
||||
//Buildings(footPrints)
|
||||
essentialArrays.objects.forEach(building => {
|
||||
if (building.path.length <= 0) building.path = null;
|
||||
var footprintObj = new Footprint(building.designation, building.id, building.path, building.refPoint);
|
||||
objArr.push(footprintObj);
|
||||
});
|
||||
//Layer für Levels
|
||||
essentialArrays.levels.forEach(level => {
|
||||
if (!levelCompareArr.includes(level.designation)) {
|
||||
var 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
var outdoorLayer = new layer("outdoorLayer");
|
||||
outdoorLayer.layer = new GraphicsLayer({});
|
||||
outdoorLayer.ids.push(-1);
|
||||
layerArr.push(outdoorLayer);
|
||||
var footprintLayer = new layer("footprintLayer");
|
||||
footprintLayer.layer = new GraphicsLayer({});
|
||||
layerArr.push(footprintLayer);
|
||||
//Mountingpoints
|
||||
essentialArrays.mountingPoints.forEach(mountingP => {
|
||||
var mountingPointObj = new MountingPoint(mountingP.designation, mountingP.id, mountingP.levelId, mountingP.objectId, mountingP.position3d, mountingP.roomId, mountingP.supportedAssetTypeIds[0]);
|
||||
if (mountingPointObj.supportedAsset === 5 || mountingPointObj.supportedAsset === 6) objArr.push(mountingPointObj);
|
||||
});
|
||||
createLayerSelection();
|
||||
}
|
||||
)
|
||||
createMap();
|
||||
};
|
||||
function formatObjs() {
|
||||
require([
|
||||
"esri/geometry/Point",
|
||||
"esri/geometry/projection",
|
||||
"esri/Graphic",
|
||||
], function (Point, projection, Graphic) {
|
||||
var setNewPosition = {
|
||||
title: "SetPosition",
|
||||
id: "place-this",
|
||||
image: "https://www.ninonline.org/forum/uploads/monthly_2018_03/Uchiha-Small.png.b1e089fc70c9c965ec35c23041868b3d.png"
|
||||
};
|
||||
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
|
||||
});
|
||||
footprintEsriP = projection.project(footprintEsriP, getSpatialRefOut());
|
||||
obj.refPoint = footprintEsriP;
|
||||
if (obj.path !== null) {
|
||||
var 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++;
|
||||
});
|
||||
}
|
||||
var polygon = {
|
||||
type: "polygon",
|
||||
rings: obj.path,
|
||||
spatialReference: { wkid: getWkid() }
|
||||
};
|
||||
var fillSymbol = {
|
||||
type: "simple-fill",
|
||||
color: [227, 139, 79, 0.8],
|
||||
outline: {
|
||||
color: [255, 255, 255],
|
||||
width: 1
|
||||
}
|
||||
};
|
||||
var buildingAtr = {
|
||||
BuildingName: obj.name,
|
||||
type: obj.type
|
||||
}
|
||||
obj.graphic = new Graphic({
|
||||
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) {
|
||||
obj.position.x += subObj.refPoint.__accessor__.store._values.x;
|
||||
obj.position.y += subObj.refPoint.__accessor__.store._values.y;
|
||||
}
|
||||
}
|
||||
});
|
||||
let mountingPointEsriP = new Point({
|
||||
x: obj.position.x,
|
||||
y: obj.position.y,
|
||||
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
|
||||
}
|
||||
obj.graphic = new Graphic({
|
||||
geometry: mountingPointEsriP,
|
||||
symbol: mountingPointS,
|
||||
attributes: mountingPointEventAttribs,
|
||||
popupTemplate: {
|
||||
title: "MountingPoint",
|
||||
content: [{
|
||||
type: "fields",
|
||||
fieldInfos: [{
|
||||
fieldName: "name"
|
||||
}, {
|
||||
fieldName: "objectId"
|
||||
}, {
|
||||
fieldName: "id"
|
||||
}, {
|
||||
fieldName: "levelId"
|
||||
}, {
|
||||
fieldName: "roomId"
|
||||
}, {
|
||||
fieldName: "supportedAssets"
|
||||
}]
|
||||
}],
|
||||
actions: [setNewPosition],
|
||||
}
|
||||
});
|
||||
obj.status = "ready";
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
createDropDownAssets();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//Schritt 3 - Verbindung zu neuem Websocket um die vorhandenen Übungen abzufragen
|
||||
function createMap() {
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/layers/TileLayer",
|
||||
"dojo/domReady!",
|
||||
],
|
||||
function (
|
||||
Map,
|
||||
MapView,
|
||||
TileLayer,
|
||||
) {
|
||||
map = new Map({
|
||||
});
|
||||
view = new MapView({
|
||||
container: "mapDiv",
|
||||
map: map,
|
||||
camera: {
|
||||
position: {
|
||||
x: 8.896638,
|
||||
y: 53.054441,
|
||||
}
|
||||
},
|
||||
scale: 1000
|
||||
});
|
||||
view.on("click", eventHandler); // für maus
|
||||
function eventHandler(event) {
|
||||
view.hitTest(event).then(getGraphics);
|
||||
function getGraphics(response) {
|
||||
console.log(response);
|
||||
let point = view.toMap({ x: response.screenPoint.x, y: response.screenPoint.y })
|
||||
if (response.results.length > 0 && response.screenPoint.button === 0) {
|
||||
currentGraphic = response.results[0];
|
||||
} else if (response.results.length === 0 && response.screenPoint.button === 0) {
|
||||
document.getElementById("newPosition").innerHTML = `neue Position: ${point.x} / ${point.y}`;
|
||||
newPosition = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
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);
|
||||
view.popup.on("trigger-action", function (event) {
|
||||
if (event.action.id === "place-this") {
|
||||
placeFunction();
|
||||
}
|
||||
});
|
||||
formatObjs();
|
||||
})
|
||||
})
|
||||
}
|
||||
function connect() { //wird aufgerufen sobald eine Übung ausgewählt wurd(dropdown)
|
||||
port = document.getElementById("selects").value;
|
||||
requestUrl = ipadresse.concat(port);
|
||||
document.getElementById("ipadresse").value = "";
|
||||
document.getElementById("ipadresse").value = ipadresse + port;
|
||||
}
|
||||
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function place() {
|
||||
layerArr.forEach(layer => {
|
||||
layer.layer.removeAll();
|
||||
});
|
||||
objArr.forEach(obj => {
|
||||
switch (obj.type) {
|
||||
case "mountingPoint":
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.ids.includes(obj.levelId)) {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "footprint":
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === "footprintLayer") {
|
||||
layer.layer.add(obj.graphic);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function toggleLayer() {
|
||||
place();
|
||||
layerArr.forEach(layer => {
|
||||
map.remove(layer.layer);
|
||||
});
|
||||
var selectedLayers = document.getElementsByName('layerSelect');
|
||||
for (var x = selectedLayers.length - 1; x >= 0; x--) {
|
||||
if (selectedLayers[x].checked) {
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name === selectedLayers[x].value) {
|
||||
map.add(layer.layer)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function createDropDownAssets() {
|
||||
var dropDdiv = document.getElementById("AssetTypesDiv");
|
||||
var dropD = "<select id=\"AssetTypes\" onchange=\"place()\">";
|
||||
AssetTypeArr.forEach(AssetType => {
|
||||
dropD += "<option value=" + AssetType.id + ">" + AssetType.designation + "</option>"
|
||||
});
|
||||
dropD += "</select>"
|
||||
dropDdiv.innerHTML = dropD;
|
||||
}
|
||||
function createLayerSelection() {
|
||||
var layerDiv = document.getElementById("layers");
|
||||
var append = "";
|
||||
layerArr.forEach(layer => {
|
||||
if (layer.name != undefined) {
|
||||
append += `<div><input class="layer" type="checkbox" value=${layer.name} name="layerSelect" onchange="toggleLayer()">${layer.name}</input></div>`;
|
||||
}
|
||||
});
|
||||
layerDiv.innerHTML += append;
|
||||
}
|
||||
Reference in new issue
Block a user