javascript 在 OpenLayers 3 中将特征从一个位置移动到另一个位置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26680958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 06:18:25  来源:igfitidea点击:

Move feature from one location to another in OpenLayers 3

javascriptopenlayers-3

提问by Single Entity

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.

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

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

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

回答by John Powell

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

实际上,您可以使用新ol.coordinate.add方法执行此操作,请参阅文档。

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

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

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

要获得点,请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);
    }
);

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 getFeatureByIdmethod of ol.Featurethat can be used to get a specific feature, whose geometry you can then move and update, as above.

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

回答by user1702401

There's translatemethod for moving geometries:

translate移动几何的方法:

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.

注意,那是为了相对移动。如果要将点移动到绝对位置,则必须计算原始位置和所需位置之间的距离。