Implement queryRenderedFeatures for heatmap layers

[mourner]

Closes #10957. Closes #9112. Implements queryRenderedFeatures support for heatmap layers by reusing the logic from the circle layer. Instead of always returning false, it now returns an event containing all features that influence the heatmap rendering in the queried geometry (which are essentially features within the heatmap-radius of it). Makes the following possible:

map.on('click', 'heatmap', (e) => {
  console.log(`Clicked the heatmap! Features influencing this point: ${e.features.length}`);
});

cc @samanpwbb @MaretIdris @ivovandongen

Launch Checklist

• briefly describe the changes in this PR
• write tests for all new functionality
• manually test the debug page
• tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Added queryRenderedFeatures support to heatmap layers.</changelog>

[rreusser]

I gave this a test run and looked it over pretty carefully, and… it looks really good. 👏 Could possibly add a test, but not sure if that's worthwhile.

As for documentation a list of places where we could note this:

• heatmap layer docs: perhaps an odd place, though people probably end up here if they want to create a heatmap.
• Create a heatmap layer example: Could add even just an output that shows how many points were clicked so that people know they can query this and sort through the data, if desired.
• click event docs: it doesn't currently mention these details, but it could be helpful to give a verbose list of what's outputted in the event data or which layers are supported.

Though it's quite possible I've missed a more appropriate place for this documentation.

[mourner]

Could possibly add a test, but not sure if that's worthwhile.

Yep, added query tests at the same time as you commented. 👍

Though it's quite possible I've missed a more appropriate place for this documentation.

Perhaps worth adding a sentence in the description of heatmap-radius, noting that queryRenderedFeatures will return features within this radius from the query point?

[rreusser]

Perhaps worth adding a sentence in the description of heatmap-radius

Yes, that seems like a very reasonable place. I think someone interested in this subtlety will likely end up reading the style documentation pretty carefully. 👍

[arindam1993]

Looks good to me.

I think there also would be a lot of value in adding the heatmap weight/color to the response, atleast for single point queries.
If we want to get fancy we could do it for box-queries too with some FBO rendering and gl.readPixels(), but probably not worth the complexity.

[arindam1993]

TIL we don't have heatmap-translate I thought it was feature available across all layers.

[mourner]

I think there also would be a lot of value in adding the heatmap weight/color to the response, atleast for single point queries.

Possibly, and previously I assumed this would be required for implementing heatmap querying, but all use cases I encountered so far didn't need this, as described in #10957. Then there's this conceptual problem of what the density value would represent — in the context of interactive GL JS maps, it's used purely for visual purposes, so heatmap density or color at a particular point isn't very meaningful. So I suggest leaving this for future if use cases like this do arise.