在加载时使用Mapbox的queryRenderedFeatures方法

6 浏览
0 Comments

在加载时使用Mapbox的queryRenderedFeatures方法

我想在页面加载后使用queryRenderedFeatures来填充一个列表，但似乎在图层加载之前就会一直触发。我在控制台中收到以下错误消息：\n图层“Points”在地图样式中不存在，无法查询要素。 \n在要素加载后如何查询图层？我尝试了这些答案中的建议，但结果一直为空。\nJavaScript that executes after page load\ncall a function after complete page load\n这是我目前的代码：\n

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);
});

0

2 答案

0 Comments

问题的原因是在加载地图时，使用了 map.queryRenderedFeatures() 函数来查询渲染的要素，但此时地图尚未完全加载完成，导致查询失败。

解决方法是在调用 map.queryRenderedFeatures() 函数之前，先使用 map.loaded() 方法判断地图是否已经加载完成。只有当地图加载完成后，才可以安全地进行要素查询。

以下是解决方法的示例代码：

// 先判断地图是否加载完成
if (map.loaded()) {
  // 安全地进行要素查询
  var features = map.queryRenderedFeatures({ /* 查询参数 */ });
  // 处理查询结果
  // ...
}

更多示例代码可以参考上述链接中在GitHub上的问题评论。

0
0 Comments

问题原因：在使用Mapbox的queryRenderedFeatures方法时，有时会出现地图尚未完全加载完成的情况，造成无法正确查询要素的问题。

解决方法：通过在地图渲染完成后再执行查询操作，可以确保地图已完全加载，从而避免查询出现错误。具体的解决方法如下：

1. 在添加图层之后，添加一个'afterChangeComplete'事件处理函数，该函数会在地图每次渲染完成后触发。

2. 在'afterChangeComplete'事件处理函数中，通过判断地图是否已加载完成（使用map.loaded()方法），如果尚未加载完成，则终止函数执行。

3. 如果地图已加载完成，则可以安全地进行查询操作，使用map.queryRenderedFeatures方法查询要素。

4. 最后，在查询完成后，将'afterChangeComplete'事件处理函数从'render'事件中移除，以免重复触发。

确保将以上代码放在与要查询的图层相同的map.on('load', function() {})事件中。

通过以上解决方法，可以确保在地图加载完成后再进行要素查询操作，避免了查询时地图尚未加载完成而导致的错误。

0