Showing Polygon clamps to ground and non-one simultaneously

CesiumJS
1

Hi Cesium team,

I would like to show two kinds of polygon simultaneously at the same spot but it seems to be not working.

I have tried putting both true and false to the perPositionHeight of polygonGraphics.

The two polygons should show at the same spot, the one is floating whereas the other one is clamping to the ground.

image
image

example code.

  shape = viewer.entities.add({
    polygon: {
      hierarchy: positionData,
      material: new Cesium.ColorMaterialProperty(
        Cesium.Color.YELLOW.withAlpha(0.2)
      ),
      outline: true,
      outlineWidth: 10.0,
      outlineColor : Cesium.Color.WHITE,
      // perPositionHeight: true
    },
  });

  shape2 = viewer.entities.add({
  polygon: {
    hierarchy: positionData,
    material: new Cesium.ColorMaterialProperty(
      Cesium.Color.RED.withAlpha(0.3)
    ),
    outline: true,
    outlineWidth: 10.0,
    outlineColor : Cesium.Color.WHITE,
    perPositionHeight: true,
    // heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
    // closeTop: false,
    // extrudedHeight:100
    },
  });

Cheers,
Hiroshi

2

Hi,
You can try the “classificationType” option of PolygonGraphics.
Also, you can consider using the class: GroundPrimitive.
Thanks

1 Like
3

@ZhefengJin

Great suggestion - thanks!

-Sam

4

Thanks for the suggestion @ZhefengJin

could you please explain why does the code does not work?
it doesn’t make sense otherwise the property sets of the entities affects the following added entity like the code below:


shape = viewer.entities.add({
    polygon: {
      hierarchy: positionData,
      material: new Cesium.ColorMaterialProperty(
        Cesium.Color.YELLOW.withAlpha(0.2)
      ),
      outline: true,
      outlineWidth: 10.0,
      outlineColor : Cesium.Color.WHITE,
    },
  });

  shape2 = viewer.entities.add({
  polygon: {
    hierarchy: positionData,
    material: new Cesium.ColorMaterialProperty(
      Cesium.Color.RED.withAlpha(0.3)
    ),
    outline: true,
    outlineWidth: 10.0,
    outlineColor : Cesium.Color.WHITE,
    perPositionHeight: true,
    },
  });
5

This is an example using Cesium sandcastle

1 Like