工具栏控件

在场景中为了方便使用各种特定的功能，我们提供了一个工具栏控件 ToolbarWidget来存放。

工具栏控件里不仅可以存放内置插件，还可以额外添加一些自定义功能项。

1. 数据结构

1.1 ToolbarWidget 的参数

export interface IToolbarInitProps {
    // 工具项
    tools: ITool[];
    // 样式
    style: StyleSheet;
    // 类型：竖排 'vertical', 横排 'horizontal',默认普通 'common'
    type?: string;
    // 面板方向 工具相对于toolbar的摆放位置：上 top，下 bottom (当type为horizontal设置有效)。左 left，右 right (当type为vertical设置有效)
    placement?: string;
    // 是否使工具项互斥显示  'mutex'互斥  默认'mix'混合
    mode?: string;
    // 是否适配工具高度符合竖排高度 (当type为vertical设置有效)
    isHeightAlignment?: boolean;
    // DOM 可赋值ID
    container: string | HTMLElement;
    // 点击事件
    onClick?: (event: EventDetail) => void;
}

1.2 工具项

export interface ITool {
    id: string;
    // 名称 根据名称确定所放置的插件
    name: string;
    // 图标
    icon?: string;
    // 图标大小
    size?: string;
    // 点击此图标范围所触发的事件
    onClick?: (index: number | string) => void;
    // 初始化事件
    onInit?: (props: object | undefined) => void;
    // 所需传入的参数
    props?: {
        [key: string]: any;
    };
    // 简介 指向图标所弹出的提示
    label: string;
    // 是否是自定义widget--CustomWidget
    isCustom?: boolean
    // 是否选中 默认false
    selectable?: boolean
}

2. 内置插件

以下列举了可以在工具栏中直接使用的内置插件，如有需要了解详细，可点击查看插件目录。

  • viewPoint：视点书签
  • visibility：视口过滤
  • slice：剖切分析
  • sceneSetting：场景预设
  • route：路径分析
  • roam：视角漫游
  • renderMode：显示模式
  • note：场景批注
  • measure：场景测量
  • mapFilter：颜色过滤
  • lineOfSight：通视分析
  • environment：环境设置
  • draw：绘制
  • dimension：场景标注
  • buffer：缓冲分析
  • propertyView：特性

3. 控件使用

由上述数据结构可了解，自定义工具栏控件 ToolbarWidget 与工具项是紧密联系的，工具项由内置插件 plugin 和自定义功能项两种类别组成，具体使用如下：

3.1 场景初始化时添加

代码示例如下：

new ubm.Scene('app', { 
  viewingMode: 'local',  
  ui:{
    // 自定义工具栏
    toolbar:{
      // 类型
      type: 'vertical',
      // 工具相对于toolbar的摆放位置
      placement: 'top',
      // 是否适配插件高度符合竖排高度 (当type为vertical设置有效)
      isHeightAlignment: false,
      // 互斥显示 
      mode: 'mutex',
      // DOM
      container: 'container', 
      // 工具组
      tools: [
        // 组0-简写：属于内置插件写法,只写插件名称
        ['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也方便后续自定义功能项的添加。

3.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)
Table of Contents