HomeButtonViewModel

HomeButtonViewModel 是 CesiumJS 的一个内置组件，它提供一个用于重置场景视角的按钮。在用户点击该按钮时，场景会回到初始视角。

Constructor

HomeButtonViewModel([options])

• options：可选，一个包含以下属性的对象：
  • scene：Scene 对象，需要重置的场景。默认值是 Cesium.viewer.scene。
  • duration：以毫秒为单位的时间，用于执行视场动画的时间。默认值是 2000。

Properties

HomeButtonViewModel 类有以下属性：

• command：Command 对象，用于在按钮被按下时执行的函数。
• tooltip：一个字符串，用于设置按钮的悬浮提示文本。

Methods

HomeButtonViewModel 类有以下方法：

• destroy()：销毁此视图模型。
• isDestroyed()：若此视图模型已经被销毁则返回 true。

Example

以下是一个使用 HomeButtonViewModel 的示例：

var viewer = new Cesium.Viewer('cesiumContainer');
var homeButtonViewModel = new Cesium.HomeButtonViewModel({
    scene: viewer.scene,
    duration: 1000
});
var homeButton = new Cesium.Button({
    viewModel: homeButtonViewModel,
    //你自己的html代码
    //例如这里是: '<img width="28" src="xxx.gif"/>',
    //但这个html代码不要缺少这个类 'cesium-button'
    container: document.getElementById('homeButtonContainer')
});

Working with Button and Toolbar widgets

HomeButtonViewModel 实例可用于创建 Cesium.Button 和 Cesium.Toolbar 控件：

var toolbar = new Cesium.Toolbar('cesiumContainer', 'toolbar');
var homeButtonViewModel = new Cesium.HomeButtonViewModel({
    scene: viewer.scene,
    duration: 1000
});
var homeButton = new Cesium.Button({
    viewModel: homeButtonViewModel,
    //you own html code, see above
    container: toolbar.container,
    //设置样式，与bootstrap相同
    style: 'width: 28px; height: 28px;',
    //设置悬浮提示文本
    tooltip: '重置视角'
});

toolbar.addSpacer();

你必须把HomeButton的 buttonElement 绑定到你设置的container上。 否则button不会生成。

/*定义样式*/
.cesium-button{
        background-color: #c3c3c3;
        border-style: none;
        border-radius: 2px;
        /*阴影*/
        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
        cursor: pointer;
    }

.cesium-button:hover{
        background-color: #f7f7f7;
    }
    
.cesium-button:active{
        background-color: #dcdcdc;
        /*阴影*/
        box-shadow: none;
    }

这将在页面上的上下文菜单工具栏（context menu toolbar）中创建一个重置视角按钮。

See also

• Button
• Toolbar
• Scene

Contributors

本中文翻译由 AliceLitty 维护。欢迎在 GitHub 上提交问题和拉请求。