如何用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

（我猜它已添加因爲原來的答案）