实验步骤
一、配置Potree
1、首先，确定电脑已经安装了nodejs和gulp，可以使用npm命令和gulp命令。
2、在一个文件夹下，打开git命令面板，输入git clone https://github.com/potree/potree。
3、在终端输入以下命令：
cd Potree安装目录
npm install
npm install -g gulp
4、输入命令：gulp watch
此时Potree的安装目录下应当有了一个build的文件夹。
二、准备数据
Potree可视化数据需要使用具备Potree它定义的格式的数据，因此需要对txt、las等数据使用PotreeConverter转换格式。
1、在git面板输入命令：git clone https://github.com/LAStools/LAStools
2、在终端输入以下命令：
cd ~/dev/workspaces/lastools
git clone https://github.com/m-schuetz/LAStools.git master
cd master/LASzip
mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=Release ..
make
这就配置好PotreeConverter所需要的LAStool依赖了。
3、继续在终端输入以下命令：
cd ~/dev/workspaces/PotreeConverter
git clone https://github.com/potree/PotreeConverter.git master
cd master
mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE=Release -DLASZIP_INCLUDE_DIRS=~/dev/workspaces/lastools/master/LASzip/dll -DLASZIP_LIBRARY=~/dev/workspaces/lastools/master/LASzip/build/src/liblaszip.so ..
make
等待它构建好。
4、新建一个文件夹PotreeConverted，作为要存放转换之后的数据的文件夹，将PotreeConverter/resources/page_template下的东西拷贝到点云数据.txt的该文件夹下（别拷贝文件夹，而是全选文件复制粘贴到PotreeConverted这个文件夹下）
5、进入之间构建好的PotreeConverter的build文件夹下的PotreeConverter文件夹，找到打开终端输入命令：
./PotreeConverter.执行文件后缀(exe/sh) 点云数据txt的路径 -o 转换后数据存放路径 -p 转换后数据的名字
6、等待转换好后，即可看到Potree格式的数据。格式如下：
2018-04-23 17-03-26屏幕截图.png
进入pointclouds/maxdata，应当看到：
2018-04-23 17-03-32屏幕截图.png
三、项目建立
1、打开Idea，点击File->New Project->选中static web标签->static web->next->输入项目名->Finish
2、将Potree安装目录下的Libs目录下的文件夹都拷贝到Idea项目下。
并将之前Potree的build目录拷贝过来，重命名为Potree
3、将之前转换好的数据的pointclouds文件夹拷贝到项目目录下。
4、完成后应具有的项目目录结构为：
2018-04-23 17-16-58屏幕截图.png
四、源码编写与运行
1、在项目下新建一个文件夹叫src。
2、在src下新建一个HTML文件，随意命名，文件中代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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="../libs/potree/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/perfect-scrollbar/css/perfect-scrollbar.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">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="../libs/spectrum/spectrum.js"></script>
<script src="../libs/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
<script src="../libs/three.js/build/three.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="../libs/potree/potree/potree.js"></script>
<script src="../libs/plasio/js/laslaz.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GfIjvGE8EkCeW7PwkdjOC38hV7hn8nwg"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=a2989b2bc788178770132e4b93e51fd9"></script>
<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
<!-- INCLUDE SETTINGS HERE -->
<div style="position: relative; width: 100%; height: 100%">
<div id="map_container" style="width: 100%; height : 100%; position: absolute;z-index: 0"></div>
<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1;background-color: rgba(0,0,0,0.5)">
<div id="potree_render_area" ></div>
</div>
<div id="mymenu" style="position: absolute; top: 5%;left: 2%; z-index: 2;
width : 20%; height: 100%; background:#fff;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">图层</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item disactive">地图</a>
<a href="#" class="list-group-item active">点云模型</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">投影</h3>
</div>
<div class="panel-body">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-default" id="ortho_btn">正交投影</button>
<button type="button" class="btn btn-default" id="pespect_btn">透视投影</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">设置Potree数据路径</h3>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control" id="inputfile">
</div>
<button type="submit" class="btn btn-default" id="submitBtn">提交</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">选点</h3>
</div>
<div class="panel-body" style="background-color: #4F4F4F;">
<li id="tools" style="list-style: none;"></li>
</div>
</div>
</div>
<script>
$(".list-group-item").click(function () {
if(this.classList[1] == "disactive"){
this.classList.remove("disactive");
this.classList.add("active");
}
else{
this.classList.remove("active");
this.classList.add("disactive");
}
});
var inputpath = "../pointclouds/maxdata/cloud.js";
$("#submitBtn").click(function () {
inputpath = $("#inputfile").val();
console.log(inputpath);
loadData();
});
$("#pespect_btn").click(function () {
viewer.setCameraMode(Potree.CameraMode["PERSPECTIVE"]);
$("#ortho_btn").classList.remove("active");
console.log(viewer.camer)
});
$("#ortho_btn").click(function () {
viewer.setCameraMode(Potree.CameraMode["ORTHOGRAPHIC"]);
$("#pespect_btn").classList.remove("active");
});
//Gaode map
var map = new AMap.Map('map_container', {
pitch:75,
viewMode:'3D',
zoom: 17,
expandZoomRange:true,
zooms:[3,20],
center:[116.333926,39.997245]
});
//relate Potree to the map
var canvas = document.createElement('canvas');
canvas.setAttribute("id","potree_canvas");
console.log(Potree.Features);
console.log(canvas);
canvas.width = map.getSize().width;
canvas.height = map.getSize().height;
var cus = new AMap.CustomLayer(canvas, {
opacit:50,
zIndex: 12
});
cus.setMap(map);
//Potree渲染区域初始化
var viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
viewer.setEDLEnabled(true);
viewer.setFOV(60);
viewer.setPointBudget(1*1000*1000);
viewer.loadSettingsFromURL();
viewer.setDescription("");
viewer.background = null;
//绘制菜单栏中的选点，与Potree自带的选点功能（callback）相连
let createToolIcon = function (icon, title, callback) {
let element = $(`
<img src="${icon}"
style="width: 32px; height: 32px"
class="button-icon"
data-i18n="${title}" />
`);
element.click(callback);
return element;
};
initMeasure();
var measuringTool = new Potree.MeasuringTool(viewer);
function initMeasure () {
// POINT
var elToolbar = $('#tools');
elToolbar.append(createToolIcon(
Potree.resourcePath + '/icons/point.svg',
'[title]tt.point_measurement',
function () {
$('#menu_measurements').next().slideDown();
var measurement = measuringTool.startInsertion({
showDistances: false,
showAngles: false,
showCoordinates: true,
showArea: false,
closed: true,
maxMarkers: 1,
name: 'Point'});
}
));
}
//加载点云数据
loadData();
function loadData() {
Potree.loadPointCloud(inputpath, "dotcloud", function(e){
viewer.scene.addPointCloud(e.pointcloud);
var material = e.pointcloud.material;
material.size = 0.01;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
viewer.fitToScreen();
});
//Potree.setProjection()
}
/*var canvasLayer = new AMap.CanvasLayer({
canvas: document.getElementById('potree_canvas'),
zIndex: 1,
opacity: 1
})*/
//canvasLayer.setMap(map);
</script>
</body>
</html>
4、点击Idea上方菜单栏Run中的Edit configurations，打开后配置如下（hdychi.html为我在上一步中创建的html）：
2018-04-23 17-31-02屏幕截图.png
这里主要配置Name和路径即可。
5、点击Run中的run xxx.html，等待浏览器打开后，即可看到项目：
2018-04-23 17-33-44屏幕截图.png
