본문 바로가기
Frontend/jQuery & JSTL

SGIS연동

Mr.6_냥아치 2024. 2. 19. 18:04
반응형
<!DOCTYPE html>
<html lang="ko">
	<head>
	<title>SOP JavaScript : Map Simple</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Service Key 입력 -->
    <script type="text/javascript" src="https://sgisapi.kostat.go.kr/OpenAPI3/auth/javascriptAuth?consumer_key=[발급받은 서비스키]"></script>
	</head>
    
	<body>
    	<!-- map이 생성될 위치 생성 -->
		<div id="map" style="width:500px; height:500px;"></div>
		<script type="text/javascript">
        	<!-- map 생성 -->
		var map = sop.map('map');
            	<!-- sop.utmk(init 위치),확대단계 설정 -->
		map.setView(sop.utmk(953820, 1953437), 9);
		</script>
	</body>
</html>

 

// script안에 작성
map.zoomIn();
map.zoomOut();
setZoom(val);
                            
function zoomIn(){
	map.zoomIn(); // 줌 레벨 한단계 확대
}
                            
function zoomOut(){
	map.zoomOut(); // 줌 레벨 한단계 축소
}
                            
function setZoom(val){
	map.setZoom(val); // 원하는 단계로 줌 설정
}

 

홀수번째 더블클릭은 줌인, 짝수번째 더블클릭은 줌아웃 동작

Default는 더블클릭시 계속 줌인을 하는 것이 맞다고 한다.

 

 

따라서 2가지 방법이 생각났는데

1. 클릭과 더블클릭의 줌 이벤트를 각각 설정하는 방법

2. 더블클릭 기능을 막고 줌은 휠로만 가능하게 한뒤 팝업 관련 UX를 개선하는 방법

일단은 임의로 라이브러리 소스코드를 수정하거나 별도의 이벤트를 주는 것은 의미가 없다고 판단해 2번으로 진행

 

 

지도에서 드래그 이동시 모달 방식으로 구현된 팝업창 없애기

// 팝업창과 닫기버튼 선언
const txtBox = document.querySelector(".txtBox");
const btnClose = document.querySelector(".txtBox .btnClose");

...

// 팝업창 열리는 위치 설정
function popup($top, $left){
	let mapBoxWidth = document.querySelector(".mapWrap").offsetWidth;
	let mapBoxHeight = document.querySelector(".mapWrap").offsetHeight;
	let popupWidth = document.querySelector(".txtBox").offsetWidth;
	let popupHeight = document.querySelector(".txtBox").offsetHeight;
	txtBox.style.display = "block";

	// 클릭 위치에 따라 팝업이 지도화면을 벗어나지 않도록 설정
	if ($left + popupWidth + 50 > mapBoxWidth && $top + popupHeight > mapBoxHeight) {
		txtBox.style.top = $top - popupHeight + "px";
		txtBox.style.left = $left - popupWidth - 50 + "px";
	}else if($left + popupWidth < mapBoxWidth && $top + popupHeight > mapBoxHeight){
		txtBox.style.top = $top - popupHeight + "px";
		txtBox.style.left = $left + 50 + "px";
	}else if($left + popupWidth + 50 > mapBoxWidth && $top + popupHeight < mapBoxHeight){  
		txtBox.style.top = $top + "px";
		txtBox.style.left = $left - popupWidth - 50 + "px";
	}else {
		txtBox.style.top = $top + "px";
		txtBox.style.left = $left + 50 + "px";
	}
}

// 지도 이동시 팝업 숨김
map.on("movestart",function(e) {
	txtBox.style.display = "none";
});

// 닫기버튼 클릭시 팝업 숨김
btnClose.addEventListener("click", function () {
	txtBox.style.display = "none";
	let pathOn = document.querySelector("#map path.on");
	let pathActive = document.querySelector("#map path.active");
	if (pathOn) {
		pathOn.classList.remove("on");
	}
	if (pathActive) {
		pathActive.classList.remove("active");
	}
});

 

 

div위에 div띄우기

polygon.on("click", function (e) {
	let $top = e.originalEvent.layerY;
	let $left = e.originalEvent.layerX;
	popup($top, $left);
});
	                  
// 팝업띄우기
function popup($top, $left) {
	let mapBoxWidth = document.querySelector(".mapWrap").offsetWidth;
	let mapBoxHeight = document.querySelector(".mapWrap").offsetHeight;
	//let popupWidth = document.querySelector(".txtBox").offsetWidth;
	//let popupHeight = document.querySelector(".txtBox").offsetHeight;
	let popupWidth = 302;
	let popupHeight = 312;
	if ($left + popupWidth + 50 > mapBoxWidth && $top + popupHeight > mapBoxHeight) {
		txtBox.style.top = $top - popupHeight + "px";
		txtBox.style.left = $left - popupWidth - 50 + "px";
	}else if($left + popupWidth < mapBoxWidth && $top + popupHeight > mapBoxHeight){
		txtBox.style.top = $top - popupHeight + "px";
		txtBox.style.left = $left + 50 + "px";
	}else if($left + popupWidth + 50 > mapBoxWidth && $top + popupHeight < mapBoxHeight){  
		txtBox.style.top = $top + "px";
		txtBox.style.left = $left - popupWidth - 50 + "px";
	}else {
		txtBox.style.top = $top + "px";
		txtBox.style.left = $left + 50 + "px";
	}
	txtBox.style.display = "block";
}

기존에 주석처리를 안하고 작업했을 때 클릭하면 처음 popup이 뜰때 mapBox를 벗어나는 이슈가 있었다.

처음 popup이 뜰때에는 if문을 무시하는 것으로 생각했다. 하지만 저 if문을 event안에 넣어도 동일한 증상을 보였다.

그래서 콘솔값을 일일히 확인하니 초기 popup값이 0으로 들어가는것을 확인하여 직접 값을 지정하니 이슈가 해결되었다.

 

 

 

반응형
저작자표시 비영리 변경금지

'Frontend > jQuery & JSTL' 카테고리의 다른 글

[JavaScript] 숫자 표현  (0) 2024.02.20
[JavaScript] 변수 선언 및 정의  (0) 2024.02.20
02/14 회고  (0) 2024.02.14
01/18 회고  (0) 2024.01.18
01/16 회고  (0) 2024.01.16

'Frontend/jQuery & JSTL' Related Articles

티스토리툴바