[OpenLayers] 마우스로 도형 그리기(Draw) 및 벡터레이어(VectorLayer) 추가

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