반응형


- OpenLayers를 활용한 특정 레이어의 추가 및 삭제 -


첫 배경지도로 띄운 map에 특정 레이어를 추가하거나 삭제를 해보자.


복잡한 예제말고 그냥 간단한 상황의 예제를 통해


추가 및 삭제를 진행해보자


<!doctype html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<style>
#map {
height: 800px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<title>OpenLayers-vworld</title>
</head>
<body>
<h2>OpenLayers_MAP</h2>
<div id="map" ></div>
</body>
<script type="text/javascript">

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

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

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


우선 당연하게도 layer를 추가하거나 삭제하기 위해서는

layer를 담아두는 map객체가 존재해야한다.

그리고

쉽게 접근하기위해 미리 두개의 레이어를 선언해두고

map객체에는 Basemap을 표출해놓았다.

레어어를 추가하거나 삭제하는 명령어는 간단하다.

map객체에서 지원해주는 명령어가 있기때문에

(map을 담아둔 변수를 의미한다.)


map.addLayer(grayMap);

을 사용하여 회색지도를 넣어봤다.



이제 회색지도를 지워보도록하자

추가할때 넣어준 layer변수명을 그대로 사용해주면 쉽게 제거가 가능하다.

map.removeLayer(grayMap);


*추가적으로 응용해서 map 객체에서 layer 목록을 뽑아낼수있으면

거기서 하나 골라 삭제해도 될거같다. 아직 안해봐서 될지는 모르겠지만 될거같다.



이렇게 손쉽게 추가 및 제거가 가능하다.

반응형