工具栏控件
工具栏控件
在场景中为了方便使用各种特定的功能,我们提供了一个工具栏控件 ToolbarWidget来存放。
工具栏控件里不仅可以存放内置插件,还可以添加一些自定义功能项。
1. 类型
1.1 工具排列
工具栏中工具的排列方式,默认为common。
| 类型 | 描述 |
|---|---|
| vertical | 竖排 |
| horizontal | 横排 |
| common | 普通 |
1.2 工具显示形式
工具栏中工具是否互斥显示,如下所示,默认值为mix。
| 属性值 | 描述 |
|---|---|
| mutex | 互斥,指的是点击显示的工具项面板只显示一个 |
| mix | 混合,指可以同时显示多个工具项面板 |
1.3 面板方向
点击工具栏中功能项时,弹出的面板相对于工具栏的位置,默认值为bottom,共有以下可选项:
| 枚举值 | 描述 |
|---|---|
| top | 顶部,当type为horizontal设置有效 |
| bottom | 下,当type为horizontal设置有效 |
| left | 左,当type为vertical设置有效 |
| left | 右,当type为vertical设置有效 |
1.4 工具栏的状态
在触屏情况下的工具栏的状态,默认为auto。
| 值 | 描述 |
|---|---|
| on | 开 |
| off | 关 |
| auto | 自动 |
2. 属性
2.1 工具栏属性
| 属性 | 类型 | 说明 | 必填 |
|---|---|---|---|
| tools | ITool | 工具项 | √ |
| container | string | HTMLElement | DOM | √ |
| style | StyleSheet | 样式 | |
| iconStyle | IIconStyle | 工具图标样式 | |
| groupStyle | string | 分组样式 | |
| placement | string | 面板方向,工具相对于toolbar的摆放位置 | |
| mode | string | 是否使工具项互斥显示 | |
| type | string | 工具的排列类型 | |
| isHeightAlignment | boolean | 是否适配工具高度符合竖排高度 (当type为vertical设置有效) | |
| touch | ToolbarTouch | 适配触屏 |
2.2 工具项属性
工具项的数据结构ITool的属性如下:
| 属性 | 类型 | 说明 | 必填 |
|---|---|---|---|
| id | string | ID | √ |
| name | string | 名称,根据名称确定所放置的插件 | √ |
| label | string | 简介 | |
| icon | string | 图标大小 | |
| isCustom | string | 是否是自定义widget | |
| selectable | boolean | 是否选中,默认false | |
| props | --- | 所需传入的参数 |
2.3 适配触屏属性
适配触屏的数据结构ToolbarTouch的属性如下:
| 属性 | 类型 | 说明 | 必填 |
|---|---|---|---|
| enable | string | 是否开启触屏类型,默认为auto | √ |
| max | number | 最大行数或者列数,默认是2(注意tool位于上下使用行,左右使用列) |
2.4 工具图标属性
工具图标属性的数据结构IIconStyle的属性如下:
| 属性 | 类型 | 说明 | 必填 |
|---|---|---|---|
| size | number | 图标大小 | |
| defaultIconColor | string | 图标默认颜色 | |
| activeIconColor | string | 高亮图标颜色 | |
| defaultStyle | string | 默认样式 | |
| activeStyle | string | 高亮样式 |
3. 事件
| 事件 | 说明 |
|---|---|
| onInit() | 工具项初始化事件 |
| onClick() | 工具项点击事件 |
3.1 工具项初始化事件
onInit?: (props: object | undefined) => void;
可以设置控件的初始状态,如:给需要使用的属性赋值、设置初始化数据等。代码示例如下:
let i
...
onInit: () => {
// 赋值
i = 222
// 设置初始化数据
let a = 1
}
...
3.2 工具项点击事件
onClick?: (index: number | string) => void;
主要用于工具项的图形界面显隐,但同时也可以设置其他触发事件,如:修改工具项的属性等。代码示例如下:
onClick: () => {
alert('你点击了自定义工具项按钮')
// 修改工具项的图标
tool.icon = 'x-bar'
// 设置定时操作
setTimeout(() => {
tool.selectable = false
}, 1000);
}
4. 使用
由上述类型、属性和方法可以看出,工具栏控件是和工具项紧密联系的。
4.1 场景初始化时添加
场景初始化添加工具栏,代码示例如下:
new ubm.Scene('app', {
viewingMode: 'local',
ui:{
// 工具栏
toolbar:{
// 类型
type: 'vertical',
// 工具相对于toolbar的摆放位置
placement: 'top',
// 是否适配插件高度符合竖排高度 (当type为vertical设置有效)
isHeightAlignment: false,
// 互斥显示
mode: 'mutex',
// DOM
container: 'container',
// 适配触屏
touch: {
enable: 'auto'
},
// 工具组
tools: [
// 组0-简写:属于内置插件写法,只写插件id
['measure', // 测量插件
'viewPoint'], // 视点书签
// 组1-常规写:属于内置插件写法,标明插件及其属性
[{
name: 'tree',
label: '构件树',
// 插件属性
props: {
openContextMenu: false,
openProperty: true,
visible: false,
expandType: 'icon',
expandAll: false,
keys: {
primary_key: 'guid',
value: 'guid'
}
}
}],
// 组2-custom:属于自定义功能项,可自定义工具栏的某项工具的功能作用
[{
name: 'custom',
icon: 'map-contents',
label: '自定义工具项按钮',
onClick: () => {
alert('你点击了自定义工具项按钮')
}
}],
]
}
}
})
以上tools由三种不同的group组成,group不仅代 表它们的分类,也表明了在工具栏中的位置,group默认是从0开始的。
理解了group也方便后续自定义功能项的添加。
4.2 场景初始化之后添加
初始后场景后,可以使用CustomTool在场景中创建自定义的工具项,并把其添加到场景的工具栏中。代码示例如下:
let i
// 创建自定义工具项
const tool = new ubm.CustomTool({
name: '111',
// 场景
scene: scene,
label: '111',
icon: 'web',
onInit: () => {
i = 222
},
onClick: () => {
// 获取声明的功能tool,修改其属性icon
tool.icon = 'x-bar'
setTimeout(() => {
tool.selectable = false
}, 1000);
console.log('iii', i);
},
})
// 把工具项添加到场景工具栏中,可指定组别group
scene.ui.toolbar.add(tool, 2)
5. 其它
5.1 内置插件
以下列举了一些可以在工具栏中直接使用的内置插件,如有需要了解详细,可点击查看插件列表。
- viewPoint:视点书签
- visibility:视口过滤
- slice:剖切分析
- sceneSetting:场景预设
- route:路径分析
- roam:视角漫游
- renderMode:显示模式
- note:场景批注
- measure:场景测量
- mapFilter:颜色过滤
- lineOfSight:通视分析
- environment:环境设置
- drawing:绘制
- dimension:场景标注
- buffer:缓冲分析
- propertyView:特性

BIMFlux AI
