반응형


- OpenLayers Draw & VectorLayer -


지도 위에 마우스로 가볍게 도형을 그리고 싶을때


Draw를 활용하여 그리는데 그냥 지도위에는 그릴수는 없고


vector layer를 깔아두고 그 위에 그려야한다.


<!doctype html>
<html lang="ko">
<head>
<!-- OpenLayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<style>
#map {
height: 800px;
width: 100%;
}
</style>
<title>OpenLayers-vworld</title>
</head>
<body>
<h2>OpenLayers_MAP</h2>
<div id="map" ></div>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None" selected>None</option>
</select>
</body>
<script type="text/javascript">

//기본지도
var vwBaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
})
});

var map = new ol.Map({
target : 'map',
layers: [vwBaseLayer],
view: new ol.View({
center: [14126669.41589247, 4493404.190498611],
zoom: 7,
minZoom: 7,
maxZoom: 19
})
});

var typeSelect = document.getElementById('type');
var draw;
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};

// Add over interaction that draw hull in a layer
var source = new ol.source.Vector({ wrapX: false });
var vector = new ol.layer.Vector({
title : 'vector',
source: source, });

map.addLayer(vector); //vector layer add

function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: value
});
map.addInteraction(draw);
}
}
</script>
</html>

코드를 보면 알겠지만 selectbox를 통해서 그리기를 제어할 것이다.


ol.layer.Vector 를 통해서 우선 지도에 vector layer를 깔아주고

(여기서 wrapX : false 는 같은 좌표에 한해서 그리기게 제한된다-같은좌표 클릭 불가)


ol.interaction.Draw를 통해 선택한 type 별로 그리기를 지원해줄것이다.


소스 중간에 removeInteraction() addInteraction()이 존재하는데


그냥 간단하게 말해서 마우스에 붓을 쥐어주거나 제거해준다고 생각하면 쉽다.



일반 ol 에서 제공해주는 그리기에서 circle 타입은 polygon 타입이 아니기때문에


나중에 제어하기 힘든 경우가 생긴다.


일반적으로 다들 나중을 생각해서 polygon타입으로 원을 그리고는 하는데


이건 openlayers extension에서 제공해주고 있기 때문에


가져다 쓰면 될거같다.


반응형