Question

我绘制lineString并添加"drawend"事件，将图片添加到lineString的末尾。现在我想将图像移动到translate interaction的位置，它可以工作，但lineString的端点没有沿着图像移动。

有人知道如何使linestring的最后一个坐标与图像坐标一起移动。我想绑定它们，然后我可以将它们组合在一起。以下是示例http://jsfiddle.net/Wenhua1224/kux7fw49/2/

document.getElementById('move').onclick = function (){
  map.addInteraction(select);
  map.addInteraction(translate);
  map.removeInteraction(interaction);
};

Answer 1

您可以通过收听被触发的几何change事件来执行此操作。当发生这种情况时，获取图像的坐标并将其应用为线geom的最后一个坐标。这是一个片段：

// a is the point (image) feature
a.getGeometry().on('change', function() {
    var line = e.feature.getGeometry();
    var coords = line.getCoordinates();
    coords.pop();
    var last = a.getGeometry().getCoordinates();
    coords.push(last);
    line.setCoordinates(coords);
}, this);

您可以替换整个几何对象，或更新现有的geom（如上例所示）。

同时，你也可以做相反的事情，即在修改你的行时，也要更新结束图像，如下：

// e is the drawend event, which contains the line feature
e.feature.getGeometry().on('change', function() {
  var end = e.feature.getGeometry().getLastCoordinate();
  a.setGeometry(new ol.geom.Point(end));
}, this);

请注意，在上面的代码片段中，几何图形已完全替换，这也有效。

请参阅上述更改中的updated jsfiddle。

如何沿图像移动几何图形？

1 个答案: