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

    좋아요

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

    좋아요

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

    좋아요

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

    좋아요

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

    chuppachoops@naver.com 감사합니다.

    좋아요

jetshin 에 답글 남기기 응답 취소

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

WordPress.com 로고

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

Google photo

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중