Rendering order of fill layers and symbols is inconsistent with draping enabled/disabled.

[SnailBones]

mapbox-gl-js version: Presumably all versions since the introduction of terrain through 2.8

browser: All

Steps to Trigger Behavior

1. Open a map where a fill layer is added on top of all other layers, for instance feature state or hover effect example.
2. Enable terrain or change projection to globe
3. Note that symbols are now rendered above the fill layer.

With draping enabled, symbols appear above the polygon layer, but otherwise the polygon appears on top.

11812 is the same issue in globe view. A workaround is to switch to optimizeForTerrain:false option.

[SnailBones]

Notes from discussion in Slack about how to address this:

This is caused by an optimization introduced with terrain in v2. With further optimization, we could remove the need to expose the optimizeForTerrain option.

In many cases, the intended behavior is likely to have the custom layer below symbols at all times. Users may miss this as it requires an extra arugment to addLayer and either knowledge of your layer names or writing a custom search through them.

• Add links to existing examples placing layers below symbols (addressed in #11838)
• Update most or all examples to place layers below symbols

We could also consider adding a wrapper function instead of requiring user code iterating through the layer stack as in this example.