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기반으로 열공중입니다만
샘플페이지가 링크가 되지 않네요 도움 요청 드려도 될까요 ^^?
좋아하기좋아하기
이제 연결될겁니다. 서버관리를 안하다보니 링크가 깨졌네요.
좋아하기좋아하기