Mobile 체크하여 OL3 선택도구 변경하기

OL3(OpenLayers 3)에서 ol.interaction.Select는 강력한 도구다.
별다른 코드를 넣지 않고도 선택시 스타일 변화와 함께 select 이벤트를 제공한다.

OL3 선택도구에는 아래의 종류가 있다.

  • Mouse – Pointer Hover
  • Mouse – Click
  • Mouse – Drag Box
  • Mouse – Draw Circle or Polygon

사용상의 편의로 PC/Desktop 환경에서는 ‘Pointer Hover’를, Mobile 환경에서는 ‘Click’을 선택도구로 주로 사용한다.

우선 Javascript에서 Mobile 환경 체크 방법은 이렇다.
** 코드 참고:
Detecting a mobile browser
모바일 기기용 개발


var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

이를 이용해 선택자(ol.interaction.Select)를 정의한다.
** 옵션 condition에 대한 설명은 OL3 API 가이드를 참고


var selectPointer;
//Mobile 환경에서는 선택자를 'Click'으로
if( isMobile.any() ){
    alert('Mobile');
    selectPointer = new ol.interaction.Select({
        condition: ol.events.condition.singleClick
    });
}
//PC 환경에서는 선택자를 'Hover'로
else{
    selectPointer = new ol.interaction.Select({
        condition: ol.events.condition.pointerMove
    });
}
mapMain.addInteraction(selectPointer);

// HTML의 info 영역에 관련 정보를 표시한다
var infoSelect = document.getElementById('info');
selectPointer.on('select', function( e ){

    infoSelect.innerHTML = ' ';

    var selectedFeatures = e.selected;  //   e.target.getFeatures();
    if( selectedFeatures.length === 0 ){
        overlayHint.setPosition( undefined );   // hide hint
        return;
    }

    var feature = selectedFeatures[0];
    var dispText = feature.get('name');
    if( typeof dispText !== 'undefined' ){
        var lonlat = feature.getGeometry().getCoordinates();
        var element = overlayHint.getElement();

        element.setAttribute('data-hint', dispText);
        overlayHint.setPosition( lonlat );      // show hint
        infoSelect.innerHTML = dispText;
    }

});

샘플페이지(바탕지도:VWorld-BaseMap)

모바일 환경에서 접속할 경우 “Mobile”이라는 alter가 뜨고
선택자 click으로 마커의 태그를 확인할 수 있게된다.
데스크탑 환경에서는 alter 없이 마우스의 Pointer Hover만으로 태그 확인이 가능하다.

  1. 궁금한게 있는데요..
    얼마전에 leaflet 에다가 vworld(api key 필요없는 평범한 지도)는 올려보았는데요.. 이번에는
    openlayers 에다가도 vworld 지도를 올려보고 싶은데.. 잘 안되서요..

    http://openlayers.org/en/latest/examples/xyz.html
    이 코드랑, leaflet 에서 사용하던 방식이랑 비슷해서 주소 들어가는 곳에
    ‘http://xdworld.vworld.kr:8080/2d/Base/201411/{z}/{x}/{y}.png’
    이렇게 넣어보았는데.. openlayers 껍데기는 나오는데 지도가 나오질 않아서요..

    혹시 vworld 를 적용한 방법에 대해 도움을 주실 수 없을까 해서 글을 남겨 봅니다.

    좋아하기

    응답

  2. 와 멋지십니다 OL3기반으로 열공중입니다만
    샘플페이지가 링크가 되지 않네요 도움 요청 드려도 될까요 ^^?

    좋아하기

    응답

    1. 이제 연결될겁니다. 서버관리를 안하다보니 링크가 깨졌네요.

      좋아하기

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중

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