使用Potree进行点云可视化

作者: hdychi | 来源:发表于2018-04-23 17:34 被阅读1202次

使用Potree进行点云可视化
Python 自然语言处理入门——提取《釜山行》的人物关系
R for data science （第一章） ②
【数据可视化】使用Python进行词云绘制
m6A图文复现08-Peak结果可视化metaPlotR
使用DataV制作实时销售数据可视化大屏（理论篇）
zeppelin中使用spark sql + pyspark混合
宜信开源|手把手教你创建第一个Davinci应用
iOS可视化布局中的预览功能
时间序列图

实验步骤

一、配置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

使用Potree进行点云可视化
实验步骤一、配置Potree 1、首先，确定电脑已经安装了nodejs和gulp，可以使用npm命令和gulp命...
Python 自然语言处理入门——提取《釜山行》的人物关系
使用jieba库对《釜山行》中的人物关系进行提取，然后使用Gephi软件进行关系可视化处理，得到可视化的人物关系...
R for data science （第一章） ②
使用ggplot2进行数据可视化①使用ggplot2进行数据可视化② 添加其他变量的一种方法是aesthetics...
【数据可视化】使用Python进行词云绘制
使用Python绘制词云 1、制作效果：绘制词云效果图：词云图中文本原文，复制文本保存到txt中： https...
m6A图文复现08-Peak结果可视化metaPlotR
上一期我们使用了Guitar包对Peak结果进行可视化，今天展示另一种可视化方法：使用metaPlotR包。这个...
使用DataV制作实时销售数据可视化大屏（理论篇）
课程目标了解可视化的应用场景掌握阿里云DataV可视化工具了解可视化大屏制作流程使用DataV模板制作可视...
zeppelin中使用spark sql + pyspark混合
使用spark读取json文件生成临时表使用spark-sql进行数据可视化使用pyspark + plotl...
宜信开源|手把手教你创建第一个Davinci应用
Davinci既可作为公有云/私有云独立使用，也可作为可视化插件集成到三方系统。用户只需在可视化UI上简单配置即可...
iOS可视化布局中的预览功能
在iOS开发中, 我们可以通过Storyboard或Xib进行可视化界面的布局, 然后使用AutoLayout进行...
时间序列图
使用Python进行时间序列数据可视化时间序列自然适用于可视化。随着时间的推移观察的线图很受欢迎，但是您可以使用...