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
  1. 작성하신 자료 잘보았습니다. 혹시 셈플페이지 확인이 가능할까요?

    좋아요

    응답

    1. 본문에 링크 있습니다

      좋아요

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

    좋아요

    응답

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

    좋아요

    응답

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

    좋아요

    응답

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

      좋아요

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

    좋아요

    응답

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

      좋아요

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: