在OpenLayers 3中从一个位置移动到另一个位置。

How do I move a vector feature from one position on a map to another?

如何将矢量特征从一个位置移动到另一个位置?

I have the following which generates an icon at (0.0, 0.0):

我有如下图(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);

This works fine, but how do I now move it to another location?

这很好，但是如何将它移动到另一个位置呢?

I've tried:

我试过了:

iconFeature.move(x,y);

I've also tried

我也试过

iconFeature.geometry.move(x,y);

The latter says that iconFeature.geometry is undefined, the first says icon.move() is not a function.

后者认为这是一种象征。几何是没有定义的，第一个说图标。move()不是一个函数。

Previous answers on SO suggest these solutions, but they don't seem to work for me.

之前的答案都暗示了这些解决方案，但它们似乎对我不起作用。

2 个解决方案

#1

Actually you can do this using the new ol.coordinate.add method, see the docs.

实际上，你可以用新的坐标来做这个。添加方法，查看文档。

I have added a jsFiddle demonstrating this, red points are the original, and the green ones are those points moved a random distance.

我添加了一个jsFiddle演示了这个，红色的点是原始的，绿色的是那些点移动了一个随机的距离。

To get the points, use forEachFeature on the vector source, and getGeometry().getCoordinates() to get the actual coordinates, and the setGeometry, eg,

为了得到这些点，在矢量源上使用forEachFeature, getGeometry().getCoordinates()来获得实际的坐标，以及set几何体，例如，

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

In this fiddle I created a new geometry rather than moving the existing one. Obviously, for something other than a point you would have to iterate through the coordinates array. To only move a specific geometry, there are is the getFeatureById method of ol.Feature that can be used to get a specific feature, whose geometry you can then move and update, as above.

在这个小提琴中，我创造了一个新的几何学，而不是移动现有的。显然，除了点之外，你还需要遍历坐标数组。为了只移动一个特定的几何图形，有一个getFeatureById方法的ol。可以用来获得特定特性的特性，如上面所示，您可以移动和更新其几何形状。

#2

There's translate method for moving geometries:

移动几何的翻译方法:

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

NB, that's for relative moving. If you want to move your point to absolute position, you have to calculate distances between original and desired location.

NB，这是相对运动的。如果你想把你的点移动到绝对位置，你必须计算出原始位置和期望位置之间的距离。

#1