带有 mapbox queryRenderedFeatures 的错误几何图形

Question

我正在尝试使用 queryRenderedFeatures 获取多边形的几何图形 在缩放级别 12 上是可以的，但是在 15 时我得到了错误的几何图形。这是我的代码，每次鼠标悬停时，我都会得到不同的坐标。这里https://codepen.io/benderlidze/pen/qPXNJv - 将鼠标从顶部和底部悬停在多边形上。红色多边形是由 queryRenderedFeatures 返回的几何图形，它总是不同的。

 map.on("mousemove", "seatRowsFill", function(e) {

    map.getCanvas().style.cursor = 'pointer'; 
    map.setFilter("seatRowsFill-hover", ["==", "rowNumber", e.features[0].properties.rowNumber]);

    var relatedFeatures = map.queryRenderedFeatures(e.point, { layers: ['seatRowsFill'],"filter": ["==", "rowNumber", e.features[0].properties.rowNumber]  } )
    console.log(relatedFeatures["0"].geometry.coordinates["0"][2])

Answer 1

在缩放 15 时，几何体穿过切片边界。您可以通过添加看到这一点map.showTileBoundaries = true以下内容：https : //codepen.io/stevebennett/pen/XezJNB

从文档中 queryRenderedFeatures()：

由于要素来自切片矢量数据或在内部转换为切片的 GeoJSON 数据，因此要素几何图形可能会跨切片边界拆分或复制，因此，要素可能会在查询结果中多次出现。例如，假设有一条高速公路穿过查询的边界矩形。查询的结果将是位于覆盖边界矩形的地图图块内的高速公路部分，即使高速公路延伸到其他图块中，并且每个地图图块内的高速公路部分将作为单独的要素返回。类似地，由于瓦片缓冲，瓦片边界附近的点要素可能出现在多个瓦片中。

与其检索几何图形然后显示它，通常最好有一个单独的图层，该图层仅用于突出显示，然后更新该图层上的过滤器以匹配某些属性。

因此，如果您将高光图层的过滤器更新为 ['==', id, 500]，则该多边形的所有不同部分都将正确显示。

请参阅“创建悬停效果”示例。