I want to create a two-layer stacking effect by setting different heights above the ground. However, from the result, it seems that the second layer is not stacked on top of the first layer but rather is covering it. What’s going on?

CesiumJS
1

image
image867×516 63.1 KB

I want to create a two-layer stacking effect by setting different heights above the ground. However, from the result, it seems that the second layer is not stacked on top of the first layer but rather is covering it. What’s going on?

var latLongsx2 = [
    114.232062161509, 30.5591579405355, 0,
    114.232062911307, 30.5592163157103, 0,
    114.232369878193, 30.5592130523243, 0,
    114.232369128386, 30.5591546781422, 0,
    114.232062161509, 30.5591579405355, 0

];

var latLongsx3 = [
    114.232062161509, 30.5591579405355, 10,
    114.232062911307, 30.5592163157103, 10,
    114.232369878193, 30.5592130523243, 10,
    114.232369128386, 30.5591546781422, 10,
    114.232062161509, 30.5591579405355, 10

];

function showhousepic3d() {


    viewer.entities.add({
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(latLongsx2),
            material: Cesium.Color.BLUE.withAlpha(0.5),  
            extrudedHeight: 10,  
            outline: true,
            outlineColor: Cesium.Color.RED  
        }
    });

    viewer.entities.add({
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(latLongsx3),
            material: Cesium.Color.RED.withAlpha(0.5), 
            extrudedHeight: 20,  
            outline: true,
            outlineColor: Cesium.Color.BLUE  
        }
    });
}

Edited for formatting

2

Hi @jie_wang, welcome to the community!

It looks like you’re using CesiumJS, judging from the code you shared with us. I’m moving this to the CesiumJS category where you’ll be able to get more appropriate support. Thank you!

3

First a general hint: It is much more likely that you receive a helpful response more quickly when you post a Sandcastle that demonstrates the problem. Fortunately, you already posted most of the relevant code. But in general, you can put your code into https://sandcastle.cesium.com/ , and then create a “Share” link like this:

Cesium Sandcastle share

The result will be a link like this:

This Sandcastle also shows the solution to your problem:

You are creating two extruded polygon entities. They have different extrudedHeight values. But they are both starting at the ground. In order to move the second polygon up (above the first one), you can simply add
height: 10,
to the constructor parameters of the second one.