gpt4 book ai didi

javascript - mapbox gl js单击层上的事件

转载 作者:行者123 更新时间:2023-11-30 06:24:44 24 4
gpt4 key购买 nike

我目前正在使用 Mapbox GL JS 制作交互式 map 。我想在用户单击图层时调用特定功能,所以我添加了类似:

map.on('click', function(e) {.....});

还有:

map.on('click', 'layername', function(e) {.....});

在上一次 Mapbox GL JS 更新之前,一切都运行良好。但是现在,它起作用了……有时但不总是(有一段时间,比如一天两天)。我见过点击事件监听器 ( Mapbox GL JS: ignore map click event if marker is clicked ) 的例子,但我没有使用。但这是针对标记的;如何让它适用于图层或整个 map ?
提前致谢!

附言:有没有完整的列表,列出了要更改以适应新版本的内容?因为这不是我唯一的问题...
PS2:请注意“mouseenter”和“mouseleave”有时工作得很好。

编辑:这是一段代码:

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>

注意:“RER stop”是放大时带有蓝白色“RER”圆形的图层。

最佳答案

迁移到 MapBox GL JS 版本 0.48 为我解决了这个问题!

关于javascript - mapbox gl js单击层上的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51171580/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com