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() 的文档：

Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

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

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

参见 "Create a hover effect" 示例。

mapbox queryRenderedFeatures 的错误几何

Wrong geometry with mapbox queryRenderedFeatures

geojson

mapbox

mapbox-gl-js