Skip to content
GitLab
Commit c2721857 authored by Patrick's avatar Patrick
Browse files

add the drag functionality

parent 02d5a48b
Hide whitespace changes
Inline Side-by-side
Showing
with 192 additions and 52 deletions
+192 -52
vcm/css/dragable.css 0 → 100644
+ 0
- 0
View file @ c2721857
vcm/datasource-data/Rosenstein.zip 0 → 100644
+ 0
- 0
View file @ c2721857
File added
vcm/index.html
+ 18
- 8
View file @ c2721857
......@@ -220,7 +220,12 @@
<iframe style="width: 95%; height:120em;margin-left:1em;margin-right:1em;border: none;" src="https://ww2.unipark.de/uc/HFT_Stuttgart_Studenten/f7c4/"></iframe>
</div>
<div></div>
<div>
<p class="contentOne">Hier testen wir momentan eine Funktion die es Ihnen erlaubt ihren Lieblingsort zu markieren und zu kommentieren.
</p><br>
<img id="dragFrom" onmouseover="setPointStartEnd('fav')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
</div><br><br>
</div>
</div>
......@@ -346,15 +351,20 @@
<button class = "btn_on" onclick="getAccidents('CONSTRUCTION')">On</button>
<button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button> -->
<h3 id="headNordB">Navigationsrechner</h3>
<p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus. Klicken Sie hierfür auf den Button Startpunkt und danach auf die gewünschte Stelle in der Karte. Wiederholen Sie das für den Endpunkt, dann können Sie sich über die Route Buttons den Weg anzeigen.</p>
<div style="width:34em;">
<p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus. Klicken Sie hierfür auf den Button Startpunkt und danach auf die gewünschte Stelle in der Karte. Oder ziehen sie die Marker auf der rechten Seite an die gewünschte Stelle in der Karte mit Drag and Drop. Wiederholen Sie das für den Endpunkt, dann können Sie sich über die Route Buttons den Weg anzeigen.</p>
<div style="width:34em;"><br><br>
<button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
<input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
<input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon"><br><br>
<input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
<input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon">
<img id="dragFrom" onmouseover="setPointStartEnd('start')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
<br><br>
<!-- <div id=dragFrom2 ><span draggable=true >drop me</span></div> -->
<button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('End');">Endpunkt</button>
<input style="width:12em;height:2em;" type="text" id="Epunktlat" name="Epunktlat">
<input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon"><br><br>
<input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon">
<img id="dragFrom2" onmouseover="setPointStartEnd('end')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
<br><br>
<button class="btn_standard" id="buttonCar" style="width:13em;height:2em;" onclick="setRouteCar();">Route Auto</button>
<button class="btn_standard" id="buttonPub" style="width:13em;height:2em;" onclick="setRoutePublic();">Route ÖPNV<div id="loaderPub" style="display:none;" class="loader"></div></button>
......@@ -793,7 +803,7 @@
<img id="logo_Main" src="images/logo/Logo.svg">
<p id="logo_title"><span style="color: red">K</span>essel<span style="color: red">K</span>ompass</p>
</div>
<div id="vcs_map_container"></div>
<div id="vcs_map_container" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
<!--div id="vcs_map_container">
<div id="vcs_loading" style="background-color:#dee2c9; position:absolute; top:0; left:0; right:0; bottom:0; padding:12% 0; text-align:center; font-family:Arial, sans-serif; font-size:1.4rem; line-height:4rem;">
......@@ -848,6 +858,6 @@
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="templates/story/virtualcitystory.js"></script>
<script src="js/DragnDrop.js"></script>
</body>
</html>
vcm/js/DragnDrop.js 0 → 100644
+ 130
- 0
View file @ c2721857
var startend = ""
function dragstart_handler(e){
var img = new Image();
img.src = '../templates/locationSMsmall.png';
e.dataTransfer.setDragImage(img, 23, 45);
// e.dataTransfer.setDragImage(img, 75, 145);
}
function dragEnter(e){
var map = vcs.vcm.Framework.getInstance().getActiveMap();
var viewer = map.getCesiumWidget()
var scene = map.getCesiumWidget()._scene
// var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
event.preventDefault();
return true;
}
function dragDrop(e) {
var map = vcs.vcm.Framework.getInstance().getActiveMap();
var viewer = map.getCesiumWidget()
var scene = map.getCesiumWidget()._scene
// var scene = viewer.scene;
// var billboards = scene.primitives.add(new Cesium.BillboardCollection());
// var canvas = document.createElement('canvas');
// canvas.width = 32;
// canvas.height = 32;
// var ctx = canvas.getContext('2d');
// ctx.beginPath();
// ctx.arc(16, 16, 15, 0, Cesium.Math.TWO_PI, true);
// ctx.closePath();
// ctx.fillStyle = `hsl(${Math.random()*360},55%,55%)`;
// ctx.fill();
var cartesian = viewer.camera.pickEllipsoid(
new Cesium.Cartesian3(e.clientX, e.clientY),
scene.globe.ellipsoid
);
// billboards.add({
// image: canvas,
// position: cartesian
// });
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
console.log(cartographic)
var longitudeString = Cesium.Math.toDegrees(
cartographic.longitude
);
ballonContent.lon = longitudeString;
var latitudeString = Cesium.Math.toDegrees(
cartographic.latitude
);
ballonContent.lat = latitudeString;
if (startend == "start"){
var pointd = {
lat:"",
lon:"",
loc:""
}
pointd.lat = ballonContent.lat
pointd.lon = ballonContent.lon
pointd.loc = "Start"
var text = document.getElementById('Spunktlat');
text.value = ballonContent.lat;
var text = document.getElementById('Spunktlon');
text.value = ballonContent.lon;
// visualize a Point at the clicked location
setPoint("Start", pointd);
} else if (startend == "end"){
var pointd = {
lat:"",
lon:"",
loc:""
}
pointd.lat = ballonContent.lat
pointd.lon = ballonContent.lon
pointd.loc = "End"
var text = document.getElementById('Epunktlat');
text.value = ballonContent.lat;
var text = document.getElementById('Epunktlon');
text.value = ballonContent.lon;
// visualize a Point at the clicked location
setPoint("End", pointd);
} else if (startend == "fav"){
var pointd = {
lat:"",
lon:"",
loc:""
}
pointd.lat = ballonContent.lat
pointd.lon = ballonContent.lon
pointd.loc = "fav"
// var text = document.getElementById('Epunktlat');
// text.value = ballonContent.lat;
// var text = document.getElementById('Epunktlon');
// text.value = ballonContent.lon;
// visualize a Point at the clicked location
setPoint("fav", pointd);
}
}
function dragOver(e){
var map = vcs.vcm.Framework.getInstance().getActiveMap();
var viewer = map.getCesiumWidget()
var scene = map.getCesiumWidget()._scene
// var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
e.preventDefault();
}
function setPointStartEnd(loc){
startend = loc
}
\ No newline at end of file
vcm/js/ServerorLocal.js
+ 44
- 44
View file @ c2721857
// Server
var navPublicT = '/partizipation/navPublicT'
var NavCARdata = '/partizipation/NavCARdata'
var ROAD_CLOSURE ="https://m4lab.hft-stuttgart.de/partizipation/ROAD_CLOSURE"
var CONSTRUCTION = "https://m4lab.hft-stuttgart.de/partizipation/CONSTRUCTION"
var TrafficFlow ="https://m4lab.hft-stuttgart.de/partizipation/TrafficFlow"
var NAVCAR = "https://m4lab.hft-stuttgart.de/partizipation/NAVCAR"
var NAVPUB = "https://m4lab.hft-stuttgart.de/partizipation/NAVPUB"
var addPointurl = "https://m4lab.hft-stuttgart.de/partizipation/addPoint"
var routecalcurl = "https://m4lab.hft-stuttgart.de/partizipation/Routecalc2"
var navpublict2url = "https://m4lab.hft-stuttgart.de/partizipation/navPublicT2"
var StartpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Startpoint"
var EndpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Endpoint"
var FLOWdataUrl = "/partizipation/FLOWdata"
var NavCARdataUrl = '/partizipation/NavCARdata'
var FLOWtestUrl = '/partizipation/FLOWtest'
var getTrafficIncidentsUrl = '/partizipation/getTrafficIncidents'
var navPointUrl = '/partizipation/navPoint'
var RoutecalcUrl = '/partizipation/Routecalc'
var navPublicTUrl = '/partizipation/navPublicT'
var NoiseRealTimeUrl = '/partizipation/NoiseRealTime'
var getNoiseHistUrl = '/partizipation/getNoiseHist'
var getSTANoiseHistUrl = '/partizipation/getSTANoiseHist'
// var navPublicT = '/partizipation/navPublicT'
// var NavCARdata = '/partizipation/NavCARdata'
// var ROAD_CLOSURE ="https://m4lab.hft-stuttgart.de/partizipation/ROAD_CLOSURE"
// var CONSTRUCTION = "https://m4lab.hft-stuttgart.de/partizipation/CONSTRUCTION"
// var TrafficFlow ="https://m4lab.hft-stuttgart.de/partizipation/TrafficFlow"
// var NAVCAR = "https://m4lab.hft-stuttgart.de/partizipation/NAVCAR"
// var NAVPUB = "https://m4lab.hft-stuttgart.de/partizipation/NAVPUB"
// var addPointurl = "https://m4lab.hft-stuttgart.de/partizipation/addPoint"
// var routecalcurl = "https://m4lab.hft-stuttgart.de/partizipation/Routecalc2"
// var navpublict2url = "https://m4lab.hft-stuttgart.de/partizipation/navPublicT2"
// var StartpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Startpoint"
// var EndpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Endpoint"
// var FLOWdataUrl = "/partizipation/FLOWdata"
// var NavCARdataUrl = '/partizipation/NavCARdata'
// var FLOWtestUrl = '/partizipation/FLOWtest'
// var getTrafficIncidentsUrl = '/partizipation/getTrafficIncidents'
// var navPointUrl = '/partizipation/navPoint'
// var RoutecalcUrl = '/partizipation/Routecalc'
// var navPublicTUrl = '/partizipation/navPublicT'
// var NoiseRealTimeUrl = '/partizipation/NoiseRealTime'
// var getNoiseHistUrl = '/partizipation/getNoiseHist'
// var getSTANoiseHistUrl = '/partizipation/getSTANoiseHist'
//_________________________________________/
// Local
// var navPublicT = '/navPublicT'
// var NavCARdata = '/NavCARdata'
// var ROAD_CLOSURE = "http://localhost:8083/ROAD_CLOSURE"
// var CONSTRUCTION = "http://localhost:8083/CONSTRUCTION"
// var TrafficFlow = "http://localhost:8083/TrafficFlow"
// var NAVCAR = "http://localhost:8083/NAVCAR"
// var NAVPUB = "http://localhost:8083/NAVPUB"
// var addPointurl = "http://localhost:8083/addPoint"
// var routecalcurl = "http://localhost:8083/Routecalc2"
// var navpublict2url = "http://localhost:8083/navPublicT2"
// var StartpointUrl = "http://localhost:8083/Startpoint"
// var EndpointUrl = "http://localhost:8083/Endpoint"
// var FLOWdataUrl = "/FLOWdata"
// var NavCARdataUrl = '/NavCARdata'
// var FLOWtestUrl = '/FLOWtest'
// var getTrafficIncidentsUrl = '/getTrafficIncidents'
// var navPointUrl = '/navPoint'
// var RoutecalcUrl = '/Routecalc'
// var navPublicTUrl = '/navPublicT'
// var NoiseRealTimeUrl = '/NoiseRealTime'
// var getNoiseHistUrl = '/getNoiseHist'
// var getSTANoiseHistUrl = '/getSTANoiseHist'
\ No newline at end of file
var navPublicT = '/navPublicT'
var NavCARdata = '/NavCARdata'
var ROAD_CLOSURE = "http://localhost:8083/ROAD_CLOSURE"
var CONSTRUCTION = "http://localhost:8083/CONSTRUCTION"
var TrafficFlow = "http://localhost:8083/TrafficFlow"
var NAVCAR = "http://localhost:8083/NAVCAR"
var NAVPUB = "http://localhost:8083/NAVPUB"
var addPointurl = "http://localhost:8083/addPoint"
var routecalcurl = "http://localhost:8083/Routecalc2"
var navpublict2url = "http://localhost:8083/navPublicT2"
var StartpointUrl = "http://localhost:8083/Startpoint"
var EndpointUrl = "http://localhost:8083/Endpoint"
var FLOWdataUrl = "/FLOWdata"
var NavCARdataUrl = '/NavCARdata'
var FLOWtestUrl = '/FLOWtest'
var getTrafficIncidentsUrl = '/getTrafficIncidents'
var navPointUrl = '/navPoint'
var RoutecalcUrl = '/Routecalc'
var navPublicTUrl = '/navPublicT'
var NoiseRealTimeUrl = '/NoiseRealTime'
var getNoiseHistUrl = '/getNoiseHist'
var getSTANoiseHistUrl = '/getSTANoiseHist'
\ No newline at end of file
vcm/templates/locationSMsmall.png 0 → 100644
+ 0
- 0
View file @ c2721857
vcm/templates/locationSMsmall.png

1.07 KB

Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal