물재이용 지도보기 수정
This commit is contained in:
yschoi
@@ -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
|
||||
gisMaps={gisMaps}
|
||||
facilityTypes={facilityTypes}
|
||||
onFeatureFocus={onFeatureFocus}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
searchBar={
|
||||
<SearchBar
|
||||
gisMaps={gisMaps}
|
||||
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" },
|
||||
]}
|
||||
onFeatureFocus={onFeatureFocus}
|
||||
/>
|
||||
}
|
||||
waterDepth={undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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<string, string> = {
|
||||
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,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user