From 2cfecb318910434907460454d66194cc8ff4019f Mon Sep 17 00:00:00 2001 From: yschoi Date: Wed, 6 Aug 2025 21:09:11 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=A7=80=EB=8F=84=EB=B3=B4=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/mainMap/page.tsx | 36 ++++--- .../src/ui/map/lib/gis.style.js | 13 +-- .../src/ui/map/searchBar/searchBar.tsx | 96 +++++++++---------- 3 files changed, 69 insertions(+), 76 deletions(-) diff --git a/apps/wr/app/map/mainMap/page.tsx b/apps/wr/app/map/mainMap/page.tsx index d7028130b..f824efa76 100644 --- a/apps/wr/app/map/mainMap/page.tsx +++ b/apps/wr/app/map/mainMap/page.tsx @@ -5,8 +5,7 @@ import { useEffect, useRef, useState, useCallback } from "react"; import { mapService } from "../service"; import NewWindowPopup from "../components/newWindowPopup"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; -import { SearchBar } from "../searchBar/searchBar"; -import { UndoIcon } from "lucide-react"; +import { SearchBar } from "@common/business_components/ui/map/searchBar/searchBar"; const Map = () => { const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 @@ -130,24 +129,21 @@ const Map = () => { isSearchModalOpen={isSearchModalOpen} onCheckedLayersChange={handleCheckedLayersChange} imgVisble={true} - searchBar={() => { - const facilityTypes = [ - { text: "하수처리시설", val: "tb_il_swage_prcs_fclt" }, - { text: "하수재이용시설", val: "tb_wr_bdst_ruse_fclt" }, - { text: "빗물이용시설", val: "tb_wr_rnwtr_utztn_fclt" }, - { text: "중수도시설", val: "tb_wr_rswtr_fclt" }, - { text: "온배수시설", val: "tb_wr_htdfl_fclt" }, - { text: "수요처", val: "tb_wr_ruse_fclt_dmd_co" }, - { text: "잠재수요처", val: "tb_wr_tmpr_dmd_co" }, - ]; - return ( - - ); - }} + searchBar={ + + } waterDepth={undefined} /> diff --git a/packages/common/business_components/src/ui/map/lib/gis.style.js b/packages/common/business_components/src/ui/map/lib/gis.style.js index ae413c66e..f38853962 100644 --- a/packages/common/business_components/src/ui/map/lib/gis.style.js +++ b/packages/common/business_components/src/ui/map/lib/gis.style.js @@ -275,7 +275,8 @@ GisOlStyle.prototype = { let fontExtnColor = layer.get('fontExtnColor'); let fontExtnWdth = Number(layer.get('fontExtnWdth') || '1'); let fontIntnColor = layer.get('fontIntnColor'); - let minViewSize = layer.get('minViewSize'); + //let minViewSize = layer.get('minViewSize') || 13; + let minViewSize = 14; if (feature == null) { return; } @@ -283,14 +284,14 @@ GisOlStyle.prototype = { let label = prop[layer.get('lblAtrbNm')]; let scaleFactor = 1 / resolution; // 해상도가 낮아질수록 글자 크기 증가 const zoom = GisApp.Module.core.map.getView().getZoom(); - if (zoom < minViewSize - 3) { + if (zoom <= minViewSize) { label = ''; } let text = new Text({ - stroke: new Stroke({ - color: '#FFFFFF', // 흰색 테두리 - width: fontExtnWdth, - }), + // stroke: new Stroke({ + // color: '#FFFFFF', // 흰색 테두리 + // width: fontExtnWdth, + // }), fill: new Fill({ color: fontIntnColor, width: fontExtnWdth, diff --git a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx index 68377f5e3..17763c9c9 100644 --- a/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx +++ b/packages/common/business_components/src/ui/map/searchBar/searchBar.tsx @@ -3,6 +3,7 @@ import { SelectBox, type SelectDataType } from "../../../ui"; import { Button } from "@common/components/ui"; import { useCallback, useEffect, useState } from "react"; import SearchInputText from "./SearchInputText"; +import GisApp from "../lib/gis.core"; const FACILITY_TYPE_URL_MAP: Record = { tb_il_swage_prcs_fclt: @@ -222,55 +223,50 @@ export const SearchBar = ({ setSearchList(newList); }; - const moveFocus = (feature: any) => { - - // console.log('searchbar:moveFocus') - // const map = gisMaps.current; - // if (!map) { - // console.warn("지도가 초기화되지 않았습니다."); - // return; - // } - - // // 항상 같은 select 객체 사용 - // const select = GisApp.Module.select as any; - // if (!select) return; - - // // 1. 기존 선택 초기화 - // select.resetSelectedFeature(); - - // // 2. data가 OpenLayers Feature 인스턴스인지 확인 - // let foundFeature: any = null; - // let featureId = data.fid; - // const layerName = data.layerNm; - // map - // .getLayers() - // .getArray() - // .forEach((layer: any) => { - // const source = layer.getSource?.(); - // if (source?.getFeatureById) { - // const feature = source.getFeatureById(String(featureId).trim()); - // if (feature) foundFeature = feature; - // } - // }); - - // // 3. 피처 선택 - // if (foundFeature) { - // const geometry = foundFeature.getGeometry(); - // if (geometry) { - // const extent = geometry.getExtent(); - - // map.getView().fit(extent, { - // duration: 300, - // padding: [50, 50, 50, 50], - // maxZoom: 16, - // constrainResolution: true, - // nearest: true, - // }); - // } - // // select.selectFeature(foundFeature, true); - // } else { - // console.warn("OpenLayers Feature를 찾을 수 없습니다:", data); - // } + //해당 시설물로 이동 + const handleFeatureFocus = (data: any) => { + console.log(data) + const map = gisMaps.current; + if (!map) { + console.warn("지도가 초기화되지 않았습니다."); + return; + } + // 항상 같은 select 객체 사용 + const select = GisApp.Module.select as any; + if (!select) return; + // 1. 기존 선택 초기화 + //select.resetSelectedFeature(); + // 2. data가 OpenLayers Feature 인스턴스인지 확인 + let foundFeature: any = null; + let featureId = data.fid; + map + .getLayers() + .getArray() + .forEach((layer: any) => { + const source = layer.getSource?.(); + if (source?.getFeatureById) { + const feature = source.getFeatureById(String(featureId).trim()); + if (feature) foundFeature = feature; + } + }); + // 3. 피처 선택 + if (foundFeature) { + const geometry = foundFeature.getGeometry(); + if (geometry) { + const extent = geometry.getExtent(); + map.getView().fit(extent, { + duration: 300, + padding: [50, 50, 50, 50], + maxZoom: 16, + constrainResolution: true, + nearest: true, + }); + } else { + console.warn("geometry를 찾을 수 없습니다:", data); + } + } else { + console.warn("Feature를 찾을 수 없습니다:", data); + } }; return ( @@ -320,7 +316,7 @@ export const SearchBar = ({ setRtnData={(selected: { fnm: string; fid: string }) => { // 선택된 항목이 있을 경우 onFeatureSelect 실행 const type = facilityType; - moveFocus({ + handleFeatureFocus({ layerNm: type, ...selected, });