我在弄清楚为什么mouseover
事件不适用于mapbox gl时遇到了一些麻烦。
map.on('load', function() {
var geoJson = '{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
...
},
"geometry": {
"type": "Point",
"coordinates": [
-118.6059,
34.1829
]
}
}]
}';
map.addSource('someData', {
type: 'geojson',
data: geoJson,
cluster: true,
clusterMaxZoom: 14
});
map.addLayer({
'id': 'unclustered-markers',
'type': 'symbol',
'source': 'someData',
'layout': {
'icon-image': 'circle-11'
}
});
});
因此该部分起作用并且坐标显示在集群内的地图上。但是,当我尝试mouseover
事件时,没有任何反应。
map.on('mouseover',function(e) {
console.log(e); // nothing is logged when I hover over the map or the points
var features = map.queryRenderedFeatures(e.point, { layers: ['unclustered-markers'] });
...
});
如果我将该事件更改为click
,则单击地图时会将事件记录到控制台。
答案 0 :(得分:0)
您似乎使用了错误的事件名称。请注意,它是Dialog
,而不是mousemove
。要解决此问题,请将代码更改为:
mouseover
以下是一个工作示例:https://jsfiddle.net/kmandov/o870ufLr/ 打开控制台以查看事件。
答案 1 :(得分:0)
尽管发起mouseover
和mousemove
事件,但GL JS仍未触发moseout
事件。我不认为我们不解雇mouseover
的原因。我们应该添加这个事件。
答案 2 :(得分:0)
还有mouseenter
,应根据您的申请加以考虑。如果您偶然发现了这个问题,因为Mapbox正在为您提供缺少弹出窗口的不稳定行为,这里有一个方法可以保证弹出窗口将高于用户悬停的feature
。
使用Mapbox处理事件并获取鼠标坐标,如下所示:
map.on('mouseenter', 'layerID', (event) => {
var x = event.originalEvent.clientX
var y = event.originalEvent.clientY
那么,这是使用您最喜欢的DOM处理程序并为弹出窗口添加<div>
的问题。将弹出窗口的位置设置为用户悬停的位置,如下所示:
{left : `${x}`, top : `${y}`, position : 'absolute', zIndex : 1}