|
|
@@ -0,0 +1,181 @@
|
|
|
+<!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>
|
|
|
+<style>
|
|
|
+ #consoleLog{
|
|
|
+ width: 30%;
|
|
|
+ height: 130px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 2px;
|
|
|
+ z-index: 999999;
|
|
|
+ color: "321";
|
|
|
+ opacity: 0.9;
|
|
|
+ font-size: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<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>
|
|
|
+
|
|
|
+ <!-- <script src="../../libs/stats.js/stats.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 src="https://webapi.amap.com/maps?v=2.0&key=4578048f6e03386759d5609401e738d3"></script> -->
|
|
|
+ <script type="module">
|
|
|
+
|
|
|
+ import * as THREE from "../libs/three.js/build/three.module.js";
|
|
|
+ import browser from '../src/custom/utils/browser.js' //这里必须加.js
|
|
|
+ window.THREE = THREE
|
|
|
+
|
|
|
+ Potree.config.view.near = 0.001, Potree.config.view.far = 1e3 //same as splatter
|
|
|
+
|
|
|
+ var splatId = browser.urlHasValue('m',true)
|
|
|
+ var urlAtSplatter = !browser.urlHasValue('urlAtCurrent') ;
|
|
|
+ //Potree.start(document.getElementById("potree_render_area"),null, null,{noMap:true});
|
|
|
+ new Potree.Viewer(document.getElementById("potree_render_area") , null, {noMap:true});
|
|
|
+ viewer.background.set('#000')
|
|
|
+
|
|
|
+
|
|
|
+ if(splatId === ''){
|
|
|
+ splatId = 'SG-t-jp-zSUztbgFpmt', urlAtSplatter = true
|
|
|
+ }
|
|
|
+ /*const defaultConfig = {
|
|
|
+ "splatId": 'SG-t-jp-zSUztbgFpmt', // "test0_4096_L8_not_sortscale",
|
|
|
+ "block": 65536,
|
|
|
+ "root": {
|
|
|
+ "radius": 0.6,//0.4,// 1.024,
|
|
|
+ "size": 35031//8326 //8534
|
|
|
+ },
|
|
|
+ "size": 649*65536, //421*
|
|
|
+ "tile": 4,
|
|
|
+ path: Potree.resourcePath+'../../../../examples/tomcat/splatter.app/data',
|
|
|
+ view:{
|
|
|
+ "yaw": -1.5924752534051696,
|
|
|
+ "pitch": -0.14400671146230742,
|
|
|
+ "position": {
|
|
|
+ "x": -45.12437783490361,
|
|
|
+ "y": 1.6148221490172163,
|
|
|
+ "z": 2.9891692740919122
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let applyConfig = (config)=>{
|
|
|
+ new Potree.Splatter(viewer,config);
|
|
|
+ config.view && viewer.mainViewport.view.applyJson(config.view)
|
|
|
+
|
|
|
+ let dom = document.querySelector('#mapGaode')
|
|
|
+ if(dom){
|
|
|
+ viewer.splatter.logArea = dom
|
|
|
+ dom.style.height = '43px', dom.style.width = '200px'
|
|
|
+ dom.style['font-size'] = '14px'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if(splatId!=''){
|
|
|
+ let path = browser.urlHasValue('gsPath', true)
|
|
|
+ if(!path){
|
|
|
+ if(urlAtSplatter){
|
|
|
+ path = Potree.resourcePath + '../../../../examples/tomcat/splatter.app/data/' + splatId
|
|
|
+ }else{
|
|
|
+ path = Potree.resourcePath + '/../data/splatter/' + splatId
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let dataVersion = path.includes('http') ? Date.now() : 10
|
|
|
+ let jsonUrl = Potree.Common.joinUrl(path, 'data.json?m='+dataVersion)
|
|
|
+ Potree.loadFile(jsonUrl,{},(e)=>{
|
|
|
+ let config = Object.assign({
|
|
|
+
|
|
|
+ }, e, {
|
|
|
+ "block": 65536,
|
|
|
+ "root": {
|
|
|
+ "radius": browser.urlHasValue('radius', true) || e.radius || (browser.isMobile() ? 0.25 : 0.6),
|
|
|
+ "size": e.level_0 //8326 //8534
|
|
|
+ },
|
|
|
+ "size": e.size || e.files*65536,
|
|
|
+ path,
|
|
|
+ dataVersion: 6,
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ applyConfig(config)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ viewer.scene.axisArrow.visible = true
|
|
|
+ //example: https://192.168.0.59:1234/examples/splatter.html?m=rly-jb1
|
|
|
+
|
|
|
+ //viewer.setFOV(50) //splatter原本中设置最小fov为50
|
|
|
+ viewer.setFOV(75) //原本70，在手机端比splatter的点多，增大fov会减少点
|
|
|
+ Potree.settings.intersectWhenHover = false //降cpu
|
|
|
+ //viewer.scene.axisArrow.visible = true // 会导致效果不对还警告?!!!!
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if(browser.isMobile()){
|
|
|
+ window.addEventListener("load", ()=>{
|
|
|
+ var textarea = document.createElement('textarea');
|
|
|
+ textarea.id = "consoleLog";
|
|
|
+
|
|
|
+ document.getElementsByTagName("body")[0].appendChild(textarea);
|
|
|
+ var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
|
|
|
+ var exchange = function (o) {
|
|
|
+ console["old" + o] = console[o];
|
|
|
+ console[o] = function (str ) {
|
|
|
+ console["old" + o].apply(this, arguments)
|
|
|
+ textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ exchange(list[i])
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
xzw