711 lines
27 KiB
JavaScript
711 lines
27 KiB
JavaScript
import { typeStep2Kor } from '../main.js';
|
|
|
|
let projectTypeBtn;
|
|
let projectTypeCapsule;
|
|
let projectTypeList = null;
|
|
let projectStepList = null;
|
|
let mainLayerState = null; // 메인 레이어 상태
|
|
|
|
// 프로젝트 설정 저장 버튼 클릭 이벤트
|
|
document.getElementById('project-save-btn').addEventListener('click', async () => {
|
|
const projectSaveBtn = document.getElementById('project-save-btn');
|
|
const projectStepBtn = document.getElementById('project-step-btn');
|
|
const projectNameInput = document.getElementById('project-name-input');
|
|
|
|
if (projectSaveBtn.textContent === '저장') {
|
|
// type
|
|
let typeVal = projectTypeBtn.children[0].textContent;
|
|
let typeValResult = stepTypeEng(typeVal);
|
|
|
|
// step
|
|
let stepVal = projectStepBtn.children[0].textContent;
|
|
let stepValResult = stepTypeEng(stepVal);
|
|
|
|
// project_name
|
|
let nameVal = projectNameInput.value;
|
|
|
|
let projectInfoParams = {
|
|
projectId : vars.project.project_id,
|
|
category : vars.project.category,
|
|
project_type : typeValResult,
|
|
step : stepValResult,
|
|
project_nm : nameVal,
|
|
}
|
|
|
|
let res = await axios.post('/common/updateProjectInfo', {params: projectInfoParams});
|
|
if (res.data.message == 'updateProjectInfo_success') {
|
|
// 수정된 프로젝트 정보 가져와서 전역변수에 저장
|
|
let projectRes = await axios.get('/common/getProject');
|
|
for (let project of projectRes.data.data) {
|
|
vars.allProject[project.project_id] = project;
|
|
}
|
|
vars.project = vars.allProject[vars.project_id];
|
|
|
|
setReadOnlyMode(vars.project.category);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 프로젝트 설정 취소 클릭 이벤트
|
|
document.querySelector('#project-cancel-btn').addEventListener('click', () => {
|
|
const projectSaveBtn = document.getElementById('project-save-btn');
|
|
if (projectSaveBtn.textContent === '저장') projectSaveBtn.textContent = '수정';
|
|
|
|
const list = document.querySelector('#project-type-wrap-overseas .project-type__list');
|
|
list.classList.remove('--project-list__open');
|
|
|
|
setReadOnlyMode(vars.project.category);
|
|
});
|
|
|
|
export function initProjectSetting(param) {
|
|
const projectSaveBtn = document.getElementById('project-save-btn');
|
|
const projectCancelBtn = document.getElementById('project-cancel-btn');
|
|
const projectLocationBtn = document.getElementById('project-location-btn');
|
|
let projectTypeWrap = document.getElementById('project-type-wrap');
|
|
let projectTypeWrapOverseas = document.getElementById('project-type-wrap-overseas');
|
|
|
|
if (param === undefined) {
|
|
// overseas, bim 아닌 경우
|
|
projectTypeWrap.style.display = 'none';
|
|
projectTypeWrapOverseas.style.display = 'none';
|
|
|
|
projectTypeBtn = document.getElementById('project-type-btn');
|
|
projectTypeCapsule = document.getElementById('project-type-capsule');
|
|
|
|
} else {
|
|
if (param === 'overseas') {
|
|
// overseas
|
|
projectTypeWrap.style.display = 'none';
|
|
projectTypeWrapOverseas.style.display = 'flex';
|
|
|
|
projectTypeBtn = document.getElementById('project-type-btn-overseas');
|
|
projectTypeCapsule = document.getElementById('project-type-capsule-overseas');
|
|
|
|
} else {
|
|
//bim
|
|
projectTypeWrap.style.display = 'flex';
|
|
projectTypeWrapOverseas.style.display = 'none';
|
|
|
|
projectTypeBtn = document.getElementById('project-type-btn');
|
|
projectTypeCapsule = document.getElementById('project-type-capsule');
|
|
}
|
|
|
|
adjustSelectBoxWidth(projectTypeBtn);
|
|
}
|
|
|
|
setReadOnlyMode(param);
|
|
|
|
// 권한이 있는 경우 저장 버튼 이벤트 추가
|
|
if (vars.permission.checkPermission('change-project-btn')) {
|
|
// 기존 리스너 제거 후 추가 (중복 방지)
|
|
projectSaveBtn.textContent = '수정';
|
|
projectSaveBtn.removeEventListener('click', handleProjectSaveClick);
|
|
projectSaveBtn.addEventListener('click', () => handleProjectSaveClick(param));
|
|
} else {
|
|
// 권한 없으면 버튼 제거
|
|
projectSaveBtn.remove();
|
|
projectCancelBtn.remove();
|
|
projectLocationBtn.remove();
|
|
}
|
|
|
|
// 이벤트 리스너 초기화
|
|
initEventListeners();
|
|
}
|
|
|
|
function handleProjectSaveClick(param) {
|
|
const projectSaveBtn = document.getElementById('project-save-btn');
|
|
|
|
if (projectSaveBtn.textContent === '저장') {
|
|
// 저장 버튼 클릭 : 읽기 모드로 전환
|
|
projectSaveBtn.textContent = '수정';
|
|
setReadOnlyMode(param);
|
|
} else {
|
|
// 수정 버튼 클릭: 편집 모드로 전환
|
|
projectSaveBtn.textContent = '저장';
|
|
setEditMode(param);
|
|
}
|
|
}
|
|
|
|
|
|
// 읽기 모드 : 관리자 이상이면서 읽기모드 or 일반유저
|
|
function setReadOnlyMode(param) {
|
|
|
|
const projectStepBtn = document.getElementById('project-step-btn');
|
|
const projectStepCapsule = document.getElementById('project-step-capsule');
|
|
const projectNameView = document.getElementById('project-name-view');
|
|
const projectNameInput = document.getElementById('project-name-input');
|
|
const projectSaveBtn = document.getElementById('project-save-btn');
|
|
const projectCancelBtn = document.getElementById('project-cancel-btn');
|
|
|
|
// step - 버튼 숨기고 캡슐 표시
|
|
projectStepBtn.style.display = 'none';
|
|
projectStepCapsule.style.display = 'flex';
|
|
projectStepCapsule.innerHTML = typeStep2Kor(vars.project.step);
|
|
projectStepCapsule.className = `project-step-capsule --step-capsule__${vars.project.step}`;
|
|
|
|
// type - 버튼 숨기고 캡슐 표시
|
|
projectTypeBtn.style.display = 'none';
|
|
projectTypeCapsule.style.display = 'flex';
|
|
projectTypeCapsule.innerHTML = typeStep2Kor(vars.project.project_type);
|
|
|
|
// name - input 숨기고 view 표시
|
|
projectNameInput.style.display = 'none';
|
|
projectNameView.style.display = 'flex';
|
|
projectNameView.innerHTML = vars.project.short_nm;
|
|
|
|
if(param !== 'overseas' && param !== 'bimproject') {
|
|
projectStepCapsule.style.display = 'none';
|
|
projectTypeCapsule.style.display = 'none';
|
|
|
|
projectNameView.innerHTML = vars.project.project_nm;
|
|
projectSaveBtn.style.display = 'none';
|
|
projectCancelBtn.style.display = 'none';
|
|
}
|
|
|
|
// location - 관리자이상:버튼 o , 관리자이하: 버튼x
|
|
if (vars.permission.checkPermission('change-project-btn')) {
|
|
document.querySelector('#project-location-btn').style.display = 'flex';
|
|
}
|
|
const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
|
|
lat.innerHTML =`<div class="project-location-lat">위도 ${vars.project.lat}</div>`
|
|
const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
|
|
lon.innerHTML =`<div class="project-location-lon">경도 ${vars.project.lon}</div>`
|
|
}
|
|
|
|
// 편집모드 : 관리자 이상이면서 편집모드
|
|
function setEditMode(param) {
|
|
|
|
const projectStepBtn = document.getElementById('project-step-btn');
|
|
const projectStepCapsule = document.getElementById('project-step-capsule');
|
|
const projectNameView = document.getElementById('project-name-view');
|
|
const projectNameInput = document.getElementById('project-name-input');
|
|
|
|
// step - 캡슐 숨기고 버튼 표시
|
|
projectStepCapsule.style.display = 'none';
|
|
projectStepBtn.style.display = 'flex';
|
|
projectStepBtn.innerHTML = `
|
|
<h5 class="project-step__label --step__${vars.project.step}">${typeStep2Kor(vars.project.step)}</h5>
|
|
<i class="project-step__icon"></i>
|
|
`;
|
|
|
|
// type - 캡슐 숨기고 버튼 표시
|
|
projectTypeCapsule.style.display = 'none';
|
|
projectTypeBtn.style.display = 'flex';
|
|
projectTypeBtn.innerHTML = `
|
|
<h5 class="project-type__label --type__${vars.project.project_type}">${typeStep2Kor(vars.project.project_type)}</h5>
|
|
<i class="project-type__icon"></i>
|
|
`;
|
|
|
|
// name - view 숨기고 input 표시
|
|
projectNameView.style.display = 'none';
|
|
projectNameInput.style.display = 'flex';
|
|
projectNameInput.value = projectNameView.textContent;
|
|
|
|
if(param !== 'overseas' && param !== 'bimproject') {
|
|
projectStepBtn.style.display = 'none';
|
|
projectTypeBtn.style.display = 'none';
|
|
}
|
|
|
|
// location - 수정 버튼, 위경도 위치 표시
|
|
document.querySelector('#project-location-btn').style.display = 'flex';
|
|
const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
|
|
lat.innerHTML =`<div class="project-location-lat">위도 ${vars.project.lat}</div>`
|
|
const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
|
|
lon.innerHTML =`<div class="project-location-lon">경도 ${vars.project.lon}</div>`
|
|
}
|
|
|
|
// 접속 인원 모달 - 프로젝트 type, step 변경 이벤트
|
|
function initEventListeners() {
|
|
// project-type-btn 클릭 이벤트
|
|
if (projectTypeBtn) {
|
|
// 기존 이벤트 제거 후 추가 (중복 방지)
|
|
const newBtn = projectTypeBtn.cloneNode(true);
|
|
projectTypeBtn.parentNode.replaceChild(newBtn, projectTypeBtn);
|
|
projectTypeBtn = newBtn;
|
|
|
|
projectTypeList = projectTypeBtn.parentElement.querySelector('.project-type__list');
|
|
|
|
projectTypeBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
projectTypeList?.classList.toggle('--project-list__open');
|
|
});
|
|
}
|
|
|
|
// project-step-btn 클릭 이벤트
|
|
const projectStepBtn = document.getElementById('project-step-btn');
|
|
if (projectStepBtn) {
|
|
projectStepList = document.querySelector('.project-step__list');
|
|
|
|
projectStepBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
projectStepList?.classList.toggle('--project-list__open');
|
|
});
|
|
}
|
|
|
|
// modal-wrap 클릭 이벤트
|
|
if (projectTypeBtn) {
|
|
const modalWrap = projectTypeBtn.closest('.modal-wrap');
|
|
if (modalWrap) {
|
|
modalWrap.addEventListener('click', (e) => {
|
|
projectTypeList?.classList.remove('--project-list__open');
|
|
projectStepList?.classList.remove('--project-list__open');
|
|
});
|
|
}
|
|
}
|
|
|
|
// project-type__list_item 클릭 이벤트
|
|
if (projectTypeList) {
|
|
projectTypeList.querySelectorAll('.project-type__list_item').forEach(item => {
|
|
item.addEventListener('click', async(e) => {
|
|
e.stopPropagation();
|
|
projectTypeList.classList.remove('--project-list__open');
|
|
let type = e.target.classList[1].split('__')[1];
|
|
let kor = e.target.textContent;
|
|
projectTypeBtn.innerHTML = `
|
|
<h5 class="project-type__label --type__${type}">${kor}</h5>
|
|
<i class="project-type__icon"></i>`;
|
|
});
|
|
});
|
|
}
|
|
|
|
// project-step__list_item 클릭 이벤트
|
|
if (projectStepList) {
|
|
projectStepList.querySelectorAll('.project-step__list_item').forEach(item => {
|
|
item.addEventListener('click', async(e) => {
|
|
e.stopPropagation();
|
|
projectStepList.classList.remove('--project-list__open');
|
|
let step = e.target.classList[1].split('__')[1];
|
|
let btn = document.getElementById('project-step-btn');
|
|
let kor = typeStep2Kor(step);
|
|
if (btn) {
|
|
btn.innerHTML = `
|
|
<h5 class="project-step__label --step__${step}">${kor}</h5>
|
|
<i class="project-step__icon"></i>`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function stepTypeEng(param) {
|
|
let result = param;
|
|
switch(param) {
|
|
case '완료':
|
|
result = 'done';
|
|
break;
|
|
case '진행':
|
|
result = 'active';
|
|
break;
|
|
case '중지':
|
|
result = 'stop';
|
|
break;
|
|
case '대기':
|
|
result = 'wait';
|
|
break;
|
|
|
|
case '시공':
|
|
result = 'construction';
|
|
break;
|
|
case '설계':
|
|
result = 'design';
|
|
break;
|
|
case '제안':
|
|
result = 'surgest';
|
|
break;
|
|
case '연구':
|
|
result = 'research';
|
|
break;
|
|
case '지원':
|
|
result = 'support';
|
|
break;
|
|
case '센터':
|
|
result = 'center';
|
|
break;
|
|
case '측량':
|
|
result = 'survey';
|
|
break;
|
|
|
|
case 'MP (기본계획)':
|
|
result = 'MP';
|
|
break;
|
|
case 'DD (실시설계)':
|
|
result = 'DD';
|
|
break;
|
|
case 'FS (타당성조사)':
|
|
result = 'FS';
|
|
break;
|
|
case 'PD (기본설계)':
|
|
result = 'PD';
|
|
break;
|
|
case 'DS (설계감리)':
|
|
result = 'DS';
|
|
break;
|
|
case 'CS (시공감리)':
|
|
result = 'CS';
|
|
break;
|
|
case 'PMC (실시설계)':
|
|
result = 'PMC';
|
|
break;
|
|
case 'IDC (타당성조사)':
|
|
result = 'IDC';
|
|
break;
|
|
case 'DR (설계검토)':
|
|
result = 'DR';
|
|
break;
|
|
case 'BD (수주영업)':
|
|
result = 'BD';
|
|
break;
|
|
case 'ETC (기타)':
|
|
result = 'ETC';
|
|
break;
|
|
|
|
default:
|
|
result = '없음';
|
|
break;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// 셀렉트박스 크기 조정
|
|
function adjustSelectBoxWidth(button) {
|
|
if (!button) return;
|
|
|
|
const list = button.parentElement.querySelector('.project-type__list');
|
|
if (!list) return;
|
|
|
|
// canvas를 사용한 텍스트 너비 측정
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
|
|
// 현재 폰트 스타일 가져오기
|
|
const computedStyle = window.getComputedStyle(button);
|
|
context.font =`${computedStyle.fontSize} ${computedStyle.fontFamily}`;
|
|
|
|
let maxWidth = 0;
|
|
const items = list.querySelectorAll('.project-type__list_item');
|
|
|
|
items.forEach(item => {
|
|
const text = item.textContent.trim();
|
|
const metrics = context.measureText(text);
|
|
const width = metrics.width;
|
|
|
|
if (width > maxWidth) {
|
|
maxWidth = width;
|
|
}
|
|
});
|
|
|
|
// 적용
|
|
if (maxWidth > 0) {
|
|
const finalWidth = maxWidth + 25;
|
|
|
|
// 버튼에 적용
|
|
button.style.minWidth = `${finalWidth}px`;
|
|
button.style.textAlign = 'center'; // 가운데 정렬
|
|
button.style.justifyContent = 'center'; // flex인 경우
|
|
button.style.display = 'flex'; // flex 적용
|
|
button.style.alignItems = 'center'; // 세로 가운데 정렬
|
|
|
|
// 캡슐에 적용
|
|
const capsule = button.parentElement.querySelector('.--type-capsule');
|
|
if (capsule) {
|
|
capsule.style.minWidth = `${finalWidth}px`;
|
|
capsule.style.textAlign = 'center'; // 가운데 정렬
|
|
capsule.style.justifyContent = 'center'; // flex인 경우
|
|
capsule.style.display = 'flex'; // flex 적용
|
|
capsule.style.alignItems = 'center'; // 세로 가운데 정렬
|
|
|
|
}
|
|
|
|
// 리스트에 적용
|
|
list.style.minWidth = `${finalWidth}px`;
|
|
|
|
// 리스트 글씨 정렬
|
|
items.forEach(item => {
|
|
item.style.paddingLeft = '5px';
|
|
item.style.paddingRight = '5px';
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
// 프로젝트 위치 수정 버튼 클릭 이벤트
|
|
document.getElementById('project-location-btn').addEventListener('click', () => {
|
|
document.querySelector('.project-location-modal').style.display = 'flex';
|
|
openLocationModal();
|
|
})
|
|
|
|
// 지도 모달창 닫기 버튼, 취소 버튼 클릭 이벤트
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-head .close').addEventListener('click', () => {
|
|
closeLocationModal();
|
|
});
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-foot .button').addEventListener('click', () => {
|
|
closeLocationModal();
|
|
});
|
|
|
|
// 기본 지도 모달창 버튼 클릭 이벤트
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button').addEventListener('click', () => {
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map').style.display = 'flex';
|
|
});
|
|
// 기본 지도 모달창 닫기 버튼 클릭 이벤트
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close').addEventListener('click', () => {
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-body .map-wrap .base-map').style.display = 'none';
|
|
});
|
|
|
|
// 지도 모달창 저장 버튼 클릭 이벤트
|
|
document.querySelector('.project-location-modal .modal-wrap .modal-foot .primary-button').addEventListener('click', async() => {
|
|
if(!ol.locationMap || !ol.locationMap.clickCoord) {
|
|
alert('위치를 선택해주세요');
|
|
return;
|
|
}
|
|
|
|
let updateLocationParams = {
|
|
projectId: vars.project.project_id,
|
|
category: vars.project.category,
|
|
project_nm: vars.project.project_nm,
|
|
lon: ol.locationMap.clickCoord.lon,
|
|
lat: ol.locationMap.clickCoord.lat
|
|
};
|
|
|
|
let res = await axios.post('/common/updateLocationInfo', {params: updateLocationParams});
|
|
if (res.data.message == 'updateLocationInfo_success') {
|
|
vars.project.lon = res.data.data.lon;
|
|
vars.project.lat = res.data.data.lat;
|
|
|
|
closeLocationModal();
|
|
|
|
const lat = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lat');
|
|
lat.innerHTML = `<div class="project-location-lat">위도 ${res.data.data.lat}</div>`;
|
|
|
|
const lon = document.querySelector('.archive-modal .wrap .modal-wrap .modal-body .project-setting-wrap .project-location-wrap .project-location-lon');
|
|
lon.innerHTML = `<div class="project-location-lon">경도 ${res.data.data.lon}</div>`;
|
|
}
|
|
})
|
|
|
|
// 프로젝트 위치 수정
|
|
function openLocationModal() {
|
|
// 메인 지도 레이어 상태 백업
|
|
if (vars.roadLayer && vars.satelliteLayer && vars.hybridLayer) {
|
|
mainLayerState = {
|
|
road: vars.roadLayer.getVisible(),
|
|
satellite: vars.satelliteLayer.getVisible(),
|
|
hybrid: vars.hybridLayer.getVisible()
|
|
};
|
|
}
|
|
|
|
initLocationMap();
|
|
|
|
// 기존 좌표가 있을 때만 블루 마커 생성
|
|
if (vars.project.lon && vars.project.lat) {
|
|
if (!ol.locationMap.blueMarkerOverlay) {
|
|
// 블루 마커 (저장된 위치)
|
|
let blueMarker = document.createElement('div');
|
|
blueMarker.style.width = '1rem';
|
|
blueMarker.style.height = '1rem';
|
|
blueMarker.style.backgroundColor = '#0D8DF2';
|
|
blueMarker.style.borderRadius = '50%';
|
|
blueMarker.style.border = '0.1875rem solid #fff';
|
|
blueMarker.style.boxShadow = '0 0.25rem 0.5rem rgba(0, 0, 0, 0.05)';
|
|
|
|
ol.locationMap.blueMarkerOverlay = new ol.Overlay({
|
|
element: blueMarker,
|
|
positioning: 'center-center',
|
|
stopEvent: false,
|
|
zIndex: 9998
|
|
});
|
|
ol.locationMap.addOverlay(ol.locationMap.blueMarkerOverlay);
|
|
}
|
|
|
|
if (!ol.locationMap.blueLabelOverlay) {
|
|
let blueLabel = document.createElement('div');
|
|
|
|
ol.locationMap.blueLabelOverlay = new ol.Overlay({
|
|
element: blueLabel,
|
|
positioning: 'bottom-center',
|
|
offset: [0, -10],
|
|
stopEvent: false,
|
|
zIndex: 9998,
|
|
});
|
|
ol.locationMap.addOverlay(ol.locationMap.blueLabelOverlay);
|
|
}
|
|
|
|
const position3857 = ol.proj.fromLonLat([vars.project.lon, vars.project.lat]);
|
|
|
|
ol.locationMap.blueMarkerOverlay.setPosition(position3857);
|
|
ol.locationMap.blueLabelOverlay.setPosition(position3857);
|
|
ol.locationMap.blueLabelOverlay.element.innerHTML = `
|
|
<div style="background: #fff; color: #111; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 0.1875rem solid #0D8DF2; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;">
|
|
저장된 위치 <br>
|
|
경도 : ${vars.project.lon}<br>
|
|
위도 : ${vars.project.lat}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 지도 초기화
|
|
function initLocationMap() {
|
|
// 위치 모달 지도만 삭제
|
|
if (ol.locationMap) {
|
|
ol.locationMap.getOverlays()?.clear();
|
|
ol.locationMap.getLayers()?.forEach(l => {
|
|
const src = l.getSource?.();
|
|
if (src && src instanceof ol.source.Vector) src.clear(true);
|
|
});
|
|
ol.locationMap.getLayers()?.clear();
|
|
if (typeof ol.locationMap.dispose === 'function') {
|
|
ol.locationMap.dispose();
|
|
}
|
|
ol.locationMap = null;
|
|
}
|
|
|
|
// 위치 설정 모달용 임시 레이어 생성
|
|
const tempRoadLayer = new ol.layer.Tile({
|
|
source: new ol.source.XYZ({
|
|
url: vars.roadLayer.getSource().getUrls()[0]
|
|
}),
|
|
visible: mainLayerState?.road ?? true
|
|
});
|
|
const tempSatelliteLayer = new ol.layer.Tile({
|
|
source: new ol.source.XYZ({
|
|
url: vars.satelliteLayer.getSource().getUrls()[0]
|
|
}),
|
|
visible: mainLayerState?.satellite ?? false
|
|
});
|
|
const tempHybridLayer = new ol.layer.Tile({
|
|
source: new ol.source.XYZ({
|
|
url: vars.hybridLayer.getSource().getUrls()[0]
|
|
}),
|
|
visible: mainLayerState?.hybrid ?? false
|
|
});
|
|
|
|
ol.locationMap = new ol.Map({
|
|
target: 'map-location',
|
|
layers: [tempRoadLayer, tempSatelliteLayer, tempHybridLayer],
|
|
view: new ol.View({
|
|
projection: 'EPSG:3857',
|
|
center: ol.proj.fromLonLat([127.8, 35.9]),
|
|
zoom: 7,
|
|
constrainResolution: true,
|
|
smoothResolutionConstraint: true
|
|
})
|
|
});
|
|
|
|
// 임시 레이어 참조 저장
|
|
ol.locationMap.tempRoadLayer = tempRoadLayer;
|
|
ol.locationMap.tempSatelliteLayer = tempSatelliteLayer;
|
|
ol.locationMap.tempHybridLayer = tempHybridLayer;
|
|
|
|
// proj4 설정
|
|
proj4.defs([
|
|
['EPSG:5185', '+proj=tmerc +lat_0=38 +lon_0=125 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
|
|
['EPSG:5186', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
|
|
['EPSG:5187', '+proj=tmerc +lat_0=38 +lon_0=129 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
|
|
['EPSG:5188', '+proj=tmerc +lat_0=38 +lon_0=131 +k=1 +x_0=200000 +y_0=600000 +ellps=GRS80 +units=m +no_defs'],
|
|
['EPSG:4978', '+proj=geocent +datum=WGS84 +units=m +no_defs'],
|
|
['EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs'],
|
|
]);
|
|
ol.proj.proj4.register(proj4);
|
|
|
|
// 레드 마커 생성
|
|
let marker = document.createElement('div');
|
|
marker.classList.add('marker');
|
|
marker.style.width = '1rem';
|
|
marker.style.height = '1rem';
|
|
marker.style.backgroundColor = '#F21D0D';
|
|
marker.style.borderRadius = '50%';
|
|
marker.style.border = '0.1875rem solid #fff';
|
|
marker.style.boxShadow = '0 0.25rem 0.5rem rgba(0, 0, 0, 0.05)';
|
|
|
|
ol.locationMap.redMarkerOverlay = new ol.Overlay({
|
|
element: marker,
|
|
positioning: 'center-center',
|
|
stopEvent: false,
|
|
zIndex: 9999
|
|
});
|
|
ol.locationMap.addOverlay(ol.locationMap.redMarkerOverlay);
|
|
|
|
let label = document.createElement('div');
|
|
|
|
ol.locationMap.redLabelOverlay = new ol.Overlay({
|
|
element: label,
|
|
positioning: 'bottom-center',
|
|
offset: [0, -10],
|
|
stopEvent: false,
|
|
zIndex: 9999,
|
|
});
|
|
ol.locationMap.addOverlay(ol.locationMap.redLabelOverlay);
|
|
|
|
// 클릭 이벤트
|
|
ol.locationMap.on('click', function(e) {
|
|
const lonLat = ol.proj.toLonLat(e.coordinate);
|
|
const lon = lonLat[0].toFixed(6);
|
|
const lat = lonLat[1].toFixed(6);
|
|
|
|
ol.locationMap.clickCoord = {
|
|
lon: Number(lon),
|
|
lat: Number(lat),
|
|
coordinate3857: e.coordinate
|
|
};
|
|
|
|
ol.locationMap.redMarkerOverlay.setPosition(e.coordinate);
|
|
|
|
ol.locationMap.redLabelOverlay.element.innerHTML = `
|
|
<div style="background: #fff; color: #111; padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 0.1875rem solid #F21D0D; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); font-size: 0.875rem; font-weight:500; line-height: 1.25rem; letter-spacing: -0.0175rem;">
|
|
선택한 위치 <br>
|
|
경도 : ${lon} <br>
|
|
위도 : ${lat}
|
|
</div>
|
|
`;
|
|
|
|
ol.locationMap.redLabelOverlay.setPosition(e.coordinate);
|
|
});
|
|
}
|
|
|
|
// 기본지도 타입 라디오 버튼 클릭 이벤트
|
|
document.querySelectorAll('.project-location-modal input[name="location-base-map"]').forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
if (!ol.locationMap) return;
|
|
|
|
const type = this.value;
|
|
|
|
// 위치 설정 모달의 임시 레이어만 변경
|
|
ol.locationMap.tempRoadLayer.setVisible(false);
|
|
ol.locationMap.tempSatelliteLayer.setVisible(false);
|
|
ol.locationMap.tempHybridLayer.setVisible(false);
|
|
|
|
switch(type) {
|
|
case 'road':
|
|
ol.locationMap.tempRoadLayer.setVisible(true);
|
|
break;
|
|
case 'hybrid':
|
|
ol.locationMap.tempHybridLayer.setVisible(true);
|
|
break;
|
|
case 'satellite':
|
|
ol.locationMap.tempSatelliteLayer.setVisible(true);
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
// 모달 닫기 함수
|
|
function closeLocationModal() {
|
|
document.querySelector('.project-location-modal').style.display = 'none';
|
|
|
|
if (ol.locationMap) {
|
|
ol.locationMap.setTarget(null);
|
|
if (typeof ol.locationMap.dispose === 'function') {
|
|
ol.locationMap.dispose();
|
|
}
|
|
ol.locationMap = null;
|
|
}
|
|
|
|
// 메인 지도 레이어 상태 복원
|
|
if (mainLayerState) {
|
|
vars.roadLayer.setVisible(mainLayerState.road);
|
|
vars.satelliteLayer.setVisible(mainLayerState.satellite);
|
|
vars.hybridLayer.setVisible(mainLayerState.hybrid);
|
|
mainLayerState = null;
|
|
}
|
|
}
|
|
|