start.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. import * as THREE from "../libs/three.js/build/three.module.js";
  2. import {settings, config} from './settings'
  3. import math from './utils/math'
  4. import browser from './utils/browser'
  5. import './extensions/three.shim.js'
  6. import {Utils} from "../src/utils.js"
  7. var start = function(dom, mapDom, number, fileServer, webSite){ //t-Zvd3w0m
  8. /* {
  9. let obj = JSON.parse(localStorage.getItem('setting'))
  10. for(let i in obj){
  11. console.log(i + ': ' + obj[i])
  12. }
  13. }
  14. */
  15. Potree.settings.number = number || 't-o5YMR13'// 't-iksBApb'// 写在viewer前
  16. Potree.fileServer = fileServer
  17. webSite && (Potree.settings.webSite = webSite)
  18. let viewer = new Potree.Viewer(dom , mapDom);
  19. let Alignment = viewer.modules.Alignment
  20. //let pointDensity = config.pointDensity.middle
  21. viewer.setEDLEnabled(false);
  22. viewer.setFOV(config.view.fov);
  23. //viewer.setPointBudget(pointDensity.pointBudget);
  24. viewer.loadSettingsFromURL();
  25. if(!Potree.settings.isOfficial){
  26. viewer.loadGUI(() => {
  27. viewer.setLanguage('en');
  28. //$("#menu_appearance").next().show();
  29. $("#menu_tools").next().show();
  30. $("#menu_scene").next().show();
  31. $("#siteModel").show();
  32. //$("#alignment").show();
  33. viewer.toggleSidebar();
  34. });
  35. Potree.settings.sizeFitToLevel = true//当type为衰减模式时自动根据level调节大小。每长一级,大小就除以2
  36. }
  37. Potree.loadDatasetsCallback = function(data, ifReload){
  38. if(!data || data.length == 0)return console.error('getDataSet加载的数据为空')
  39. Potree.datasetData = data
  40. viewer.transform = null
  41. var datasetLength = data.length
  42. var pointcloudLoaded = 0
  43. var panosLoaded = 0
  44. var pointcloudLoadDone = function(){//点云cloud.js加载完毕后
  45. viewer.updateModelBound()
  46. let {boundSize, center} = viewer.bound
  47. Potree.Log(`中心点: ${math.toPrecision(center.toArray(),2)}, boundSize: ${math.toPrecision(boundSize.toArray(),2)} ` , null, 12)
  48. if(!Potree.settings.isOfficial){
  49. Potree.loadMapEntity('all') //加载floorplan
  50. }
  51. if(!ifReload){
  52. viewer.scene.view.setView({
  53. position: center.clone().add(new THREE.Vector3(10,5,10)),
  54. target: center
  55. })
  56. viewer.dispatchEvent({type:'loadPointCloudDone'})
  57. if(!Potree.settings.UserPointDensity){
  58. Potree.settings.UserPointDensity = 'high'//'middle'
  59. }
  60. Potree.Log('loadPointCloudDone 点云加载完毕', null, 10)
  61. }
  62. }
  63. var panosLoadDone = function(){
  64. viewer.images360.loadDone()
  65. viewer.scene.add360Images(viewer.images360);
  66. viewer.mapViewer.addListener(viewer.images360)
  67. {//初始位置
  68. var urlFirstView = false
  69. var panoId = browser.urlHasValue('pano',true);
  70. if(panoId !== ''){
  71. var pos
  72. var pano = viewer.images360.panos.find(e=>e.id==panoId);
  73. if(pano){
  74. viewer.images360.focusPano({
  75. pano,
  76. duration:0,
  77. callback:()=>{/* Potree.settings.displayMode = 'showPanos' */}
  78. })
  79. }
  80. }else{//考虑到多数据集距离很远,或者像隧道那种场景,要使视野范围内一定能看到点云,最好初始点设置在漫游点上
  81. let {boundSize, center} = viewer.bound
  82. let pano = viewer.images360.findNearestPano(center)
  83. pano && viewer.scene.view.setView({
  84. position: pano.position.clone().add(new THREE.Vector3(10,10,10)),
  85. target: pano.position
  86. })
  87. }
  88. }
  89. viewer.addVideo()//addFire()
  90. console.log('allLoaded')
  91. viewer.dispatchEvent('allLoaded')
  92. }
  93. var transformPointcloud = (pointcloud, dataset)=>{
  94. var locationLonLat = dataset.location.slice(0,2)
  95. //当只有一个dataset时,无论如何transform 点云和漫游点都能对应上。
  96. var location = viewer.transform.lonlatToLocal.forward(locationLonLat) //transform.inverse()
  97. //初始化位置
  98. viewer.sidebar && viewer.sidebar.addAlignmentButton(pointcloud)
  99. //dataset.orientation = 0
  100. Alignment.rotate(pointcloud, null, dataset.orientation)
  101. Alignment.translate(pointcloud, new THREE.Vector3(location[0], location[1], dataset.location[2]))
  102. pointcloud.updateMatrixWorld()
  103. Potree.Log(`点云${pointcloud.dataset_id}旋转值:${pointcloud.orientationUser}, 位置${math.toPrecision(pointcloud.translateUser.toArray(),3)}, 经纬度 ${locationLonLat}, spacing ${pointcloud.material.spacing}`, null, 17 )
  104. //-------------------
  105. //viewer.mapView.showSources(false);
  106. }
  107. if(!Potree.settings.originDatasetId)Potree.settings.originDatasetId = data[0].id
  108. var originDataset = data.find(e=>e.id == Potree.settings.originDatasetId)
  109. {//拿初始数据集作为基准。它的位置是000
  110. var locationLonLat = originDataset.location.slice(0,2)
  111. proj4.defs("NAVVIS:TMERC", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
  112. proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
  113. let transform1 = proj4("WGS84", "NAVVIS:TMERC"); //这个ok TMERC是展开的平面投影
  114. let transform2 = proj4("+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs;");
  115. viewer.transform = {
  116. lonlatToLocal : transform1,
  117. lonlatTo4550 : transform2 // 转大地坐标EPSG:4550
  118. }
  119. viewer.mapViewer && viewer.mapViewer.mapLayer.maps[0].updateProjection()
  120. }
  121. data.forEach((dataset,index)=>{
  122. if(!ifReload){
  123. var datasetCode = dataset.sceneCode || dataset.name //对应4dkk的场景码
  124. var cloudPath = `${Potree.settings.urls.prefix}/${Potree.settings.webSite}/${datasetCode}/data/${datasetCode}/webcloud/cloud.js`
  125. var timeStamp = dataset.createTime ? dataset.createTime.replace(/[^0-9]/ig,'') : ''; //每重算一次后缀随createTime更新一次
  126. //console.warn(dataset.name, 'timeStamp', timeStamp)
  127. Potree.loadPointCloud(cloudPath, dataset.name ,datasetCode, timeStamp, e => {
  128. let scene = viewer.scene;
  129. let pointcloud = e.pointcloud;
  130. let config = Potree.config.material
  131. let material = pointcloud.material;
  132. material.minSize = config.minSize
  133. material.maxSize = config.maxSize
  134. material.pointSizeType = config.pointSizeType //Potree.PointSizeType[config.pointSizeType]//Potree.PointSizeType.ADAPTIVE;//FIXED
  135. pointcloud.changePointSize(config.realPointSize) //material.size = config.pointSize;
  136. pointcloud.changePointOpacity(1)
  137. material.shape = Potree.PointShape.SQUARE;
  138. pointcloud.color = pointcloud.material.color = dataset.color
  139. pointcloud.dataset_id = dataset.id;//供漫游点找到属于的dataset点云
  140. pointcloud.timeStamp = timeStamp
  141. transformPointcloud(pointcloud,dataset)
  142. scene.addPointCloud(pointcloud);
  143. pointcloudLoaded ++;
  144. if(pointcloudLoaded == datasetLength)pointcloudLoadDone()
  145. Potree.loadPanos(dataset.id, (data) => {
  146. //console.log('loadPanos',dataset.sceneCode, dataset.id, data)
  147. viewer.images360.addPanoData(data, dataset.id )
  148. panosLoaded ++;
  149. if(panosLoaded == datasetLength){
  150. panosLoadDone()
  151. }
  152. })
  153. })
  154. }else{
  155. let pointcloud = viewer.scene.pointclouds.find(p => p.dataset_id == dataset.id)
  156. if(!pointcloud){
  157. Potree.Log('数据集id变了,自动使用第一个','#500')
  158. pointcloud = viewer.scene.pointclouds[0]
  159. }
  160. //先归零
  161. Alignment.translate(pointcloud, pointcloud.translateUser.clone().negate())
  162. Alignment.rotate(pointcloud, null, - pointcloud.orientationUser)
  163. transformPointcloud(pointcloud, dataset)
  164. }
  165. })
  166. if(ifReload){
  167. //loadDone()
  168. }
  169. }
  170. Potree.loadDatasets(Potree.loadDatasetsCallback)
  171. window.testTransform = function(locationLonLat, location1, location2){
  172. proj4.defs("NAVVIS:test", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
  173. let transform = proj4("WGS84", "NAVVIS:test"); //这个ok navvis里也是这两种转换 见proj4Factory
  174. if(location1){//经纬度
  175. return transform.forward(location1)
  176. }else{
  177. return transform.inverse(location2)
  178. }
  179. }
  180. window.THREE = THREE
  181. window.buttonFunction = function(){
  182. viewer.scene.pointclouds.forEach(e=>e.predictNodeMaxLevel())
  183. /*
  184. viewer.startScreenshot({type:'measure', measurement:viewer.scene.measurements[0]})
  185. viewer.modules.RouteGuider.routeStart = new THREE.Vector3(0,0,-1.3)
  186. viewer.modules.RouteGuider.routeEnd = new THREE.Vector3(-10,0,-1.3)
  187. */
  188. }
  189. }
  190. //=======================================================================
  191. /*
  192. 漫游点编辑
  193. */
  194. //=======================================================================
  195. var panoEditStart = function(dom, mapDom, number, fileServer, webSite){
  196. Potree.settings.editType = 'pano'
  197. Potree.settings.unableNavigate = true
  198. let viewer = new Potree.Viewer(dom , mapDom);
  199. let Alignment = viewer.modules.Alignment
  200. viewer.setEDLEnabled(false);
  201. viewer.setFOV(config.view.fov);
  202. viewer.loadSettingsFromURL();
  203. let datasetLoaded = 0;
  204. if(!Potree.settings.isOfficial){
  205. viewer.loadGUI(() => {
  206. viewer.setLanguage('en');
  207. $("#menu_tools").next().show();
  208. $("#panos").show();
  209. $("#alignment").show();
  210. viewer.toggleSidebar();
  211. });
  212. Potree.settings.sizeFitToLevel = true
  213. }
  214. var pointcloudLoadDone = function( ){//所有点云cloud.js加载完毕后
  215. viewer.scene.pointclouds.forEach(c=>{
  216. transformPointcloud(c)
  217. })
  218. viewer.images360.loadDone()
  219. viewer.scene.add360Images(viewer.images360);
  220. viewer.updateModelBound()
  221. let {boundSize, center} = viewer.bound
  222. Potree.Log(`中心点: ${math.toPrecision(center.toArray(),2)}, boundSize: ${math.toPrecision(boundSize.toArray(),2)} ` , null, 12)
  223. viewer.scene.view.setView({
  224. position: center.clone().add(new THREE.Vector3(10,5,10)),
  225. target: center
  226. })
  227. viewer.dispatchEvent({type:'loadPointCloudDone'})
  228. if(!Potree.settings.UserPointDensity){
  229. Potree.settings.UserPointDensity = 'panoEdit'//'middle'
  230. }
  231. Potree.Log('loadPointCloudDone 点云加载完毕', null, 10)
  232. viewer.dispatchEvent('allLoaded');
  233. }
  234. var transformPointcloud = (pointcloud )=>{ //初始化位置
  235. viewer.sidebar && viewer.sidebar.addAlignmentButton(pointcloud)
  236. let orientation = pointcloud.panos[0].dataRotation.z
  237. let location = pointcloud.panos[0].dataPosition.clone().negate()
  238. Alignment.rotate(pointcloud, null, orientation )
  239. Alignment.translate(pointcloud, location )
  240. pointcloud.updateMatrixWorld()
  241. }
  242. let loadPanosDone = Potree.loadPanosDone = (datasetId, panoData)=>{ //一个数据集获取到它的panos后
  243. Potree.settings.datasetsPanos[datasetId] = {panoData, panos:[]}
  244. console.log('panoData', datasetId, panoData)
  245. let panoCount = panoData.length
  246. let pointcloudLoaded = 0
  247. let datasetsCount = Object.keys(Potree.settings.datasetsPanos).length
  248. panoData.forEach((pano, index)=>{
  249. let cloudPath = `${Potree.scriptPath}/data/panoEdit/uuidcloud/${pano.uuid}/cloud.js`
  250. let name = datasetId + '-'+pano.uuid
  251. let timeStamp = 0
  252. pano.index = index //注意:index不等于uuid,因为有的uuid缺失。但是visibles中存的是下标!
  253. Potree.loadPointCloud(cloudPath, name , name, timeStamp, e => { //开始加载点云
  254. let scene = viewer.scene;
  255. let pointcloud = e.pointcloud;
  256. let config = Potree.config.material
  257. let material = pointcloud.material;
  258. material.minSize = config.minSize
  259. material.maxSize = config.maxSize
  260. material.pointSizeType = /* 'ADAPTIVE'// */config.pointSizeType //Potree.PointSizeType[config.pointSizeType]//Potree.PointSizeType.ADAPTIVE;//FIXED
  261. pointcloud.changePointSize( 0.2 /* config.realPointSize */ ) //material.size = config.pointSize;
  262. pointcloud.changePointOpacity(1)
  263. material.shape = Potree.PointShape.SQUARE;
  264. pointcloud.color = config.pointColor
  265. pointcloud.dataset_id = datasetId; //多个点云指向一个datasetId
  266. pointcloud.panoUuid = pano.uuid
  267. pointcloud.timeStamp = timeStamp
  268. //transformPointcloud(pointcloud, pano)
  269. scene.addPointCloud(pointcloud);
  270. pointcloudLoaded ++;
  271. if(pointcloudLoaded == panoCount ){
  272. datasetLoaded ++
  273. viewer.images360.addPanoData(panoData , datasetId )
  274. if(datasetLoaded == datasetsCount){
  275. pointcloudLoadDone()
  276. }
  277. }
  278. })
  279. })
  280. }
  281. if(!Potree.settings.isOfficial){
  282. Potree.settings.datasetsPano = {'testDataset':null}
  283. Potree.loadPanosInfo( data=>{loadPanosDone('testDataset', data.sweepLocations)} )
  284. }
  285. }
  286. /* var changeLog = ()=>{ //如果移动端加了test反而出不来bug的话,用这个
  287. var textarea = document.createElement('textarea');
  288. textarea.id = "consoleLog";
  289. textarea.style.width = '160px';
  290. textarea.style.height = '200px'
  291. textarea.style.position = 'fixed'
  292. textarea.style.right = 0
  293. textarea.style.bottom = '0'
  294. textarea.style['z-index'] = 9999;
  295. textarea.style.color = 'black';
  296. textarea.style.opacity = 0.9;
  297. textarea.style['font-size'] = '12px';
  298. textarea.style['backgroundColor'] = '#ffffff'
  299. document.getElementsByTagName("body")[0].appendChild(textarea);
  300. var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
  301. var exchange = function (o) {
  302. console["old" + o] = console[o];
  303. console[o] = function () {
  304. var args = Array.from(arguments)
  305. console["old" + o].apply(this, arguments)
  306. var t = document.getElementById("consoleLog").innerHTML;
  307. var str = ''
  308. args.forEach(a=>{
  309. str += a + ' '
  310. })
  311. document.getElementById("consoleLog").innerHTML = str + "\n\n" + t;
  312. }
  313. }
  314. for (var i = 0; i < list.length; i++) {
  315. exchange(list[i])
  316. }
  317. }
  318. changeLog() */
  319. export {start, panoEditStart}
  320. /*
  321. 坐标转换问题:
  322. 由于控制点可以随便输入,所以本地和地理位置的转换也是可拉伸的。而navvis的转换是等比由中心展开,
  323. 所以对比两种转化方式时误差较大。
  324. 另外地理注册控制点是有参考数据集的,若参考数据集和我放置在0,0,0的数据集一致,就可直接使用,否则要转换。
  325. */