Как в Mapbox GS JS отобразить круг, меняющий радиус в соответствии с зумом?

Question

[Никита Мелихов]

У меня есть пользовательская карта (с image overlay) с данными GeoJSON:


Мне нужно добавить обработчик клика к окружности объекта (КПП на моей карте). Для полигональных областей всё нормально, у каждой точки своя гео-координата, но для окружности есть только координаты центра и радиус в пикселях. Нужно как-то сделать зависимость радиуса от масштаба карты, иначе при изменении масштаба получается такое:



Каким образом можно это реализовать? С обработчиком события всё ОК, проблема только с размером окружности.

P.S. Mapbox GL JS поддерживает выражения/функции в значениях, тут обрабатывать событие зума и менять в нём размер не нужно.

Answer 1

[freeExec]

Вот же пример где размер окружности завязан на зум карты.

Comments

[Никита Мелихов]

Спасибо, похоже на то, но пока в упор не получается достичь нужного результата =/

[freeExec]

Никита Мелихов, плохой упор значит. Подобрать радиус при малом масштабе, подобрать для большого, остальное карта сама интерполирует.

[Никита Мелихов]

freeExec, в том-то и дело, что подобрал радиус при маленьком и большом масштабах, а между ними радиус гуляет, не совпадает с окружностью.
Попробую указать побольше масштабов с радиусами (у меня всего от 7.8 до 9.5 зум).

[Никита Мелихов]

freeExec, только сейчас заметил - в слое указывается радиус для всех окружностей, а они у меня разного размера. Как тут поступить лучше?

[Никита Мелихов]

freeExec, вроде, более-менее получилось :)

"circle-radius": [
                    "interpolate", ['linear'], ['zoom'],
                    7.8, ['*', ['get', 'radius'], 0.36],
                    9.0, ['*', ['get', 'radius'], 0.92],
                    9.5, ['*', ['get', 'radius'], 1.61],
                ],

[freeExec]

Никита Мелихов, У вас все шлагбаумы разного радиуса, дайте подзатыльники своим дизайнерам. Если это разного типа объекты, то и рисоваться они должны тоже разным стилем, для этого применяется атрибут у объектов и фильтр по ним.