문제 상황
네이버 지도 위의 폴리곤과 three.js 오브젝트를 겹쳐서 보여줘야 됐다.
네이버 지도에서는 zoom을 변경하거나 지도 크기가 변경되면 폴리곤 위치가 변경된다.
반면 2D object(three.js) 는 항상 가운데에 고정이었다.
그래서 싱크가 안맞았다.
이 둘을 항상 겹쳐서 보여줘야됐다.
또한 지도 사이즈를 변경할 때마다 네이버 지도 일부분이 transparent background처럼 나타났다. (체크 무늬)
접근
현재 2D object는 항상 고정된 위치(센터)에 보이고 있고, 이 상태에서 네이버 폴리곤을 중앙으로 옮기려했다.
싱크가 안맞는 순간에 지도 center를 가운데로 옮겨야지.
=> 지도 폴리곤 사이즈가 zoom에 따라 바뀌어야되는데 그대로였고, 위치가 이상했고 지도의 일부가 안 보였다.
(포토샵 transparent background처럼)
네이버 지도 문서에서 이벤트들을 계속 봤지만 해결하지 못했다.
거의 몇 달간 비슷한 방법으로 시도 하고 안 돼서 후순위에 둔 상태였다.
새로운 시도
지도는 zoom할 때 마우스가 어디 있는지에 따라 위치도 바뀌고 여러가지 복잡함?이 있었다. 그래서 지도는 그대로 두고 three.js 오브젝트를 옮기기로 했다.
현재 three.js에서 카메라는 scene에 있는 object의 boundary box 중심을 보고 있다.
처음 네이버 지도 중심과 object의 중심이 같은 상태인 점을 이용했다.
처음 네이버 지도(위경도좌표)의 center를 값을 갖고 있다가 변경이 발생하면
three.js 카메라의 position(tm좌표)와 orthoControl을 네이버지도 처음있던 중심으로 이동시켰더니 해결됐다.
그리고 지도 일부분이 transparent background처럼 나오는 부분을 해결해야됐는데 네이버 지도에 size가 변경 됨에 따라 조절해주는 함수가 있었다. autoResize()를 썼더니 해결됐다.
