InfoBoxViewModel

InfoBoxViewModel 是 InfoBox 的视图模型（ViewModel），用于在 CesiumJS 中创建自定义的信息框，通过绑定到 InfoBox 提供的属性和方法来控制信息框的展示和内容。

使用方法

1. 创建一个 InfoBox 实例。

const infoBox = new Cesium.InfoBox("cesium-infoBox-container");

2. 创建一个 InfoBoxViewModel 实例。

const viewModel = new Cesium.InfoBoxViewModel({
  title: "测试信息框", // 信息框标题
  description: "这是一个测试信息框。", // 信息框内容
  enableClose: true, // 是否允许关闭信息框
  closeButtonLabel: "关闭", // 关闭按钮的文本
});

3. 将 InfoBoxViewModel 实例绑定到 InfoBox 对象上。

viewModel.bind(infoBox);

4. 根据需要更新 InfoBoxViewModel 实例的属性。

viewModel.title = "更新标题";
viewModel.description = "更新内容";

属性

title

• 类型：String
• 说明：信息框的标题，默认值为 undefined。

description

• 类型：String
• 说明：信息框的内容，默认值为 undefined。

enableClose

• 类型：Boolean
• 说明：是否允许关闭信息框，默认值为 false。

closeButtonLabel

• 类型：String
• 说明：关闭按钮的文本，默认值为 "Close"。

方法

bind(infoBox)

将 InfoBoxViewModel 实例绑定到一个 InfoBox 对象上。

• 参数：
  • infoBox：InfoBox，要绑定的 InfoBox 对象。

isDestroyed()

• 返回值：Boolean
• 说明：释放 InfoBoxViewModel 实例占用的资源。

事件

InfoBoxViewModel 没有定义任何事件。一般情况下，我们可以监听 InfoBox 对象上的事件，比如 closeClicked 事件表示关闭按钮被点击时触发。

infoBox.viewModel.closeClicked.addEventListener(function () {
  console.log("关闭按钮被点击了。");
});

示例

const infoBox = new Cesium.InfoBox("cesium-infoBox-container");

const viewModel = new Cesium.InfoBoxViewModel({
  title: "测试信息框",
  description: "这是一个测试信息框。",
  enableClose: true,
  closeButtonLabel: "关闭",
});

viewModel.bind(infoBox);

setTimeout(() => {
  viewModel.title = "更新标题";
  viewModel.description = "更新内容";
}, 3000);

参考

• InfoBox