マップボックスqueryRenderedFeaturesでジオメトリが正しくありません

Question

queryRenderedFeaturesでポリゴンのジオメトリを取得しようとしています ズームレベル12ではOKですが、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]に更新すると、そのポリゴンのすべての部分が正しく表示されます。

"Create a hover effect"の例を参照してください。