403 lines
14 KiB
JavaScript
Executable File
403 lines
14 KiB
JavaScript
Executable File
class PolyObj {
|
|
constructor(name, room) {
|
|
this.path = [];
|
|
this.originalXML = [];
|
|
this.graphic = null;
|
|
this.name = name;
|
|
this.room = room;
|
|
this.alternativGraphic = null;
|
|
}
|
|
fixEsriBug() { //Manipulation der Koordinaten um Esri-Polygon-Füllungsbug auszugleichen
|
|
if (this.path[0][2] != this.path[2][2]) {
|
|
this.path[0][1] -= 0.001;
|
|
this.path[1][1] -= 0.001;
|
|
}
|
|
}
|
|
closeRing() {
|
|
this.path.push(this.path[0]);
|
|
}
|
|
}
|
|
|
|
var parser, xmlDoc, PolyArray;
|
|
var wallnumber = 0;
|
|
var PolygonObj = [];
|
|
var refPoint = {
|
|
y: 493063.5202829816,
|
|
x: 5878330.672506552,
|
|
z: 0
|
|
};
|
|
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('ModellUpload').addEventListener('change', modellXml, 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: {
|
|
position: {
|
|
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",
|
|
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
|
|
})
|
|
feature = new SceneLayer({
|
|
//url: "http://excgeo21.sl.defence-elec.de/arcgis/rest/services/Hosted/BT56_rev576/SceneServer",
|
|
url: "http://scene.arcgis.com/arcgis/rest/services/Hosted/Building_Hamburg/SceneServer/layers/0",
|
|
});
|
|
//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 modellXml(event) {
|
|
wallnumber = 0;
|
|
graphicLayer.removeAll();
|
|
PolyObjArray = [];
|
|
PolyArray = [];
|
|
refPoint.z = 0;
|
|
event.preventDefault();
|
|
var XMLFile = event.target.files[0];
|
|
parseXML(XMLFile);
|
|
}
|
|
|
|
|
|
function parseXML(XMLFile) {
|
|
var file = XMLFile;
|
|
var reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
readXML = event.target.result;
|
|
xmlDoc = parser.parseFromString(readXML, "application/xml");
|
|
createModel();
|
|
}
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
function createModel() {
|
|
require([
|
|
"esri/geometry/projection",
|
|
],
|
|
function(
|
|
projection,
|
|
) {
|
|
projection.load().then(function() {
|
|
tile.load().then(function() {
|
|
|
|
//PolyArrayParent = Array.from(xmlDoc.getElementsByTagName("OuterWallAreaElement").parentNode);
|
|
var parentNodeValue = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode;
|
|
console.log("parentNodeValue=", parentNodeValue);
|
|
var parentNodeValue1 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode;
|
|
console.log("parentNodeValue1=", parentNodeValue1);
|
|
var parentNodeValue2 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode.parentNode;
|
|
console.log("parentNodeValue2=", parentNodeValue2);
|
|
|
|
//var k = parentNodeValue2.getElementsByTagName("RoomId");
|
|
|
|
// console.log(k[0].childNodes[0].nodeValue);
|
|
//var roomId = k[0].childNodes[0].nodeValue;
|
|
|
|
|
|
//var roomId=parentNodeValue2.getElementByTagName('RoomId');
|
|
//var roomId= parentNodeValue2.getElementsByTagName('RoomId')[0].nodeValue;
|
|
//console.log ("RoomID=", roomId);
|
|
/*
|
|
var roomIdvalue=xmlDoc.getElementByTagName('RoomId').value
|
|
console.log ("RoomID=", roomId, " val=", roomIdvalue);
|
|
|
|
var parentNodeValue3 = xmlDoc.getElementsByTagName('OuterWallAreaElement')[0].parentNode.parentNode.parentNode.childNodes[0];
|
|
console.log("parentNodeValue3=" , parentNodeValue3);
|
|
*/
|
|
RoomArray = Array.from(xmlDoc.getElementsByTagName("Room"));
|
|
RoomArray.forEach(room => {
|
|
var k = room.getElementsByTagName("RoomId");
|
|
var roomId = k[0].childNodes[0].nodeValue;
|
|
PolyArray = Array.from(room.getElementsByTagName("OuterWallAreaElement"));
|
|
PolyArray.forEach(polygon => {
|
|
var checkCellar1 = Array.from(polygon.children);
|
|
checkCellar1.forEach(element => {
|
|
var checkCellar2 = Array.from(element.children);
|
|
if (parseFloat(checkCellar2[2].textContent) < -(refPoint.z)) {
|
|
refPoint.z = -(parseFloat(checkCellar2[2].textContent));
|
|
}
|
|
});
|
|
});
|
|
PolyArray.forEach(polygon => {
|
|
console.log(PolyArray);
|
|
var polyObj = new PolyObj(wallnumber, roomId);
|
|
var vertexes = Array.from(polygon.children);
|
|
for (var x = 0; x < vertexes.length; x++) {
|
|
var myP = Array.from(vertexes[x].children);
|
|
var str = "Coord " + x + ":";
|
|
str += " X=" + myP[0].innerHTML;
|
|
str += " Y=" + myP[1].innerHTML;
|
|
str += " Z=" + myP[2].innerHTML;
|
|
str += " ; ";
|
|
|
|
console.log(" wall " + wallnumber + " has pathXML=", str);
|
|
polyObj.originalXML += str;
|
|
|
|
var pp = createPathPoint(Array.from(vertexes[x].children));
|
|
polyObj.path.push(pp);
|
|
}
|
|
wallnumber++;
|
|
polyObj.fixEsriBug();
|
|
polyObj.closeRing();
|
|
var graphic = createPolygonGraphic(polyObj);
|
|
polyObj.graphic = graphic;
|
|
PolyObjArray.push(polyObj);
|
|
});
|
|
});
|
|
placeAndCreateToggles(555);
|
|
XMLFile = null;
|
|
PolyArray = null;
|
|
})
|
|
})
|
|
})
|
|
}
|
|
|
|
function placeAndCreateToggles(roomId) {
|
|
var counter = 0;
|
|
var wallDiv = document.getElementById("wallToggle");
|
|
wallDiv.innerHTML = "";
|
|
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.room}</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(point) {
|
|
var ReturnEsriP = null;
|
|
require([
|
|
"esri/geometry/Point",
|
|
],
|
|
function(
|
|
Point,
|
|
) {
|
|
var esriP = new Point({
|
|
y: parseFloat(point[0].innerHTML) + refPoint.x,
|
|
x: (parseFloat(point[1].innerHTML)*-1) + refPoint.y,
|
|
z: parseFloat(point[2].innerHTML) + refPoint.z,
|
|
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 createPolygonGraphic(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",
|
|
"esri/geometry/geometryEngine"
|
|
],
|
|
function(
|
|
Graphic,
|
|
) {
|
|
var polygon = {
|
|
type: "polygon",
|
|
rings: polyObj.path,
|
|
spatialReference: {
|
|
wkid: getWkid()
|
|
}
|
|
};
|
|
//console.log(polygon);
|
|
// polygon = geometryEngine.rotate(polygon, 318.82);
|
|
var fillSymbol = {
|
|
type: "simple-fill",
|
|
color: [255, 255, 255, 0.5],
|
|
outline: {
|
|
color: [0, 0, 0],
|
|
width: 1
|
|
}
|
|
};
|
|
let wallAttribs = {
|
|
name: polyObj.name,
|
|
room: polyObj.room,
|
|
pathlength: polyObj.path.length,
|
|
path: polyObj.path,
|
|
originalXML: polyObj.originalXML
|
|
}
|
|
polygraphic = new Graphic({
|
|
geometry: polygon,
|
|
symbol: fillSymbol,
|
|
attributes: wallAttribs,
|
|
popupTemplate: {
|
|
title: "Room {room} - Wall {name}",
|
|
content: [{
|
|
type: "fields",
|
|
fieldInfos: [{
|
|
fieldName: "pathlength",
|
|
label: "pathlength XML + 1",
|
|
}, {
|
|
fieldName: "originalXML"
|
|
}, {
|
|
fieldName: "path"
|
|
}]
|
|
}],
|
|
// 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");
|
|
var room = 0;
|
|
selects.forEach(select => {
|
|
if (select.checked) {
|
|
PolyObjArray.forEach(polyObj => {
|
|
if (select.value == polyObj.name) {
|
|
var newGraphic = polyObj.graphic.clone();
|
|
room = polyObj.room;
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
// Alle Waende eines Raums:
|
|
PolyObjArray.forEach(polyObj => {
|
|
if (room == polyObj.room) {
|
|
var newGraphic = polyObj.graphic.clone();
|
|
room = polyObj.room;
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
|
|
});
|
|
}
|