似乎无法让mouseover事件与mapbox一起工作

我在查找为什么mouseover事件对mapbox gl不起作用时遇到了一些麻烦。似乎无法让mouseover事件与mapbox一起工作

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那么该事件被记录到控制台当我点击地图上。

来源

2016-09-18 yob-v-u

看来您使用的是错误的事件名称。请注意，它是mousemove，而不是mouseover。为了解决这个问题，改变你的代码：

map.on('mousemove',function(e) { 
    console.log(e);     
    //.... 
});

这里是一个工作示例：https://jsfiddle.net/kmandov/o870ufLr/ 打开控制台以查看事件。

来源

2016-09-19 13:08:30 kmandov

哦哇哇哈哈感谢您指出了！我不敢相信我做到了。出于某种原因，我一直在观察或考虑鼠标悬停....谢谢 –

严格地说，'mousemove'与'mouseover'不一样。 –

尽管发射了mousemove和moseout事件，GL JS仍未触发mouseover事件。我认为我们没有理由不开火mouseover。我们应该添加这个事件。

来源

2016-09-19 17:37:02

还有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}

来源

2017-08-08 19:19:28 theVinDieselofRails

似乎无法让mouseover事件与mapbox一起工作

回答

相关问题