OpenLayers 3에서 Daum Map 사용하기

지도 개발시 Google 지도도 만들고 Daum 지도도 만드는 등 다양한 요구가 있을 경우, OL3 하나만 개발하면 Overlay 시켜 개발공수를 절약할 수 있다는 장점이 있다. 유지보수도 편해진다.

Daum Map을 개발하는 것도 동일하다.
앞에 OpenLayers 3에서 Google Map 사용하기’ 글에서 소개한 바와 같은 방법으로 작업하면 된다.

작업 요령

  • HTML 상에 지도가 올라갈 div 객체 두개를 겹쳐 쌓는다
  • OL3를 바탕지도 없이 생성
  • Daum Map을 콘트롤 없이 생성
  • OL3 지도의 이벤트를 Daum Map의 setCenter와 setLevel에 연결시킨다

주요 코드는 다음과 같다.

<div id="printableArea" style="width: 100%; height: 90%; margin: 0; padding:0; position:relative;">
<div id="map-daum" style="position: absolute; left:0px; top:0px; z-index: 1; width: 100%; height: 100%; margin: 0; padding:0;"></div>
<div id="map-main" style="position: absolute; left:0px; top:0px; z-index: 2; width: 100%; height: 100%; margin: 0; padding:0;"></div>
</div>


// 거의 모든 controller들을 비활성화 시킨다
var mapDaum = new daum.maps.Map(document.getElementById('map-daum'), {
    center: new daum.maps.LatLng( centerWGS84[1], centerWGS84[0] ),
    level: 20 - zoomDefault,
    draggable: false,
    scrollwheel: false,
    disableDoubleClick: true,
    disableDoubleClickZoom: true,
    tileAnimation: false,
    speed: 0	// '지도 이동 속도'라는데 뭔지 모르겠다
});

// OL3에서는 'EPSG:3857'을 사용하므로 좌표 변환이 필요함
viewMain.on('change:center', function() {
    var center = ol.proj.transform( viewMain.getCenter(), srsName, 'EPSG:4326');
    mapDaum.setCenter(new daum.maps.LatLng( center[1], center[0] ));
});

// 다음 지도는 Zoom 규격이 특이하다. 20으로부터 빼야 OL3와 맞음
viewMain.on('change:resolution', function() {
    mapDaum.setLevel( 20 - viewMain.getZoom() );
});

샘플페이지를 작성해 보았다. ==> Daum Map

  • 캡쳐화면
    olle-road-map-cource01_daum

댓글 15개

  1. BHS 댓글:

    작성하신 자료 잘보았습니다. 혹시 셈플페이지 확인이 가능할까요?

    좋아요

    1. 토니아빠 댓글:

      본문에 링크 있습니다

      좋아요

  2. KHS 댓글:

    제가 찾던 자료네요.. 샘플페이지 링크가 안되네요 혹시 샘플페이지 보내주실수 있을까요?

    좋아요

  3. 김민식 댓글:

    저도 샘플페이지좀 보내주실수 있을까요?

    좋아요

  4. 준우아빠 댓글:

    안녕하세요! ol3 에서 daum 맵이 어떻게 작동하는지 본문에 샘플페이지를 작성해 주셨는데 링크가 깨져있네요. 가능하시면 샘플페이지 메일로 부탁드립니다..

    좋아요

    1. 준우아빠 댓글:

      제메일 주소는 8iseoii@naver.com 입니다.

      좋아요

  5. SEONGNM 댓글:

    좋은글 잘봤습니다.
    아직 지식이 부족해서 만드는데 조금 애먹긴 했지만 덕분에 많이 배우고 갑니다.

    좋아요

    1. 토니아빠 댓글:

      예, 응원합니다. 힘내세요!

      좋아요

  6. 공학도 댓글:

    링크가 깨져 있습니다. 혹시 링크를 복원시켜주실 수 있으신가요? 초보라 잘 안되어서. 혹시 링크 복원이 힘드시면 샘플예제라도 받아 보고 싶습니다. alfaro@empas.com 감사합니다.

    좋아요

  7. gis 댓글:

    좋은 글 잘 봤습니다. 따라서 해보니 잘 안되네요. 샘플페이지 링크가 깨졌던데 샘플 좀 보내주실수 있으세요?

    좋아요

  8. 채군 댓글:

    원본출처가 여기였나보군여 따른곳에서 도 비슷하게 네이버 다음지도를 구현한 것 을 확인했거든요.
    많은 도움되었습니다.

    좋아요

  9. 신대섭 댓글:

    샘플페이지 받고 싶습니다.ㅜㅠㅠㅠ
    weotjqw@naver.com 보내주시면 감사하겠습니다…

    좋아요

  10. 김김 댓글:

    안녕하세요 토니아빠님.
    제가 다음 오픈레이어스 겹쳐쓰기 해보고싶은기능이어서 검색하던중에
    써주신 글 발견하고 공부해보려고 했는데
    샘플페이지가 안들어가져서요ㅠㅠㅠ
    혹시 메일로 샘플 부탁드려도될까요?

    chuppachoops@naver.com 감사합니다.

    좋아요

  11. jetshin 댓글:

    안녕하세요. 딱 필요한 부분인데 샘플 페이지가링크가 깨졌네요 메일로 받아 볼 수 있을까요?
    jetshin@naver.com 여기로 부탁드립니다.

    좋아요

  12. 신형 댓글:

    안녕하세요!
    저도 웹 서치중 토니아빠님의 글을 발견하여 큰 도움이 될것 같아 샘플페이지 요청드립니다!
    jetshin@naver.com으로 부탁드립니다.!
    감사합니다!

    좋아요

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중