似乎無法讓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一起工作

回答

相關問題