반응형
1. 시험환경
˙ HTML
˙ JavaScript
˙ proj4.js
2. 목적
˙ CDN 방식으로 proj4.js 라이브러리를 연동설정한다.
˙ proj4()를 이용하여 UTM 좌표계와 wgs84 좌표계 간 상호 변환한다.
3. 적용
① 예제 코드를 실행한다.
- proj4.js 라이브러리 추가
- proj4()를 이용하여 utm과 wgs84 간 좌표변환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<title>좌표변환</title>
</head>
<body>
<h2>wgs84와 utm 간 변환</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.2/proj4.js"></script>
<script type="text/javascript">
utmX = 327791.876
utmY = 4153604.073
console.log(`utmX : ${utmX}, utmY: ${utmY}`);
wgsVal = proj4("+proj=utm +zone=52", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs", [utmX, utmY])
console.log(`lng : ${wgsVal[0]}, lat: ${wgsVal[1]}`);
utmVal = proj4("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs", "+proj=utm +zone=52", [wgsVal[0], wgsVal[1]])
console.log(`utmX : ${utmVal[0]}, utmY: ${utmVal[1]}`);
</script>
</body>
</html>
|
cs |
4. 결과
˙ 웹브라우저에서 콘솔로그(<F12>)를 확인하여 UTM과 WGS84 좌표계간 변환 결과를 비교한다.
※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※
반응형
'자바스크립트 가시화 라이브러리' 카테고리의 다른 글
| Cecium.js 라이브러리 초기 설정 (html, cdn) (0) | 2022.10.22 |
|---|---|
| [vis.js] 라이브러리 설치 및 샘플 실행 (0) | 2022.07.25 |
| JavaScript 이벤트 처리 코드 (0) | 2022.06.06 |
| [bootstrap] ESC 또는 클릭 시 Modal 닫힘 방지 (0) | 2021.12.10 |
| [jQuery] 테이블 내용 업데이트(삭제, 추가)하는 코드 (0) | 2021.11.08 |