Всплывающее окно для строки в Mapbox GL JS, требует заполнения или приблизительного наведения мыши

Question

Я хочу сделать всплывающее окно для строки в Mapbox GL JS. У меня есть слой, который содержит много прямых линий, определяемых следующим образом:

map.addLayer({id: 'lineLayer',
          type: 'line',
          source: 'lineSource',
          layout: {'line-join': 'round', 'line-cap': 'round'},
          paint: {'line-color': '#00c853','line-width': 5, 'line-opacity': 1 }});

Затем я добавляю всплывающее окно в строку следующим образом (псевдокод):

map.on('mousemove', 'lineLayer', (e) => {
    map.getCanvas().style.cursor = 'pointer';
    popupCoordinatesXY = e.point; });

Проблема в том, что по эстетическим соображениям я не хочу, чтобы линии были слишком широкими, но точно навести указатель мыши на линию слишком сложно. Как вызвать событие mousemove для определенной строки, даже если курсор находится на расстоянии около 10 пикселей от нее?

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

Answer 1

Я хотел бы сделать то, что вы предлагаете, добавить новый слой, но с opacity: 0, больше line-width и зарегистрировать события на этом слое (opacity: 0 объекты включены в результаты, но не если вы установите visibility: none на слой).

Единственное, что я могу вспомнить, это querySourceFeatures и использовать turf, чтобы сделать pointToLineDistance, но это будет даже медленнее и грязнее, чем просто добавление этого невидимого целевого слоя мыши.