Translate

[Leaflet] Non-geographical maps



지구가 아닌경우

 - 때때로 지도는 지구 표면의 사물을 나타내지 않으며 이와같이 지리적 위도/경도에 대한 개념이 없는 경우가 있는데, 대부분 게임지도와 같은 경우이다.

 - 이번 튜토리얼에서는 아래의 스타컨트롤2의 startmap 을 예제 지도이미지로 사용한다.


(클릭 시 예제에 사용된 원본 이미지 확인 가능하다.)



 - 이 게임은 코너에서 볼 수 있듯이 사각 좌표계가 내장되어 있어 좌표계를 수립할 수 있다.



CRS.Simple

 - CRS는 좌표 참조 시스템을 의미하며, 좌표 벡터에서 좌표가 무엇을 의미하는지 설명하기 위해 지리학자들이 사용하는 용어다.

 - 예를 들어, [15, 60]은 지구에서 위도 경도를 사용할 경우 인도양의 한 지점을 나타내며, 또는 태양계 Krueger-Z는 우리의 starmap에서 볼 수 있다.



CRS.Simple map의 일반적인 문제점

 - Leaflet CRS의 기본값은 CRS.Earth이며, 360도의 경도는 256가로픽셀과 매핑되고 약170도 위도는 256세로픽셀과 매핑된다.(결국 정사각형이며, 줌 레벨 0인경우에 해당된다.)

 - CRS에서 하나의 수평지도 단위는 하나의 수평픽셀에 매핑되며, 수직부분도 마찬가지다.

 - map의 전체 부분은 1000x1000 픽셀크기이며, 따라서 우리의 HTML 컨테이너에 들어맞지 않는다.

 - 다행히 minZoom 값을 0 이하로 설정할수 있다.


Pixels VS Map Units

 - 한가지 일반적인 실수가 있는데, CRS.Simple를 사용할 때 'map units'와 'image pixels'와 같다고 가정하는 것이다.

 - 이 경우에 지도는 1000x1000 단위(unit)를 커버하지만 이미지는 2315x2315픽셀이다.

 - 상황에따라 '1 pixel = 1 map unit' 또는 '64 pixel = 1 map unit' 또는 다른 방법이 요구될 수 있다.

 - 그리드의 map units에 맞춰서 레이어를 추가하는 식으로 생각해야 한다. (L.ImageOverlays, L.Markers 등등)

 - 사실 우리가 사용하고 있는 이미지는 1000개의 map units을 커버하고 있다. (상당한 여백이 있다.)

 - 0과 1000 사이에 몇개의 픽셀이 있는지 측정하고 추론하면 이 이미지에 대한 올바른 좌표 경계를 알 수 있다.


이 LatLng는 당신이 알고있는 그것이 아니다.

 - Sol의 좌표가 [175,145] 대신에 [145,175]로 되어있고, map center 또한 이렇게 되어있는것을 눈치 챘을 것이다.

 - CRS.Simple의 좌표는 [x,y] 대신에 [y,x]를 사용하고 있으며 Leaflet 또한 [lng,lat] 대신에 [lat,lng]를 사용하고 있다.

 - [lng,lat] or [lat,lng] or [y,x] or [x,y] 에 대한 논쟁은 새로운게 아니라 명확히 합의된게 없다.

 - 또한 Leaflet의 L.Coordinate 이름 대신 L.LatLng 라는 클래스명을 사용한 것에 대해서도 합의가 부족하다.

 - L.LatLng 라는 이름으로 [y,x] 좌표로 작업하는게 그다지 이해되지 않는다면 쉽게 래퍼를 만들어 사용할 수 있다.



참고: https://leafletjs.com/examples/crs-simple/crs-simple.html


댓글