[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


댓글

댓글 쓰기

이 블로그의 인기 게시물

[Chrome] ERR_SSL_VERSION_OR_CIPHER_MISMATCH 이슈 원인 및 해결방법

이미지
증상  - 크롬을 이용해 SSL/TLS(https) 프로토콜 접속 시 아래와 같은 에러가 발생한다.  ERR_SSL_VERSION_OR_CIPHER_MISMATCH  지원되지 않는 프로토콜  클라이언트와 서버가 일반적인 SSL 프로토콜 버전 또는 암호화 제품군을 지원하지 않습니다. 원인 1. 서버(WAS)에서 낮은 버전의 SSL을 사용하는 경우 1004lucifer 2. 서버(WAS)에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리 할 수 없는경우   ( 링크 - Cipher Suites란 무엇일까? ) 해결방법 1. 서버가 낮은 버전의 프로토콜을 사용하는 경우   - 브라우저에서 낮은 버전의 프로토콜을 사용 가능하도록 옵션을 변경해 준다.   (크롬과 IE는 같은 인터넷 옵션을 사용한다.) 2. 서버에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리할 수 없는경우  1) IE, Edge, FireFox, Opera 등등 다른 브라우저를 사용해본다.   - 브라우저마다 처리할 수 있는 Cipher Suites 종류가 다르다. ( 상세내용링크 )   - 이것마저 안되면 브라우저 사용자가 더이상 할 수 있는건 없다. 1004lucifer  2) 서버관리자가 수정 할 수 있는 방법   - 최신 프로토콜(TLS)을 사용할 수 있도록 WAS를 업그레이드 하거나 설정한다.   - 대부분의 브라우저에서 지원하는 Cipher Suites를 사용하도록 셋팅한다. ( 상세내용링크 )
Read more »

[Regex] 정규표현식 특정 문자열 포함하지 않는 매칭 방법

이미지
특정 문자열이 들어있는 라인을 제외하고 어떻게 문자열을 추출할 수 있을까 하다가 알아보았다. 특정 문자열이 포함되지 않게 매칭하는 방법은 아래와 같다. 1004lucifer  ^((?!단어).)*$ https://regexr.com/4fsa8 복수개의 단어에 대해서 문자열을 제외하고 싶다면 다음과 같이 할 수 있다. 1004lucifer  ^((?!단어|단어).)*$ https://regexr.com/4fsan 1004lucifer 복수개의 단어가 동시에 없어야 한다면 다음과 같이 할 수 있다. (이 방법은 지난번 링크-정규표현식 AND 연산 사용방법  을 응용해 봤다.)  ^((?!(?=.*단어)(?=.*단어)).)*$  ^((?!(?=.*단어)(?=.*단어)(?=.*단어)(?=.*단어)).)*$ https://regexr.com/4fsb0 매칭되는 원리 1. negative lookahead 를 이용하면 해당 단어와 일치하지 않은 단어의 앞에있는 문자열이 매칭된다. 1004lucifer 2. 해당 매칭문자열에 점(.) 하나 붙여서 글자를 하나더 추가 매칭이 가능 3. 해당 문자열 앞에 단어 대신 시작(^)을 붙여서 해당 문자열로 시작되지 않는것만 매칭 4. 그룹화를 해서 해당 문자열 제외한 앞에까지 모두 매칭 5. 마지막까지 모두 매칭되면 추출 완료 정규식 참고  -  https://stackoverflow.com/questions/406230/regular-expression-to-match-a-line-that-doesnt-contain-a-word
Read more »

[CSS] 상속받은 상위 속성(style) 무효화(초기화) 하기

PS. 모든 상위속성을 무시하는 걸 원한다면 아래 링크의 라이브러리를 사용하기를 권장한다. - 10+ Best CSS Reset Stylesheets 많은 상황에서 상속받은 CSS에 대하여 depth를 이용하거나 CSS우선순위를 이용하여 덮어쓰기(!?) 하여 해결이 가능한것 같다. 하지만 다른 style을 적용하지 않고 부모 엘리먼트의 style 상속을 받지 않아야 하는 경우가 발생하여 알아보니 :not(selector) 라는 기능이 있었다. 1004lucifer 엄밀히 말하면 상속을 초기화(reset) 한다기 보다.. 부모 Element 에서 style 적용 시 특정 Element에 style이 적용되지 않도록 하는 기능이다. 예제 <div class="parent"> <span>aaaaaa</span>< br/> <p>aaaaaa</p>< br/> <span>aaaaaa</span>< br/> <span>aaaaaa</span> </div> .parent :not(p) { color:red; } 1004lucifer 아래와 같은 형식으로도 사용이 가능하니 의외로 활용성이 좀 있어 보인다. - div :not(.home) {…} - div *:not(p) em {…} - input:not([type="text"]) {…} - h2:not(.foo):not(.bar) {…} - li:not(.pingback) .comment-content p:first-child:first-line {…} - div:not(.home) h2 + p:first-letter {…} - .post:not(.f...
Read more »