Jump to content

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


Maps 관리자

Recommended Posts

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

 

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() 메서드를 통해 변경할 수 있습니다.

 

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

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

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

 

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

 

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

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

 

< 참고 자료>

링크 복사
다른 사이트에 공유하기

게시글 및 댓글을 작성하려면 로그인 해주세요.



로그인
×
×
  • Create New...