Search code examples
javascriptgeojsoncesiumjssandcastleclamp

How to clamp GeoJSON data format to terrain in Cesium Sandcastle?


I have terrain view in Cesium Sandcastle and I have loaded roads data in GeoJSON format, they are lines. I want to clamp them on terrain, like this example (in drop-down menu choose "Sample line positions and draw with depth test disabled") -> http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Ground%20Clamping.html&label=Tutorials In the example, the line you see is defined within code, but I have data (roads) on my PC which is loaded in app. When loaded, roads are flat (under the terrain) and somehow I have to clamp them on terrain but don't know how.

I have tried using the existing code from the example but haven't succeed.

This is my code for now:

//Add terrain
var viewer = new Cesium.Viewer('cesiumContainer');
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask : true,
    requestVertexNormals : true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
viewer.scene.globe.depthTestAgainstTerrain = true;

//Load data (roads)
var dataSource = Cesium.GeoJsonDataSource.load('../../SampleData/ceste_rab_okvir.geojson');
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

I know there is Cesium.GeoJsonDataSource.clampToGround, but as I'm not a developer, I don't understand how to write it in my code. Does anyone knows how to do it? Or maybe there is another way to clamp roads to terrain?

Thanks in advance.


Solution

  • I've figured it out. It should be written like this:

    //Add terrain
    var viewer = new Cesium.Viewer('cesiumContainer');
    var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
        requestWaterMask : true,
        requestVertexNormals : true
    });
    viewer.terrainProvider = cesiumTerrainProviderMeshes;
    viewer.scene.globe.depthTestAgainstTerrain = true;
    
    //Load data (roads)
    Cesium.GeoJsonDataSource.clampToGround = true;
    var dataSource = Cesium.GeoJsonDataSource.load('../../SampleData/ceste_rab_okvir.geojson');
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);