diff --git a/vcm/css/dragable.css b/vcm/css/dragable.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/vcm/datasource-data/Rosenstein.zip b/vcm/datasource-data/Rosenstein.zip new file mode 100644 index 0000000000000000000000000000000000000000..6137c2355e7d744a1eaad1b81e1dacfdcb2f8f06 Binary files /dev/null and b/vcm/datasource-data/Rosenstein.zip differ diff --git a/vcm/index.html b/vcm/index.html index bf48a8b8a6fa272214d936778179d1633e4a8fb3..32946210c2ebd5adc5f6267059fcab05a7ecf481 100644 --- a/vcm/index.html +++ b/vcm/index.html @@ -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> diff --git a/vcm/js/DragnDrop.js b/vcm/js/DragnDrop.js new file mode 100644 index 0000000000000000000000000000000000000000..1ba24ff725faf1ac52f61e0286b5ddd1db5a9fda --- /dev/null +++ b/vcm/js/DragnDrop.js @@ -0,0 +1,130 @@ +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 diff --git a/vcm/js/ServerorLocal.js b/vcm/js/ServerorLocal.js index 6db87ae98e4affe62c8cc491795aa6e922f16a60..e2549216e99168d7ef5d4d27c1802080be10c5c8 100644 --- a/vcm/js/ServerorLocal.js +++ b/vcm/js/ServerorLocal.js @@ -1,52 +1,52 @@ // 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 diff --git a/vcm/templates/locationSMsmall.png b/vcm/templates/locationSMsmall.png new file mode 100644 index 0000000000000000000000000000000000000000..3d0d288b49463f5c9e5db8d864f2a96a41b718fe Binary files /dev/null and b/vcm/templates/locationSMsmall.png differ