Line Layer seems to be floating and shifted after adding terrain effect in Cesium

Question

I had made add a line layer using cesium. In which i had added a terrain effect using the standard cesium terrain provider as below

var dataSource1 = new Cesium.GeoJsonDataSource();
var roads = dataSource1.load('../../SampleData/roads.geojson');
roads.then(function(dataSource1) {
    viewer.dataSources.add(dataSource1);
    viewer.zoomTo(dataSource1);


    //Get the array of entities
    var entities1 = dataSource1.entities.values;

    var colorHash = {};
    for (var i = 0; i < entities1.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities1[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
            color = Cesium.Color.BLACK; 
            colorHash[name] = color;
        }
        //Set the polygon material to our random color.
        entity.polyline.material = color;
        //Remove the outlines.
        entity.polyline.outline = false;

    }
}).otherwise(function(error){
    //Display any errrors encountered while loading.
    window.alert(error);
});

After adding the terrain, my geojson line layer seems to be floated and shifted as below

I would like to know how to avoid this floating effect of line layer alone after adding the terrain.

Answer 1

I updated the code to query for terrain heights and place the roads on terrain. There's a little fudge factor, the roads are placed 1 meter above the terrain to try to keep them from intersecting the terrain. This was needed because the roads are not sampled at the same frequency as the terrain samples.

var terrain = Cesium.createDefaultTerrainProviderViewModels();

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProviderViewModels: terrain,
    selectedTerrainProviderViewModel: terrain[1]
});

// This array will hold our cartographic height queries, and will
// also be populated with the answers.
var terrainSamplePositions = [];

var dataSource1 = new Cesium.GeoJsonDataSource();
var roads = dataSource1.load('../../SampleData/Hubli_Roads.geojson');
roads.then(function(dataSource1) {
    viewer.dataSources.add(dataSource1);
    viewer.zoomTo(dataSource1);

    //Get the array of entities
    var entities1 = dataSource1.entities.values;

    var colorHash = {};
    for (var i = 0; i < entities1.length; i++) {
        var entity = entities1[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
            color = Cesium.Color.BLACK; 
            colorHash[name] = color;
        }
        entity.polyline.material = color;
        //Remove the outlines.
        entity.polyline.outline = false;

        var positions = entity.polyline.positions.getValue();
        for (var p = 0; p < positions.length; ++p) {
            terrainSamplePositions.push(Cesium.Cartographic.fromCartesian(positions[p]));
        }
    }

    // Asking for terrain heights is asynchronous, because the answer may
    // reside on the terrain server.
    Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 14, terrainSamplePositions), function() {
        // Fudge the height values to keep off the ground.
        for (var k = 0; k < terrainSamplePositions.length; ++k) {
            terrainSamplePositions[k].height += 1.0;  // one meter off the ground
        }
        // Update all lines to sit on top of the terrain.
        var cartesians = viewer.scene.globe.ellipsoid.cartographicArrayToCartesianArray(
            terrainSamplePositions);
        var index = 0;
        for (var j = 0; j < entities1.length; j++) {
            var entity = entities1[j];
            var numPositions = entity.polyline.positions.getValue().length;
            var positions = [];
            for (var p = 0; p < numPositions; ++p) {
                positions.push(cartesians[index]);
                ++index;
            }
            entity.polyline.positions.setValue(positions);
        }
    });    

}).otherwise(function(error){
    //Display any errrors encountered while loading.
    window.alert(error);
});