方形区域

向三维场景视图中添加方形区域，用户可以自定义区域颜色、高度、旋转角度等属性。

方法

批量/单个添加区域

• 向三维场景中批量添加区域
• 方法名：add
• 参数说明：

// 方法
add(region: RegionOptions | Array<RegionOptions>): this

// RegionOptions 参数说明
export type RegionOptions = {
  id: string; // 区域唯一 id 
  groupId: string; // 区域 分组 id
  coordinate: Array<number>; // 中心坐标
  scale?: Array<number>; // 长宽高
  rotation?: Array<number>; // XYZ 轴旋转
  regionColor?: string | Array<number>; // 颜色
  opacity?: number; // 透明度
  isTop?: boolean; // 是否闭合顶部
};

• 示例参考：

async function handleMsg(count = 10) {
  const infos = []
  for (let i = 0; i < count; i++) {
    const info = {
      id: uuid(),
      groupId: `test-group-${handleCount}`,
      coordinate: [
        121.99869537353516 + Math.random() * 0.01,
        40.746940612792969 + +Math.random() * 0.01,
        31.902296066284
      ],
      scale: [100, 100, 100],
      rotation: [0, 0, 100],
      regionColor: 'red',
      opacity: 0.8
    }
    infos.push(info)
  }
  viewer.squareRegion.add(infos)
  handleCount++
}

根据分组 id 完成区域移除

• 根据分组id移除三维场景中已添加的区域
• 方法名：removeByGroupIds
• 参数说明：

// 方法 groupIds 分组 id 数组
  removeByGroupIds(groupIds: Array<string>) {}

• 示例参考：

viewer.squareRegion.removeByGroupIds(['test-group'])

根据 id 完成区域移除

• 根据 id 移除三维场景中已添加的区域
• 方法名：removeByIds
• 参数说明：

// id 数组
removeByIds(ids: Array<string>) {}

• 示例参考：

viewer.squareRegion.removeByIds(['test-id'])

清空所有区域

• 清空三维场景中已添加的所有区域
• 方法名：clear
• 参数说明：

// 方法
clear() {}

• 示例参考：

 viewer.squareRegion.clear()

显示/隐藏所有区域

• 显示/隐藏三维场景中已添加的所有区域
• 方法名：setVisible
• 参数说明：

// 方法
setVisible(visible: boolean): this {}

• 示例参考：

viewer.squareRegion.setVisible(false)

根据分组 id 显示/隐藏区域

• 根据分组 id 显示/隐藏三维场景中已添加的区域
• 方法名：setVisibleByGroupIds
• 参数说明：

// 方法
setVisibleByGroupIds(groupIds: Array<string>, visible: boolean): this {}

• 示例参考：

 viewer.squareRegion.setVisibleByGroupIds(['test-group-0'], false)

根据 id 显示/隐藏区域

• 根据 id 显示/隐藏三维场景中已添加的区域
• 方法名：setVisibleByIds
• 参数说明：

// 方法
setVisibleByIds(ids: Array<string>, visible: boolean): this {}

• 示例参考：

 viewer.squareRegion.setVisibleByIds(['test-id'], false)

方形区域事件

• 目前支持响应三维场景中已添加的方形区域的点击事件
• 方法名：on/off
• 参数说明：

// 开启 区域 点击事件监听
on(type: RegionEventType, callback, context) {}

// 关闭 区域 点击事件监听
off(type: RegionEventType, callback, context): boolean {}

// RegionEventType 参数说明
export class RegionEventType {
  static Click = 'click' as const;
}

• 示例参考：

 viewer.squareRegion.on(RegionEventType.Click, (evt:any) => {
   console.log(evt)
 })

• 回调的数据格式说明:

{
  eventName: 'OnSquareClick',
  datas: {
    id: 'Q-7FB90CEE-36E1-42A0-B6A8-515BB961AB07',
    regionColor: [1, 0, 0, 1],
    coordinate: [122.0068588256836, 40.75284957885742, 31.90229606628418],
    rotation: [0, 0, 100],
    scale: [100, 100, 100]
  }
}