Initial commit
This commit is contained in:
torsten committed
commit
b7d90b9afe
16245 files changed
+3396666
No files matched your search
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE HTML>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>3D-Verwundungsmodell</title>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.headcol {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mapDiv {
|
||||
position: relative;
|
||||
height: 760px;
|
||||
width: 72.5%;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
#infoDiv input {
|
||||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
left: 20px;
|
||||
}
|
||||
</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="LaufwegDarstellung.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="position:relative; text-align: center; font-size: 35px;">Laufwegdarstellung</h1>
|
||||
<hr style="position: relative;">
|
||||
<div style="position: absolute; left: 1400px; width: 500px;">
|
||||
<div style="position: relative; left: 20px">Path .xml-File:</div>
|
||||
<input type="file" name="myfile" id="PathUpload" />
|
||||
<hr style="width: 510px;">
|
||||
<div style="left: 20px;position: relative">
|
||||
<button onclick="toggleBuildings() ">toggle Buildings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:85%; border-left: 2px solid black; position:absolute; right: 520px;top: 95px; "></div>
|
||||
<div id="mapDiv">
|
||||
<div id="infoDiv">
|
||||
<!-- <input class="esri-component esri-widget-button esri-widget esri-interactive " type="button " id="switch-btn
|
||||
" value="3D "> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
|
||||
class PolyLineObj {
|
||||
constructor(path) {
|
||||
this.path = path;
|
||||
this.graphic = null;
|
||||
}
|
||||
}
|
||||
|
||||
var parser, xmlDoc;
|
||||
var parser = new DOMParser();
|
||||
var graphicLayer = null;
|
||||
var color = null;
|
||||
var x = 1;
|
||||
|
||||
window.onload = function () {
|
||||
document.getElementById('PathUpload').addEventListener('change', pathXml, 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",
|
||||
})
|
||||
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 pathXml(event) {
|
||||
event.preventDefault();
|
||||
var XMLFile = event.target.files[0];
|
||||
var r = Math.floor(Math.random() * 255);
|
||||
var g = Math.floor(Math.random() * 255);
|
||||
var b = Math.floor(Math.random() * 255);
|
||||
color = { r: r, g: g, b: b };
|
||||
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");
|
||||
createPath();
|
||||
}
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
|
||||
function createPath() {
|
||||
var points = [];
|
||||
var pathArray = [];
|
||||
points = Array.from(xmlDoc.getElementsByTagName("trkpt"));
|
||||
points.forEach(point => {
|
||||
var pathpoint = [parseFloat(point.attributes[1].value), parseFloat(point.attributes[0].value), parseFloat(point.children[0].textContent) / 100];
|
||||
pathArray.push(pathpoint);
|
||||
});
|
||||
var polyline_ = new PolyLineObj(pathArray);
|
||||
createPolyLineGraphic(polyline_);
|
||||
}
|
||||
|
||||
|
||||
function getWkid() {
|
||||
var wkid = view.spatialReference.__accessor__.store._values.wkid;
|
||||
return (wkid);
|
||||
}
|
||||
function getSpatialRefOut() {
|
||||
var spatialOut = view.spatialReference;
|
||||
return spatialOut;
|
||||
}
|
||||
function createPolyLineGraphic(polyline_) {
|
||||
require([
|
||||
"esri/Graphic",
|
||||
],
|
||||
function (
|
||||
Graphic
|
||||
) {
|
||||
var polyline = {
|
||||
type: "polyline",
|
||||
paths: polyline_.path,
|
||||
}
|
||||
var lineSymbol = {
|
||||
type: "simple-line", // autocasts as SimpleLineSymbol()
|
||||
color: [color.r, color.g, color.b],
|
||||
width: 4
|
||||
};
|
||||
var polylineGraphic = new Graphic({
|
||||
geometry: polyline,
|
||||
symbol: lineSymbol
|
||||
});
|
||||
|
||||
polyline_.graphic = polylineGraphic;
|
||||
console.log(polyline_);
|
||||
graphicLayer.add(polyline_.graphic);
|
||||
})
|
||||
}
|
||||
|
||||
function toggleBuildings() {
|
||||
x++;
|
||||
if (x % 2 == 0) map.remove(feature)
|
||||
else map.add(feature);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user