Elevated terrain following grid

CesiumJS
1

I'd like to be able to add a flight ceiling to a Cesium demo represented by a coarse grid in the sky. I need the grid to roughly follow the terrain on the surface of the earth. I have terrain elevation data from a third party. I would like to be able to specify the extremities of my grid, the grid line spacing and to be able to put an elevation value on each intersection of the grid.

I have looked at the Cesium Sandcastle demos and various samples but I haven't seen a grid sample that allows for an undulating grid. Does anyone have any suggestions for the best cesium capabilities to use for implementing this?

Thanks,
Alec.

2

There isn’t anything native to Cesium to directly do what you want. You’ll need to draw the grid yourself using entities or primitives with polylines. Here’s a Sandcastle example using entities.

//------------------------------------------------------------------------------

// Create grid of heights in row-major order.

//------------------------------------------------------------------------------

function randomHeights(rectangle, spacing)

{

var heights = [];



var curLat, curLon, curHeight;

curLat = rectangle.south;

while (curLat <= rectangle.north)

{

    var rowHeights = [];

    curLon = rectangle.west;

    

    while (curLon <= rectangle.east)

    {

        curHeight = 10000.0 + (Math.random() * 100000.0);

        rowHeights.push(curHeight);

        

        curLon += spacing.longitude;

    }

    

    heights.push(rowHeights);

    

    curLat += spacing.latitude;

}

return heights;

}

//------------------------------------------------------------------------------

// Draw grid

//------------------------------------------------------------------------------

function drawGrid(name, rectangle, spacing, heights)

{

var dataSource = new Cesium.CustomDataSource(name);



var curLat, curLon, curHeight;

var row, col, curRow, curCol;

var linePoints;

// Horizontal lines

curLat = rectangle.south;

curRow = 0;

while (curLat <= rectangle.north)

{

    linePoints = [];

    curLon = rectangle.west;

    curCol = 0;

    

    while (curLon <= rectangle.east)

    {

        curHeight = heights[curRow][curCol];

        linePoints.push(new Cesium.Cartesian3.fromRadians(curLon, curLat, curHeight));

        

        curLon += spacing.longitude;

        curCol += 1;

    }

    

    dataSource.entities.add({

        polyline: {

            positions: linePoints,

            material: Cesium.Color.WHITE,

            width: 2.0

        }

    });

    

    curLat += spacing.latitude;

    curRow += 1;

}

// Vertical Lines

curLon = rectangle.west;

curCol = 0;

while (curLon <= rectangle.east)

{

    linePoints = [];

    curLat = rectangle.south;

    curRow = 0;

    

    while (curLat <= rectangle.north)

    {

        curHeight = heights[curRow][curCol];

        linePoints.push(new Cesium.Cartesian3.fromRadians(curLon, curLat, curHeight));

        

        curLat += spacing.latitude;

        curRow += 1;

    }

    

    dataSource.entities.add({

        polyline: {

            positions: linePoints,

            material: Cesium.Color.DODGERBLUE,

            width: 2.0

        }

    });

    curLon += spacing.longitude;

    curCol += 1;

}



return dataSource;

}

//------------------------------------------------------------------------------

// Main

//------------------------------------------------------------------------------

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

animation: false,

timeline: false

});

var rectangle = Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0);

var spacing = new Cesium.Cartographic.fromDegrees(1.0, 1.0);

var heights = randomHeights(rectangle, spacing);

var grid = drawGrid(‘myGrid’, rectangle, spacing, heights);

viewer.dataSources.add(grid);

viewer.flyTo(grid.entities);

``

I hope that helps.

Scott

3

Thank you for the response Scott. I'll use this technique.
Alec.