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; } } }

Extending 3D Path Symbols to the Ground

Moe-Notos

I am attempting to draw PathSymbol3DLayers in a 3D SceneView where the symbol extends to the ground elevation but not past it.

The example image below shows the result of a polyline (within a graphic in a graphicslayer) consisting of two points, 1 and 2, and the blue PathSymbol3DLayer symbol for the graphic for it with a specified height. The orange line below follows the ground between the two points.

The goal is to have the blue graphic extend all the way to the ground without altering the top edge.

One potential solution is to increase the height attribute of the PathSymbol3DLayer to a very large number. This results in the image below, which is desirable.

However, I would also like to select the graphic without showing the bottom portion going through the ground (light blue) as shown in the picture below. Ideally, only the dark blue portion is highlighted with the halo and tint.

Thanks in advance!

Find more posts tagged with

Accepted answers

JohnGrayson

One way to do this would be to use a Mesh geometry to create a 'wall' along the line. Here's an example:

https://codepen.io/john-grayson/pen/porjOxO

All comments

JohnGrayson

One way to do this would be to use a Mesh geometry to create a 'wall' along the line. Here's an example:

https://codepen.io/john-grayson/pen/porjOxO

ArnoFiva

I really like your solution John, using a buffer to create a volumetric Mesh!

Moe-Notos

Just what I was looking for, thank you!

There is a small delay for me between when the page loads and the graphic appears in the view, is that from the buffer/densify/sampler or more from the rendering of the final mesh?

JohnGrayson

On startup we waited for the groundView elevationSampler to be available after the view is finished updating the first time. There are other ways to model this workflow, for example, creating an elevationSampler just for the area of interest and only when needed. I've updated the codepen to show this other alternative. How we model the geometry will depend on your use-case and workflow.

Moe-Notos

Ah I see, thanks.

Just for more info, the use-case and workflow here consists of a given set of polylines (with only a start and end point), and then for each polyline a number of points between each start and end point are generated. The result is returned as a single polyline where each path corresponds to the result of the respective generated polyline (more specifically the only path of the generated polyline).

E.g. result_polyline = [ [startPtA, a, b, c, d, ..., endPtA], [startPtB, a, b, c, d, ..., endPtB], ... ] where a, b, c, and d are the generated points.

Furthermore, the ability to select and highlight a single path, as well as the entire resulting polyline is desired. Therefore, the current approach is to generate a mesh for each path, and a single LineSymbol3DLayer for the entire polyline which runs along the top.

Given this, is there a better approach, especially considering that each path may contain several hundred points? Otherwise, the current approach locks up the UI while attempting to generate and render the paths, even after using the async methods.

Separately, I noticed that there are sections where the bottom clips through the ground for very long distances. For example, in the image below I have only modified the endPoint.y, and the ground is followed only for a bit on the right side of the image. I believe this may be because of the way that the top and bottom coordinates are calculated?

Screenshot 2021-10-19 104605.png

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.