bill
/
potree-sdk


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>Potree Viewer</title>

	<link rel="stylesheet" type="text/css" href="../../build/potree/potree.css">
	<link rel="stylesheet" type="text/css" href="../../libs/jquery-ui/jquery-ui.min.css">
	<link rel="stylesheet" type="text/css" href="../../libs/openlayers3/ol.css">
	<link rel="stylesheet" type="text/css" href="../../libs/spectrum/spectrum.css">
	<link rel="stylesheet" type="text/css" href="../../libs/jstree/themes/mixed/style.css">
</head>

<body>
	<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
	<script src="../../libs/spectrum/spectrum.js"></script>
	<script src="../../libs/jquery-ui/jquery-ui.min.js"></script>
	<script src="../../libs/other/BinaryHeap.js"></script>
	<script src="../../libs/tween/tween.min.js"></script>
	<script src="../../libs/d3/d3.js"></script>
	<script src="../../libs/proj4/proj4.js"></script> 
	
    
	<script src="../../libs/openlayers3/ol.js"></script>
	<script src="../../libs/i18next/i18next.js"></script>
	<script src="../../libs/jstree/jstree.js"></script>
	<script src="../../build/potree/potree.js"></script>
	<script src="../../libs/plasio/js/laslaz.js"></script>
	
	
	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
		<div id="potree_render_area" style="background-image: url('../../build/potree/resources/images/background.jpg');">
		
		</div>
		<div id="potree_sidebar_container"> </div>
	</div>
	
	<script type="module">

	import * as THREE from "../libs/three.js/build/three.module.js";
    import {Alignment} from "../src/modules/datasetAlignment/Alignment.js";
    import {Utils} from "../src/utils.js"
   
    
    
    
        var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
        if (number.indexOf("&") != -1) {
            number = number.substring(0, number.indexOf("&"));
        }
        if (number.indexOf("#") != -1) {
            number = number.substring(0, number.indexOf("#"));
        }
        
        Potree.settings.number = number || 't-o5YMR13'// 't-iksBApb'
         
        
        
		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
		
		viewer.setEDLEnabled(true);
		viewer.setFOV(60);
		viewer.setPointBudget(2_000_000);
		viewer.loadSettingsFromURL();
		 
		viewer.loadGUI(() => {
			viewer.setLanguage('en');
			$("#menu_appearance").next().show();
			viewer.toggleSidebar();
		});

        
        var datasetPath = `https://testlaser.4dkankan.com/indoor/${number}/api/datasets`
        Potree.loadDatasets(datasetPath,  (data)=>{
         
            var datasetLength = data.length 
            var loaded = 0
            var loadDone = function(){
                 //var url =   "../data/"+number+"/filter.json"
                var url = `https://testlaser.4dkankan.com/indoor/${number}/api/images/filter?hidden=false&lat=22.3666054305652&lon=113.59566752095002&radius=200000&site_model_entity=`
                
                
                var {boundSize, center} = Utils.computePointcloudsBound(viewer.scene.pointclouds)
                
                viewer.bound = {boundSize, center}
                
                Potree.Images360Loader.load2(url, viewer, {boundSize, center}).then( images => {
                    viewer.scene.add360Images(images);
                });
                
                 
                viewer.scene.view.setView(//position, target
                    center.clone().add(new THREE.Vector3(10,10,10)), 
                    center
                )
            
            }
            
            
            data.forEach((dataset,index)=>{
                var name = dataset.name 
                var locationLonLat = dataset.location.slice(0,2)
                
                
                if(!viewer.transform){
                
                    proj4.defs("NAVVIS:TMERC", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
                    proj4.defs("WGS84", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
                    //proj4.defs("pointcloud", viewer.getProjection()); //不用从cloud里拿了
                
                    let transform1 = proj4("WGS84", "NAVVIS:TMERC"); //这个ok  TMERC是展开的平面投影
                    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;");
                    viewer.transform = {
                        lonlatToLocal : transform1,
                        lonlatTo4550 : transform2       // 转大地坐标EPSG:4550  
                    } 
                    // proj4(fromProjection, toProjection, coordinates)
                    //let transform = proj4("WGS84", "pointcloud");
                 
                    
                }
            
            
                
                
                
                
                var cloudPath = 'https://laser.4dkankan.com/data/'+number+'/data/'+ name +'/webcloud/cloud.js' 
                Potree.loadPointCloud(cloudPath, name, e => {
                    let scene = viewer.scene;
                    let pointcloud = e.pointcloud;
                    
                    let material = pointcloud.material;
                    material.size =  0.7;
                    material.minSize =  0.1//2.0;
                    material.pointSizeType = Potree.PointSizeType.ATTENUATED//Potree.PointSizeType.ADAPTIVE;//FIXED
                    material.shape = Potree.PointShape.SQUARE;
                    //material.activeAttributeName = "rgba";
                    
                    /*
                    material.activeAttributeName = "color";
                    material.color.set(dataset.color)
                    material.opacity = 0.05
                    material.size = 0.2;
                    material.useEDL = false
                    */
                    scene.addPointCloud(pointcloud);
                     
                    pointcloud.dataset_id = dataset.id;//供漫游点找到属于的dataset点云
                    pointcloud.panos = [] 
                    
                    //旋转中心
                    //var center = new THREE.Vector3().addVectors(pointcloud.position, pointcloud.boundingBox.getCenter())  
                     
                    //偏移
                    //当只有一个dataset时，无论如何transform 点云和漫游点都能对应上。
                    var location = viewer.transform.lonlatToLocal.forward(locationLonLat)  //transform.inverse()
                    //初始化位置 
                    pointcloud.matrixAutoUpdate = false   //最好禁止updateMatrix  直接使用matrixWorld
                    pointcloud.orientationUser = 0  
                    pointcloud.translateUser = new THREE.Vector3;
                    
                    viewer.sidebar.addAlignmentButton(pointcloud) 
                    Alignment.rotate(pointcloud, null, dataset.orientation)  
                    Alignment.translate(pointcloud, new THREE.Vector3(location[0], location[1], dataset.location[2])) 
                    
                    pointcloud.updateMatrixWorld()
                    
                    
                    console.log(`%c点云${name}旋转值:${pointcloud.orientationUser}, 位置${pointcloud.translateUser.toArray()}`,"color:#13f;font-size:17px"   )
                    
                    
                    //-------------------
                     
                    viewer.mapView.showSources(false);
 
                    loaded ++;
                    if(loaded == datasetLength)loadDone()
                });
                    
            })
            
            
        })

		 
        
                

          
        window.testTransform = function(locationLonLat, location1, location2){
            proj4.defs("NAVVIS:test", "+proj=tmerc +ellps=WGS84 +lon_0=" + locationLonLat[0].toPrecision(15) + " +lat_0=" + locationLonLat[1].toPrecision(15));
            
            let transform = proj4("WGS84", "NAVVIS:test"); //这个ok  navvis里也是这两种转换 见proj4Factory
            if(location1){//经纬度
                return transform.forward(location1) 
            }else{
                return transform.inverse(location2) 
            }            
            
        }

		/*
        数据集校准 平移后
        单个数据集：
        
        点云的本地位置是一样的 。说明：单个数据集时点云最终平移量为0，同理漫游点也是 
        多个数据集时，参照为第一个dataset，见GeoTransformationService.setOffsetFromGlobal。所以第一个数据集的位置为000，其他的不是。因此本地坐标是不固定的，只有指定了参考数据集才能确定，如果去掉第一个数据集下一次显示的坐标就不同了，但是不影响相对位置所以看起来一样。
        （注意：navvis平移后要刷新location才生效。）
        
        
        var view = window.IV.getMainView() 
        view.ImageService.images.forEach(e=>console.log(e.id + ": "+e.location.toArray()))
        
        
        images360.panos.forEach(e=>console.log(e.id + ": "+e.position.toArray()))
        */        
		
	</script>
	
	
  </body>
</html>