Cesium DataSourceKoleksiyon katmanı siparişi

Question

Bir Sezyum küresi üzerine yerleştirmek istediğim birden çok GeoJsonDataSource nesnem var. Sorun şu ki, eğer örtüşüyorlarsa, bazı z-kavga sorunları alıyorum ve siparişlerini ayarlayamıyorum.

DataSourceCollectionDataSource nesnelerinin sırasını belirtmenin bir yolu var mı?

Örneğin, aşağıdaki kodu kullanarak kırmızı çokgenin üstünde yeşil poligonu sahip olmak istiyorum: Ancak

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

, sonuç şöyle görünür:

Ben alfa argümanını 1.0'dan daha küçük bir değere ayarlarsam, z-kavgasını düzeltebildiğimi, ancak siparişin hala ele alınmadığını fark ettim.

Answer 1

Sorunuzun alt kısmında, z-kavgalar için hızlı düzeltmeden biraz şeffaflık ayarlayarak, bu çokgenler için Z tamponunu kapatmak yeterlidir. Şeffaflık 8 bitlik bir Alfa kanalında gerçekleşir, bu nedenle kullanacağım en sevdiğim değer 254.0/255.0 veya 0.996'dur.

Ancak, muhtemelen kapatmak isteyeceğiniz başka bir seçenek var ve bu orderIndependentTranslucency. Bu, Viewer yapıcısındaki bir seçenekler parametresinden başlatılabilen Scene özelliğidir. Açık bırakıldığında, onu destekleyen sistemlerin varsayılanı, opaklık ne olursa olsun, diğer yarı saydam nesnelerin arkasındaki yarı saydam nesnelere her zaman "görebilir" ve elbette işlem sırası sonucu etkilemez. Ancak bu durumda, 'un sonucunu etkileyecek sırasını, bir çokgenin diğerini gizlemesini istiyorsanız.

İşte bir örnek. En alttaki "Kod Snippet'i Çalıştır" ı tıklayın veya sadece JavaScript bölümünü Sandcastle'a yapıştırın.

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

Biraz farklı durum için yararlı olabilir: çokgenler yüksekliklere sahip ve bazıları şeffaf olabilir ya da değil, aynı zamanda poligon tabakaları birbirinin üstüne yalan. Bu durumda z-kavgasını çözmek için iyi yaklaşım, seçenek bayrağı {closeBottom: false} ile çokgenlerin alt kısmını kaldırıyor. Yukarıdaki örnekte bu durum için uyarlanmış bir kod var:

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