ToggleButtonViewModel

ToggleButtonViewModel是一个 Cesium 中的视图模型(ViewModel)，用于创建一个切换开关按钮。它可以响应用户的点击事件并在开关状态改变时发出事件通知。

导入

import { ToggleButtonViewModel } from "cesium";

构造函数

new ToggleButtonViewModel(command, options);

参数

command： Command对象，用于操作开关状态的命令。

options：一个对象，包含以下属性：

• toggled：Boolean类型，用于表示按钮默认是否是选中状态。

• tooltip: String类型，用于表示按钮的提示信息。

• unselectedImageUrl: String类型，用于表示按钮未选中时显示的图片的URL。

• selectedImageUrl: String类型，用于表示按钮选中时显示的图片的URL。

• width: Number类型，用于表示按钮的宽度。

• height: Number类型，用于表示按钮的高度。

示例

const toggleCommand = new Cesium.ToggleCommand({
  toggled: true,
  onToggled: function (toggled) {
    console.log("toggled:", toggled);
  },
});

const toggleViewModel = new Cesium.ToggleButtonViewModel(toggleCommand, {
  toggled: true,
  tooltip: "Toggle On/Off",
  unselectedImageUrl: "img/button_off.png",
  selectedImageUrl: "img/button_on.png",
  width: 40,
  height: 40,
});

Cesium.knockout.applyBindings(toggleViewModel, document.getElementById("toggleButton"));

在该例子中，我们创建了一个 ToggleCommand 对象，并将其传递给 ToggleButtonViewModel 构造函数。然后我们设置了一些常见的属性，如 tooltip、unselectedImageUrl 和 selectedImageUrl。在 applyBindings 函数中我们将 toggleViewModel 绑定到一个在 HTML 中获取到的元素上。

属性

isToggled：Boolean类型，用于表示当前状态是否为开（true）或关（false）。

command：Command对象，用于操作开关状态的命令。

toolTip: String类型，用于表示按钮的提示信息。

unselectedImageUrl: String类型，用于表示按钮未选中时显示的图片的URL。

selectedImageUrl: String类型，用于表示按钮选中时显示的图片的URL。

width: Number类型，用于表示按钮的宽度。

height: Number类型，用于表示按钮的高度。

方法

toggle()：改变开关的状态到相反的值，并调用 command 对象的 execute 方法。

dispose()：销毁这个视图模型并卸载所有相关的事件和监听器。