Невозможно получить событие mouseover для работы с 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}