代码之家 › 专栏 › 技术社区 › Brad

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

markers mapbox-gl-js mapbox html javascript

0

Brad · 技术社区 · 7 年前

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

我尝试实现了这个示例中的一些函数,但没有成功: https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

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

2 回复 | 直到 7 年前

1

5

stdob-- 7 年前

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

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

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/

2

0

Å½ilvinas Jocius 7 年前

不能 turf.js pointsWithinPolygon 功能。第一个输入是标记,第二个输入是当前视口。