wr: 후보지 조회 -feature 선택시 확대 제한

This commit is contained in:
dongsilove
2026-03-28 20:46:09 +09:00
parent cbee407911
commit f5f0f67798
2 changed files with 29 additions and 23 deletions
@@ -1,25 +1,28 @@
import MousePosition from 'ol/control/MousePosition';
import ScaleLine from 'ol/control/ScaleLine';
import Feature from 'ol/Feature';
import WKT from 'ol/format/WKT';
import LinearRing from 'ol/geom/LinearRing';
import Draw from 'ol/interaction/Draw';
import TileLayer from 'ol/layer/Tile';
import * as olProj from 'ol/proj';
import VectorSource from 'ol/source/Vector';
import XYZ from 'ol/source/XYZ';
import GeoSJON from 'ol/format/GeoJSON';
import { Fill, Stroke, Style } from 'ol/style';
import CircleStyle from 'ol/style/Circle';
import VectorLayer from 'ol/layer/Vector';
import MousePosition from 'ol/control/MousePosition'; // 마우스 좌표 표시
import ScaleLine from 'ol/control/ScaleLine'; // 지도 축척(스케일 바) 표시
import Feature from 'ol/Feature'; // 지도 위 객체- 점, 선, 폴리곤
import WKT from 'ol/format/WKT'; // WKT 문자열 기반 공간 데이터 포맷
import LinearRing from 'ol/geom/LinearRing'; // 선형 고리(폴리곤의 외곽선 또는 내부 구멍을 나타냄)
import Draw from 'ol/interaction/Draw'; // 지도 위에 점, 선, 폴리곤 등의 피처를 그리는 인터랙션
import TileLayer from 'ol/layer/Tile'; // 타일 레이어(배경 지도) 클래스
import * as olProj from 'ol/proj'; // 좌표 변환을 위한 모듈
import VectorSource from 'ol/source/Vector'; // VectorLayer의 실제 데이터 저장소
import XYZ from 'ol/source/XYZ'; // {z}/{x}/{y} Google, OpenStreetMap 등에서 타일을 가져올 때 사용
import GeoSJON from 'ol/format/GeoJSON'; // JSON 형태 공간 데이터 포맷
import { Fill, Stroke, Style } from 'ol/style'; // 내부 색상 (폴리곤), 선 색상 및 두께 (점, 선), 스타일 정의
import CircleStyle from 'ol/style/Circle'; // 점 스타일 정의 클래스 : 점을 원으로 표현
import VectorLayer from 'ol/layer/Vector'; // 점, 선, 폴리곤 등의 피처를 지도에 표시하는 레이어
import { Point } from 'ol/geom';
import { getTopLeft } from 'ol/extent';
import TileWMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import GisOlEditLayer from './gis.edit';
import GisOlLayer from './gis.layer';
import { getTopLeft } from 'ol/extent'; // extent의 좌측 상단 좌표 반환
// WMTS 타일(국토정보 배경지도용)
import TileWMTS from 'ol/source/WMTS'; // WMTS 서비스에서 타일을 가져와 지도에 표시하는 역할 (국토부 / 공공 GIS에서 사용)
import WMTSTileGrid from 'ol/tilegrid/WMTS'; // WMTS 타일의 해상도 resolutions, 행렬 ID matrixIds, 타일 크기 등을 정의
// 좌표계 등록(proj4 + OpenLayers 연동)
import proj4 from 'proj4'; // 사용자 정의 좌표계 정의
import { register } from 'ol/proj/proj4'; // proj4 좌표계를 OpenLayers에 등록
// 내부 모듈(레이어/편집)
import GisOlEditLayer from './gis.edit'; // 편집 레이어 생성/관리 커스텀 로직
import GisOlLayer from './gis.layer'; // 레이어 생성/관리 커스텀 로직
const GisApp = {};
/**
@@ -51,7 +54,7 @@ GisApp.VWORLD_SATELLITE_URL = 'https://xdworld.vworld.kr/2d/Satellite/service/{z
GisApp.OPENSTREET_URL = '//tile.openstreetmap.org/{z}/{x}/{y}.png';
GisApp.BASE_MAP_TYPES = [];
GisApp.FROM_PROJ = 'EPSG:4326';
GisApp.FROM_PROJ = 'EPSG:4326'; // 위경도 좌표계
GisApp.TO_PROJ = 'EPSG:5179'; //ngii 좌표계
GisApp.TO_DATA_PROJ = 'EPSG:4326';
GisApp.CONTEXT_LAYER_PATH = '/images/map/layericon/';
@@ -90,13 +90,16 @@ GisOlSelect.prototype = {
this.selectInteraction.on('select', function (e) {
const feature = e.selected[0];
if (feature) {
const selectedLayer = e.target?.getLayer(feature) || feature.getLayer?.();
const clckZoom = Number(selectedLayer?.get('clckZoom'));
const targetZoom = Number.isFinite(clckZoom) && clckZoom > 0 ? clckZoom : 16;
const geometry = feature.getGeometry();
if (geometry) {
const extent = geometry.getExtent();
map.getView().fit(extent, {
duration: 300,
padding: [50, 50, 50, 50],
maxZoom: 16
maxZoom: targetZoom
});
}
}