弹窗控件

为了满足一般的点击弹出交互，SDK 中内置了 popup 组件。

1. 参数

我们对弹窗 popup 提供了一些配置项，参看下表格：

配置项作用说明
alignment修改弹出框方向默认值为"bottom-left", 会根据位置更新方向并重新加载。其可选项有 "auto" "top-center" "top-right" "bottom-left" "bottom-center" "bottom-right" ，设置为一个固定方位弹出框便不会重新加载。
type定义弹窗样式定义弹窗的类型样式，默认值为 'popup' ，可选项为完全自定义弹窗'custom'、标准弹窗'popup'、提示窗弹窗'tooltip'。
title定义弹窗标题定义弹窗的标题，在 type 为非完全自定义弹窗下才有 title 配置项。
location定义弹窗的打开位置也就是弹窗在场景的具体位置
content定义弹窗内容信息也就是弹窗真正想要展示的内容信息

2. 控件使用

我们提供了 open() 和 close() 用于控制 popup 弹出框的显示与隐藏。

其中 open(option) 参数 option 的数据结构如下所示：

// popup弹窗打开选项
interface OpenPopupOption {
  alignment:'auto' | 'top-center' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-center' | 'bottom-right'
  type: 'custom' | 'popup' | 'tooltip'
  title:string
  location: IPoint
  content: string | HTMLElement
}

// 地图点
interface IPoint {
  x: number
  y: number
  z: number
  latitude: number
  longitude: number
}

结合上述配置项，提供一个具体的使用 popup 弹窗的代码示例：

// onPick图层点击事件的回调
onPick: (result) => {
  if (result) {
    // 打开弹窗
    scene.ui.popup.open({
      alignment: 'top-center',
      title: '提示信息',
      location: { longitude: result.position.longitude, latitude: result.position.latitude, z: result.position.z },
      content: `这是构件${result.attributes.id}`,
    })
  } else {
    // 关闭弹窗
    scene.ui.popup.close()
  }
}
注：对于修改 popup 弹窗样式，可以对弹窗的 css 样式类进行覆盖设置，进而自定义设置样式，也可以设置使用完全自定义弹窗自己制作弹窗。
Table of Contents