identify location on an extrusion on click

[stepanchvatik]

mapbox-gl-js version: 1.11.1

browser: Chrome

Create extruded polygon, then add listener on click, using queryRenderedFeatures. But when I click forexample corner of roof of high building, the gps I get is from map point I clicked, not from the base of that building. The marker moves to the point that I click

[danvk]

It's pretty elaborate, but I got this to work! Here's a codepen demo

The general approach is:

• Use queryRenderedFeature to figure out which fill-extrusion feature was clicked.
• Create a Three.js scene containing just this rendered feature in meter coordinates (using map.transform.mercatorMatrix).
• Raycast in this scene following the answer in this Stack Overflow question to figure out which point on the feature (in meter coordinates) was clicked.
• Convert meter coordinates back into (lng, lat, alt)

If you open the console in the codepen and click around, you'll see that it has the right properties. Clicking up a wall increases the altitude without changing that (lng, lat). And clicking along the top of a wall changes the (lng, lat) without changing the altitude. This could also be used to get the distance to the feature, solving #9729.

One unfortunate bit is that you have to hard-code the base_height and height properties because of this bug: #9632