Merge remote-tracking branch 'origin/iipbs/sn/map' into iipbs/sn/dev

.github/workflows/sn_build.yml

@@ -1,19 +0,0 @@
-name: iipbs_sn
-
-on:
-  push:
-    branches: [iipbs/sn/dev]
-
-jobs:
-  build:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: appleboy/ssh-action@master
-        with:
-          port: 11022
-          host: con.mind-one.co.kr
-          username: mindone
-          password: mindone!23
-          script: |
-            cd ./iipbs/front
-            sh ./frontStartSn.sh            

apps/sn/app/map/page.tsx

@@ -1,18 +1,15 @@
-'use client'
+"use client";
 
-import Gis from '@common/business_components/ui/map/Gis';
-import { SearchDiv, SelectBox, UiTable, MainDiv, Title, ContentsDiv, SearchFormLeft, SearchFormRight } from '@common/business_components';
-import ListDiv from '@common/business_components/ui/list_div';
-import { Button, Input } from '@common/components';
+import Gis from "@common/business_components/ui/map/Gis";
 import { useEffect, useState } from "react";
 import { mapService } from "@service";
+import SearchModal from '@/map/SearchModal';
 
 const Map = () => {
-
   const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
-  const [selectedFeature,setSelectedFeature] = useState(null); // 선택된 피처 상태
+  const [selectedFeature, setSelectedFeature] = useState(null); // 선택된 피처 상태
 
-  const fetchData = async () => {    
+  const fetchData = async () => {
     try {
       const response = await mapService.getLyrStngs();
       setTreeData(response.data); // API 응답 저장
@@ -28,8 +25,8 @@ const Map = () => {
 
   return (
     <div className="bg-container">
-      <Gis treeData={treeData} isSearch={true} />
-    </div>    
+      <Gis treeData={treeData} isSearch={true} searchModal={SearchModal}/>
+    </div>
   );
 };
 

apps/sn/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/common/business_components/src/ui/map/Gis.js

@@ -11,12 +11,11 @@ import GisApp from './lib/gis.core';
 import GisContent from './GisContent';
 import FeatureClickEventPopup from '@/map/featureClickEventPopup';
 import GisTree from './GisTree';
-import SearchModal from '@/map/SearchModal';
 
 export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null });
 export const useGisContext = () => useContext(GisContext);
 
-function Gis({ treeData = [], isSearch = false }) {
+function Gis({ treeData = [], isSearch = false, searchModal : SearchModal }) {
 	const mapRef = useRef();
 	const [mapObject, setMapObject] = useState({});
 	const [tabVisible, setTabVisible] = useState(true);
@@ -24,7 +23,7 @@ function Gis({ treeData = [], isSearch = false }) {
 	const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터
 	const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
-	const mapInstanceRef = useRef(null); // 맵 생성 여부를 추적할 ref
+	const mapInstanceRef = useRef(null);
 	const checkedLayerIds = useRef([]);
 	let gisMap = null;
 	const closePopup = () => {
@@ -224,7 +223,7 @@ function Gis({ treeData = [], isSearch = false }) {
 					<div ref={mapRef} className="gis-map flex-1 relative" style={{ height: '100%', padding: 0 }} />
 					{/* <GisLonLat/>
 					<GisToolBar/>
-					<MapToggleBtn/> */}
+					<GisMapToggle/> */}
 				</div>
 			</GisContext.Provider>
 		</>

packages/common/business_components/src/ui/map/GisContent.js

@@ -5,7 +5,7 @@ import GisLonLat from './GisLonLat';
 import GisSelect from './GisSelect';
 import GisToolBar from './GisToolBar';
 import './lib/css/gis.edit.css';
-import MapToggleBtn from './MapToggleBtn';
+import GisMapToggle from './GisMapToggle';
 import { Search } from 'lucide-react';
 
 export default function GisContent({ edit = false, onFeatureSelect, isSearch, setIsSearchModalOpen }) {
@@ -51,7 +51,7 @@ export default function GisContent({ edit = false, onFeatureSelect, isSearch, se
 	return (
 		<>
 			{/*<GisTree />*/}
-			<MapToggleBtn />
+			<GisMapToggle />
 			<GisLonLat />
 			<GisToolBar />
 			<GisSelect onFeatureSelect={onFeatureSelect} />

packages/common/business_components/src/ui/map/Google3DMap.js

@@ -1,60 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import OLCesium from 'olcs/OLCesium';
-import olView from 'ol/View.js';
-import olSourceImageWMS from 'ol/source/ImageWMS.js';
-import olSourceOSM from 'ol/source/OSM.js';
-import olLayerImage from 'ol/layer/Image.js';
-import olLayerTile from 'ol/layer/Tile.js';
-import olMap from 'ol/Map.js';
-import { GLOBAL } from '../../js/consts/global';
-
-const Google3DMap = () => {
-	const mapRef = useRef(null);
-	const [ol3d, setOl3d] = useState(null);
-
-	useEffect(() => {
-		if (!mapRef.current) return;
-
-		const customProjSource = new olSourceImageWMS({
-			attributions: '© <a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">National parks / geo.admin.ch</a>',
-			crossOrigin: 'anonymous',
-			params: { LAYERS: 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung' },
-			projection: 'EPSG:21781',
-			url: 'https://wms.geo.admin.ch/',
-		});
-
-		const { Cesium } = window;
-		Cesium.Ion.defaultAccessToken = GLOBAL.CESIUM_ION_TOKEN;
-
-		const ol2d = new olMap({
-			layers: [new olLayerTile({ source: new olSourceOSM() }), new olLayerImage({ source: customProjSource })],
-			target: mapRef.current,
-			view: new olView({
-				center: [860434.6266531206, 6029479.0044273855],
-				zoom: 6,
-			}),
-		});
-
-		const ol3dInstance = new OLCesium({
-			map: ol2d,
-			time: () => Cesium.JulianDate.now(),
-		});
-
-		const scene = ol3dInstance.getCesiumScene();
-		Cesium.createWorldTerrainAsync().then(tp => {
-			scene.terrainProvider = tp;
-		});
-
-		ol3dInstance.setEnabled(true);
-		setOl3d(ol3dInstance);
-
-		return () => {
-			ol3dInstance.setEnabled(false);
-			ol2d.setTarget(null);
-		};
-	}, []);
-
-	return <div ref={mapRef} style={{ width: '100%', height: '100vh' }} />;
-};
-
-export default Google3DMap;