-
복습일지 대신 프로젝트일지 02개발일지 2021. 9. 14. 16:31
그동안 계속 네이버 Direction 5 (길찾기) 로 삽질만 하느랴 큰 활동이 없었다.
새롭게 알게된게 있다면
Direction 5는 어렵고 http도 어렵다는 것과
include 사용법 / Direction 5를 살짝 사용한 경로 표시 방법이 있다.
include는 다른 html에 있는 페이지를 불러오는 것으로, 스크립트 항목이 main에 선언되어 있다면 불러와지는 대상 sub는 스크립트가 없어도 구동이 가능하다(?) 고 이해하고있다. 일단은
자세한 사용 방법은 아래 문장들을 스크립트로 가져오고 (한글로 적은 부분들은 내가 이해하기 위해 공부한 흔적)
<script> /* 다른 모든 html (로컬html)에서 사용할 js를 여기에 모아주면 된다. 중복되지않게 주의! */ /* include 기본 실행 함수 */ function includeHTML() { var z, i, elmnt, file, xhttp; /* Loop through a collection of all HTML elements: */ z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; /* search for elements with a certain atrribute */ /* "page" 는 임의로 변경하여 사용 가능 body의 div와 맞춰주면됨 body 참고 */ file = elmnt.getAttribute("page"); if (file) { /* Make an HTTP request using the attribute value as the file name: */ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} /*연결 html 없을 때 출력문구*/ if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /* Remove the attribute, and call this function once more: */ elmnt.removeAttribute("page"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /* Exit the function: */ return; } } } </script>인클루드 함수를 정의하고
<body> {# 연결할 html 이름 #} <div page ="index.html"></div> <script> includeHTML(); </script> </body>body에서 다음과 같이 불러와서 해당 페이지를 붙여넣을 수 있다.
강의를 통한 이해가 아닌 경험을 통한 야메 학습이다 보니 응용도 어렵고 아쉽다.. 기회가 된다면 스파르타에서 다른 유료강의도 찾아봐야겠숴
Direction5는 진짜 매우 어려월..,, 하지만 집념의 킹리치카는 결국 해내고야 맙니다. 매일 쓰는 개발일지 하단에도 항상 지도 API연구가 적혀있을 정도로 긴 시간을 Direction을 이해하는데 사용했다.
우선 이해했던 것은
1. http에서 api 불러오기
2. 파라미터를 이용해 원하는 값 출력하기
할 수 없었던 것은
1. html에서 파라미터값을 http로 넘기기
팀에서 생각했던 결과물은
출발지와 도착지를 입력받고, 해당 데이터를 좌표로 변환(Geocode) -> direction5을 통해 길찾기 좌표 리스트를 반환 받아서 맵에 출력(아마도 polypath를 이용해서) 하는 것을 원했지만
결정적으로 html에서 http로 값을 주고받는 방법을 몰라 완성할 수 없었다.
중간에 꽤 많은 과정이 있었지만 각설하고 결과만 적으면 여러가지 꼼수를 부려서 방법을 찾아냈다.
우선 출발.도착지 검색을 대한민국 주요 고속도로에 path를 그리고 하이라이트 하는 방법으로 축소하였다.
당연히 고속도로 DB를 만드는건 수동,,이지만 그럴 듯 한 결과물이 나올 수 있을 것 같다.
일단, 고속도로를 따라가는 path의 좌표 데이터가 필요한데, 출발지와 도착지(고속도로의 시작과 종료) 좌표를 구글지도나 geocode를 통해 알아와서 direction5에 집어넣어서 고속도로를 따라 그리는 좌표를 가져온다.
Direction이 반환하는 좌표도 매우 더러운데
이런식으로 생긴 좌표를 몇천개씩 반환해준다. 후...지쟈스.. 심지어 lat,lng 값도 익숙한 모양새와는 반대로 출력 해준다.
geocode도 좌표를 저런식으로 줘서 방법만 안다면 direction에 집어넣는데에는 문제없을 것 같다.
네이버에 문의했더니 내부적으로 뒤집어주는 방법은 없으니 알아서 가공해서 쓰란다 껄껄..
근데 생각해보니 그냥 lat lng 주고 골라서 호출하면 되겠더라.
그렇다면 이걸 전처리 후 csv로 만들어서 Robo 3T에 넣어 DB화 하면 된다는 건데,,
우선 통째로 메모장으로 복붙한 다음 파이썬에서 전처리 함수를 만들어서 정리하였다.
필요없는 부분은 잘라내고 좌표값만 쭉 입력되어 있는 메모장을 아래 만들어둔 파이썬으로 돌린다.
다시 생각해도 신의 한수였음 나중에 팀원이 사용할 상황을 대비해서 사용방법도 나름 적어뒀다.
작성하면서 신경쓴것-> 공백제거와 X,Y좌표의 반전 CSV 저장 용이성을 위한 좌표사이 , 추가
#import re # 사용방법 # 1. 구글 지도 등을 이용하여 출발지/도착지의 좌표를 알아옵니다. # 2. direction http를 사용해서 경로 좌표를 따옵니다. # 3. 경로좌표만 메모장에 붙여넣습니다. [좌표,좌표],[좌표,좌표],[...],... 형태일거임 # 4. 좌표메이커 폴더에 메모장을 넣고 아래 file에 파일명을 넣어서 open 합니다. # 5. 잘 읽혀왔는지 아래 주석처리된 print(list_file)를 활성화해서 확인합니다. # 6. 문제없다면 for문 속 print를 활성화 해서 정리된 좌표를 따옵니다. -> 메모장에 붙여넣기 # 7. 좌표를 붙여넣은 메모장을 csv로 저장합니다. # 8. csv 파일을 열어 편집합니다. ctrl+h > {' 바꾸기 / '} 바꾸기ㅎ를 이용해 특수문자를 제거한다. # 9. json 형태로 바꿔서 robo3t에 입력 file = open("평택제천고속path.txt", "r") list_file=file.readlines() list_file = [line.split() for line in list_file] #print(list_file) print('-------------------------------------------------------------------------------------') i = 1 j = 2 for to in list_file: i= i+4 j= j+4 print(list_file[j],',',list_file[i])돌리면 아래와 같이 출력됨 껄껄
이 파일을 CSV로 가지고오면 필요없는 특수문자가 좀 남아있는데 [' 이거나 '] 이것.. 파이썬에서 re를 통해 걸러주려고 했지만 잘 안되는 것 같아서 단순하게 가기로 했다.
csv로 열린 엑셀에서 ctrl+h 해서 [' ']을 전부 공백으로 바꿔주면 된다. -간단-
요렇게 해서 상단에 lat lng 행만 추가하면 DB 완성!
완성된 DB는 Robo 3T에 넣고, 작성 중인 웹에 불러와서 Naver polypath에 push한다.
<!-- 길그리기 기본 --> let polyline = new naver.maps.Polyline({ map: map, path: [] }); /* polyline의 path를 가져오는 방법 */ let path = polyline.getPath(); function fast01() { $.ajax({ type: "GET", url: "/main", data: {}, success: function (response) { let latlng = response["latlng_all"]; for (let i = 0; i < latlng.length; i++) { /* 좌표 최적화 */ if(i%4 != 0){ continue; }else{ let lat = latlng[i]['lat'] let lng = latlng[i]['lng'] /* 좌표를 받아서 path에 push */ path.push(new naver.maps.LatLng(lat,lng),) console.log(lat,lng) } } } }) };Direction을 이용해 가져온 경로 좌표들은 3~4천개가 될 정도로 매우많아 날것으로 경로그리기에 집어넣으면 응답시간이 매우 오래 걸린다. 위에 내가 사용한 것 처럼 4배수로 나누는 등의 방법을 사용하면 원할하게 사용할 수 있다!
위의 최적화 방법은 튜터님이 도움을 주셨는데, 어떻게 튜터님이 말만하셨는데 내가 저걸 만들어낸건지도 신기..
역시... 일단 적어보면.. 되나 봄...?
찢었다 크..
길찾기와 마커를 동시에 적용한 화면
'개발일지' 카테고리의 다른 글
복습일지 대신 프로젝트일지 03(마지막!) (0) 2021.09.27 로딩중... (0) 2021.09.16 복습일지 대신 프로젝트일지 01 (0) 2021.09.08 복습일지 04 (0) 2021.09.05 복습일지 03.5 (0) 2021.09.05