快速更改绘图工具

Question

I have adjusted openlayers basic draw example and whenever I am switching from Point to LineString or Polygon drawing mode, it is working properly only for the first time , yet fails for switching overtimes .

FI I cannot get back to drawing Point after using LineString (it continues to draw me LineString, yet log prints that drawingtool is Point )

My html for buttons in modal:

 <div class="modal-body row">
    <div class="col-xs-12 col-sm-3">
      <a id="Point" href="#" class="draw btn btn-primary btn-block"><span class="icon ion-android-pin"></span>  Point</a>
    </div>
    <div class="col-xs-12 col-sm-3">
      <a id="LineString" href="#" class="draw btn btn-primary btn-block"><span class="icon ion-android-pin"></span>  Polyline</a>
    </div>
    <div class="col-xs-12 col-sm-3">
      <a id="Polygon" href="#" class="draw btn btn-primary btn-block"><span class="ion ion-ios-grid-view-outline"></span>  Polygon</a>
    </div>
    <div class="col-xs-12 col-sm-3">
      <a href="#" class="btn btn-primary btn-block"><span class="ion ion-pinpoint"></span>  Coordinates</a>
    </div>
  </div>
</div>

And here is part of js:

function addInteraction() {
  draw = new ol.interaction.Draw({
    features: features,
    type: /** @type {ol.geom.GeometryType} */ (drawtool)
  });
  map.addInteraction(draw);
}
$('.draw').on("click", function(e) {
  //e.preventDefault(); - commented by me - no difference
  drawtool = $(this).attr('id');
  $("#drawModal").modal('toggle');
  addInteraction();
});

You can also find whole code on jsFiddle

Answer 1

The problem is that everytime you are calling addInteraction() you are adding a new instance of ol.interaction.Draw to the map, so the existing one is never removed.

The quick and dirty solution is to remove the existing interaction before creating the new one.

Just add

map.removeInteraction(draw);

before

draw = new ol.interaction.Draw(...

See the updated fiddle https://jsfiddle.net/zuarah4t/3/