Stack extruded polygons in 3D with the ArcGIS API for JavaScript

Question

I have polygon geometries and visualize them in 3D using a ExtrudeSymbol3DLayer, as described in the SDK documentation and the sample:

var symbol = {
  type: "polygon-3d",  // autocasts as new PolygonSymbol3D()
  symbolLayers: [{
    type: "extrude",  // autocasts as new ExtrudeSymbol3DLayer()
    size: 5,  // 5 meters in height
    material: { color: "red" }
  }]
};

Is there any way to stack these 3D extrusions on top of each other? For example, if I have a geometry for New York City, I want to extrude from the bottom to about 5m in one color, and 5m to 10m in one color, etc etc. Kind of like making a stacked bar chart, but in a more geographic way. Any input would be appreciated!

Answer 1

This is possible by extruding the geometries and placing them at a certain height using the elevationInfo property on the layer. The below example is assuming you have a layer (e.g. FeatureLayer or GeoJSONLayer) with polygon geometries.

For the extrusion, tell the layer to render the polygons with a ExtrudeSymbol3DLayer. In the below code snippet, all polygons will have a height of 5 meters.

layer.renderer = {
  type: "simple",
  symbol: {
    type: "polygon-3d",
    symbolLayers: [
      {
        type: "extrude",
        size: 5, // height in meters
        material: {
          color: "red"
        }
      }
    ]
  }
}

After that you can make your extruded polygons fly by placing them at a certain elevation relative-to-ground. The below example will renderer all polygons 10 meters above ground.

layer.elevationInfo = {
  mode: "relative-to-ground",
  offset: 10,
  unit: "meters"
}

The polygons will not yet appear stacked as they all have the same color, height and elevation from the ground. We basically want to have different values in the above code snippets for each of the polygons.

The following example code achieves this by adding

• an Arcade expression for the elevationInfo
• a VisualVariable for the extruded height of the polygon
• a UniqueValueRenderer to use a different color for each polygon

They all depend on the attributes of the polygon feature and can therefore be tweaked by changing the values of the attributes.

// Make elevation offset depend on the attribute "elevation"
layer.elevationInfo = {
    mode: "relative-to-ground",
    featureExpressionInfo: {
      expression: "$feature.elevation"
    },
    unit: "meters"
  };

layer.renderer = {
  type: "unique-value",
  visualVariables: [
    // Make the extrusion height depend on the attribute "height"
    {
      type: "size",
      valueExpression: "$feature.height",
      valueUnit: "meters"
    }
  ],
  // Make the color depend on the attribute "usage"
  field: "usage",
  uniqueValueInfos: [
    {
      value: "office",
      symbol: {
        type: "polygon-3d",
        symbolLayers: [
          {
            type: "extrude",
            material: {
              color: "#D06152"
            }
          }
        ]
      }
     },
     ... // Add unique value info for each usage
  ]
};

Here is a running example showing a few extruded polygons in Central Park, NY. https://codepen.io/arnofiva/pen/4071d4e79a3cb921f42d6a9e83f5b418?editors=1010