Return distance to feature from queryRenderedFeatures

[danvk]

Motivation

I'm mixing Mapbox GL fill-extrusion layers with some custom layers that use Three.js (see this StackOverflow question/answer). When a user clicks on the map, I can use Mapbox's queryRenderedFeatures to figure out which fill-extrusion features were under the cursor. And I can use a Three.js raycaster (see the Stack Overflow question) to figure out which Three.js features were under the cursor.

I want to sort these features by depth, so that I can determine which is on top, whether it's a fill-extrusion layer or a Three.js layer. The Three.js raycaster returns a distance which I can use to sort the meshes. And queryRenderedFeatures sorts the 3D features it returns by distance. But it doesn't return that distance. So it's not clear to me how to merge the two lists of features.

I believe Mapbox GL sorts 3D features by distance from the camera here:

mapbox-gl-js/src/style/style.js

Lines 1052 to 1054 in cc9e219

	features3D.sort((a, b) => {
	return b.intersectionZ - a.intersectionZ;
	});

So my strawman proposal would be to expose intersectionZ (or some physically meaningful transformation of it) in the result of queryRenderedFeatures.

Design Alternatives

A method to measure the distance from the camera to a feature would also solve this problem. Or if there's already a way to do that, I'd love to hear about it.

Design

Mock-Up

Concepts

Implementation