Caesium DataSourceCollection Layer Bestellung

Question

Ich habe mehrere GeoJsonDataSource Objekte, die ich auf einem Cäsium-Globus setzen möchte. Das Problem ist, dass, wenn sie sich überschneiden, ich einige Z-Kämpfe Probleme bekomme und ich kann ihre Reihenfolge nicht anpassen.

Gibt es eine Möglichkeit, die Reihenfolge DataSource Objekte in einer DataSourceCollection anzugeben?

Zum Beispiel, würde Ich mag die grüne Polygon auf der Oberseite des roten Polygon haben mit dem folgenden 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); 

Allerdings sieht das Ergebnis wie folgt aus:

Ich habe festgestellt, dass, wenn ich das Alpha-Argument auf weniger als 1.0 einstellen, kann ich die Z-Bekämpfung beheben, aber die Reihenfolge wird immer noch nicht adressiert.

Answer 1

Am Ende Ihrer Frage, Sie erwähnten die Quick-Fix für Z-Kampf ist einfach den Z-Puffer für diese Polygone zu deaktivieren, indem Sie etwas Transparenz. Transparenz tritt in einem 8-Bit-Alpha-Kanal auf, daher ist mein bevorzugter Wert 254.0/255.0 oder 0.996.

Aber es gibt eine andere Option, die Sie wahrscheinlich ausschalten möchten, und das ist orderIndependentTranslucency. Dies ist eine Eigenschaft von Scene, die über einen options-Parameter im Viewer-Konstruktor initialisiert werden kann. Wenn diese Option aktiviert ist, kann der Standardwert für Systeme, die ihn unterstützen, transparentes Objekt hinter anderen transluzenten Objekten "sehen", unabhängig von der Deckkraft, und natürlich hat die Renderreihenfolge keinen Einfluss auf das Ergebnis. Aber in diesem Fall wollen Sie die Renderreihenfolge auf das Ergebnis auswirken, wenn Sie möchten, dass ein Polygon das andere verdeckt.

Hier ist ein Beispiel. Klicken Sie unten auf "Code-Snippet ausführen" oder fügen Sie nur den JavaScript-Abschnitt in Sandcastle ein.

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>

Answer 2

Es könnte ein wenig anders Fall nützlich sein: Polygone haben Höhen und einige von ihnen könnten transparent sein oder nicht, auch Polygon Schichten liegen übereinander. Für die Auflösung von z-fighting in diesem Fall ist das Entfernen des unteren Teils von Polygonen mit dem Optionsflag {closeBottom: false} der gute Ansatz. Ich habe Code für diesen Fall von oben Kommentar:

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