如何用OpenLayers3画一条线？

Question

在这个例子中，你可以使用LineString的类型绘制一条路径： http://openlayers.org/en/v3.0.0/examples/draw-and-modify-features.html

我想要做相同的，但有2点之间只有一条线。设置第二点后，绘图工具应自动完成绘图。

这是如何实现的？

Answer 1

我刚刚合并到主分支中，提交了一个可以解决您的用例的提交。见https://github.com/openlayers/ol3/pull/2927。

通过此提交，您可以以编程方式完成绘图。下面的代码片段展示了如何终止线时，它有两个顶点：

var listenerKey; 
drawInteraction.on('drawstart', function(e) { 
    var feature = e.feature; 
    var lineString = feature.getGeometry(); 
    // finish the drawing when the linestring has 2 vertices 
    listenerKey = lineString.on('change', function(e) { 
    var lineString = e.target; 
    var vertices = lineString.getCoordinates(); 
    if (vertices.length == 3) { 
     drawInteraction.finishDrawing(); 
    } 
    }); 
}); 
drawInteraction.on('drawend', function(e) { 
    ol.Observable.unByKey(listenerKey); 
}); 

Answer 2

您还可以设置maxPoints: 2在ol.interaction.Draw

http://openlayers.org/en/latest/apidoc/ol.interaction.Draw.html

（我猜它已添加因为原来的答案）