polygon-3d extrude showing filled outline edges

09-28-2020 10:42 AM
New Contributor II

I'm trying to show a polygon result of a watershed using a webscene (AGS JS API 4.x and (polygon-3d and extrude feature). What I can't figure out, is there is a way to symbolize the feature to show filled edges and a transparent fill for the main polygon? Basically, i just want the outline of the polygon to be extruded and filled.

Tags (2)
0 Kudos
8 Replies
MVP Regular Contributor
0 Kudos
New Contributor II

Thanks, yes, i've gone through the samples a few times now looking for how to do this and i don't see any explain how to do this.

0 Kudos
MVP Regular Contributor

Brad Cooper

Can you post your code or link to the site you are working on? 

0 Kudos
New Contributor II

Sure, i put together this sample (borrowed from Esri's sample) to show a box that is filled - https://codepen.io/bcooper/pen/yLOrRjg?editors=1000.

I tried adding an outline style in there (red) for good measure).

0 Kudos
MVP Regular Contributor

Brad Cooper

    <meta charset="utf-8" />
     Floating polygon to see about only doing outline and not fill

    <script src="https://js.arcgis.com/4.16/"></script>

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;

      ], function (Map, SceneView, GraphicsLayer, Graphic) {
        var map = new Map({
          basemap: "hybrid"

        var view = new SceneView({
          container: "viewDiv",
          map: map,

          camera: {
            // autocasts as new Camera()
            position: {
              // autocasts as new Point()
              x: -0.17746710975334712,
              y: 51.44543992422466,
              z: 1266.7049653716385
            heading: 0.34445102566290225,
            tilt: 82.95536300536367

         * Add graphics layer

        var graphicsLayer = new GraphicsLayer();

         * Add a 3D polygon graphic

        var polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-0.184, 51.48391],
            [-0.184, 51.49091],
            [-0.172, 51.49091],
            [-0.172, 51.48391],
            [-0.184, 51.48391]
       var threeDfillSymbol2 = {
          type: "polygon-3d", // autocasts as new PolygonSymbol3D()
  symbolLayers: [
      type: "extrude",
       size: 800,
      // autocasts as new ExtrudeSymbol3DLayer()
      material: {
        color: [67, 145, 244, 0.5] // orange
      edges: {
        // add edges of type solid
        type: "solid",
        color: "#AF6515" // dark orange
        var polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: threeDfillSymbol2


    <div id="viewDiv"></div>
0 Kudos
New Contributor II

Thanks but I'm looking to have the middle (volume) unfilled. I only want the outside outline of the polygon that was extruded to be filled (i.e. in-between the edges). Think of it as a shoe box with no top or bottom, just the sides.

0 Kudos
New Contributor II

Rickey Fite‌ Any other thoughts? Thanks!

0 Kudos
MVP Regular Contributor

Brad Cooper

The only way I can think of is to make the polygon into a line. I don't think that is what you are looking for though. 

0 Kudos