후보지 조회 지도 팝업 생성

2025-07-25 10:03:28 +09:00
parent 3a73c8bf1c
commit 6bdef28532
23 changed files with 367 additions and 159 deletions
@@ -38,6 +38,7 @@ function Gis({
 	setIsSearchModalOpen,
 	onCheckedLayersChange
 }) {
+	
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
@@ -151,6 +152,7 @@ function Gis({

 	// 지도 생성 및 초기화
 	useEffect(() => {
+		
 		if (!mapRef.current) return;
 		if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단

@@ -257,120 +259,6 @@ 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(<FacilityInfoPopup data={data} />);
-	// 	});
-
-	// 	// 초기 가시성 업데이트
-	// 	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(() => {
@@ -418,7 +306,6 @@ function Gis({
 							onFeatureSelect={handleFeatureSelect}
 						/>
 					)}
-					<GisLonLat />
 					<GisToolBar />
 					<GisMapToggle />
 					<GisSelect onFeatureSelect={handleFeatureSelect} />