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,
});