Javascript 铯数据源收集层排序
我有多个Javascript 铯数据源收集层排序,javascript,z-index,gis,geojson,cesium,Javascript,Z Index,Gis,Geojson,Cesium,我有多个GeoJsonDataSource对象要放在铯地球仪上。问题是,如果它们重叠,我会遇到一些z-fighting问题,我无法调整它们的顺序 是否有方法指定数据源集合中数据源对象的顺序 例如,我希望使用以下代码将绿色多边形置于红色多边形之上: var viewer = new Cesium.Viewer('cesiumContainer'); var red = Cesium.GeoJsonDataSource.load('map1.geojson', { fill: new Cesi
GeoJsonDataSource
对象要放在铯地球仪上。问题是,如果它们重叠,我会遇到一些z-fighting问题,我无法调整它们的顺序
是否有方法指定数据源集合中数据源
对象的顺序
例如,我希望使用以下代码将绿色多边形置于红色多边形之上:
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);
但是,结果如下所示:
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);
我注意到,如果我将alpha参数调整为小于1.0
,我可以修复z-fighting,但仍然无法解决顺序问题。2019年12月更新:
自从最初提出这一要求以来,铯在时间上为添加了一个zIndex
属性。它仅对“地面基本体”有效,例如,直接位于地形上且未指定高度
或拉伸高度
属性的多边形。对于这些问题,请使用下面我的原始答案。但是对于地面原语,您现在可以像这样指定一个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-fighting的快速修复方法是通过设置一些透明度来简单地关闭这些多边形的z缓冲区。透明度发生在8位Alpha通道中,因此我最喜欢使用的值是254.0/255.0
,或0.996
但是,您可能还想关闭另一个选项,那就是orderIndependentTransparency
。这是场景
的属性,可以从查看器构造函数中的选项参数初始化。如果启用该选项(支持该选项的系统的默认设置),则无论不透明度如何,都可以在其他半透明对象后面“看到”半透明对象,当然渲染顺序不会影响结果。但在这种情况下,如果希望一个多边形遮挡另一个多边形,则希望渲染顺序影响结果
这里有一个例子。单击底部的“RunCodeSnippet”,或者只将JavaScript部分粘贴到中
var-viewer=新铯.viewer('cesiumContainer'{
导航说明SinitallyVisible:false,动画:false,时间线:false,
//下一行是本演示的重要选项。
//在这里用“真”和“假”来测试它的外观。
OrderIndependent半透明:false
});
var redPolygon=viewer.entities.add({
名称:“红色多边形”,
多边形:{
等级:铯。碳原子3。从摄氏度排列([-115.0,37.0,
-115.0, 32.0,
-102.0, 31.0,
-102.0, 38.0]),
//0.996的alpha值关闭Z缓冲区。
材料:新铯。颜色(1,0,0,0.996)
}
});
var greenPolygon=viewer.entities.add({
名称:“绿色多边形”,
多边形:{
等级:铯。碳原子3。从度排列([-118.0,42.0,
-100.0, 42.0,
-104.0, 32.0]),
//0.996的alpha值关闭Z缓冲区。
材料:新铯。颜色(0,1,0,0.996)
}
});
viewer.zoomTo(viewer.entities)代码>
html,body,#cesiumContainer{
宽度:100%;高度:100%;边距:0;填充:0;溢出:隐藏;
字体系列:无衬线;
}
它可能适用于稍微不同的情况:
多边形具有高度,其中一些可能是透明的,也可能不是透明的,而且多边形层彼此重叠。
对于解决这种情况下的z-fighting问题,最好的方法是使用选项标志{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);
答案很简单,您可以在代码中添加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);