Cesium DataSourceCollection layer ordering

user_1789724 0
Viewed 3309

I have multiple GeoJsonDataSource objects that I want to put on a Cesium globe. The problem is that if they overlap, I get some z-fighting issues and I can't adjust their order.

Is there a way of specifying the order of DataSource objects in a DataSourceCollection?

For example, I'd like to have the green polygon on top of the red polygon using the following code:

var viewer = new Cesium.Viewer('cesiumContainer');

var red = Cesium.GeoJsonDataSource.load('map1.geojson', {
  fill: new Cesium.Color(1, 0, 0, 1.0)
});

var green = Cesium.GeoJsonDataSource.load('map2.geojson', {
  fill: new Cesium.Color(0, 1, 0, 1.0)
});

viewer.dataSources.add(red);
viewer.dataSources.add(green);

However, the result looks like this:

Cesium screenshot showing z-fighting

I've noticed that if I adjust the alpha argument to less than 1.0, I can fix the z-fighting, but the order still does not get addressed.

cesiumjs geojson gis z-index javascript
3 Answers

Answer is simple, You can add z-index in your code. 

var viewer = new Cesium.Viewer('cesiumContainer');

var red = Cesium.GeoJsonDataSource.load('map1.geojson', {
  fill: new Cesium.Color(1, 0, 0, 1.0),
  zIndex: 1
});

var green = Cesium.GeoJsonDataSource.load('map2.geojson', {
  fill: new Cesium.Color(0, 1, 0, 1.0),
  zIndex: 2
});

viewer.dataSources.add(red);
viewer.dataSources.add(green);
user_93543440
Related