nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Extrude Elevation Layer in Local Scene 4.4?

RichardReinicke

Hello,

I was wondering if there`s a way to extrude a 3d surface in the Esri JavaScript API 4.4 to a specific height or maybe another surface. This was a very vommon task in good old ArcScene and it can be very helpful to create a 3d body from a 3d surface.

Actually I have a local scene with a custom Elevation Layer and Topographic Map. That looks as follows:

Now I would like to visualize the scene as a block scene so not only a surface but more like a block cutted out of the landscape to give the scene so more plasticity. Is this possible with build in functionality?

Otherwise I would try to construct sides and border as single graphics and add them to the scene.

Any help is very appreciated!

Richard

Find more posts tagged with

Accepted answers

ThomasSolow

That's similar to the approach I'm using. Try shifting the the "bottom" x and y values by a very small amount, something like this:

<SPAN class="comment token">// assuming your SR uses meters</SPAN>
polygonPointArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>xmax <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> ymin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
polygonPointArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>xmin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> ymin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Polygons aren't filled properly if they're perfectly "vertical."

I just deleted my sample by accident, but it was drawing for 2/4 sides of the scene. The other two sides weren't drawing probably due to incorrect polygon winding.

All comments

ThomasSolow

Here's an updated sample that fixes the winding issues and uses the elevationLayer.queryElevation method rather than a client-side query: rather JS Bin - Collaborative JavaScript Debugging

ThomasSolow

Okay, here's a sample: https://jsbin.com/qosutebuyi/edit?html,output

I couldn't get the getSample request to work for the world elevation service so I queried the elevation in the client. I had to increment the "bottom" of each edge so it isn't directly under the top.

Two of the polygons are still drawing incorrectly in that sample: you can see the fill is off by looking at the top. I think this is a winding issue, those rings may be wound incorrectly. I'll keep playing with it.

ThomasSolow

That's similar to the approach I'm using. Try shifting the the "bottom" x and y values by a very small amount, something like this:

<SPAN class="comment token">// assuming your SR uses meters</SPAN>
polygonPointArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>xmax <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> ymin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
polygonPointArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>xmin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> ymin <SPAN class="operator token">-</SPAN> <SPAN class="number token">0.0001</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Polygons aren't filled properly if they're perfectly "vertical."

I just deleted my sample by accident, but it was drawing for 2/4 sides of the scene. The other two sides weren't drawing probably due to incorrect polygon winding.

RichardReinicke

Thank you Thomas, that would be great. I was now able to get the necessary points from my underlying ElevationService to construct a side polygon this way:

var url = "http://ripsraster.lubw.bwl.de/arcgis/rest/services/Imageservices/
   DGM025_cache_3D/ImageServer/getSamples";

var options = {
   query: {
      geometry: '{"paths" : [ [ [3450000, 5400000], [3455000, 5400000] ] ],
                  "spatialReference" : {"wkid" : 31463}}',
      geometryType: 'esriGeometryPolyline',
      returnFirstValueOnly: false,
      sampleDistance: stepSize,
      f: 'pjson'
   },
   responseType: 'json'
};

esriRequest(url, options).then(function(response){
   var polygonPointArray = [];
   for (var i = 0; i < response.data.samples.length; i++) {
      polygonPointArray.push(
         [xmin + (i * stepSize),
         ymin,
         parseFloat(response.data.samples.value)]);
   }
   polygonPointArray.push([xmax, ymin, 0]);
   polygonPointArray.push([xmin, ymin, 0]);
   polygonPointArray.push([xmin, ymin, parseFloat(response.data.samples[0].value)]);
      // This constuctor with sr is necessary due to special coordinate system
   var polygon = new Polygon({
      rings: polygonPointArray,
      spatialReference: {
         wkid: 31463
      }
   });

   var fs = new SimpleFillSymbol({
      color: [227, 139, 79, 0.8],
      outline: {
         color: [255, 255, 255],
         width: 1
      }
   });

var polygonGraphic = new Graphic({
geometry: polygon,
symbol: fs
});
graphicsLayer.add(polygonGraphic);

});

But it ends with a strange symbol behaviour, outline is drown but fill is missing!

A similar behaviour was described here but never really cleared:
SimpleFillSymbol style does not work

In my case I need it in a SceenView and it works in this example:
Add Graphics to a SceneView - 4.4

maybe related to local scene? I've no clue.

ThomasSolow

I'm not aware of any built in way to do this but I think it's a good idea.

I'll give some thought to how you might be able to do this yourself and post a sample if I can figure something out.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.