Добавление и обновление меток на экране

Question

Проблема, которая кажется мне довольно простой и очевидной, но я не мог найти способ сделать это с помощью цезия. Я хочу иметь ярлыки или информационное окно, чтобы показать ход проблемы, поэтому ярлыки вовремя добавляют к экрану (я могу иметь все метки в начале программы и менять цвет их по времени тоже).

1. Я не знаю, как создать ярлык таким образом, что его расположение зависит только от экрана или страницы (например, вверху страницы), а не на позиции объекта, например, мировой или цезий виджета. (вид позиции с прямым визуальным представлением)
2. Чтобы обновить метки, могу ли я определить два интервала с разными текстами?
3. Могу ли я сделать свои ярлыки в виде кнопок, которые появляются последовательно, а затем, например, изменит текущее время программы?

Спасибо,

Answer 1

Если вы хотите этикетки, зафиксированные в экранном пространстве, лучший способ это просто наложение HTML поверх цезий виджета. Вы можете иметь полупрозрачный фон и интерактивные кнопки HTML. Вы можете использовать viewer.clock.onTick для обновления меток на основе текущего времени. Вот пример, нажмите «Выполнить фрагмент кода» внизу.

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>