javascript - 如何沿着图像移动几何图形？

Question

我绘制一个 lineString 并添加一个 "drawend" 事件以将图像添加到 lineString 的末尾。现在我想通过翻译交互将图像移动到某个位置，它可以工作，但是lineString的端点没有沿着图像移动。

有人知道如何让linestring的最后一个坐标随着图像坐标一起移动吗？我想将它们绑定(bind)，然后我可以将它们移动到一起。这是示例 http://jsfiddle.net/Wenhua1224/kux7fw49/2/

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

Answer 1

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

// 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);

您可以替换整个几何对象，或更新现有的几何对象(如上面的示例)。

同时，您也可以执行相反的操作，即在修改线条时，也更新最终图像，如下所示:

// 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执行上述更改。