2017-10-01 1 views
1

queryRenderedFeatures로 다각형의 지오메트리를 가져 오려고합니다. 줌 레벨 12는 괜찮지 만 15에서는 잘못된 지오메트리가 있습니다. 여기에 내 코드가 있으며, 마우스를 올리면 매번 다른 좌표가 표시됩니다. 여기 https://codepen.io/benderlidze/pen/qPXNJv - 폴리의 상단과 하단에서 마우스를 가져갑니다. 빨간색 폴리은 queryRenderedFeatures에 의해 리턴 된 기하학이며 항상 다릅니다.맵 박스의 잘못된 지오 메 트리 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]) 

답변

1

줌 15에서 형상은 타일 경계를 교차합니다. queryRenderedFeatures()에 대한 문서에서 https://codepen.io/stevebennett/pen/XezJNB

: 당신은 map.showTileBoundaries = true을 추가하여 볼 수 있습니다

기능은 내부적으로, 기능 형상이 분할되거나에서 중복 타일로 변환된다 타일 벡터 데이터 또는 GeoJSON 데이터에서 온 때문에 결과적으로 기능이 쿼리 결과에 여러 번 나타날 수 있습니다. 예를 들어 쿼리의 경계 사각형을 통과하는 고속도로가 있다고 가정합니다. 쿼리의 결과는 고속도로가 다른 타일로 확장 되더라도 경계 사각형을 포함하는지도 타일 내에있는 고속도로의 부분이되며 각지도 타일 내의 고속도로 부분은 별도의 기능으로 반환됩니다. 유사하게, 타일 경계 근처의 포인트 피처는 타일 버퍼링으로 인해 다수의 타일에 나타날 수있다.

지오메트리를 가져 와서 표시하는 대신 강조 표시에 사용되는 별도의 레이어를 사용하고 대신 해당 레이어의 필터를 업데이트하여 일부 속성과 일치시키는 것이 좋습니다.

하이라이트 레이어의 필터를 ['==', id, 500]으로 업데이트하면 해당 다각형의 모든 다른 부분이 올바르게 표시됩니다.

"Create a hover effect" 예제를 참조하십시오.