Блог

Я создаю веб-сайт, на котором пользователи могут искать определенные места или области на карте с помощью некоторых фильтров, таких как «парк», «супермаркет», «кафе» и т.д. Например, пользователь должен иметь возможность находить все подходящие районы в городе, которые находятся рядом с парком, но также находятся на расстоянии не менее 1 км от шоссе (по какой-либо причине). Для этого, после того как пользователь задал некоторые фильтры, я хочу добавить наложение, которое маскирует все области, которые не удовлетворяют этим фильтрам, при этом позволяя пользователю свободно масштабировать и перемещать. Я использую MapboxGL для построения карты.

Моей первой попыткой было использовать Turf для моих данных geojson для выполнения необходимых операций, т. Е. Преобразования текущего окна просмотра в многоугольник с ограничивающей рамкой, объединения всех необходимых объектов geojson в один полигон и маскировки разницы между ними, а затем просто добавить результат в виде слоя заливки на карте mapbox, как показано на рисункеизображение ниже.

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

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

Является ли использование пользовательского наложения с webgl правильным подходом для решения моей проблемы? Или есть очевидный вариант (или другая библиотека) для этой задачи, которую я еще не рассматривал?