Return distance to feature from queryRenderedFeatures
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
I'm mixing Mapbox GL fill-extrusion layers with some custom layers that use Three.js (see [this StackOverflow question/answer][1]). 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: https://github.com/mapbox/mapbox-gl-js/blob/cc9e21926e8a498315c1a1bf75bf74702447b7f2/src/style/style.js#L1052-L1054
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
[1]: https://stackoverflow.com/questions/59163141/raycast-in-three-js-with-only-a-projection-matrix
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with queryRenderedFeatures and the linked sorting code in src/style/style.js, then compare Mapbox GL's feature ordering with the distance returned by the Three.js raycaster. Done means the API exposes a physically meaningful distance, or an equivalent camera-distance method, so the two feature lists can be merged by depth.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- three.js, typescript
- Domain
- api, computer-graphics
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100