|
- 지도 회전 이벤트 : 컨트롤바 방향 이미지 회전 map.getView().on('change:rotation', function(evt){ var e = document.getElementById("main_naviCompassDirection"); if(e){e.style.transform = "rotate(" + (map.getView().getRotation() * 180 / Math.PI) + "deg)"}; }); - 컨트롤바 드래그 이벤트 처리 function draggable_init(){ $('#main_draggable').draggable({ handle: '#main_drag', containment: '#map-content' }); $('#main_naviCompassDirection').draggable({ handle: '#main_rotate', opacity: 0.001, helper: 'clone', drag: function(event) { var pw = document.getElementById('main_naviCompassDirection'), pwBox = pw.getBoundingClientRect(), center_x = (pwBox.left + pwBox.right) / 2, center_y = (pwBox.top + pwBox.bottom) / 2, mouse_x = event.pageX, mouse_y = event.pageY, radians = Math.atan2(mouse_x - center_x, mouse_y - center_y), degree = Math.round(-radians * (180 / Math.PI)) + 180; radians = degree*Math.PI/180; map.getView().setRotation(radians); var e = document.getElementById("main_naviCompassDirection"); if(e){e.style.transform = "rotate(" + degree + "deg)"}; } }); } - 지도이동버튼(상하좌우/대각선 8방향 이동) 이벤트 function mapMove_Mode(_mode){ var map_Center = map.getView().getCenter(); var map_Size = map.getSize(); var _DiffXY = map.getCoordinateFromPixel([map_Size[0]*3/4, map_Size[1]*3/4]); _DiffXY = [Math.abs(_DiffXY[0]-map_Center[0]), Math.abs(_DiffXY[1]-map_Center[1])]; switch (_mode){ case 'up': map_Center[1] += _DiffXY[1]; break; case 'up_right': map_Center[0] += _DiffXY[0]; map_Center[1] += _DiffXY[1]; break; case 'right': map_Center[0] += _DiffXY[0]; break; case 'down_right': map_Center[0] += _DiffXY[0]; map_Center[1] -= _DiffXY[1]; break; case 'down': map_Center[1] -= _DiffXY[1]; break; case 'down_left': map_Center[0] -= _DiffXY[0]; map_Center[1] -= _DiffXY[1]; break; case 'left': map_Center[0] -= _DiffXY[0]; break; case 'up_left': map_Center[0] -= _DiffXY[0]; map_Center[1] += _DiffXY[1]; break; } //map.getView().setCenter(map_Center); map.getView().animate({duration:1000, center: map_Center}); } |
|