[Openlayers] 마우스로 도형 그리기

list.jsp

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

 

list-js.jsp

//draw
var source;
var draw;

function openlayersDraw(){
		 
	        $("#type").change(function(){
	        	map.removeInteraction(draw);
	            addInteraction();	        	
	        })

	        // Add over interaction that draw hull in a layer
	        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 = $("#type").find("option:selected").val();
          if (value !== 'None') {
              draw = new ol.interaction.Draw({
                      source: source,
                      type: value
             });
              map.addInteraction(draw);
          }
      }

 

위의 selectbox에 따라 도형을 그릴수 있음