cesium - Adding and Updating labels on screen -
the problem have seems pretty easy , obvious, couldn't find way cesium. want have labels, or info box show progress of problem, labels adding screen in time (i can have labels @ beginning of program , change color of them time too).
- i don't know how create label such location depends on screen or page (for example top of page) , not on position of object, such world or cesium widget. (a kind of position direct visual representation)
- to update labels, can define 2 intervals different texts?
- can make labels buttons appearing sequentially , example change current time of program?
thanks,
if want labels fixed in screen-space, best way overlay html on top of cesium widget. can have translucent background, , clickable html buttons. can use viewer.clock.ontick
update labels based on current time. here's example, click "run code snippet" @ bottom of this.
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'); // clock tick listener gets called every animation frame. // keep fast , try not allocate 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 free 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>
Comments
Post a Comment