지도 위에 마우스를 움직이면 하단에 해당 마우스 커서의 위치 좌표를 확인해볼 수 있었다.
이번 포스팅에서는 브이월드 배경지도 위에서 마우스 이동할 때마다 해당 위치 좌표를 우측 하단에 표시하는 예제를 해볼 것이다.
기존 브이월드 예제 소스를 활용해서 간단히 구현해보겠다.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>openlayers - dev-jhs</title>
</head>
<body>
<h2>오픈 레이어스 브이월드 마우스 위치 예제</h2>
<div id="map" class="map" style="width:100%;height:80%;"></div>
<div id="mouseCoordinate"></div>
<script>
//브이월드 타일레이어 url 설정s
var source =new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
});
//타일레이어 생성하기
var viewLayer = new ol.layer.Tile({
source:source
});
//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
center:[14248656.389982047, 4331624.063626864],
zoom:8,
});
var mouseControlCoordinate = new ol.control.MousePosition({
coordinateFormat: new ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',//좌표계 설정
className: 'mposition', //css 클래스 이름
target: document.getElementById('mouseCoordinate'),//좌표를 뿌릴 element
});
var mapView = new ol.Map({
target:"map", // 지도를 생성할 element 객체의 id 값,
layers:[viewLayer], //생성한 레이어 추가,
view:view, //view 설정
controls: new ol.control.defaults().extend([mouseControlCoordinate]),
});
</script>
</body>
</html>
브이월드 배경지도 예제에서 더 추가된 소스는 컨트롤 추가하는 부분이다.
var mouseControlCoordinate = new ol.control.MousePosition({
coordinateFormat: new ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',//좌표계 설정
className: 'mposition', //css 클래스 이름
target: document.getElementById('mouseCoordinate'),//좌표를 뿌릴 element
});
여러 옵션과 함수에 관한 내용은 아래 링크에서 확인할 수 있다.
openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
OpenLayers v6.5.0 API - Class: MousePosition
A control to show the 2D coordinates of the mouse cursor. By default, these are in the view projection, but can be in any supported projection. By default the control is shown in the top right corner of the map, but this can be changed by using the css sel
openlayers.org
openlayers control에 대한 클래스를 두 차례 정도 다뤄봤다. 최신 버전에 여러 예제도 많이 나왔고 버전이 업데이트할 때마다 배울게 많았던 거 같다.
이번 포스팅을 마지막으로 컨트롤에 대한 내용은 접고 다음 포스팅에서는 벡터 레이어 대해 알아보고자 한다.
포인트, 라인 스트링, 폴리곤에 대해 직접 레이어를 생성하거나 직접 그려보는 예제를 다뤄보겠다.
이번 포스팅에 대한 예제 소스는 아래 링크에서 직접 확인해보고 테스트 해볼 수 있다.
plnkr.co/edit/CLt3kiqw7FYbdwSs?preview
Plunker - OpenLayers mouse position
Plunker is loading… Everything will be all right.
plnkr.co
'JS > Openlayers' 카테고리의 다른 글
| 오픈레이어스 csv 포인트 cluster 시각화 예제 (0) | 2021.05.03 |
|---|---|
| Openlayers point 벡터 레이어 생성 예제 (0) | 2021.04.29 |
| OpenLayers overview map 생성 예제 (0) | 2021.04.27 |
| openlayers 브이월드 배경지도 추가하기 (0) | 2021.04.12 |
| openlayers 좌표계 변경하기 EPSG:3857 -> EPSG:4326 (0) | 2021.04.04 |