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; } });
모바일 환경에서 접속할 경우 “Mobile”이라는 alter가 뜨고
선택자 click으로 마커의 태그를 확인할 수 있게된다.
데스크탑 환경에서는 alter 없이 마우스의 Pointer Hover만으로 태그 확인이 가능하다.
궁금한게 있는데요..
얼마전에 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 를 적용한 방법에 대해 도움을 주실 수 없을까 해서 글을 남겨 봅니다.
좋아요좋아요
와 멋지십니다 OL3기반으로 열공중입니다만
샘플페이지가 링크가 되지 않네요 도움 요청 드려도 될까요 ^^?
좋아요좋아요
이제 연결될겁니다. 서버관리를 안하다보니 링크가 깨졌네요.
좋아요좋아요