Question

我在Snap Interaction示例的基础上开始使用 OpenLayers 3 ，我想在下拉菜单中添加None选项。

我添加了选项：

  <select name="draw-type" id="draw-type">
    <option value="None">None</option>
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="MultiPolygon">MultiPolygon</option>
  </select>

然后像Draw Features示例中那样的条件：

  var typeSelect = document.getElementById('draw-type');
  var value = typeSelect.value;
  if (value !== 'None') {

  }

但我不清楚在哪里插入病情，以及这是否正确。

谢谢，先生。

JSFiddle

Answer 1

我想出了这个小小的黑客：

<select name="draw-type" id="draw-type">

    <!-- Add None option -->
    <option value="None">None</option>

    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="MultiPolygon">MultiPolygon</option>
</select>

然后：

init: function() {

    // Add None option
    map.removeInteraction(this.None);
    this.None.setActive(false);

    map.addInteraction(this.Point);
    this.Point.setActive(false);
    map.addInteraction(this.LineString);
    this.LineString.setActive(false);
    map.addInteraction(this.Polygon);
    this.Polygon.setActive(false);
    map.addInteraction(this.MultiPolygon);
    this.MultiPolygon.setActive(false);
},

// Add None option
None: new ol.interaction.Draw({
    source: vector.getSource(),
    type: /** @type {ol.geom.GeometryType} */ ('Point')
}),

也许这不是最干净的解决方案，但它有效！

JSFiddle

Answer 2

将更改事件设置为select元素，如果值为None，则从地图中删除绘制交互。如果该值不是None，则在测试尚未添加之后将绘制交互添加回地图。

OpenLayers 3使用snap绘制和修改

2 个答案: