Cesium DataSourceCollection层排序

2019年12月更新:

铯添加了 zIndex 属性到 PolygonGraphics 在最初被问及这一问题的时候。它仅对“地面基本体”有效,例如直接位于地形上且没有 height 或 extrudedHeight 分配给它们的属性。对于这些,请使用我下面的原始答案。但是对于地面图元,现在可以指定 z索引 这样地:

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

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]),
        material : new Cesium.Color(1, 0, 0),
        zindex : 1
    }
});

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]),
        material : new Cesium.Color(0, 1, 0),
        zIndex : 2
    }
});

viewer.zoomTo(viewer.entities);

原始答案:

在问题的底部,您提到了z-战斗的快速解决方案,即通过设置一些透明度,简单地关闭这些多边形的z缓冲区。透明度发生在8位Alpha通道中,所以我最喜欢使用的值是 254.0 / 255.0 或 0.996 .

但还有另一个你可能想关掉的选项,那就是 orderIndependentTranslucency 。这是 Scene 可以从查看器构造函数中的选项参数初始化。如果启用该选项(支持该选项的系统的默认设置),则无论不透明度如何,始终可以“看到”其他半透明对象后面的半透明对象,当然渲染顺序不会影响结果。但在这种情况下,你 希望 如果希望一个多边形遮住另一个多边形,则渲染顺序将影响结果。

这里有一个例子。单击底部的“运行代码段”,或仅将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>

答案很简单,你可以添加 z-index 在您的代码中。

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

它可能对一种稍微不同的情况有用: 多边形有高度,其中一些可能是透明的或不透明的,而且多边形层彼此重叠。 要解决这种情况下的z战斗,最好的方法是使用选项标志{closeBottom:false}移除多边形的底部。 我从上面的评论中改编了这个案例的代码:

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, 1),
    closeBottom: false,
    height: 1000,
    extrudedHeight: 50100
}
});

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.29),
    height: 50100,
    extrudedHeight: 95000,
    closeBottom: false
}
    });

viewer.zoomTo(viewer.entities);