InfoBox

InfoBox 是 CesiumJS 中一种轻量级的弹出信息框，可以在场景中弹出窗口，显示内容与用户进行交互。 它可以容纳任何自定义内容。 InfoBox 可用于展示某些对象的属性，蒙版一个区域，或是作为用户输入表单，等等。

创建 InfoBox

在 CesiumJS 中，你可以使用 Cesium.InfoBox 构造函数来创建一个 InfoBox，它需要传入一个 container 参数，表示 InfoBox 要放置的元素，它可以是 DOM 元素或元素 ID。

var infoBox = new Cesium.InfoBox(document.getElementById('infobox'));

如果没有传入 container 参数，InfoBox 会被添加到 Cesium.Viewer 的主元素中。

你可以使用 InfoBox.container 来获取当前 InfoBox 的容器。

控制 InfoBox 的可见性

使用 InfoBox 上的 viewModel.show 属性来设置 InfoBox 的可见性。

infoBox.viewModel.show = false;

当 show 属性被设置为 false 时，InfoBox 会自动隐藏可视化窗口。

设置 InfoBox 的内容

Cesium.InfoBoxViewModel 对象被用来设置并管理 InfoBox 的内容。要设置 ViewModel，请指定一个 options 对象并将其传递给 Cesium.InfoBoxViewModel.fromObject：

infoBox.viewModel = Cesium.InfoBoxViewModel.fromObject({
    title: 'Hello, World!',
    content: 'This is my first InfoBox!'
});

现在，InfoBox 显示的标题为 'Hello, World!'，内容为 'This is my first InfoBox!'。

请注意，content 可以是 HTML 字符串，表示您可以在其中包含任何您想显示的内容，例如表单，图片等。

设置 InfoBox 的位置

您可以使用 Cesium.InfoBox.defaultOffset 属性来指定默认的 InfoBox 相对于指针的偏移量，然后将其附加到位置。 例如，要将 InfoBox 添加到鼠标（或触摸）指针附近，你可以在场景上侦听 mouseMove 事件，并将 InfoBox 位置设置为该指针：

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var previousPosition = new Cesium.Cartesian2();
var infoBox = viewer.infoBox;

handler.setInputAction(function(movement) {
    var position = movement.endPosition;
    if (Cesium.defined(position)) {
        if (!Cesium.Cartesian2.equals(position, previousPosition)) {
            previousPosition = position;
            var pickedObject = scene.pick(position);
            if (Cesium.defined(pickedObject)) {
                infoBox.viewModel.position = position;
                infoBox.viewModel.show = true;
            } else {
                infoBox.viewModel.show = false;
            }
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

在上面的代码段中，我们绑定了一个 mouseMove 事件侦听器，每当鼠标指针移动时，我们会获取相对于 Cesium.Viewer 的场景坐标，检查该坐标上是否有对象 - 如果有，就显示 InfoBox 并将其位置设置为该坐标。 否则，我们隐藏 InfoBox。

销毁 InfoBox

安全地清除 InfoBox 实例：

infoBox.container.removeChild(infoBox.container.firstChild);
infoBox.destroy();
infoBox = undefined;

如果你在 Cesium.Viewer 上手动添加了一个 InfoBox，当该 Viewer 被销毁时 InfoBox 也会被销毁。