控件基础

在场景中，通过控件Widget来实现不同形式的场景交互。

我们 SDK 内置了如下基础控件：

  • 导航罗盘 CompassWidget
  • 导航Cube CubeViewWidget
  • 操作引导 GuideWidget
  • 缩放 ZoomWidget
  • 图层列表 LayerListWidget
  • 坐标显示 CoordinateWidget
  • 距离测量 DirectLineMeasurement3DWidget
  • 剖切 SliceWidget
  • 场景地图 BasemapGalleryWidget
  • 框选放大 BoxZoomInWidget
  • 滚轮特效 MouseScrollingEffectWidget
  • 鼠标提示窗 MousePromptWidget
  • 底部状态栏 StatusBarWidget
  • 时间面板 ClockPanelWidget
  • 日照分析 IlluminationWidget
  • 主题切换 ThemeWidget
  • 通视分析 LineOfSightWidget
  • 构件树 BuildingTreeWidget
  • 自定义工具栏 ToolbarWidget
  • 右键菜单 ContextMenu
  • 弹窗 popup
注：除此之外，我们也在开发新的控件，实时更新控件。

1. 控件初始化

控件本质上是一个 js 类，大部分使用时直接实例化即可。

控件初始化和场景scene息息相关，所以分两种情况：

1.1 场景初始化时添加

new ubm.Scene('app', {
  ...
  ui:{
    widgets:[
      {
        //id 唯一标识符
        id:'home',
        // name 控件名称
        name: 'HomeWidget',
        //position 控件位置信息 top-right | top-left | bottom-right | bottom-left | manual  
        position: 'top-right',
      }
    ]
  }
  ...
})
注： position 属性中的 manual，是有些控件是有自己内置的固定位置，不需要自己设置位置，可以不设置 position 属性，也可以将其设置为 manual 。

1.2 场景初始化之后

1.2.1 实例化控件

如初始化导航器控件：

// 传入的参数 scene 为当前的场景初始化之后的实例。
const instanceWidget = new ubm.CubeViewWidget(scene)
注：控件在实例化的时候，一些控件是需要传递必要的参数的，具体的控件需要具体分析。

1.2.2 添加控件

scene.when(() => {
  //添加导航Cube
  scene.ui.add(instanceWidget, 'top-right')
})

2. 控件管理

通过场景实例的 UI 属性 scene.ui来动态添加add()或移除remove() 控件。

2.1 动态添加控件

//第二个参数为位置参数，表示所添加控件在场景页的位置。
scene.ui.add(instanceWidget, "top-left")

2.2 动态移除控件

scene.ui.remove(instanceWidget)
注：在使用动态添加add()或移除remove() 控件的时候，要在 scene.when() 函数的回调中使用，意为待 scene 场景实例加载完成后才添加控件。

3. 部分控件特殊用法

由于每个控件功能不同，所以为满足控件的功能需求部分控件采用了特殊的用法。例如：右键菜单 ContextMenu 、弹窗 popup 等等。

详细请参看下页介绍。

Table of Contents