Javascript 获取mapbox地图范围内的标记列表

我正试图把所有的标记都放在地图的范围内。当用户与地图交互（放大/缩小、移动、单击）时，我希望获得地图边界内的所有标记，以显示这些标记的列表

我尝试实现此示例中的一些函数，但没有成功：

以下是codepen上地图的工作版本：

我查看了它在特性和边界中返回的内容，这些信息都没有帮助我实现这一点。我正在使用标记，以便显示自定义标记图像，并设置弹出框中显示的说明

map.on('moveend', function (e) {
    var features =  map.queryRenderedFeatures();
    var bounds = map.getBounds();

    console.log(features);
    console.log(bounds);
});

---

据我所知，mapbox gl js API您不能查询标记。我要做的是在某种数据结构中有一个标记列表，并使用函数进行查询。第一个输入是标记，第二个输入是当前视口。

1）Mapbox gl js

不存储标记的引用

2） 如果标记已添加到地图而未保存，则其唯一表示形式是地图容器中的html元素

3） 因此，您可以使用
getBoundingClientRect
确定标记在地图容器中是否可见：

function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}

function getVisibleMarkers() {
  var cc = map.getContainer();
  var els = cc.getElementsByClassName('marker');
  var ccRect = cc.getBoundingClientRect();
  var visibles = [];
  for (var i = 0; i < els.length; i++) {
    var el = els.item(i);
    var elRect = el.getBoundingClientRect();
    intersectRect(ccRect, elRect) && visibles.push(el);
  }
  if (visibles.length > 0) console.log(visibles);
}

函数intersectRect（r1，r2）{
返回！（r2.左>r1.右）||
r2.右r1.底部||
r2.底部0）console.log（visibles）；
}

[]
我相信这是可能的，因为标记是功能，我不会将它们设置为添加时要引用的带有id的图层。我使用的示例是，它循环遍历每个geojson片段，并以这种方式创建它们。试着用一个定制的记号笔，也吃我的蛋糕。