drag-and-drop - 如何在 Open Layers 3 中拖动要素？

Question

在 OL3 示例中，我可以将对象拖放到地图上，但我想移动/调整大小/旋转地图上已经存在的东西，例如 ol.geom.Point 和其他 ol.geom 对象。这样做的OL3方式是什么？

OL2 中的示例：

OpenLayers.Control.DragFeature(layer)

Answer 1

不知道为什么 OL3 网站上的示例如此复杂。拖动矢量对象可以很容易地使用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

看一下修改交互（示例）。虽然还不支持旋转。

Answer 3

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

你可以在这里找到库： 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);