似乎无法让鼠标悬停事件与 mapbox 一起使用

Question

我在弄清楚为什么 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，那么当我单击地图时该事件将记录到控制台。

Answer 1

您似乎使用了错误的事件名称。注意是mousemove，不是mouseover。要解决此问题，请将您的代码更改为：

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

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

Answer 2

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

Answer 3

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

似乎无法让鼠标悬停事件与 mapbox 一起使用

Cannot seem to get mouseover event to work with mapbox

javascript

mapbox

mapbox-gl

mapbox-gl-js