javascript - 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; });

問題は、審美的な理由から、線をあまり広くしたくないのですが、マウスを正確に線に合わせるのが難しすぎることです。カーソルが約 10 ピクセル離れている場合でも、特定の行に対して mousemove イベントをトリガーするにはどうすればよいですか?

私はすでに、より広い線で余分な非表示レイヤーを作成することを考えていましたが、もっとエレガントな解決策があると想像できます.