Maps API로 만든 도면 뷰어 구현 방법

[Maps 관리자]

도면 뷰어를 구현하기 위해 사전 이미지를 타일링하여 웹 서버에 업로드된 상태여야 합니다.

 

Web Dynamic Map 에서 제공하는 "NAVER 그린팩토리 지도 유형"의 경우 0~4 사이의 축소, 확대 정도를 표현할 수 있다. 타일 한 장의 크기는 256픽셀 x 256픽셀로 구성된 예제 입니다.

줌 레벨 기준으로 'ImageMapType' 내 'tileSet' 값을 참조하여 서버에 이미지를 요청이 필요하여 아래처럼 이미지셋이 준비 되어야 합니다.

• Zoom Level 0 일때 전체 이미지 1개(256x256)
• Zoom Level 1 일때 2^2=4 타일링된 이미지 4개(각 이미지 사이즈 256x256)
• 타일좌표계 zyx 기준 : 1/0/0, 1/0,1, 1/1/0, 1/1/1

 

하나의 지도에서 여러 지도 유형을 사용할 수 있기 때문에, mapTypes 속성에 하나 이상의 지도 유형이 정의된 MapTypeRegistry 객체를 할당하고, mapTypeId 속성으로 어떤 지도 유형을 활성화할지 정의가 필요합니다.

이때, 지도 유형 변경이 필요한 경우 mapTypeControl() 메서드를 통해 변경할 수 있습니다.

• naver.maps.MapTypeRegistry : https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapTypeRegistry.html
• naver.maps. MapTypeControl : https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapTypeControl.html

 

타일의 경우 /tiles/gf-1f/{z}/{x}-{y}.png 형식의 URL로 호출할 수 있으며, tileSet 내 url 정보에 {x}, {y}, {z} 표현식으로 넣으면 내부에서 치환하여 호출하게 되므로 http://navermaps.github.io/{z}/{x}/{y} 형태로 입력이 필요합니다.

줌 레벨 0 일 때는 타일 0/0/0 좌표 이미지를 호출합니다. 

•  https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/0/0-0.png

줌 레벨 1 일 때는 타일 1/1/0, 1/1/1, 1/0/1, 1/0/0 좌표 이미지를 호출합니다.

•  https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/1-0.png
•  https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/1-1.png
•  https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/0-0.png
•  https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/0-0.png

 

동적으로 `tileSet` 을 변경하고 싶으신 경우, 'ImageMapType' 내 'setMapTypeOptions' 함수 호출로 변경 가능하며, 변경 이 완료된 후엔 Map 객체의 refresh() 메서드를 호출하여 지도를 새로 고침이 필요합니다.

• https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html
• https://navermaps.github.io/maps.js.ncp/docs/naver.maps.ImageMapType.html#setMapTypeOptions__anchor

 

더불어, 지도 유형의 타일은 왜곡이 없는 일반 이미지인 경우 투영을 정의할 때는 단순히 '내가 사용할 좌표의 범위'를 정의하면 됩니다.

fromCoordToPoint() 메서드에는 내가 사용할 좌표가 정규화된 평면 지리 좌표의 범위인 0~1 사이의 값으로 변환되도록 지정이 필요하며, 이와 반대의 경우 fromPointToCoord() 메서드를 이용하실 수 있습니다.

• https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapSystemProjection.html#fromCoordToPoint__ancho
• https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapSystemProjection.html#fromPointToCoord__anchor

 

< 참고 자료>

• NAVER 그린팩토리 지도 유형 예제 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-8-maptypes-greenfactory.example.html
• 이미지 타일 지도 유형 예제 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-maptypes-imagemaptype.example.html
• 네이버 지도 JavaScript API 완벽 가이드 : https://d2.naver.com/helloworld/9121395
• Tiled web map : https://en.wikipedia.org/wiki/Tiled_web_map