Loaded Datasource blocked by terrain [SOLVED]

CesiumJS
1

So, I load my geojson data as how this Cesium Sandcastle does. However, if I zoom into the location, there are black areas that are blocking my geometry. If I use clmaptoground = true, it solves the problem but the outlines are then hidden. If I added some extruded height, the problem is also solved. However, I would like not to add the extruded height rather. I have the default empty ellipsoid terrain({}).

Is it because the terrain is causing the problem? How do I change to a terrain that does not have heights?

promise
        .then(function(data) {
          //Add data source
          self.viwerIns.dataSources.add(data)

          //Get the array of entities
          var entities = data.entities.values
          for (var i = 0; i < entities.length; i++) {
            var entity = entities[i]
            var name = entity.name
            if (countrySet.includes(name)) {
              var colorIndex = countrySet.indexOf(name)
              var color = self.cesiumIns.Color.fromCssColorString(
                colorSet[colorIndex]
              )

              //Set the color
              entity.polygon.material = color
              //Remove the outlines.
              entity.polygon.outline = true
              entity.polygon.outlineColor = self.cesiumIns.Color.SLATEGREY
            }
          }
        })
2

I solved the problem by using:

viewer.scene.globe.depthTestAgainstTerrain = false
3

@rhsiun

Nice work! Thanks for sharing the solution - I will point other users to this post if they have a related issue.

-Sam