javascript - I want to get latitude longitude height of my mouse at the bottom of the cesium screen - Stack Overflow

admin管理员组

文章数量:1332361

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

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

• javascript
• location
• cesiumjs

Share Improve this question Follow edited Sep 15, 2018 at 7:15 Bharti Mohane 70677 silver badges1919 bronze badges asked Sep 15, 2018 at 6:00 Ashutosh MishraAshutosh Mishra 10311 silver badge66 bronze badges 1

• What's the styling on that demo element you reference near the bottom? Seems like you could place that at the bottom of your Cesium window with a bit of CSS, and you could get rid of the entity and its label entirely. – emackey Commented Sep 17, 2018 at 20:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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;
    }
});

本文标签：