Display mouse position and elevation value question

CesiumJS
1

In order to display mouse position, I added this function to a “Hello World” Map which includes terrain provider: I just get the xy coordinates and cartesian Z value or a very low height value. See following code and image. How to fix this and show the correct elevation value? Thanks.

var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var centralBody = scene.primitives.centralBody;
centralBody.depthTestAgainstTerrain = true;
var handler;
//var ellipsoid = Cesium.Ellipsoid.WGS84;
var ellipsoid = centralBody.ellipsoid;

centralBody.terrainProvider = new Cesium.CesiumTerrainProvider({
     url : 'http://cesiumjs.org/smallterrain' 
});

function pickCartographicPosition(scene, ellipsoid) {
    // Mouse over the globe to see the cartographic position
     handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(movement) {
        var cartesian = scene.camera.controller.pickEllipsoid(movement.endPosition, ellipsoid);
         if (cartesian) {
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            var position = new Cesium.Cartographic(cartographic.longitude, cartographic.latitude);
              var coords =  Cesium.Math.toDegrees(cartographic.longitude).toFixed(6) + ', ' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(6) + ';<br/> Cartesian Z: '+ cartesian.z.toFixed(2);
             //or try to get the height value, result is very low value or zero
            //var coords =  Cesium.Math.toDegrees(cartographic.longitude).toFixed(6) + ', ' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(6) + ';<br/> Height: '+ cartographic.height ;
            document.getElementById('coords').innerHTML = '<p style="display: block;position: absolute;top: 30px;right: 6px" />'+ coords +'<br/><p/>';   
        }
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
}

pickCartographicPosition(scene, ellipsoid);

Is this possible to use Cesium.sampleTerrain to get mouse position height value?

2

Cesium.sampleTerrain can be used, but I would not call it on mouse over since it will be slow. Perhaps you could call it once the mouse stops moving?

Later, we may implement a way to get the height directly from the displayed terrain; however, this is tied to the terrain level-of-detail so it becomes less accurate the farther out a user is zoomed (when lower level-of-detail is loaded).

Patrick

3

Thanks Patrick. I can get the elevation value with Cesium.sampleTerrain. But it just show the first mouse position height value, didn’t update with coordinate value changes. I would take your suggestion to call it once the mouse stop moving. If the mouse stoped, it will show xy coordinate and height, otherwise just show xy value. I also use hard code for level value 10, so it will show pretty accurate height value for the mouse location.

4

For display the height value from underneath terrain, I try to use mouse double click a location on the map, then shows the value, otherwise no. I keep getting 0 at the very first double click. So I believe my elevation is just show the place of previous location. The reason of my first time 0 is because originally it doesn’t have elevation value until I call Cesium.sampleTerrain, it like this(-120.225312, 52.235612, 0). Here is my code to display the height value, how to fix this issue, height lag one index.

function elevationGet(scene, ellipsoid){

var positions= [];

handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(dbClick){

var cartesian = scene.camera.controller.pickEllipsoid(dbClick.position, ellipsoid);

if(cartesian){

var cartographic = ellipsoid.cartesianToCartographic(cartesian);

var lon = Cesium.Math.toDegrees(cartographic.longitude);

var lat = Cesium.Math.toDegrees(cartographic.latitude);

var lonC = Cesium.Math.toRadians(lon);

var latC = Cesium.Math.toRadians(lat);

var position = new Cesium.Cartographic(lonC, latC);

positions.push(position);

var len = positions.length;

positions = positions.slice(len-2,len);

Cesium.sampleTerrain(centralBody.terrainProvider, 9, positions);

document.getElementById(‘height’).innerHTML = ‘

Elevation: &nbsp’+ (positions[0].height).toFixed(1) +’

’;

}

}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

}

5

Hey Allen,

Cesium.sampleTerrain is an asynchronous call. That is, it returns before the operation is complete. So if you use the height immediately after the function returns, the height will not yet be updated.

There’s an example in the documentation (http://cesiumjs.org/Cesium/Build/Documentation/sampleTerrain.html?classFilter=sampleT&show=js) showing how to use Cesium.when to do extra work when the asynchronous call completes.

Kevin

6

Thanks Kevin, fixed the issue.