弹出 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 但这比只添加那个不可见的鼠标目标层更慢和混乱。

弹出 Mapbox GL JS 中的一行，需要填充或近似鼠标悬停

Popup for a line in Mapbox GL JS, requires padding or approximate mouse-over

javascript

mapbox

mapbox-gl-js