Question

我正在尝试使所有标记都在地图范围内。当用户与地图互动时（放大/缩小，移动，单击），我想获取地图范围内的所有标记以显示这些标记的列表。

我尝试实现了本示例中的某些功能，但没有遇到任何麻烦：https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

这是在Codepen上运行的地图版本：https://codepen.io/anon/pen/MPGgWq

我仔细观察了它返回的特征和范围，但这些信息都没有帮助我完成任务。我正在使用标记，因此我可以显示自定义标记图像，还可以设置显示在弹出框中的描述。

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

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

Answer 1

1）Mapbox gl js don't store references for markers-https://github.com/mapbox/mapbox-gl-js/issues/5821#issuecomment-356704579

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

[https://jsfiddle.net/rkqdz5g2/]

Answer 2

据我了解mapbox gl js API，您无法查询标记。我要做的是在某种数据结构中使用一系列标记，并使用turf.js pointsWithinPolygon函数进行查询。首先输入标记的位置，然后输入当前视口的位置。

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

2 个答案: