我想在 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 事件?
我已经考虑过用更宽的线条制作一个额外的、不可见的层,但我可以想象有一个更优雅的解决方案。
最佳答案
我会按照您的建议,添加一个新层,但 opacity: 0
,更大的 line-width
并在该层上注册事件( opacity: 0
特征包含在结果中,但如果您在图层上设置 visibility: none
则不会。
我唯一能想到的是 querySourceFeatures
并使用 turf 来执行 pointToLineDistance
但这比只添加那个不可见的鼠标目标层会更慢、更困惑。
关于javascript - 弹出 Mapbox GL JS 中的一行,需要填充或近似鼠标悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51039362/