For now using below javascript, I am getting the lat long values over the mouse pointer. How can I make it appear at the bottom of the cesium screen like it is in google earth.
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true;
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = latitudeString(45);
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});
Thanks for your help
I assume that you are perhaps running this in Sandcastle? In this case the sites styling makes it a bit difficult to add additional divs. But if you position them absolutely and give a high z-index, you can make the div appear on top of the CesiumViewer container.
Additionally, there were a few problems with a misplaced semicolon inside the entity "mou" label object. And you tried to use the latitudeString as a function call.
Working SandCastle link
HTML
<style>
@import url(../templates/bucket.css);
</style>
<div id="demo" style="z-index: 2000; position: absolute; height:100px; width:200px; right: 10px; bottom: 0px; text-color: white"></div>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
Javascript
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true // Removed semicolon here
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = entity.label.text; // We can reuse this
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With