[OL]다음지도(카카오맵) 및 국토지리정보원 바로e맵 중첩과 회전하기
* 아래 기능별 사용방법은 유튜브 동영상을 참조하세요. (구독자등록해주시면 더좋아요^^)
https://www.youtube.com/srhong007/
* OL-FirstGIS/Professional Version 2020"
데모실행 : http://www.gisapplication.kr/OL/FGIS/
OpenLayers 응용개발로 Education을 처음 게시글로 작성할때부터 네이버와 다음, 브이월드 등을 배경지도로 중첩하는것부터 시작하였습니다. (처음엔 html/JavaScript 코딩이 짜증났다, 지금은 적응중이다. 그래도 개발환경IDE는 원시적이고 비효율적이라 생각한다...) 어느덧 OpenLayers API 훑어보기가 1차적으로 끝내고 "[OpenLayers] OL-FGIS/Pro 2020 상용버전 프로토타입버전이 완료되었습니다." 을 작성하였습니다.
그래서 첫 주제인 "타 좌표계인 배경지도 타일맵 중첩하기"를 다시 보완해보았습니다.기존 소스에서는 타일 이미지의 좌표변환과 곡률로 인한 타일크기와 회전으로 처리하였으나, 본글에서는 지도회전시 "타일맵 회전"을 반영였습니다.
✪ 타 좌표계인 배경지도 타일맵 중첩하기가 왜 필요한가?
- 일부 및 특정지역에 대한 해상도와 최신성, DMZ/주요시설 부근을 모자이크처리 등 상이하므로
타 포털지도 중첩 비교 필요. 한/영/중/일 언어별 및 특정 테마 지도 중첩
- 동일 화면상의 변화없이 현 좌표계에서 브이월드/구글 /다음/네이버지도/바로e맵 등 중첩 토글로 편리성 필요
✪ 무엇을 어떻게 중첩하나?
- 그동안 네이버는 구글/브이월드 등 처럼 좌표계를 변경하여 서비스중입니다.
(참조 글 : [OpenLayers] 새로운 네이버지도 중첩하기 및 항공뷰 보기)
- 다음지도(카카오맵)는 선명한 항공사진이 최대 장점이라서 많은 선호도가 있습니다. 다음지도앱을 직접 보는것을
권고하지만 온라인상에서 현재 프로그램과 중첩해서 보는것을 요구하게 됩니다.
(참조 글 : [OpenLayers] 다음지도/네이버지도 중첩하기 개선2)
- 국토지리정보원 국토정보플랫폼 바로e맵의 최대 장점은 국가가 보유한 지도를 볼수있고(브이월드는 API와 데이터
제공이 많으며, 국가 지도를 보는데 동일한 장범 제공) 무엇보다 영/중/일어 등 배경지도를 서비스하고 있습니다.
물론 구글과 타 포털 서비스에서도 했었고 하고 있는중이기도 합니다. 검색사이트에서는 폐쇄도 했구요ㅠㅠ.
(참조 글 : [OpenLayers] 국토지리정보원 국토정보플랫폼 바로e맵 중첩하기)
- 각 글에서 소스를 보시면 각각의 우리나라 직각 좌표계의 타일로된 이미지를 좌표변환과 곡률로 인한 타일크기와
회전으로 처리하여 "ol.layer.Image/ol.source.ImageCanvas"을 사용하여 중첩하였습니다.
✪ 메인지도회전시 무엇이 문제였나?
- "ol.source.ImageCanvas"를 사용하여 조각조각의 타일 이미지를 붙이다보니 화면좌표가 필요합니다.
- OpenLayers의 API중 "getPixelFromCoordinate"으로 위치좌표에 해당되는 화면 픽셀 좌표를 얻을 수있습니다.
- 문제는 메인지도회전 후 아래 그림처럼 실제 화면에 보여지는 지도 영역(적색)의 화면좌표를 반환하는 것입니다.
- 메인지도가 회전하지 않았을 경우에는 적색 영역처럼 실 화면좌표도 최대/최소 영역(MBR)도 동일합니다.
- 지도회전을 한경우 타일 이미지를 붙여야하는 Canvas의영역은 청색이 됩니다. 타일지도를 붙여야하는 회전된 MBR
은 녹색으로 시작과 끝지점을 계산하여야합니다.
- 따라서 회전한 좌표를 구하려면, 실제 지도좌표의 회전한 가상의 지도좌표를 구한후 "getPixelFromCoordinate"으로
표시할 화면좌표계를 구하는 방식으로 하게되었습니다.
- 회전한 가상의 지도 좌표를 구하는 수식은 아래의 기본적인 삼각함수로 특정지점S를 기준으로 회전한 점을 구하는
수식이였습니다. GIS는 그냥 삼각함수만 잘쓰면 거의 해결^^
따라서, 기존 중첩소스에서 "getPixelFromCoordinate"사용전에 아래 "GetRotationXY" 전처리하면 됩니다.
(정리한 소스는 원문 "https://cafe.naver.com/gisapplication/1066
원문에만 게시합니다)
function GetRotationXY(_map_angle, _mapPoint){ if(_map_angle != 0){ var cosR = Math.cos(_map_angle); var sinR = Math.sin(_map_angle); var map_Center = map.getView().getCenter(); var new_XX = (_mapPoint[0]-map_Center[0]) * cosR - (_mapPoint[1]-map_Center[1]) * sinR; var new_YY = (_mapPoint[0]-map_Center[0]) * sinR + (_mapPoint[1]-map_Center[1]) * cosR; return [new_XX + map_Center[0], new_YY + map_Center[1]]; } return _mapPoint; } |
✪ 메인지도 회전시 타좌표계 타일맵(다음지도 및 바로e맵) 적용 화면
✪ 주요소스
✪ 추가적 네이버는 좌표계뿐만아니라 사용방안도 오픈마인드로 변화했습니다.
네이버 클라우드 플랫폼에서 제공하는 인프라/솔루션 상품을 이용할 수 있도록 지원하는 응용 프로그램 인터페이스(Application Programming Interface, API) 제공하고 있습니다. 본 페이지에서는 NAVER CLOUD PLATFORM API 대한 간략한 설명 및 API 호출하는 방법을 제공합니다. Tile Map API는 다양한 지도 이미지 타일을 제공하는 REST API입니다. 일반 지도, 위성 지도, 지형도와 같은 지도 유형뿐 아니라 대중교통, 자전거 도로, 실시간 교통 정보 등의 세부 정보를 포함한 지도를 이미지 타일로 제공합니다. Tile Map API는 다음과 같은 특징을 제공합니다. - 이미지의 해상도를 지정할 수 있습니다. - SDK에서 제공하지 않는 다양한 조합의 지도를 요청할 수 있습니다. - 다양한 경로로 입수한 데이터와 쉽게 매시업할 수 있어 지도를 좀 더 전문적으로 응용할 수 있습니다. - OpenLayers, QGIS, ArcGIS, Mapbox 등 다양한 GIS 도구에서 통합 및 응용할 수 있습니다.
* 출처 : https://apidocs.ncloud.com/ko/ai-naver/maps_tile_map/raster/ |