I am trying to achieve the exactly behaviour as exposed there: https://docs.mapbox.com/mapbox-gl-js/example/pitch-and-distance-from-center/, but with 3d terrain (https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/).
At this jsfiddle you can see that on the left (plane terrain) we can see the symbols with pitch > 60 in some range (because the 'distance-from-center' is applied), but at the right part of the map (3d terrain) we can see symbols at only max 60 degrees of pitch regardless of the 'distance-from-center' value.
function addLayerFilter (map) {
const layers = map.getStyle().layers
const poiLayers = []
for (let i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
poiLayers.push(layers[i].id)
}
}
for (const layerId of poiLayers) {
const currFilter = map.getFilter(layerId);
// Add in an additional condition for filtering based on ["pitch"] and
["distance-from-center"]
const updatedFilter = [
'all',
currFilter,
[
'case',
// Always show the symbol when pitch <= 60
['<=', ['pitch'], 60],
true,
// When pitch > 60, show the symbol only when it is close to the camera ( distance <= 2 )
[
'all',
['<=', ['distance-from-center'], 2],
['>', ['pitch'], 60]
],
true,
// Hide in the remaining case, far and high pitch
false
]
];
map.setFilter(layerId, updatedFilter);
}
}
You can see logs of the value of the pitch per each move. My bet is that the condition regarding 'distance-from-center' is not applied in a correct way since that there is 3d terrain, and the only condition working is that the pitch should be <= 60 to show something.
How can I solve it and have the behaviour of the layer density depending on the distance but using the 3D Terrain?
This is how it looks, If you just load the jsfiddle, at the left part you will see the satellite without terrain and the symbol working, but at the left, you will see the satellite with terrain and without the symbol data.
Thanks in advance, Joan.