javascript - Mapbox queryRenderedFeatures on load - Stack Overflow

admin管理员组

文章数量:1302901

I would like to use queryRenderedFeatures after the page loads in order to populate a list, but it seems to keep firing before the layer is loaded. I get the error message in the console below:

The layer 'Points' does not exist in the map's style and cannot be queried for features.

How can I query the layer after the feature is loaded? I tried following the suggestions in these answers but it keeps returning empty

JavaScript that executes after page load

call a function after plete page load

This is what I have right now

map.on('load', function() {
  map.addLayer({
      'id': 'Points',
      'type': 'circle',
      'source': 'Points-45d56v',
      'source-layer': 'Points-45d56v',
      'layout': {
          'visibility': 'visible',
      },
      'paint': {
        'circle-radius': 6,
        'circle-color': 'red'
      }
  });
});

$(document).ready(function(){
  var features = map.queryRenderedFeatures({layers:['Points']});
  console.log(features);
});

I would like to use queryRenderedFeatures after the page loads in order to populate a list, but it seems to keep firing before the layer is loaded. I get the error message in the console below:

The layer 'Points' does not exist in the map's style and cannot be queried for features.

How can I query the layer after the feature is loaded? I tried following the suggestions in these answers but it keeps returning empty

JavaScript that executes after page load

call a function after plete page load

This is what I have right now

map.on('load', function() {
  map.addLayer({
      'id': 'Points',
      'type': 'circle',
      'source': 'Points-45d56v',
      'source-layer': 'Points-45d56v',
      'layout': {
          'visibility': 'visible',
      },
      'paint': {
        'circle-radius': 6,
        'circle-color': 'red'
      }
  });
});

$(document).ready(function(){
  var features = map.queryRenderedFeatures({layers:['Points']});
  console.log(features);
});

• javascript
• mapbox
• mapbox-gl-js

Share Improve this question Follow asked Jun 5, 2018 at 16:42 leelum1leelum1 1,2541111 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I got the following code from the Github link in the previous answer, which worked for me:

map.addLayer(...) // make your change
map.on('render', afterChangeComplete); // warning: this fires many times per second!

function afterChangeComplete () {
  if (!map.loaded()) { return } // still not loaded; bail out.

  // now that the map is loaded, it's safe to query the features:
  map.queryRenderedFeatures(...);

  map.off('render', afterChangeComplete); // remove this handler now that we're done.
}

Be sure to put it in the same map.on('load', function() {}); as the layer to be queried.

From https://github./mapbox/mapbox-gl-js/issues/4222#issuement-279446075:

You can check map.loaded() (https://www.mapbox./mapbox-gl-js/api/#map#loaded) to determine whether the map is loaded and it's safe to query the features.

For example code see the linked issue ment on GitHub.

本文标签： javascriptMapbox queryRenderedFeatures on loadStack Overflow