如何沿图像移动几何体？

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 事件来做到这一点。当发生这种情况时，获取图像的坐标并将其用作线几何体的最后一个坐标。这是一个片段：

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

如何沿图像移动几何体？

How to move a geometry along a image?

javascript

openlayers-3