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만으로 태그 확인이 가능하다.