Changing zoom value when using 3D terrain leads to layers jittering

[dadebue]

mapbox-gl-js version: Version used in studio.mapbox.com

browser: Google Chrome (newest version)

Steps to Trigger Behavior

1. Create map style in Mapbox Studio with 3D terrain enabled (
2. Zoom map to some mountains (with a zoom value where some layers change their properties)
3. Drag the map away form the mountain and back to the mountain
4. Notice the zoom level changing just by dragging the map
5. Notice the layer presentation change between lower and higher detail

Link to Demonstration

https://media.giphy.com/media/Mr224WIgAEzS4XYgX9/giphy-downsized-large.gif

Expected Behavior

When dragging the map the layer appearance should not change.
Wouldn't it make sense that the zoom level is not affected by the terrain height at the current viewpoiont? The zoom level could be calculated on sea level or at least from a very basic height information where all "sudden" height changes like mountains are averaged out.
This way the layers would not jump between their lower and higher detail views. This would lead to a clean presentation without jitter.

Actual Behavior

When dragging the map the layers are affected by the zoom value change and therefore change their appearance. This leads to jitter when dragging the map over the threshold multiple times.

[karimnaaji]

Hey @dadebue , that's an issue we haven't been tracking in this repo but have been aware of. It's related to the fact that the current map zoom is inferred from the map center as well as the altitude of the camera relative to it:

https://github.com/mapbox/mapbox-gl-js/blob/50b4b9d5071a6e770338b2e4bf86425255763346/src/geo/transform.js#L515_L517

For anything that uses rule based styling, this issue is then quite visible whenever the altitude changes abruptly. One way to address that would be to split styling zoom and actual camera zoom, but there may be other issues that arise from doing so.

[dadebue]

OK thanks for pointing me to the right direction!

What about averaging out the mercatorElevation by not only taking the elevation from the center of the map but at x different points on the map? The resulting mercatorElevation could be the mean value of those points (in order to decrease the significance of outliers -> e.g. local mountains):

const bounds = map.getBounds();
const elevationPoints = [
   this.center,
   bounds.sw,
   bounds.ne,
   new mapboxgl.LngLat(bounds.ne.lat, bounds.sw.lng),
   new mapboxgl.LngLat(bounds.sw.lat, bounds.ne.lng),
]
const elevationsAtCenter = elevationPoints.map((c) => this._elevation.getAtPointOrZero(this.locationCoordinate(c)))
const elevationAtCenter = math.mean(elevationsAtCenter...)

The number of points taken into account is just a parameter. This example uses the center and all four corners of the map bounding box.