Select to view content in your preferred language

Stacking Order with graphics and 3D Layers in SceneView

569
4
Jump to solution
08-25-2022 04:32 PM
DanielDormont
Occasional Contributor

Hi,

I am building a 3D Map and trying to understand how to make my custom graphics appear correctly "over"  3D structures such as the OSM Buildings layer. I created a simple codepen here: https://codepen.io/dandormont-the-decoder/pen/MWVdrgQ What you can see is that as the map begins to load, my custom graphic - the little green rectangle with a cross on it - shows up. But then as the buildings layer that I added to my web scene begin to appear, it gets blocked by the building, and you have to zoom _way_ out for it to appear again. Is there a way to make my graphic show up through the building at all zoom levels?

Caveat: if it's not obvious, this is my first 3D map and for that matter my first ArcGIS Javascript project 🙂

Thanks,
Dan

0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable

Hey @DanielDormont 

Yes this is currently not possible in the 3D JSAPI. It would also make it hard to figure where the symbols are exactly placed since they could be close or far away. If you want your symbols to stick out more you can also use callouts, which place the symbols further above the ground and connects them to the ground with a line. I modified your codepen a bit to show you an example: https://codepen.io/dlaumer/pen/MWVdPNK

Hope this helps, 

Daniel

View solution in original post

4 Replies
by Anonymous User
Not applicable

Hi @DanielDormont , 

The issue here is that the point geometry you're creating doesn't have the elevation (z-value) specified, only the longitude and latitude. In such a case, the point is automatically aligned to the ground and then, as you mentioned, gets blocked by the buildings. When zooming out at some point the buildings are not rendered anymore and the symbol shows up again. 

What you can do is to position the symbol on top of everything in the scene To do that, there are two options. Firstly, you can give the point geometry a Z value, e.g. z:20 would elevate the point 20 meters above the ground so that the icon is shown hovering over the low building. Secondly, you could place the graphics onto a layer and use the elevationInfo property to align anything on that layer above all the objects in the scene. (The graphics added to view.graphics are not inside of a layer). Additionally you can also add an offset to be sure the symbol is not half inside of the building. I adapted your codepen here: https://codepen.io/dlaumer/pen/MWVdPNK

Of course the symbol is still not shown when it is behind another, taller building. Is this sufficient or did you want the symbol to always render in front of everything?

Just feel free to ask any follow up questions, 

Daniel

DanielDormont
Occasional Contributor

Hi @Anonymous User ,

 

Thanks for the reply, that's helpful. I guess, coming from a 2D world, I had imagined this as not so much an elevation issue, but more akin to something like a z-index where the graphic would appear even if there is something else in its spot. Basically that portion of the building would be obscured by my graphic, rather than the other way around. Perhaps that concept doesn't really apply to 3D?

 

Anyway, I think this gives me a good starting point. To be honest I didn't know I could create my own layers for graphics. So that's good to know too.

dan

0 Kudos
by Anonymous User
Not applicable

Hey @DanielDormont 

Yes this is currently not possible in the 3D JSAPI. It would also make it hard to figure where the symbols are exactly placed since they could be close or far away. If you want your symbols to stick out more you can also use callouts, which place the symbols further above the ground and connects them to the ground with a line. I modified your codepen a bit to show you an example: https://codepen.io/dlaumer/pen/MWVdPNK

Hope this helps, 

Daniel

DanielDormont
Occasional Contributor

Huh. Yet another thing I didn't know about 🙂 Alright, I have some more research to do. Thanks for all the help.