오버레이 생성 div 를ㄹ promise로 받을수 있도록 변경

2025-09-03 14:38:56 +09:00
parent 283711fce7
commit 4dec379846
1 changed files with 44 additions and 18 deletions
@@ -76,28 +76,54 @@ export default function createOverlayManager(map, vectorLayer, overlayFormatter,
    const coord = getFeatureLabelCoordinate(feature);
    if (!Array.isArray(coord)) return null;
    const key = getCoordinateKey(coord);
-
+  
    let el = overlayElementMap.get(key);
    if (!el) {
-      el = currentFormatter(feature,properties);
-    overlayElementMap.set(key, el);
+      if (!currentFormatter || typeof currentFormatter !== 'function') return null;
+  
+      const maybeEl = currentFormatter(feature, properties);
+  
+      // 1) 동기 HTMLElement
+      if (maybeEl && typeof maybeEl === 'object' && (maybeEl.nodeType === 1 || maybeEl.tagName)) {
+        el = maybeEl;
+        overlayElementMap.set(key, el);
+      }
+      // 2) 비동기 Promise<HTMLDivElement|null>
+      else if (maybeEl && typeof maybeEl.then === 'function') {
+        maybeEl.then((resolvedEl) => {
+          if (!resolvedEl || !(resolvedEl.nodeType === 1 || resolvedEl.tagName)) return;
+          // 이미 다른 사이클에서 만들어졌으면 덮어쓰지 않음
+          if (!overlayElementMap.has(key)) overlayElementMap.set(key, resolvedEl);
+  
+          let ov = overlayMap.get(key);
+          if (!ov) {
+            ov = new Overlay({ element: resolvedEl, positioning: 'bottom-center', offset: [0, -18], stopEvent: true });
+            overlayMap.set(key, ov);
+            try { map.addOverlay(ov); } catch {}
+          } else {
+            try { ov.setElement(resolvedEl); } catch {}
+          }
+          ov.setPosition(coord);
+          if (resolvedEl.style) resolvedEl.style.display = 'block';
+        }).catch(() => {});
+        return null; // 지금은 안 만듦
+      }
+      // 3) 그 외(null/undefined 등) → 안 만듦
+      else {
+        return null;
+      }
    }
-
-    let isOverlay = overlayMap.get(key);
-    if (!isOverlay) {
-      isOverlay = new Overlay({
-        element: el,
-        positioning: 'bottom-center',
-        offset: [0, -18],
-        stopEvent: true,
-      });
-      overlayMap.set(key, isOverlay);
-      map.addOverlay(isOverlay);
+  
+    // 여기까지 왔으면 el은 HTMLElement
+    let ov = overlayMap.get(key);
+    if (!ov) {
+      ov = new Overlay({ element: el, positioning: 'bottom-center', offset: [0, -18], stopEvent: true });
+      overlayMap.set(key, ov);
+      map.addOverlay(ov);
    }
-
-    isOverlay.setPosition(coord);
-    if (el && el.style) el.style.display = 'block';
-    return isOverlay;
+    ov.setPosition(coord);
+    if (el.style) el.style.display = 'block';
+    return ov;
  };

  const syncOverlays = () => {