如何在Open Layers 3中拖动功能？

Question

在OL3示例中，我可以拖动对象并放在地图上，但我想移动/调整大小/旋转已经在地图上的内容，如ol.geom.Point和其他ol。几何物体。什么是OL3方式呢？

OL2中的示例：

OpenLayers.Control.DragFeature(layer)

Answer 1

不确定为什么OL3网站上的example如此复杂。使用new ol.interaction.Modify可以轻松实现拖动矢量对象。

以下是一个更简单的工作示例：jsFiddle

简而言之，如果你的标记是：

var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));

您可以将修改互动定义为：

var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([pointFeature]),
    style: null
});

map.addInteraction(dragInteraction);

然后您可以获得一个事件，以便在拖动后获取标记的新位置，如下所示：

pointFeature.on('change',function(){
            console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
},pointFeature);

Answer 2

查看modify interaction（example）。虽然还不支持轮换。

Answer 3

我创建了一个简单的库，通过略微更改此官方示例，将拖动交互添加到openlayers 4：https://openlayers.org/en/latest/examples/custom-interactions.htm

你可以在这里找到lib： https://gist.github.com/kingofnull/0ad644be69d8dd43c05721022ca5c3a5

你应该这样添加：

var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([new ol.interaction.Drag(),])
});

的更新

我测试了翻译，它在openlayer 4中工作，不需要自定义交互。请记住，如果要将其与修改交互相结合，则应在修改之前添加它。这是我的最终代码：

var map = new ol.Map({...});
var featureDrager = new ol.interaction.Translate();
var modify = new ol.interaction.Modify({...});
map.addInteraction(featureDrager);
map.addInteraction(modify);