하이라이트 추가

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

@@ -21,7 +21,6 @@ export const useGisContext = () => useContext(GisContext);
 
 function Gis({ treeData = [] }) {
 	const mapRef = useRef();
-	const overviewMapRef = useRef(null);
 	const [mapObject, setMapObject] = useState({});
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
 	//const [treeData, setTreeData] = useState([]);
@@ -134,22 +133,23 @@ function Gis({ treeData = [] }) {
 			<div className="h-[calc(100vh-10rem)] flex relative">
 				<div className="absolute top-0 left-0 z-40 w-[280px] h-[calc(100vh-10rem)] bg-white border rounded-md shadow-md flex flex-col overflow-hidden">
 				<Tabs defaultValue="layers" className="flex-1 flex flex-col overflow-hidden">
-					<TabsList className="flex-none border-b text-[70%]">
-						<TabsTrigger value="layers" className="flex-1">레이어</TabsTrigger>
-						<TabsTrigger value="search" className="flex-1">시설검색</TabsTrigger>
+					<TabsList className="flex-none border-b mt-2">
+						<TabsTrigger value="layers" className="flex-1 h-10 px-2 py-2">레이어</TabsTrigger>
+						<TabsTrigger value="search" className="flex-1 h-10 px-2 py-2">시설검색</TabsTrigger>
 					</TabsList>
 					<TabsContent value="layers" className="grow overflow-y-auto p-2 min-h-0">
-						<GisTree />
+						<GisTree/>
 					</TabsContent>
 					<TabsContent value="search" className="grow overflow-y-auto p-2 min-h-0">
-						<GisSearch />
+						<GisSearch/>
 					</TabsContent>
 				</Tabs>
 				</div>
 				<div ref={mapRef} className="gis-map flex-1 relative" style={{ height: '100%', padding: 0 }} />
-				<GisLonLat />
-				<GisToolBar />
-				<MapToggleBtn />
+				<GisLonLat/>
+				<GisToolBar/>
+				<MapToggleBtn/>
+				<GisContent/>
 			</div>
 			</>
 		</GisContext.Provider>

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

@@ -6,7 +6,7 @@ import GisSelect from './GisSelect';
 import GisToolBar from './GisToolBar';
 import './lib/css/gis.edit.css';
 import MapToggleBtn from './MapToggleBtn';
-//import GisEdit from './GisEdit';
+import GisEdit from './GisEdit';
 
 export default function GisContent({ edit = false }) {
 	const { gisMap, gisCore } = useGisContext();
@@ -15,14 +15,14 @@ export default function GisContent({ edit = false }) {
 	const [playShow, setPlayShow] = useState({ show: false });
 
 	//셀렉트 버튼 이벤트
-	const clickFeature = useCallback(feature => {
-		if (feature) {
-			const layer = feature.getLayer();
-			setVisibleComponents(prevState => ({
-				...prevState,
-			}));
-		}
-	}, []);
+	// const clickFeature = useCallback(feature => {
+		// if (feature) {
+		// 	const layer = feature.getLayer();
+		// 	setVisibleComponents(prevState => ({
+		// 		...prevState,
+		// 	}));
+		// }
+	// }, []);
 
 	const selectRslt = useCallback(feature => {
 		GisApp.Module.layer.highLightFeature(
@@ -52,9 +52,9 @@ export default function GisContent({ edit = false }) {
 		<>
 			{/*<GisTree />*/}
 			{/* <MapToggleBtn useCesium={useCesium} /> */}
-			<GisLonLat />
-			<GisToolBar />
-			<GisSelect clickFeature={clickFeature} />
+			{/* { <GisLonLat /> */}
+			{/* <GisSelect clickFeature={clickFeature} /> */}
+			<GisSelect />
 			{/* {edit && <GisEdit />} */}
 		</>
 	);

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

@@ -1,9 +1,9 @@
 import GisApp from './lib/gis.core';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { GisContext, setTree } from './Gis';
-import Button from '../button/Button';
+import { Button } from "@common/components";
 import { gAlert, gConfirm } from './lib/util';
-import { fclApi } from '../../js/apis/fcl/fclApi';
+// import { fclApi } from '../../js/apis/fcl/fclApi';
 
 export default React.memo(function GisEdit() {
 	const { editLayerItems = [], siteSn, locgovCd, checkedLayerIds } = useContext(GisContext);
@@ -96,10 +96,10 @@ export default React.memo(function GisEdit() {
 			return;
 		}
 		if (!gConfirm('CONFIRM', 'SAVE_QUEST')) return false;
-		const result = await fclApi.saveEditFeatures(editFeatures);
-		if (result.code === 200) {
-			editModule.clearUndoRedo();
-		}
+		// const result = await fclApi.saveEditFeatures(editFeatures);
+		// if (result.code === 200) {
+		// 	editModule.clearUndoRedo();
+		// }
 	};
 
 	useEffect(() => {

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

@@ -3,7 +3,7 @@ import GisApp from './lib/gis.core';
 import GisOlSelect from './lib/gis.select';
 import { useContext } from 'react';
 import { GisContext } from './Gis';
-export default React.memo(function GisSelect({ clickFeature }) {
+export default React.memo(function GisSelect() {
 	const { gisMap } = useContext(GisContext);
 	const select = new GisOlSelect(gisMap);
 	GisApp.Module.select = select;
@@ -12,11 +12,11 @@ export default React.memo(function GisSelect({ clickFeature }) {
 	};
 
 	select.getSelectedInfo(function (features) {
-		clickFeature(features[0]);
+		//clickFeature(features[0]);
 	});
 	return (
 		<>
-			<div className="select_control map_control_div ol-unselectable ol-control" style={{ pointerEvents: 'auto', zIndex: '1' }}>
+			{/* <div className="select_control map_control_div ol-unselectable ol-control" style={{ pointerEvents: 'auto', zIndex: '1' }}>
 				<h3>선,면,다각형을 이용한 시설물 선택 영역</h3>
 				<ul>
 					<li>
@@ -30,7 +30,7 @@ export default React.memo(function GisSelect({ clickFeature }) {
 						</div>
 					</li>
 				</ul>
-			</div>
+			</div> */}
 		</>
 	);
 });

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

@@ -23,7 +23,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 			setNodes(nodeData);
 			gisCore.setAllLayersOnMap(false);
 		}
-		console.log(treeData)
 	}, [treeData]);
 
 	useEffect(() => {
@@ -37,7 +36,6 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 			setExpanded(defaultExpanded);
 			gisCore.setLayerOnMap(defaultChecked, true);
 		}
-		console.log(nodes)
 	}, [nodes]);
 
 	const getDefaultCheckedNodes = (nodes, values = []) => {
@@ -113,7 +111,7 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 				parent: item.upperLyrSn,
 				droppable: !!item.children,
 				data: item,
-				icon: src ? <img src={src} alt={item.lyrNm} className="w-4 h-4" /> : '',
+				icon: src ? <img src={src} alt={item.lyrNm} /> : '',
 			};
 		});
 	};
@@ -208,18 +206,13 @@ export default React.memo(function GisTree({ checkedNodes = [], setCheckedNodes
 						style={{ marginInlineStart: depth * 16 + (!node.droppable ? 16 : 0) }}
 					>
 						{node.droppable && (
-						<button onClick={onToggle} className="text-sm w-4 focus:outline-none" title={isOpen ? '닫기' : '열기'}>
-							{isOpen ? '▾' : '▸'}
-						</button>
+						<i onClick={onToggle} className={`diveicon di-arrow-forward mr-2 text-base text-label ${isOpen ? 'rotate-90' : ''}`}
+							title={isOpen ? '닫기' : '열기'}>
+						</i>
 						)}
-						<input
-						type="checkbox"
-						checked={checked.includes(node.id)}
-						onChange={() => handleCheck(node.id)}
-						className="cursor-pointer"
-						/>
-						{node.icon && <span className="inline-block w-4 h-4 mr-1">{node.icon}</span>}
-						<span className="text-sm truncate">{node.text}</span>
+						<input type="checkbox" checked={checked.includes(node.id)} onChange={() => handleCheck(node.id)} className="cursor-pointer"/>
+						{node.icon && <span>{node.icon}</span>}
+						<span className="text-[1.3rem] font-medium text-label">{node.text}</span>
 					</div>
 					)}
 					sort={(a, b) => {

packages/common/business_components/src/ui/map/lib/css/gis.common.css

@@ -102,7 +102,7 @@
 
 .tool-bar {
 	position: absolute;
-	top: 140px;
+	top: 70px;
 	right: 20px;
 	z-index: 2;
 }
@@ -244,7 +244,7 @@
 	background: url(../images/toolbar/btn_cont_zoomin_on.png) no-repeat center #67aee3;
 }
 .btn_control_zoomout {
-	background: url(../images/toolbar/btn_cont_zoomout.png) no-repeat center !important;
+	background: url(../images/toolbar/btn_cont_zoomout.png) no-repeat center;
 }
 .btn_control_zoomout:hover {
 	background: url(../images/toolbar/btn_cont_zoomout_on.png) no-repeat center #67aee3;
@@ -346,7 +346,7 @@
 .select_control {
 	position: absolute;
 	top: 80px;
-	left: 250px;
+	left: 450px;
 }
 .select_control h3 {
 	overflow: hidden;

packages/common/business_components/src/ui/map/lib/gis.select.js

@@ -48,19 +48,31 @@ GisOlSelect.prototype = {
 			this.removeInteration();
 		}
 		let baseStyle = new Style({
-			stroke: new Stroke({
-				color: 'rgba(135, 116, 243, 0.4)',
-				width: 10,
+			image : new CircleStyle({
+				fill : new Fill({
+					color : 'rgba(135, 116, 243, 0.4)',
+				}),
+				radius : 30
 			}),
+			stroke : new Stroke({
+				color : 'rgba(135, 116, 243, 0.4)',
+				width : 10,
+			})
 		});
 
 		this.selectInteraction = new Select({
-			style: function (feature) {
+			style: function (feature, resolution) {
 				let styles = [];
 				let layer = feature.getLayer();
-				let style = GisApp.Module.style.getLayerStyle(layer, null);
-				if (style) {
-					styles.push(style);
+				let styleFn = GisApp.Module.style.getLayerStyleFunction(layer, null);
+
+				if (styleFn) {
+					const style = styleFn(feature, resolution);
+					if (Array.isArray(style)) {
+						styles.push(...style);
+					} else {
+						styles.push(style);
+					}
 				}
 				styles.push(baseStyle);
 				return styles;
@@ -72,9 +84,25 @@ GisOlSelect.prototype = {
 			condition: click,
 			hitTolerance: me.defaults.hitTolerance,
 		});
-		map.addInteraction(this.selectInteraction);
 
+		map.addInteraction(this.selectInteraction);
 		this.selectedFeatures = this.selectInteraction.getFeatures();
+
+		// 선택된 피처 중심으로 지도 이동
+		this.selectInteraction.on('select', function (e) {
+			const feature = e.selected[0];
+			if (feature) {
+				const geometry = feature.getGeometry();
+				if (geometry) {
+					const extent = geometry.getExtent();
+					map.getView().fit(extent, {
+						duration: 300,
+						padding: [50, 50, 50, 50],
+						maxZoom: 16
+					});
+				}
+			}
+		});
 	},
 	/**
 	 * SELECT 피처 초기화