Potree 003 基于Potree Desktop创建自定义工程

时间:2023-01-15 20:10:24

1、第三方js库

第三方库js库选择dojo,其官网地址为https://dojotoolkit.org/,git地址为https://github.com/dojo/dojo,demo地址为https://demos.dojotoolkit.org/demos/,如果打不开,可以多刷新几次。

因为使用ArcGIS API for js开发,接触到了dojo,dojo是一个非常优秀的js框架库,包含的内容非常全,做单页面Web应用程序是一个非常不错的选择。

2、修改Mian.js文件

Main.js文件主要还是设置electron的一些参数,代码如下。

var electron = require("electron");
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var path = require("path");
var Menu = electron.Menu;
var myMainWindow;
function CreateWindow() {
    // 新建主窗体,设置图标、加载主页面
    myMainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            backgroundThrottling: false
        },
        show: false
    });
    myMainWindow.maximize();
    myMainWindow.setIcon(path.join(__dirname, "Res/Images/Ico64.png"));
    myMainWindow.loadFile(path.join(__dirname, "Index.html"));
    myMainWindow.show();
    //把electron带的菜单隐藏
    Menu.setApplicationMenu(null);
    //屏蔽警告
    process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
    myMainWindow.on("closed", function () {
        myMainWindow = null;
    });
}
app.on("ready", CreateWindow);
// Quit when all windows are closed.
app.on("window-all-closed", function () {
    if (process.platform !== "darwin") {
        app.quit()
    }
});
app.on("activate", function () {
    if (myMainWindow === null) {
        CreateWindow()
    }
});

我们在Potree Desktop代码中的Main.js文件的基础上上做了修改。通过引用electron,得到electron、app、BrowserWindow、path、Menu等引用,并定义了CreateWindow函数。

该函数是Main.js最主要的函数,在代码中,我们创建了一个BrowserWindow窗体,并最大化该窗体。设置了窗体图标、加载的页面等。最后调用窗体的Show函数,打开窗体。BrowserWindow窗体自带了一个菜单,通过Menu.setApplicationMenu(null);隐藏electron自带的菜单。当窗体关闭的时候,设置myMainWindow变量的值为null。

后面的代码主要针对全局App,当系统环境准备好的时候,调用CreateWindow函数。当所有的窗体都关闭后,退出App。当App被激活的时候,如果myMainWindow变量为null,则调用CreateWindow函数。这些逻辑基本上都是从Potree Desktop中拷贝过来的,修改了下变量名称,逻辑未变。

代码运行Mian.js,实例化BrowserWindow窗体,加载Index.html,此时系统就进入了Index.html页面。

3、修改index.html文件

我们的目的是做一个Web单页面应用程序,样式以及操作方式要尽量能贴近普通的桌面应用程序。整体布局包括菜单栏、工具栏、左侧工程树以及中间的主显示区。

首先引用外部的js和css文件,包括dojo、Potree定义的文件以及我们系统中自己定义的一些文件,代码如下。

<link rel="stylesheet" type="text/css" href="./libs/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">

<link rel="stylesheet" href="Res/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="Res/dojo/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="Res/dojo/dojox/form/resources/CheckedMultiSelect.css" />
<link rel="stylesheet" href="Res/dojo/dojox/form/resources/RangeSlider.css" />
<link rel="stylesheet" href="Res/dojo/dojox/widget/ColorPicker/ColorPicker.css" />

<link rel="stylesheet" href="Index.css" />
<link rel="stylesheet" href="AppUI/AppMenuUI.css" />
<link rel="stylesheet" href="AppUI/AppToolBarUI.css" />

<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>
<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="./libs/potree/potree.js"></script>
<script src="./libs/plasio/js/laslaz.js"></script>
<script src="./libs/three.js/build/three.js"></script>
<script src="./libs/three.js/build/three.js"></script>

接下来定义对electron和Nodejs中一些功能的引用。

<script>
    var Electron = require('electron');
    var ElectronDialog = require('electron').remote.dialog;
    var NodeFS = require('fs');
    var NodePath = require('path');
    var NodeChildProcess = require('child_process');
</script>

ElectronDialog可弹出本地对话框,包括消息对话框,是否对话框等,类似于.Net中的MessageBox。NodeFS模块可对文件进行操作,类似于.Net中的File类。NodePath模块可文件路径进行操作,类似于.Net中的Path类。NodeChildProcess模块可调用本地的exe文件,并可以传入参数,捕捉输出信息等。

接下来是使用dojo库的一些配置以及Index.html页面直接引用的一些js文件。

<script>
    var dojoConfig = {
        async: true,
        parseOnLoad: false,
        //用于页面加载时立即加载的JS依赖
        deps: ["dojo/parser"],
        callback: function (parser) { },
        //加载一个模块的请求超时时间,如果超时说明加载模块失败
        waitSeconds: 10,
        //如果为true可以避免模块缓存(原理就是在请求模块的URL加上当前时间戳)
        //cacheBust: true,
    }
</script>
<script src="Res/dojo/dojo/dojo.js"></script>
<script src="Framework/URLHelper.js"></script>
<script src="Framework/DateFormat.js"></script>
<script src="Index.js"></script>

Index.html文件最后,是该页面的布局代码,如下所示。

<body class="claro">
    <table id="UI_Main_Table">
        <tr style="height:30px">
            <td padding:0">
                <div id="UI_AppMenuUI_Div"></div>
            </td>
        </tr>
        <tr style="height:30px">
            <td padding:0">
                <div id="UI_AppToolBarUI_Div"></div>
            </td>
        </tr>
        <tr>
            <td style="padding:0;">
                <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, liveSplitters:false" style="width: 100%; height: 100%; margin: 0; padding: 0; ">
                    <div id="UI_AppTreeUI_Div" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="minSize:20, region:'leading', splitter:true" style="width: 260px;"></div>
                    <div id="UI_Center_BorderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0; padding: 0; ">
                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center',splitter:true">
                            <div class="potree_container" style="height:100%">
                                <div id="potree_render_area"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

我们在body中直接定义了一个Table作为根元素,该表格分三行,第一行菜单栏,第二行工具条,第三行就是主显示区。如果想在底部增加状态栏,可再增加一行。

主显示区使用了dojo中定义的dijit/layout/BorderContainer,在BorderContainer中添加了两个dijit/layout/ContentPane,其中一个ContentPane的region属性设置为leading,另外一个ContentPane的region属性设置为center,并都设置splitter=true。这样主显示区域左侧会添加一个区域,宽度为260px,剩下的为中间区域,并且两区域可左右调整大小。

我们在Index.js中添加菜单。

4、添加菜单

菜单我们使用dojo中定义的dijit/MenuBar,如果我们添加文件子菜单,html代码如下。

<div style="font-size:14px">
    <div data-dojo-type="dijit/MenuBar">
        <div data-dojo-type="dijit/PopupMenuBarItem">
            <span>文件</span>
            <div data-dojo-type="dijit/DropDownMenu" data-dojo-attach-point="UI_File_DropDownMenu"></div>
        </div>
    </div>
</div>

在js文件中,我们可以实例化一个dijit/MenuItem,添加到UI_File_DropDownMenu中。

CreateMenuItem: function () {
    var myMenuItem = new MenuItem({
        label: "打开文件",
        iconClass: "AppMenuUIMenuItemIcon FileOpenIcon"
    });
    var myThis = this;
    var myEventHander = on(myMenuItem, "click", function () {
        myThis._OnClick();
    });
    this._EventHanderArray.push(myEventHander);
    return myMenuItem;
},
//点击命令按钮执行的函数
_OnClick: function () {
    var myFilePathArray = ElectronDialog.showOpenDialogSync(null, {
        title: "选择工程文件",
        properties: ["openFile"],
        filters: [
            { name: '工程文件', extensions: ['project'] }
        ]
    });
    if (myFilePathArray == null) {
        return;
    }
    var myProject = new Project();
    myProject.Open(myFilePathArray[0]);
    this._Application.SetProject(myProject);
},

把创建的MenuItem添加到菜单栏上的代码如下。

this.UI_File_DropDownMenu.addChild(new FileNewCommand({}, this._Application).CreateMenuItem());

5、添加工具条

工具条使用dojo中定义的dijit/Toolbar,html代码定义如下。

<div>
    <div data-dojo-type="dijit/Toolbar" data-dojo-attach-point="UI_Toolbar">
        <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="UI_TopView_Button"
                data-dojo-props="iconClass:'AppToolBarUIButtonIcon TopViewIcon',showLabel:false">
            上视图
        </button>
        <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="UI_BottomView_Button"
                data-dojo-props="iconClass:'AppToolBarUIButtonIcon BottomViewIcon',showLabel:false">
            下视图
        </button>
        <span data-dojo-type="dijit/ToolbarSeparator"></span>
        <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="UI_FullExtent_Button"
                data-dojo-props="iconClass:'AppToolBarUIButtonIcon FullExtentIcon',showLabel:false">
            全图
        </button>
    </div>
</div>

在js文件中,可以具体定义Button按钮点击后执行的函数,代码如下。

//点击全图按钮执行的函数
on(this.UI_FullExtent_Button, "click", function () {
    myThis._Application.Viewer.fitToScreen();
});

一些逻辑较为复杂的工具,我们就要单独定义了,类似于定义菜单,我们会定义一个工具按钮。我们以新建工程为例,js代码如下。

define([
    "dojo/_base/declare",
    "dojo/on",
    "dijit/MenuItem",
    "dijit/form/Button"
], function (
    declare,
    on,
    MenuItem,
    Button
) {
    return declare("ProjectNewCommand", null, {
        _Application: null,
        _EventHanderArray: null,
        //构造函数
        constructor: function (args, pApplication) {
            declare.safeMixin(this, args);
            this._Application = pApplication;
            this._EventHanderArray = [];
        },
        //创建MenuItem
        CreateMenuItem: function () {
            var myMenuItem = new MenuItem({
                label: "新建工程",
                iconClass: "AppMenuUIMenuItemIcon ProjectNewIcon"
            });
            var myThis = this;
            var myEventHander = on(myMenuItem, "click", function () {
                myThis._OnClick();
            });
            this._EventHanderArray.push(myEventHander);
            return myMenuItem;
        },
        //创建Button
        CreateButton: function () {
            var myButton = new Button({
                label: "新建工程",
                iconClass: "AppToolBarUIButtonIcon ProjectNewIcon",
                showLabel: false,
            });
            var myThis = this;
            var myEventHander = on(myButton, "click", function () {
                myThis._OnClick();
            });
            this._EventHanderArray.push(myEventHander);
            return myButton;
        },
        //点击命令按钮执行的函数
        _OnClick: function () {
            var myThis = this;
            require(["WebRoot/CoreUI/Projects/ProjectNewDialog"],
                function (Dialog) {
                    var myDialog = new Dialog({});
                    myDialog.ShowDialog();
                    myDialog.on("ProjectCreated", function (e) {
                        myThis._Application.SetProject(e.Project);
                    });
                });
        },
        //默认销毁函数
        destroy: function () {
            for (var i = 0; i < this._EventHanderArray.length; i++) {
                this._EventHanderArray[i].remove();
            }
            this._EventHanderArray = [];
        },
    });
});

代码中包含了CreateMenuItem和CreateButton函数,分别返回MenuItem和Button,点击这两个UI都是执行_OnClick函数,也就是说,我们当前定义的ProjectNewCommand.js,实例化得到ProjectNewCommand对象后,调用CreateMenuItem函数获取的按钮可以添加到菜单上,调用CreateButton函数获取的按钮可以添加到工具条上,且点击后,两个按钮的行为一致。

把按钮添加到工具栏上的代码如下。

var myProjectNewCommand = new ProjectNewCommand({}, myApplication);
myAppToolBarUI.UI_Toolbar.addChild(myProjectNewCommand.CreateButton(), 0);

6、Potree Viewer初始化

系统整体布局、菜单栏,工具条、左侧工程区域以及中间显示区域都定义好了之后,我们就要定义Viewer了。定义的时候,我们依然要参考Potree Desktop中实例化Viewer的代码,并根据实际需求修改。

var myPotreeRenderArea = document.getElementById("potree_render_area");
var myViewerArgs = {
    noDragAndDrop: true,
};
var myViewer = new Potree.Viewer(myPotreeRenderArea, myViewerArgs);
myViewer.setEDLEnabled(true);
myViewer.setFOV(60);
myViewer.setPointBudget(3 * 1000 * 1000);
myViewer.setMinNodeSize(0);
myViewer.loadSettingsFromURL();
myViewer.setDescription("");
myViewer.setControls(myViewer.earthControls);

7、系统运行效果

执行.bat文件,运行,得到的系统主界面如下图所示。

Potree 003 基于Potree Desktop创建自定义工程