在屏幕上添加和更新标签

Question

我遇到的问题似乎很简单也很明显，但我找不到用 Cesium 解决的方法。我想要标签或信息框来显示问题的进展，所以标签会及时添加到屏幕上（我可以在程序开始时拥有所有标签，也可以按时间更改它们的颜色）。

我不知道如何创建标签，使其位置仅取决于屏幕或页面（例如页面顶部），而不取决于对象的位置，例如世界或铯小部件。（一种直观表示的位置）
要更新标签，我可以用不同的文本定义两个区间吗？
我可以将我的标签制作成按顺序出现的按钮，然后例如更改程序的当前时间吗？

谢谢，

Answer 1

如果你想在屏幕上固定标签-space，最好的方法是简单地将 HTML 覆盖在 Cesium 小部件的顶部。您可以拥有半透明背景和可点击的 HTML 按钮。您可以使用 viewer.clock.onTick 根据当前时间更新标签。这是一个示例，单击此底部的 "Run code snippet"。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false
});
viewer.scene.globe.enableLighting = true;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

var hourPlusButton = document.getElementById('hourPlus');
var hourMinusButton = document.getElementById('hourMinus');
var timeLabel = document.getElementById('timeLabel');

// The clock tick listener gets called every animation frame.
// Keep it fast and try not to allocate any memory if possible.
viewer.clock.onTick.addEventListener(function(clock) {
    var elapsed = Cesium.JulianDate.secondsDifference(
        clock.currentTime, clock.startTime);
    var hours = Math.floor(elapsed / 3600);
    elapsed -= (hours * 3600);
    var minutes = Math.floor(elapsed / 60);
    elapsed -= (minutes * 60);
    timeLabel.textContent = hours + ' hr ' + minutes + ' min ' +
        elapsed.toFixed(1) + ' sec';
});

// Button click callbacks are free to allocate memory.
hourPlusButton.addEventListener('click', function() {
    viewer.clock.currentTime = Cesium.JulianDate.addSeconds(
        viewer.clock.currentTime, 3600, new Cesium.JulianDate());
}, false);

hourMinusButton.addEventListener('click', function() {
    viewer.clock.currentTime = Cesium.JulianDate.addSeconds(
        viewer.clock.currentTime, -3600, new Cesium.JulianDate());
}, false);

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0;
  overflow: hidden; font-family: sans-serif;
}
.controlPanel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(42, 42, 42, 0.8);
  color: #edffff;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
}

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>
<div class="controlPanel">
    <h5>Elapsed time: <span id="timeLabel"></span></h5>
    <div>
        <button type="button" class="cesium-button" id="hourMinus">-1 hour</button>
        <button type="button" class="cesium-button" id="hourPlus">+1 hour</button>
    </div>
</div>

在屏幕上添加和更新标签

Adding and Updating labels on screen

label

cesium