Цезиевый источник данныхСоздание слоя слоя

Question

У меня есть несколько объектов 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); 

Однако результат выглядит следующим образом:

Я заметил, что если я отрегулирую альфа-аргумент до 1.0, я могу исправить z-сражение, но порядок все равно не рассматривается.

Answer 1

В нижней части вашего вопроса вы упомянули, что быстрое исправление для z-war - просто отключить буфер Z для этих полигонов, установив некоторую прозрачность. Прозрачность происходит в 8-битном альфа-канале, поэтому мое любимое значение для использования - 254.0/255.0, или 0.996.

Но есть еще один вариант, который вы, вероятно, захотите отключить, и это orderIndependentTranslucency. Это свойство Scene, которое можно инициализировать из параметра параметров в конструкторе Viewer. Когда они остаются включенными, по умолчанию для систем, которые его поддерживают, всегда можно «видеть» полупрозрачные объекты за другими полупрозрачными объектами, независимо от непрозрачности, и, конечно, порядок визуализации не влияет на результат. Но в этом случае вы хотите визуализации, чтобы повлиять на результат, если вы хотите, чтобы один полигон заслонил другой.

Вот пример. Нажмите «Выполнить фрагмент кода» внизу или вставьте только раздел 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>

Answer 2

Это может быть полезно несколько иной случай: многоугольники имеют высоту, и некоторые из них могут быть прозрачными или нет, а также полигональные слои лежат на верхней части друг друга. Для разрешения 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);