OpenLayers 3 使用捕捉进行绘制和修改

OpenLayers 3 draw and modify with snap

本文关键字：绘制 修改 OpenLayers      更新时间：2023-09-26

我正在快照交互示例之上开始使用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>

然后是类似于绘制要素示例中的条件：

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

但是我不清楚在哪里插入条件以及这是否是正确的方法。

谢谢你,先生。

JSFiddle

我想

出了这个小技巧：

<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

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

相关文章：