在 OpenLayers 3 中将功能从一个位置移动到另一个位置答案

【问题标题】：Move feature from one location to another in OpenLayers 3在 OpenLayers 3 中将功能从一个位置移动到另一个位置
【发布时间】：2023-03-15 08:20:01
【问题描述】：

如何将矢量特征从地图上的一个位置移动到另一个位置？

我有以下在 (0.0, 0.0) 处生成图标：

var iconFeature = new ol.Feature({
   geometry: new ol.geom.Point([0.0,0.0])
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'marker-icon.png'
  }))
});

iconFeature.setStyle(iconStyle);

这工作正常，但我现在如何将其移动到另一个位置？

我试过了：

iconFeature.move(x,y);

我也试过了

iconFeature.geometry.move(x,y);

后者表示 iconFeature.geometry 未定义，第一个表示 icon.move() 不是函数。

关于 SO 的先前答案提出了这些解决方案，但它们似乎对我不起作用。

【问题讨论】：

标签： javascript openlayers-3

【解决方案1】：

实际上你可以使用新的ol.coordinate.add方法来做到这一点，见the docs.

我添加了一个jsFiddle 来证明这一点，红色点是原始点，绿色点是移动了随机距离的点。

要获取点，在矢量源上使用forEachFeature，getGeometry().getCoordinates() 获取实际坐标，setGeometry，例如，

vectorSource.forEachFeature(function(feature){
     var coordinate = feature.getGeometry().getCoordinates();
     //move coordinates some distance
     ol.coordinate.add(coordinate, 10, 10);
     //use setGeometry to move it   
     feature.setGeometry(new ol.coordinate);
    }
);

在这个小提琴中，我创建了一个新的几何图形，而不是移动现有的几何图形。显然，对于点以外的东西，您必须遍历坐标数组。要仅移动特定几何图形，可以使用 getFeatureById method of ol.Feature 获取特定特征，然后您可以移动和更新其几何图形，如上所述。

【讨论】：

谢谢你，一个很好的解决方案和很好的例子来演示它。对于单点兴趣点，OL3 叠加也是使用 setPosition() 移动它们的解决方案，这是我的临时解决方案。
不客气。我开始享受 OL3，作为一个长期的 OL2 开发者，在完全重写的最初冲击因素已经消退之后：D
jsfiddle 不再有效，它指向一个不存在 ol.js 的位置
@Icarus。谢谢，用 CDN 源更新了小提琴。

【解决方案2】：

有translate 移动几何的方法：

iconFeature.getGeometry().translate(deltaX, deltaY);

注意，这是相对移动。如果要将点移动到绝对位置，则必须计算原始位置与所需位置之间的距离。

【讨论】：