地图盒子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])

- SERG

Answer 1

在缩放级别15，几何图形会跨越瓦片边界。您可以通过添加map.showTileBoundaries = true来查看：https://codepen.io/stevebennett/pen/XezJNB 从queryRenderedFeatures()的文档中得知：

由于要素来自分块向量数据或转换为内部瓦片的GeoJSON数据，因此要素几何图形可能会在瓦片边界上拆分或重复出现，结果查询可能会多次显示同一要素。例如，假设有一条公路穿过查询的边界矩形。查询结果将是位于覆盖边界矩形的地图瓦片中的公路部分，即使公路延伸到其他瓦片中，每个地图瓦片中的公路部分也将作为一个单独的要素返回。同样，由于瓦片缓冲区的存在，靠近瓦片边界的点要素可能会出现在多个瓦片中。

因此，最好创建一个仅用于高亮的单独图层，然后更新该图层的过滤器以匹配某些属性，而不是检索并显示其几何图形。

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

请参见“创建悬停效果”示例：https://www.mapbox.com/mapbox-gl-js/example/hover-styles/。

- Steve Bennett