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

时间:2018-06-26 09:25:38

标签: javascript mapbox mapbox-gl-js

我想在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事件?

我已经考虑过制作一个额外的,不可见的,线条更宽的图层,但是我可以想象有一个更优雅的解决方案。

1 个答案:

答案 0 :(得分:1)

我会按照您的建议进行操作,添加一个新层,但是使用opacity: 0,更大的line-width并在该层上注册事件(结果中包含opacity: 0功能,但是如果您在图层上设置了visibility: none,则不会这样。

我能想到的唯一的另一件事是querySourceFeatures并使用草皮做一个pointToLineDistance,但这比仅添加该不可见的鼠标目标层还要慢和混乱。