Не удается заставить событие наведения мыши работать с картографическим полем

У меня возникли некоторые проблемы с выяснением, почему событие mouseover не работает с gl 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, то событие будет зарегистрировано в консоли, когда я нажму на карту.


javascript mapbox mapbox-gl-js mapbox-gl
person yob-v-u    schedule 18.09.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Кажется, вы используете неправильное имя события. Обратите внимание, что это mousemove, а не mouseover. Чтобы исправить это, измените код на:

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

Вот рабочий пример: https://jsfiddle.net/kmandov/o870ufLr/ Откройте консоль, чтобы увидеть события.

person kmandov    schedule 19.09.2016
comment
О, ха-ха, спасибо, что указали на это! Не могу поверить, что я это сделал. По какой-то причине я все время видел или думал о наведении курсора.... Спасибо - person yob-v-u; 19.09.2016
comment
Строго говоря, mousemove не то же самое, что mouseover. - person Lucas Wojciechowski; 19.09.2016

arrow_upward
0
arrow_downward

GL JS не запускает событие mouseover, несмотря на запуск событий mousemove и moseout. Я не думаю, что есть причина, по которой мы не стреляем mouseover. Мы должны добавить это событие.

person Lucas Wojciechowski    schedule 19.09.2016

arrow_upward
0
arrow_downward

Существует также 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}
person theVinDieselofRails    schedule 08.08.2017