openlayers3矢量绘制与清除

在 OpenLayers 3 中进行矢量绘制和清除，你可以使用 ol.interaction.Draw 和 ol.source.Vector。以下是一个简单的示例：

var vectorSource = new ol.source.Vector();

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var draw = new ol.interaction.Draw({
  source: vectorSource,
  type: 'Polygon'
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

// 添加绘制交互到地图上
map.addInteraction(draw);

// 清除绘制
var clearDraw = function() {
  vectorSource.clear();
};

// 绑定清除绘制的按钮
document.getElementById('clear-draw').addEventListener('click', clearDraw);

在这个示例中，我们创建了一个 ol.source.Vector 和一个 ol.layer.Vector，并将其添加到地图上。然后，我们创建了一个 ol.interaction.Draw 对象，类型为 'Polygon'，并将其源设置为 vectorSource。我们将 draw 对象添加到地图上，以便用户可以开始绘制多边形。

最后，我们绑定了一个清除绘制的按钮，并创建了一个清除函数。当用户点击清除按钮时，我们使用 vectorSource.clear() 方法清除 vectorSource 中的所有要素。

需要注意的是，当用户完成绘制时，多边形将自动添加到 vectorSource 中。如果你想在绘制完成后执行其他操作，你可以监听 draw.on('drawend', function(event) {...}) 事件，并在事件处理程序中执行你的代码。