Неправильная геометрия с запросом мапбокса

Я пытаюсь получить геометрию многоугольника с помощью 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])

mapbox mapbox-gl-js geojson
person SERG    schedule 01.10.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

При масштабировании 15 геометрия пересекает границу плитки. Вы можете увидеть это, добавив map.showTileBoundaries = true: https://codepen.io/stevebennett/pen/XezJNB

Из документации для queryRenderedFeatures():

Поскольку объекты берутся из мозаичных векторных данных или данных GeoJSON, которые внутренне преобразуются в плитки, геометрия объектов может быть разделена или дублирована по границам плиток, и в результате объекты могут появляться в результатах запроса несколько раз. Например, предположим, что через ограничивающий прямоугольник запроса проходит шоссе. Результатом запроса будут те части шоссе, которые лежат в пределах фрагментов карты, покрывающих ограничивающий прямоугольник, даже если шоссе переходит в другие фрагменты, а часть шоссе на каждом фрагменте карты будет возвращена как отдельный объект. Точно так же точечный объект рядом с границей тайла может появиться в нескольких тайлах из-за буферизации тайла.

Вместо того, чтобы извлекать геометрию и затем отображать ее, обычно лучше иметь отдельный слой, который используется только для выделения, а затем обновлять фильтр на этом слое, чтобы он соответствовал некоторому свойству.

Итак, если вы обновите фильтр слоя выделения до ['==', id, 500], тогда все различные части этого многоугольника будут отображаться правильно.

См. Пример «Создание эффекта наведения».

person Steve Bennett    schedule 03.10.2017