基于EarthSDK的自定义UI实现

        EarthSDK 通过EarthUI提供一套官方风格的UI。如果我们想要基于官方的UI风格，定制自己的菜单栏、右键菜单、树形列表等行为，貌似没有提供标准的接口，需要自己去修改。

        这里把我修改过的UI整理分享如下。

• mainbar 主菜单修改：

XbsjEarthUI.js 中描述菜单项的位置，依次增加就可以了。

 

• contextmenu 修改：

菜单下的rabbion面板，需要在另一个地方定义。EarthSDK是通过自己封装的一套模板动态生成的dom结构，由于源码混淆重命名，能力有限，没有找到实现的逻辑。所以只能自己动态创建dom结构，对于前端的小伙伴应该没啥难度。

下面是我在官方菜单【其他】下新增的自定义功能入口

运行效果如下图：

 

以上应该没什么难度，但是前提需要稍微格式化一下XbsjEarthUI.js的结构，通过元素定位到具体的位置，整理出默认的模板结构，依次添加就可以了。 

• 右键菜单修改：

右键菜单等属于自定义UI的范畴，官方的demo中有对应的源码可以参考

内置UI组件http://earthsdk.com/v/last/Apps/Examples/?menu=true&url=./earthui-xbsjUI.html我这里稍稍扩展的右键菜单的项的数量，发现数量有限制，如果菜单项太多，前面增加的菜单项会被挤掉。这里也能看出来，其实官方其实把更多的精力放在数据处理，毕竟那是真金白银啊。

通过为contextMenu的pop方法传入一个数组，数组包含菜单名称，以及响应。

this.$root.$earthUI.contextMenu.pop([{
                        text: '1号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMONE);
                        }
                    },{
                        text: '2号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMTWO);
                        }
                    },{
                        text: '3号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMTHREE);
                        }
                    },
                    {
                        text: '4号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMFOUR);
                        }
                    },
                    {
                        text: '5号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMFIVE);
                        }
                    },
                    {
                        text: '6号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMSIX);
                        }
                    },
                    {
                        text: '7/8号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMSEVEN);
                        }
                    },
                    {
                        text: '9/10号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMNINE);
                        }
                    },
                    {
                        text: '11号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMELEVEN);
                        }
                    },
                    {
                        text: '12/13号宿舍楼',
                        func: () => {
                            this.click(app.switchLayoutMgr.enum.DORM_NUMTWEL);
                        }
                    },
                ]);

看下效果

• 树形列表修改：

树形列表主要挂在earthUI.earth.sceneTree.root下，可以动态添加，也可以通过json结构去创建。我是通过json结构创建的列表，又发现了bug，默认的模型信息无法实现【unchecked】的状态，但是亚平组可以实现unchecked。具体原因不详。

局部参考如下：

我对默认的check状态进行了简单的管理，实现显示隐藏，以及ID的切换，大概位置在

 

• 提示信息修改：

 默认行为，每次加载完成一个SceneTree的节点后，会打印一条提示信息，我在这里增加了一个回调，用于处理模型本身初始化的一些行为。

 

• 鼠标事件

鼠标略过的交互行为，是在XbsjEarth.js中实现的。

         由于使用EarthSDK时间不长，且无源码，所以自定义的部分非常分散，不好管理。在官方的文档中找了很久，貌似都没有这部分内容。或者说的很隐晦，或者没有案例。遇到很多问题。通过以上的一些修改和尝试，基本把常用的问题解决的差不多。