브라우터에서 공식 제공하는 브라우터 웹 서비스가 있습니다
http://brouter.de/brouter-web ( 크롬 O / 익스플로러 X )
여기는 주로 일반 도로 위주이고 산길은 빈약합니다.(오픈스트리트맵 기준)
github에 공개된 브라우터-웹 소스를 조금 만져서 우리 카페 지도와 별똥대님께서 제작하신 brouter 파일을 가지고
경로검색을 할 수 있도록 해보았습니다. 몇몇 웹지도를 이용하는 측면은 온라인이지만 우리카페 지도만 이용한다면
오프라인이라고 볼수 있습니다. 나는 다 귀찮다 하는 분은 맵포지,mbtile 지도 등은 제외하고 그냥 오픈스트리트맵 정도만
띄워놓고 루트를 작성하셔도 되겠습니다
작업을 위한 요구사항(준비물)은 아래와 같습니다.
1. 작동하는 웹 브라우저는 파이어폭스와 크롬 브라우저입니다. 익스플로러는 안됩니다.
2. 카페에서 공유한 우리나라 등산로의 brouter segments 파일 (.rd5)가 있어야 합니다
3. 배경지도로 사용할 벡터지도 (korea*.map, hk*.map, ajiandachi*.map) 혹은 MBtiles 지도
4. 맵포지 지도를 띄우기 위한 Mapsforge-server 소스
5. 브라우터 경로찾기와 기본 화면을 띄우기 위한 Brouter-web 서버 소스
작업순서는 다음과 같습니다.
1. Brouter-web 소스를 다운로드 받아 임의의 장소에 압축을 풀고 Brouter서버를 가동한다.
2. 벡터지도를 띄우기 위해 Mapsforge server 소스를 받아 임의의 장소에 압축을 풀고 서버를 가동한다.
3. 크롬(혹은 파이어폭스) 브라우저를 열고 브라우터 소스 폴더안의 index.html 파일을 끌어당겨 놓는다(드래그&드랍)
4. 원하는 배경 지도를 띄워놓고 경로작성을 한다
5. 작성된 경로의 gpx파일을 다운로드 받는다
1번부터 시작해보겠습니다
아래 첨부한 브라우터웹 소스를 다운 받아 임의 장소에 압축을 풀어놓고, segments4 폴더 안에 카페에서 공유받은
.rd5 파일들을 복사해 집어넣습니다. 카페에서 제공한 segments 파일은 산길만 있으므로 일반 도로 라우팅이 안됩니다
산길만 있는것이 더 좋은데 그 이유는 산길과 도로가 한꺼번에 들어있으면 산행 루트 작성이 아주 수고롭게 될 것입니다
도로 루트를 만드려는 분은 http://brouter.de/brouter/segments4/ 사이트로 들어가면 전세계 세그먼트 파일이 다 있습니다
여기서 4개 파일을 다운받아 segments4 폴더안에 집어넣으면 도로 라우팅이 됩니다.
단, 집어넣기 전에 카페 세그먼트 파일은 다른곳에 이동을 시켜둬야지, 덮어쓰기를 하면 안됩니다.
물론 http://brouter.de/brouter-web 사이트를 바로 이용해도 됩니다
※ 간혹 윈도우10에서 한글 계정 이름일때 mapsforge와 brouter 소스의 압축을 아무데나 풀어놓으면
작동이 안되는 경우가 있었습니다. C:\ 루트에 풀어 놓는 것이 가장 확실합니다.
<Brouter-7 폴더>
폴더안의 server.cmd 파일을 더블클릭해 브라우터 서버를 가동합니다. 브라우터 서버는 최단 경로를 계산해주는 서버입니다.
만일, 윈도우10에서 server.cmd 등 cmd 파일을 실행했을때 Microsoft Store에서 앱을 검색하시겠습니까? 라는 메세지가
나오면 '아니오'를 클릭하면 됩니다. 그래도 창이 안뜨고 실행이 안되는 것은 컴퓨터에 java가 설치가 안되어 있기 때문이므로
https://www.java.com/ko/ 사이트에 접속하여 무료 자바 다운로드를 클릭해 설치를 합니다
server.cmd를 실행하면 도스창이 뜨며 커서가 깜빡이면 작동이 되고 있는 것입니다. 이 창을 끄면 안됩니다
2번째. 벡터지도를 브라우저에 띄우기 위해 mapsforge 서버를 가동합니다. 아래 첨부한 파일을 다운받은후
임의 장소에 압축을 풀어놓습니다. 이 프로그램은 MOBAC 제작자가 만든것입니다
<MapsforgeSrv 0.6 폴더>
폴더 안의 start.cmd 를 더블클릭하여 mapsforge 서버를 가동해야 하는데, 그에 앞서
start.cmd 파일을 메모장 등의 편집기로 열어봅니다. 각 개인의 상황에 맞게 편집해서 써먹어야 하기 때문입니다
열어보면 아래와 같이 되어있습니다
java -Xmx256m -Xms256m -Xmn32m -jar MapsforgeSrv.jar F:\hk_04_16.map C:\san_X7f_beta_orux.xml
F:\hk_04_16.map 부분이 열고자 하는 벡터지도의 경로와 이름이며
C:\san_X7f_beta_orux.xml 부분이 이용하고자 하는 테마파일 입니다. 이 두 부분을 각 개인의 상황에 맞게
편집을 한 후 저장을 하고 start.cmd를 더블클릭해 실행을 시킵니다
(맵포지 서버는 한번에 하나만 실행할 수 있습니다. 다른 지도를 이용하려면 start.cmd 파일을 다시 편집 후 재 실행)
컴 사양이 좋으신 분은 Xmx, Xms 뒤의 숫자를 512, 1024, 2048등으로 키우셔도 됩니다
아무튼 작동을 하면 위와 같은 도스창이 뜨며, 서버가 가동됩니다. 이 창 또한 끄면 안됩니다
(위와 같은 창이 떠서 유지되지 않고 바로 죽어버린다면 맵과 테마의 궁합이 맞지 않거나
경로작성이 정확하지 않은 경우입니다. 테마를 다른것으로 이용해보세요. 테마는 오룩스용입니다)
여기서 궁합이 맞지 않는다는 말은 hk전용 테마를 가지고 korea지도를 열려고 한다거나 하는것을 말합니다
또한 최신지도에 구 테마를 사용하거나, 구지도에 최신테마를 사용할 경우 등.
브라우터에 쓰기 위해 테마를 조금 편집하였습니다. 등산로 색상, 굵기 정도밖에 모르겠네요. 테마는 각자
연구해보시길 바랍니다. 테마를 입맛대로 만들기가 너무 어렵네요. 등고선,도로 등...
실습에 사용한 편집한 테마 파일을 첨부합니다. 최신 등산로지도, 코리아맵은 안될 수 있습니다
(저는 아래 테마로 hk, korea, ajiandachi 모두 이용합니다)
san_X7f_beta_orux.xml
이제 브라우터 서버와 맵포지 서버가 가동 되었으므로, 크롬 브라우저를 연 뒤,
브라우터 소스 폴더 안의 index.html 파일을 드래그 드랍으로 브라우저 화면 위에 떨어뜨려줍니다
이 화면을 즐겨찾기에 추가해두고 다음부터 간편하게 이용하면 됩니다
(브라우터 서버와 맵포지 서버는 사용을 할때마다 가동을 시켜줘야 합니다. (두가지 서버의 start.cmd와 server.cmd 파일의
바로가기를 바탕화면에 폴더를 하나 만들어 넣어두고 이용하면 편리하겠죠)
처음에는 이와 같이 오픈스트리트맵 만이 나타날 것입니다. 지도를 적당히 확대/축소하여 관심 지역으로 이동 후...
우측 책 모양 아이콘을 누르면 지도 레이어를 선택하는 패널이 나옵니다. 원 소스에서 별로인 지도를 몇개 빼고
구글지도 세가지를 넣고, 맵포지 지도를 고정메뉴로 넣어두었습니다. 위의 실습에서는 hk지도를 이용해 서버를
가동시켰으므로 맵포지를 클릭하면 hk지도가 뜨게 됩니다. start.cmd 파일을 편집해 korea등 다른 지도로 바꾸고
서버를 재시작한 후 크롬 화면을 새로고침하면 korea 벡터지도가 뜨게 됩니다
아래쪽 Cycling 등은 임의로 임시로 만들어 넣은 오버레이 지도들입니다. 맨 아래 Custom layers를 클릭하면
사용자가 임의로 TMS 형식의 Base layer 혹은 overlay 레이어를 만들수가 있습니다
그러나 이것은 소스를 직접 고치는 것이 아니기 때문에 브라우저 캐시를 삭제하면 다 날아갑니다
여기서 잠깐 커스텀 레이어에 대해 설명을 합니다. +Custom layers 버튼을 누르면 아래와 같은 창이 뜨고,
위쪽라인은 만들 레이어 이름, 아래쪽 라인은 주소입니다
아래에 샘플을 보면 오프라인(자신의 pc)에서 돌아가는 맵포지와 MBtiles서버의 주소는 저런 형식이며
이 외에도 vworld나 기타 등등 .....
단. 레이어에 순서가 있어서 베이스 레이어가 불투명이면 오버레이가 투명(맵포지)가 되어야 하고,
오버레이끼리도 위쪽이 불투명 아래쪽이 투명 레이어가 되어야 중첩이 제대로 됩니다.
맵포지 지도를 투명 레이어로 이용하기 위해서는 위 그림에서 보다시피 transparent=true라는 옵션을 넣어야 합니다
개인적으로 레이어를 더 넣거나 여러가지로 편집하고싶으신 분은 brouter-7\dist 폴더 안의 brouter-web.js 파일을 편집하시면
되는데 상당히 눈이 아프므로 추천드리지는 않습니다. 그래도 자세히 보시면 다 길이 보입니다
위에서 하늘천따지...는 글자가 깨져서 집어넣은 것으로 의미없는 것입니다. 그리고 엠비티는 MBtiles 지도인데
첨부한 소스에는 없을것입니다. 엠비타일 서버는 차후 다른 글에서 설명토록 하겠습니다
* 맵포지 서버 주소 (커스텀 레이어를 만들때 사용)
http://localhost:8080/{z}/{x}/{y}.png?userScale=1.0&textScale=1.0&transparent=true
참고) 이 맵포지 타일서버 주소를 qgis나 gpxsee에서도 TMS 소스로 써먹을 수가 있습니다.
Qgis에서 XYZ레이어(TMS)로 맵포지 지도 (korea*.map) 를 불러온 모습
방법은 Tile Server(XYZ) 우클릭후 New Connection 추가 - 위의 맵포지 서버 주소를 복사해 넣어주면 됩니다
Qgis 2.18.25 기준. 3.x대 버전은 조금 다릅니다.
구글 위성지도와 hk 지도를 오버레이 한 것입니다
구글위성 - KOREA*.map 오버레이
(벡터 지도 2개를 중첩하면 벡터맵을 더 선명하게 볼 수 있습니다. 자신이 Custom layer로 만들어 넣어야 함)
- 커스텀 레이어를 추가하는 방법은 위에서 기술한 바 대로 brouter-web.js 파일을 편집하거나 +custom layers 버튼을
눌러서 작성.
커스텀 레이어 추가로 맵포지 2개를 중첩하면 더 선명하게 볼 수 있습니다
브라우터 본연의 기능으로 돌아와 좌측 도구중 연필모양을 클릭하고 시작점과 끝점을 클릭하면 경로가 계산되어 선이 그려집니다
그리기를 마치려면 다시 연필을 클릭하거나 키보드의 ESC키를 누르면 됩니다. 루트의 투명도는 좌측 세로 바를 움직이면
조절이 되며, 루트의 굵기나 색상 조절은 brouter-7\config.js 파일을 열어 아래 부분을 편집하면 됩니다
track: {
weight: 5, -- 내부선 굵기
color: 'magenta', -- 내부선 색상
opacity: BR.conf.defaultOpacity
},
trackCasing: {
weight: 9, -- 외부선 굵기
color: 'white', -- 외부선 색상
포인트를 삭제하려면 기 생성된 포인트를 한번 클릭하면 되며, 중간 경유지를 넣고싶으면 경로 선 위에 마우스를 가져가면
작은 원이 생기는데 이것을 끌어당겨 놓으면 됩니다. 연필 아래 금지모양 아이콘은 no-go-area로 이름 그대로 경유치 않기를 바라는 구역을 그리는 도구입니다.
하늘색 선이 최단거리이나 no-go-area 설정으로 그 부분을 우회하도록 루트가 그려집니다
no-go area를 지우려면 원을 한번 클릭 후 휴지통 모양이 나오면 클릭하면 됩니다.
no-go area는 원하는 대로 몇개든지 만들수가 있습니다
한번 클릭하면 중심에 위치조절점, 우측에 크기변경, 좌측에 지우기 버튼이 나옵니다
루트가 생성되면 우하단 산모양 아이콘을 클릭해 고도추이 그래프를 볼 수 있으며
상단 download 버튼을 눌러 생성된 루트를 gpx또는 kml 등의 파일로 다운받을 수 있습니다
(여기서 나타나는 고도값은 오프라인으로 (.rd5)파일에 내장되어 있는 고도값입니다.)
루트가 생성된 후 아래 고도프로필 그래프에서 특정 구간을 [클릭 드래그]해 영역을 지정하면
지도상에서 그 부분이 확대되어 나타납니다. 산행 계획시 참조를 하면 유용하겠습니다
그래프의 빈 곳을 클릭하면 루트의 전체 영역으로 되돌아갑니다
천왕봉~대청봉.
정확히 백두대간 길만 따라가지는 않습니다. 브라우터는 최단거리를 구하기 때문.
세부적인 루트의 작성은 사용자가 직접 경유지 조절점 이동과 no-go area를 적당히 이용해 조정하면 됩니다
루트가 이상하게 멀리 돌아가게 그려진다거나 하는 경우는 아주 미세하게라도 등산로가 끊어져 있는 부분입니다
mbtiles지도 띄우기는 Wtracks 관련글 (http://cafe.daum.net/androidgps/j6N8/255) 을 참조하시기 바랍니다