mapbox gl js click事件在图层上
[英]mapbox gl js click event on layer
问题描述
I am currently working on an interactive map using Mapbox GL JS. 
我目前正在使用Mapbox GL JS制作交互式地图。 I wanted to call a specific function when the user click on a layer, so I added something like : 我想在用户单击图层时调用特定功能，因此添加了类似以下内容：
map.on('click', function(e) {.....});
and also : 并且 ：
map.on('click', 'layername', function(e) {.....});
Before the last Mapbox GL JS update, all was working fine. 在最后一次Mapbox GL JS更新之前，所有功能都工作正常。 But now, it works.... sometimes but not always (with periods, like one day on two). 但是现在，它起作用了...。有时但并非总是如此（有周期，例如一天一两次）。 I've seen exemples of click event listeners ( Mapbox GL JS: ignore map click event if marker is clicked ), whitch I don't use. 我已经看到了点击事件监听器的示例 （ Mapbox GL JS：如果单击了标记，则忽略地图点击事件 ），我不使用。 But this is for markers; 但这是用于标记； how to make it work for layers, or the whole map ? 如何使其适用于图层或整个地图？
Thank you in advance ! 先感谢您 ！
PS : Is anywhere a complete list of what to change to adapt to the new version ? PS：是否有完整的清单以供更改以适应新版本？ Because this is not my only issue... 因为这不是我唯一的问题...
PS2 : Note that "mouseenter" and "mouseleave" work perfectly fine, sometimes. PS2：请注意，有时“ mouseenter”和“ mouseleave”工作得很好。
Edit: Here is a piece of code : 编辑：这是一段代码：
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/clemapbox/cjj5g2pge0huj2sntqmafju85', }); map.on('click', function (e) { console.log("click on map"); }); map.on('click', 'RER stops', function(e){ console.log("click on RER stop"); }); map.on('mouseenter', 'RER stops', function () { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'RER stops', function () { map.getCanvas().style.cursor = ''; });
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' /> <title>TEST click event</title> </head> <body> <section id='map' style="width:100%;height:500px"></section> <script src="TEST.js"></script> </body> </html>
Note : 'RER stop' is a layer with the blue-and-white "RER" rounds when you zoom in. 注意：“ RER停止”是放大时带有蓝色和白色“ RER”圆角的图层。
1 个解决方案
解决方案1
0 2019-04-15 20:32:12
移至MapBox GL JS 0.48版可以为我解决这个问题！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.