Question

我所遇到的问题似乎非常简单明了，但我找不到使用Cesium的方法。我希望有标签或信息框来显示问题的进展，因此标签会及时添加到屏幕上（我可以在程序开头添加所有标签，也可以按时间更改它们的颜色）。

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

谢谢，

Answer 1

如果您希望在屏幕空间中固定标签，最好的方法是在Cesium小部件的顶部简单地叠加HTML。您可以拥有半透明背景和可点击的HTML按钮。您可以使用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>

<!DOCTYPE html>
<html>
    <script src="closure-library/closure/goog/base.js"></script>

    <script>
        goog.require('goog.i18n.NumberFormat');
    </script>

    <script>
        goog.i18n.NumberFormatSymbols = goog.i18n.NumberFormatSymbols_en_GB; 

        var formatter = new goog.i18n.NumberFormat(goog.i18n.NumberFormat.Format.CURRENCY);

        console.log(formatter.format(200.58));
    </script>
</html>

在屏幕上添加和更新标签

1 个答案: