Javascript 如何沿图像移动几何体？

我绘制了一个

lineString

，并添加了一个

“draund”

事件，将图像添加到

lineString

的末尾。现在我想通过

translate interaction

将图像移动到一个位置，它可以工作，但是

lineString

的端点没有沿着图像移动

有人知道如何使

linestring

的最后一个坐标随图像坐标移动吗。我想把它们绑起来，然后把它们移到一起。下面是一个例子

---

您可以通过收听正在触发的几何体

更改
事件来执行此操作。发生这种情况时，获取图像的坐标，并将其应用为线几何的最后一个坐标。下面是一个片段：

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

请注意，在上面的代码片段中，几何体被完全替换，这也很有效

通过以上更改查看正在运行的。
看起来不错，但图像没有沿着直线方向旋转，您有解决方法吗？如果比较直线的第一个点和最后一个点，您可以计算角度，这将导致旋转。然后，使用此旋转值将其设置为图像功能的样式。感谢您的持续帮助，我想询问是否可以仅捕捉linestring的起点和终点，并且仅允许修改这两个点。因为当我捕捉到起始和结束节点之间的部分并单击此处时，它将添加新的节点点，然后它将不是一条直线，我想要一条只允许修改起始和结束节点的直线（一条带箭头图像的直线，指向某个位置）。你应该为新问题启动新线程。请务必先搜索现有的类似问题/回答。
// 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);