OpenLayers V9.2.2
显示气泡:当鼠标移入城市时,显示气泡。
隐藏气泡:当鼠标移出城市但仍在气泡内时,气泡应保持显示;当鼠标移出气泡且不在任何城市上时,气泡应隐藏。
function checkMouseOutPopup(evt){
const popupElement = document.getElementById('popup');
// 获取 popup 的位置和尺寸
const rect = popupElement.getBoundingClientRect();
console.log(rect)
const domEvent = evt.originalEvent || evt;
// 获取鼠标的屏幕坐标
const mouseX = domEvent.clientX;
const mouseY = domEvent.clientY;
// 检查鼠标是否不在 popup 的边界内
if (
mouseX < rect.left ||
mouseX > rect.right ||
mouseY < rect.top ||
mouseY > rect.bottom
) {
console.log('鼠标不在 popup 中 ')
return true; // 鼠标不在 popup 中
} else{
return false;
}
}
map.on('pointermove', function(evt) {
let feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {
// 鼠标在某个城市上
if (checkMouseOutPopup(evt)) {
// 执行逻辑,显示气泡
}
}
}