[OpenLayers] 특정 레이어 추가 및 제거하기 (ft. addLayer, removeLayer)

- 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>