topic Re: polygon-3d extrude showing filled outline edges in ArcGIS JavaScript Maps SDK Questions

polygon-3d extrude showing filled outline edges

BradCooper2 — Mon, 28 Sep 2020 17:42:22 GMT

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.

Re: polygon-3d extrude showing filled outline edges

RickeyFight — Mon, 28 Sep 2020 17:55:35 GMT

Brad Cooper‌

It should be possible.

Have you looked here:

PolygonSymbol3D | ArcGIS API for JavaScript 4.16

Extrude building footprints based on real world heights | ArcGIS API for JavaScript 4.16

Re: polygon-3d extrude showing filled outline edges

BradCooper2 — Mon, 28 Sep 2020 18:26:12 GMT

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.

Re: polygon-3d extrude showing filled outline edges

RickeyFight — Mon, 28 Sep 2020 19:20:03 GMT

Brad Cooper‌

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

Re: polygon-3d extrude showing filled outline edges

BradCooper2 — Mon, 28 Sep 2020 22:08:54 GMT

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).

Re: polygon-3d extrude showing filled outline edges

RickeyFight — Sun, 12 Dec 2021 00:22:21 GMT

Brad Cooper‌

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
<title>
     Floating polygon to see about only doing outline and not fill
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/Graphic"
      ], 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();
        map.add(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
        });

        graphicsLayer.add(polygonGraphic);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: polygon-3d extrude showing filled outline edges

BradCooper2 — Mon, 28 Sep 2020 22:49:48 GMT

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.

Re: polygon-3d extrude showing filled outline edges

BradCooper2 — Wed, 30 Sep 2020 17:09:08 GMT

Rickey Fite‌ Any other thoughts? Thanks!

Re: polygon-3d extrude showing filled outline edges

RickeyFight — Wed, 30 Sep 2020 18:10:00 GMT

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.