<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>Scene+Map</title> <!-- build:css css/test.css --> <!-- bower:css --> <!-- endbower --> <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link> <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link> <link rel='stylesheet' type='text/css' href='js/ui.css'></link> <!-- endbuild --> <!-- build:js js/test.js --> <!-- bower:js --> <script src='bower_components/jquery/dist/jquery.js'></script> <!-- endbower --> <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script> <script type='text/javascript' src='js/leaflet/L.extra.js'></script> <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script> <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script> <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script> <!---script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script--> <script type='text/javascript' src='js/x3dom_init.js'></script> <script type='text/javascript' src='js/x3dom_functions.js'></script> <script type='text/javascript' src='js/leaflet_init.js'></script> <script type='text/javascript' src='js/x3l.js'></script> <script type='text/javascript' src='js/ui_init.js'></script> <script type='text/javascript' src='js/ui_menu.js'></script> <script type='text/javascript' src='js/ui_help.js'></script> <script type='text/javascript' src='js/ui_functions.js'></script> <script type='text/javascript' src='js/ui_align.js'></script> <script type='text/javascript' src='js/util_functions.js'></script> <!-- endbuild --> </head> <body> <div id='x3d_wrapper'> <x3d id="x3d_id" width="100%" height="100%" showProgress="true" showStat="false" showLog="false"> <scene> <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo> <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint> <!-- <group> <inline name="back" namespacename="back" url="models/m1/v1/background.x3d"/> </group>--> </scene> </x3d> </div> <div id='map_wrapper'> <div id="leaflet_map"></div> </div> <div id='crosshair_h' class='crosshair'></div> <div id='crosshair_v' class='crosshair'></div> <div id='help_wrapper'> <div id='menu_button'></div> <div id='help_button'>?</div> <!--<div id='align_button'></div>--> </div> <div id='info-wrapper'> <div id='window-info'></div> <div id='window-markinfo'></div> <div id='window-viewinfo'></div> </div> <div id='menu-content'> <div> <h2>Settings</h2> <table> <tr> <td>Show marker info (satellite vs 3D model distalnce)</td> <td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>Show view info (x, y, z, azimuth, elevation, skew)</td> <td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>Show more info (hitting ray: id, x, y, z, d<sub>xz</sub>, d<sub>xyz</sub>)</td> <td><input id='moreinfo' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>Show crosshair</td> <td><input id='crosshair' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>Show pointer marker (green sphere over 3D scene)</td> <td><input id='pointer' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>Highlight 3D elements on mouse over</td> <td><input id='highlight' type='checkbox' class='my-check-box donothide' /></td> </tr> <tr> <td>View's parallel shift speed</td> <td><input id='shiftspeed' type='text' class='input donothide' /></td> </tr> <tr> <td>3D marker diameter, m</td> <td><input id='markersize' type='text' class='input donothide' /></td> </tr> <tr> <td>3D marker color</td> <td><input id='markercolor' type='text' class='input donothide' /></td> </tr> <tr> <td> </td> </tr> <tr> <td><button id='reset_view' class='donothide'>Reset view</button></td> </tr> <tr> <td> </td> </tr> <tr> <td><button>Close</button></td> </tr> </table> </div> </div> <div id='help-content'> <div> <h2>3D Scene + Map</h2> <h3 style='color:rgba(200,200,255,1);'>Comparing 3D model and Map (satellite imagery) measurements</h3> <ul> <li>Place a marker in the 3D scene near the feature of interest. Drag the marker closer if needed.<br/>This will set the 3D model distance.</li> <li>Drag the corresponding marker over the map to what looks like the feature of interest to set the map distance.<br/>If the <b>show marker info</b> is enabled the distances and the difference will be displayed.</li> </ul> Update measurements: <ul> <li>Map distance - drag marker over map</li> <li>3D model distance - drag marker over 3D scene</li> </ul> <h3 style='color:rgba(200,200,255,1);'>Map</h3> <table> <tr> <td><b>ctrl + left click</b></td> <td> <ul> <li>create markers, relative height = 0</li> <li>remove markers</li> </ul> </td> </tr> <tr> <td><b>draggable objects (global XZ)</b></td> <td> <ul> <li>markers</li> <li>camera base (green)</li> <li>heading crosshair (white)</li> </ul> </td> </tr> </table> <h3 style='color:rgba(200,200,255,1);'>Scene</h3> <table> <tr> <td><b>ctrl + left click</b></td> <td> <ul> <li>create markers, relative height = surface hitting point height</li> <li>remove markers</li> </ul> </td> </tr> <tr> <td><b>mouse wheel (scroll)</b></td> <td> <ul> <li>change field of view (= camera focal length)</li> </ul> </td> </tr> <tr> <td><b>mouse wheel (drag)</b></td> <td> <ul> <li>move camera over its XY (= parallel shift)</li> </ul> </td> </tr> <tr> <!-- <td><b>draggable objects (camera XY)</b></td> --> <td><b>draggable objects (stick to surfaces)</b></td> <td> <ul> <li>markers only</li> </ul> </td> </tr> <tr> <td><button>Close</button></td> </tr> </table> </div> </div> </body> </html>