JS 拖拽

到 OpenLayers 地圖失效？事件衝突與浮層遮蓋解法

解決方案：浮動透明遮罩層

在拖拽開始時，**動態建立一個覆蓋全螢幕（或覆蓋地圖區域）的透明 div，z-index 高於地圖容器**，讓後續滑鼠事件落在遮罩層而非地圖上，避開 OpenLayers 事件攔截。

實作步驟

// 全域遮罩層（初始隱藏）
const dragOverlay = document.createElement('div');
dragOverlay.style.cssText = `
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 9999; background: transparent; display: none;
  pointer-events: auto; /* 關鍵：接收滑鼠事件 */
`;
document.body.appendChild(dragOverlay);

// ZTree 拖拽開始回調
function onDragStart(event, treeId, treeNode) {
  dragOverlay.style.display = 'block'; // 顯示遮罩
}

// ZTree 拖拽結束回調
function onDragEnd(event, treeId, treeNode) {
  dragOverlay.style.display = 'none';  // 隱藏遮罩
  // 此處計算滑鼠在地圖上的座標，轉換為地理座標，添加 Feature
}

關鍵細節

• pointer-events: auto：確保遮罩層能接收滑鼠事件（預設 transparent div 不攔截事件）。
• z-index 足夠高：高於 OpenLayers 地圖容器（通常 ol-viewport z-index 約 0~10）。
• 拖拽結束時座標轉換：用 map.getEventPixel(event) 取得像素座標 → map.getCoordinateFromPixel() 轉經緯度 → 建立 ol.Feature 加入 Vector Source。

替代方案：OpenLayers 官方 DragAndDrop 互動

若拖拽來源也是地圖內部圖層，可用 ol.interaction.DragAndDrop。但本案來源是外部 DOM (ZTree)，浮層法最簡單通用。

避坑提醒

• 不要在遮罩層上加任何背景色或邊框，必須完全透明，否則影響視覺。
• 若頁面有其他 fixed 定位元素（如彈窗），確保遮罩 z-index 低於彈窗，否則彈窗不可點。
• 觸控裝置需同步處理 touchstart/move/end，遮罩層同樣有效。

結語

**OpenLayers 搶走滑鼠事件是地圖庫的正常行為**，不是 Bug。用**一個全螢幕透明遮罩層在拖拽期間覆蓋地圖**，讓事件落在遮罩上繞過地圖事件系統，是最乾淨、零侵入的解法。幾行 CSS + 兩行 JS 切換顯示，徹底解決「進地圖即卡死」的拖拽衝突。