优化OpenLayers中的气泡Popup显示逻辑以实现智能交互

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)) {
        	// 执行逻辑，显示气泡
        }
    } 	
}