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

댓글 3개

  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기반으로 열공중입니다만
    샘플페이지가 링크가 되지 않네요 도움 요청 드려도 될까요 ^^?

    좋아요

댓글 남기기

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

WordPress.com 로고

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

Google photo

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중