diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js
index 4969795af..229e3f629 100644
--- a/packages/common/business_components/src/ui/map/Gis.js
+++ b/packages/common/business_components/src/ui/map/Gis.js
@@ -1,5 +1,6 @@
import { Search } from 'lucide-react';
import OlMap from 'ol/Map';
+import Overlay from 'ol/Overlay';
import View from 'ol/View';
import { defaults as defaultControls, OverviewMap } from 'ol/control';
import { defaults } from 'ol/interaction';
@@ -7,12 +8,15 @@ import * as olProj from 'ol/proj';
import { register } from 'ol/proj/proj4';
import proj4 from 'proj4';
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import GisLonLat from './GisLonLat';
import GisMapToggle from './GisMapToggle';
import GisSelect from './GisSelect';
import GisToolBar from './GisToolBar';
import GisTree from './GisTree';
import './lib/css/gis.common.css';
import GisApp from './lib/gis.core';
+// import FacilityInfoPopup from './FacilityInfoPopup';
export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
export const useGisContext = () => useContext(GisContext);
@@ -99,10 +103,8 @@ function Gis({
detailView: DetailView,
onFeatureSelect,
setIsSearchModalOpen,
- onCheckedLayersChange,
- setData
+ onCheckedLayersChange
}) {
-
const mapRef = useRef();
const [mapObject, setMapObject] = useState({});
const [tabVisible, setTabVisible] = useState(true);
@@ -219,7 +221,6 @@ function Gis({
// 지도 생성 및 초기화
useEffect(() => {
-
if (!mapRef.current) return;
if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단
@@ -326,6 +327,120 @@ function Gis({
}
}
+ // // 데이터 로드 및 팝업 생성 로직
+ // useEffect(() => {
+ // if (!mapInstanceRef.current) return; // 맵이 생성되지 않았으면 실행 안 함
+
+ // // 1. 팝업 데이터 가져오기 (feature.js의 getData와 유사)
+ // const fetchPopupData = async () => {
+ // // 실제 API 호출 로직으로 대체해야 합니다.
+ // // 예시: const response = await yourApiService.getFcltyWtCnt();
+ // // setFacilityInfoPopupData(response.data);
+
+ // // 임시 목업 데이터
+ // const mockData = [
+ // { ftrIdn: 1, ftrCde: 'SA206', bplcNm: '처리장A', fcltyUseYn: 'Y', x: 127.005, y: 37.282, aCnt: 10, cCnt: 5, eCnt: 3, mCnt: 8, iCnt: 2 },
+ // { ftrIdn: 2, ftrCde: 'SA112', bplcNm: '처리장B', fcltyUseYn: 'N', x: 127.010, y: 37.285, aCnt: 8, cCnt: 4, eCnt: 2, mCnt: 6, iCnt: 1 }
+ // ];
+ // setFacilityInfoPopupData(mockData);
+ // };
+
+ // fetchPopupData();
+
+ // }, [mapInstanceRef.current]); // 맵 인스턴스가 생성된 후 한 번만 실행
+
+ // // 데이터가 변경되면 오버레이를 생성/업데이트하는 로직
+ // useEffect(() => {
+ // const map = mapInstanceRef.current;
+ // if (!map || facilityInfoPopupData.length === 0) return;
+
+ // // 기존 오버레이 정리
+ // facilityOverlaysRef.current.forEach(overlay => map.removeOverlay(overlay));
+ // facilityOverlaysRef.current = [];
+
+ // facilityInfoPopupData.forEach(data => {
+ // const popupId = `${data.ftrIdn}_${data.ftrCde}`;
+
+ // // 팝업을 담을 div 엘리먼트 생성
+ // const popupElement = document.createElement('div');
+ // popupElement.id = popupId;
+
+ // // OpenLayers Overlay 생성
+ // const position = olProj.transform([Number(data.x), Number(data.y)], GisApp.FROM_PROJ, GisApp.TO_PROJ);
+ // const overlay = new Overlay({
+ // element: popupElement,
+ // position: position,
+ // offset: [-75, -210], // 팝업 너비의 절반, 높이만큼 오프셋 조정
+ // positioning: 'bottom-center',
+ // className: 'facility-popup-overlay' // 필요시 공통 클래스 추가
+ // });
+
+ // map.addOverlay(overlay);
+ // facilityOverlaysRef.current.push(overlay);
+
+ // // React 컴포넌트를 popupElement에 렌더링
+ // const root = createRoot(popupElement);
+ // root.render();
+ // });
+
+ // // 초기 가시성 업데이트
+ // updatePopupVisibility();
+
+ // }, [facilityInfoPopupData]); // 팝업 데이터가 변경될 때마다 실행
+
+ // // 레이어 가시성에 따라 팝업 가시성을 제어하는 함수
+ // const updatePopupVisibility = useCallback(() => {
+ // const map = mapInstanceRef.current;
+ // if (!map) return;
+
+ // const visibleLayers = new Set();
+ // map.getLayers().forEach(layer => {
+ // if (layer.getVisible()) {
+ // // feature.js의 로직처럼 typeName이나 ftrCde를 사용해 필터링
+ // const typeName = layer.get('typeName');
+ // if (typeName === 'VW_WTL_FCLTY_AS') { // 예시 레이어 이름
+ // visibleLayers.add(layer.get('ftrCde'));
+ // }
+ // }
+ // });
+
+ // facilityOverlaysRef.current.forEach(overlay => {
+ // const element = overlay.getElement();
+ // const ftrCde = element.querySelector('table')?.classList[0]; // FacilityPopup의 클래스에서 ftrCde 가져오기
+
+ // if (visibleLayers.has(ftrCde)) {
+ // element.style.display = '';
+ // } else {
+ // element.style.display = 'none';
+ // }
+ // });
+ // }, []);
+
+ // GisTree에서 체크 상태가 변경될 때 이 함수를 호출하도록 연결해야 합니다.
+ // 예시: GisTree 컴포넌트에 onCheck 콜백을 추가하고, 그 콜백에서 이 함수를 호출
+ // useEffect(() => {
+ // // 레이어 가시성이 변경될 때마다 팝업 가시성 업데이트
+ // const map = mapInstanceRef.current;
+ // if (!map) return;
+
+ // const handleLayerVisibilityChange = () => {
+ // updatePopupVisibility();
+ // };
+
+ // map.getLayers().on('change:length', handleLayerVisibilityChange);
+ // map.getLayers().forEach(layer => {
+ // layer.on('change:visible', handleLayerVisibilityChange);
+ // });
+
+ // return () => {
+ // // 클린업
+ // map.getLayers().un('change:length', handleLayerVisibilityChange);
+ // map.getLayers().forEach(layer => {
+ // layer.un('change:visible', handleLayerVisibilityChange);
+ // });
+ // };
+ // }, [updatePopupVisibility]);
+
// 체크된 레이어 정보를 처리하는 함수
const handleCheckedLayersChange = useCallback((checkedIds, checkedNodesData) => {
setTimeout(() => {
@@ -354,6 +469,8 @@ function Gis({
imageVisible={imgVisble}
/>
+ {/* */}
+
{/* DetailView가 존재할 때만 렌더링 isSearchModalOpen이 true면 visible=false로 팝업 숨김 */}
{isOpen && !isSearchModalOpen && (
)}
+ {/* */}