splatter.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="">
  6. <meta name="author" content="">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  8. <title>Potree Viewer</title>
  9. <link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
  10. <link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
  11. <link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
  12. <link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
  13. <link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
  14. </head>
  15. <style>
  16. #consoleLog{
  17. width: 30%;
  18. height: 130px;
  19. position: absolute;
  20. right: 0px;
  21. bottom: 2px;
  22. z-index: 999999;
  23. color: "321";
  24. opacity: 0.9;
  25. font-size: 10px;
  26. }
  27. </style>
  28. <body>
  29. <script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
  30. <script src="../../libs/spectrum/spectrum.js"></script>
  31. <script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
  32. <script src="../../libs/other/BinaryHeap.js"></script>
  33. <script src="../../libs/tween/tween.min.js"></script>
  34. <script src="../../libs/d3/d3.js"></script>
  35. <script src="../../libs/proj4/proj4.js"></script>
  36. <script src="../../libs/openlayers3/ol.js"></script>
  37. <script src="../../libs/i18next/i18next.js"></script>
  38. <script src="../../libs/jstree/jstree.js"></script>
  39. <script src="../../build/potree/potree.js"></script>
  40. <script src="../../libs/plasio/js/laslaz.js"></script>
  41. <!-- <script src="../../libs/stats.js/stats.js"></script> -->
  42. <div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
  43. <div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
  44. </div>
  45. <div id="potree_sidebar_container"> </div>
  46. </div>
  47. <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=4578048f6e03386759d5609401e738d3"></script> -->
  48. <script type="module">
  49. import * as THREE from "../libs/three.js/build/three.module.js";
  50. import browser from '../src/custom/utils/browser.js' //这里必须加.js
  51. window.THREE = THREE
  52. Potree.config.view.near = 0.001, Potree.config.view.far = 1e3 //same as splatter
  53. var splatId = browser.urlHasValue('m',true)
  54. var urlAtSplatter = !browser.urlHasValue('urlAtCurrent') ;
  55. //Potree.start(document.getElementById("potree_render_area"),null, null,{noMap:true});
  56. new Potree.Viewer(document.getElementById("potree_render_area") , null, {noMap:true});
  57. viewer.background.set('#000')
  58. if(splatId === ''){
  59. splatId = 'SG-t-jp-zSUztbgFpmt', urlAtSplatter = true
  60. }
  61. /*const defaultConfig = {
  62. "splatId": 'SG-t-jp-zSUztbgFpmt', // "test0_4096_L8_not_sortscale",
  63. "block": 65536,
  64. "root": {
  65. "radius": 0.6,//0.4,// 1.024,
  66. "size": 35031//8326 //8534
  67. },
  68. "size": 649*65536, //421*
  69. "tile": 4,
  70. path: Potree.resourcePath+'../../../../examples/tomcat/splatter.app/data',
  71. view:{
  72. "yaw": -1.5924752534051696,
  73. "pitch": -0.14400671146230742,
  74. "position": {
  75. "x": -45.12437783490361,
  76. "y": 1.6148221490172163,
  77. "z": 2.9891692740919122
  78. }
  79. }
  80. } */
  81. let applyConfig = (config)=>{
  82. new Potree.Splatter(viewer,config);
  83. config.view && viewer.mainViewport.view.applyJson(config.view)
  84. let dom = document.querySelector('#mapGaode')
  85. if(dom){
  86. viewer.splatter.logArea = dom
  87. dom.style.height = '43px', dom.style.width = '200px'
  88. dom.style['font-size'] = '14px'
  89. }
  90. }
  91. if(splatId!=''){
  92. let path = browser.urlHasValue('gsPath', true)
  93. if(!path){
  94. if(urlAtSplatter){
  95. path = Potree.resourcePath + '../../../../examples/tomcat/splatter.app/data/' + splatId
  96. }else{
  97. path = Potree.resourcePath + '/../data/splatter/' + splatId
  98. }
  99. }
  100. let dataVersion = path.includes('http') ? Date.now() : 10
  101. let jsonUrl = Potree.Common.joinUrl(path, 'data.json?m='+dataVersion)
  102. Potree.loadFile(jsonUrl,{},(e)=>{
  103. let config = Object.assign({
  104. }, e, {
  105. "block": 65536,
  106. "root": {
  107. "radius": browser.urlHasValue('radius', true) || e.radius || (browser.isMobile() ? 0.25 : 0.6),
  108. "size": e.level_0 //8326 //8534
  109. },
  110. "size": e.size || e.files*65536,
  111. path,
  112. dataVersion: 6,
  113. })
  114. applyConfig(config)
  115. })
  116. }
  117. viewer.scene.axisArrow.visible = true
  118. //example: https://192.168.0.59:1234/examples/splatter.html?m=rly-jb1
  119. //viewer.setFOV(50) //splatter原本中设置最小fov为50
  120. viewer.setFOV(75) //原本70,在手机端比splatter的点多,增大fov会减少点
  121. Potree.settings.intersectWhenHover = false //降cpu
  122. //viewer.scene.axisArrow.visible = true // 会导致效果不对还警告?!!!!
  123. if(browser.isMobile()){
  124. window.addEventListener("load", ()=>{
  125. var textarea = document.createElement('textarea');
  126. textarea.id = "consoleLog";
  127. document.getElementsByTagName("body")[0].appendChild(textarea);
  128. var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
  129. var exchange = function (o) {
  130. console["old" + o] = console[o];
  131. console[o] = function (str ) {
  132. console["old" + o].apply(this, arguments)
  133. textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
  134. }
  135. }
  136. for (var i = 0; i < list.length; i++) {
  137. exchange(list[i])
  138. }
  139. })
  140. }
  141. </script>
  142. </body>
  143. </html>