polygon을 지도위에 그리고 지도가 아닌 다른 div에 폴리곤만 가져와서 그릴려고 합니다. 폴리곤만 가져오는 것은 어떻게 하고 리사이즈는 어떻게 하면 될까요.
흐음… 쉽게 되지는 않을거 같은데요
가장 어려운 부분은
div에 넣을 폴리곤은 SVG를 사용하여 직접 만드셔야 한다는 데 있습니다.
위 부분이 문제 없다고 하시면
월드 좌표(위경도, 혹은 다른 좌표계)를 화면 좌표(픽셀)로 변환하여
적절히 viewport를 조절하는 정도로 타협을 볼 수 있겠네요.
변환관련 문서는 아래 링크로 남깁니다.
http://apis.map.daum.net/web/documentation/#MapProjection_containerPointFromCoords
http://apis.map.daum.net/web/sample/dragCustomOverlay/
추천하지 않는 방식입니다만 위 방식과는 다르게 접근도 가능합니다.
이미 지도에 그린 svg tag를 그대로 복사하여
그대로 div 안에 밀어넣는 방식입니다.
이건 위 보다 로직 자체는 간단하지만 주의하실 점은
- 그래픽스 엘리먼트(ex. < svg >, < vml > )에 직접 접근하는 API는 제공하지 않음
- ie8 이하 브라우저에서는 < svg >가 아닌 < vml >로 동작
- 내부 그래픽스 엘리먼트 구조는 언제든 바뀔 수 있다는 점
때문에 3번을 감수하시고 만드신다 하여도
지도에 그려진 폴리라인은 직접 DOM Search를 통해서 SVG를 뽑아내셔야 하며
ie8까지 대응해야 한다면 분기 처리를 하셔야 합니다.
1개의 좋아요