即时更改绘图工具

Question

我已经调整了 openlayers basic draw example，每当我从 Point switching 到 LineString[=36] =]或多边形绘制模式，仅第一次正常，但切换超时[=35] =].

F.I. 使用后无法返回绘图 Point LineString（它继续绘制我的 LineString，但日志打印绘图工具是 Point）

我的 html 模态按钮：

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

这是 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();
});

您还可以在 jsFiddle

上找到完整代码

Answer 1

问题是每次调用 addInteraction() 时都会向地图添加 ol.interaction.Draw 的新实例，因此现有实例永远不会被删除。

快速而肮脏的解决方案是在创建新交互之前删除现有交互。

只需添加

map.removeInteraction(draw);

之前

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

查看更新后的 fiddle https://jsfiddle.net/zuarah4t/3/