Cesium DataSourceCollection图层排序

Question

我有多个GeoJsonDataSource对象要放在铯地球仪上。问题是，如果它们重叠，则会出现一些Z轴战斗问题，并且无法调整它们的顺序。

有没有一种方法可以指定DataSource对象的顺序DataSourceCollection？

例如，我想使用以下代码在红色多边形的顶部放置绿色多边形：

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);

但是，结果看起来像这样：

我注意到，如果将alpha参数调整为小于1.0，则可以修复z冲突，但是顺序仍然无法解决。

Answer 1

在问题的底部，您提到了进行Z轴战斗的快速解决方案，就是通过设置一些透明度来简单地关闭这些多边形的Z缓冲区。透明度发生在8位Alpha通道中，因此我最喜欢使用的值为254.0 / 255.0或0.996。

但是，您可能还想关闭另一个选项，那就是orderIndependentTranslucency。这是Scene可以从Viewer构造函数中的options参数初始化的属性。启用此选项是支持该功能的系统的默认设置，即使不透明，也始终可以在其他半透明对象后面“看到”半透明对象，并且渲染顺序当然不会影响结果。但是在这种情况下，如果希望一个多边形遮盖另一个多边形，则希望渲染顺序影响结果。

这是一个例子。点击底部的“运行代码段”，或仅将JavaScript部分粘贴到Sandcastle中。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,

    // The next line is the important option for this demo.
    // Test how this looks with both "true" and "false" here.
    orderIndependentTranslucency: false
});

var redPolygon = viewer.entities.add({
    name : 'Red polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -102.0, 31.0,
                                                        -102.0, 38.0]),
        // The alpha of 0.996 turns off the Z buffer.
        material : new Cesium.Color(1, 0, 0, 0.996)
    }
});

var greenPolygon = viewer.entities.add({
    name : 'Green polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-118.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 32.0]),
        // The alpha of 0.996 turns off the Z buffer.
        material : new Cesium.Color(0, 1, 0, 0.996)
    }
});

viewer.zoomTo(viewer.entities);

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>