DEJA_VU3D - Cesium功能集 之 087-完美状态栏组件

在Cesium中，状态栏通常用于显示当前视图的一些信息，如经纬度、高度和头 direction 等信息。这些信息对于用户来说是非常有用的，因为它们可以帮助用户理解他们在世界中的位置。

在这个教程中，我们将创建一个状态栏组件，它将完全自定义并且能够适应Cesium的不同部分。

以下是如何创建一个自定义状态栏组件的示例代码：

// 创建一个自定义状态栏组件
function CustomViewerInfo(viewer) {
    this._container = document.createElement('div');
    this._container.style.cssText = 'position: absolute; bottom: 10px; left: 10px; color: #fff; z-index: 1000;';
 
    // 将自定义状态栏组件添加到Cesium的DOM容器中
    viewer.container.appendChild(this._container);
 
    // 更新状态栏信息的函数
    this.update = function() {
        var camera = viewer.scene.camera;
        var position = camera.position;
        var heading = camera.heading;
        var pitch = camera.pitch;
        var roll = camera.roll;
 
        this._container.innerHTML = `
            <div>Latitude: ${camera.positionCartographic.latitude.toDegrees()}</div>
            <div>Longitude: ${camera.positionCartographic.longitude.toDegrees()}</div>
            <div>Height: ${camera.positionCartographic.height}</div>
            <div>Heading: ${heading.toDegrees()}</div>
            <div>Pitch: ${pitch.toDegrees()}</div>
            <div>Roll: ${roll.toDegrees()}</div>
        `;
    };
 
    // 监听Cesium的相机变化来更新状态栏信息
    viewer.scene.postRender.addEventListener(this.update, this);
}
 
// 使用自定义状态栏组件
var viewer = new Cesium.Viewer('cesiumContainer');
new CustomViewerInfo(viewer);

在这个示例中，我们创建了一个名为CustomViewerInfo的构造函数，它接收一个Cesium的Viewer实例作为参数。在构造函数内部，我们创建了一个div元素作为状态栏，并将其添加到Cesium的DOM容器中。我们还定义了一个update函数，该函数会获取相机的当前位置、方向等信息，并更新状态栏内容。最后，我们使用viewer.scene.postRender.addEventListener来监听相机的变化，并在每次渲染后更新状态栏信息。

这个自定义状态栏组件为用户提供了一个方便的方式来查看他们在Cesium Viewer中的当前位置和状态。