问铯DataSourceCollection层序
EN

Stack Overflow用户

提问于 2016-03-21 05:58:50

回答 3查看 3.4K关注 0票数 6

我有多个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-斗殴，但是顺序仍然没有得到解决。

javascript

z-index

gis

geojson

cesiumjs

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-03-21 06:29:58

更新12/2019：

从最初被问到这个问题以来，铯已经在PolygonGraphics中添加了一个PolygonGraphics属性。它只对“地面原语”有效，例如，直接位于地形上且没有为其分配height或extrudedHeight属性的多边形。对于这些，请使用下面我的原始答案。但是对于地面原语，您现在只需要像这样分配一个zIndex：

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位阿尔法通道中，所以我最喜欢使用的值是254.0 / 255.0，或0.996。

但是，您可能还想关闭另一个选项，那就是orderIndependentTranslucency。这是Scene的一个属性，可以通过查看器构造函数中的options参数初始化它。如果保持不变，支持它的系统的默认设置，不管是否透明，始终可以“看到”其他半透明对象后面的半透明对象，当然呈现顺序不会影响结果。但在这种情况下，如果希望一个多边形模糊另一个多边形，则希望呈现顺序影响结果。

下面是一个例子。单击底部的“运行代码片段”，或将JavaScript部分粘贴到沙堡中。

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>

票数 7

Stack Overflow用户

发布于 2019-12-22 19:54:26

答案很简单，您可以在代码中添加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);

票数 2

Stack Overflow用户

发布于 2018-02-14 08:07:00

对于一个稍微不同的情况，它可能是有用的：

多边形有高度，其中一些可能是透明的或不透明的，而且多边形层也在对方的上面。在这种情况下，解决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);