OpenLayer, 등록하기, 선택하기 동시 사용하기
- Web/JavaScript
- 2021. 10. 19.
OpenLayer, 등록하기, 선택하기 동시 사용하기
화면 구성
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>그리기, 선택하기</title>
<link rel="stylesheet" href="../../assets/css/ol.css">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pane">
<form class="form-inline">
<div class="form-group">
<label for="js-draw-or-select">Draw or Select Interaction: </label>
<select id="js-draw-or-select" class="form-control">
<option value="draw" selected>Draw</option>
<option value="select">Select</option>
</select>
</div>
</form>
</div>
<div id="js-map" class="map"></div>
<script src="../../assets/js/ol-debug.js"></script>
<script src="styling-interaction-render-intents.js"></script>
</body>
</html>html의 화면은 다음과 같다. Select박스의 공간과 map을 표시하는 div의 공간이 전부이다.
등록하기
이전에도 설명한 글이지만, 중요한 부분이므로 다시 작성하게 되었다.
음식을 담기 위해서는 반드시 그릇이 필요하다. 마찬가지로
데이터를 저장하기 위해서는 반드시 Object가 필요하다.
OpenLayer에서 좌표를 받기 위해서는 Vector의 Layer가 필요하다.
이를 map 선언 시 다음과 같이 입력해야 한다.
후에 map.addLayer를 이용하여 추가할 수 있지만, Layer가 다수로 나뉘어서 관리하기 어렵다는 단점이 있다.
따라서 하나로 관리할 수 있도록 미리 조치를 취하는 과정이다.
이 전, 코드보다 더 간결하게 되었다. function에 등록한 것이 아닌, 변수에 Draw를 등록하였다.
앞으로 Draw에서 선을 그을 시, 자동으로 맨 처음에 선언한 vectorLayer에 저장되는 방식이다.
draw와 select 등 Layer에 상호작용하기 위해 필수적인 부분은 ol.interaction의 부분이다.
이 중, removeInteraction과 addInteraction의 존재를 파악할 수 있는데, 눈치 빠른 사람이면 바로 알 수 있을 것이다.
해당 지도에 대한 설정을 변환하는 값이다.
remove는 권한을 회수하는 것이고, add는 권한을 추가하는 것이다. 그냥 모두 주어준다면, 매우 좋겠지만 등록하는 도중에는 선택할 수가 없다. 반대로 선택하는 도중에는 등록할 수가 없다.
따라서, remove와 add는 대부분 세트처럼 따라다닌다.
이 방식을 이용해서, 위에 선언된 선택과 등록을 Select박스를 통해 구분할 수 있게 된다.
선택하기
선택하기는 매우 간단한 구조를 지녔다.
style을 통해, 선택 대상의 style을 변경할 수 있다.
마무리
등록과 선택은 생각보다 쉽게 마칠 수 있었다.
오픈레이어뿐만 아니라 JavaScript의 기초, 응용을 겪는 시간이라서 약간 헤매지 않았나 생각되는 부분이었다.
'Web > JavaScript' 카테고리의 다른 글
| OpenLayer, 지도 이동하기 (0) | 2021.11.09 |
|---|---|
| OpenLayer, Layer 수정하기 (0) | 2021.10.19 |
| OpenLayer, 데이터 저장하기와 불러오기 (0) | 2021.10.19 |
| [JavaScript] addEventListener알아보기 (0) | 2021.10.18 |
| OpenLayer, 스타일 변경하기 (0) | 2021.10.11 |