获取 queryRenderedFeatures 使用的边界框

Question

我有一个提供矢量切片的应用程序。磁贴中的功能是可点击的。当用户单击地图时，我会queryRenderedFeatures在单击点周围传递 mapbox-gl 的5 x 5px 边界框。

有没有办法确定 mapbox 用于查询其缓存切片的纬度边界框？我想要这个边界框，以便我可以在数据库中查询点击点周围的特征。我可以在矢量切片中使用特征的 id，但是当有 1000 个特征时，这变得很麻烦/站不住脚。

这是我在点附近获取功能的方式，其中：

• map 是 mapbox 地图对象
• mapboxLayers 是我要查询的图层的名称
• point是point点击事件的属性

export const getMapFeaturesNearPoint = ({ map, mapboxLayers, point }) => {
  const { x, y } = point;

  const halfPixels = 5;
  // set bbox as 5px rectangle around clicked point
  const bbox = [
    [x - halfPixels, y - halfPixels],
    [x + halfPixels, y + halfPixels],
  ];
  const features = map.queryRenderedFeatures(bbox, { layers: [...mapboxLayers] })
  return features;
};

注意：我尝试使用上面定义的 bbox 执行以下操作：bbox.map(pt => map.unproject(pt))获取 lat lon 边界框。从我对 mapboxgl 源代码的检查来看，取消投影 queryRenderedFeatures 坐标的过程似乎比这要复杂一些。

Answer 1

我不太清楚你想要得到什么，但从概念上讲，any 在queryRenderedFeatures没有过滤器的情况下所做的基本上是找到缓存中的所有图块（缓存的图块位于视口中），然后每个图块获取所有特征，并将它们全部合并到结果中。因此，如果您不使用queryRenderedFeatures任何参数或仅使用选项参数，则相当于传递包含整个地图视口的边界框。

您可以在 Mapbox github repo 中查看文件的源代码query_features.js

通过视口中的这些功能，可以很容易地通过.reduce您可以使用的函数将它们减少为 lnglat 边界框，例如，作为要使用的边界框map.fitBounds。

var coordinates = points;

var bounds = coordinates.reduce(function(bounds, coord) {
  return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

map.fitBounds(bounds, {
  padding: { top: 50, bottom: 50, left: 50, right: 50 },
  easing(t) {
      return t * (2 - t);
  }
});

但正如所说，不确定这是否是您正在寻找的。

其他选择是使用画布宽度和高度并取消投影它们...我不久前发现了这段代码，

const canvas = map.getCanvas()
const w = canvas.width
const h = canvas.height
const cUL = map.unproject ([0,0]).toArray()
const cUR = map.unproject ([w,0]).toArray()
const cLR = map.unproject ([w,h]).toArray()
const cLL = map.unproject ([0,h]).toArray()
const coordinates = [cUL,cUR,cLR,cLL,cUL]