如何在 Open Layers 3 中拖动要素？答案

【问题标题】：How to drag features in Open Layers 3?如何在 Open Layers 3 中拖动要素？
【发布时间】：2014-07-07 07:27:16
【问题描述】：

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

OL2 中的示例：

OpenLayers.Control.DragFeature(layer)

【问题讨论】：

非常好的问题。它似乎还没有实现。

标签： drag-and-drop openlayers openlayers-3

【解决方案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);

【讨论】：

是的，它接合了翻译交互作品，但略有不同的是，其中一个也窃取了版本 4 上的作品。 tsauerwein.github.io/ol3/animation-flights/examples/…
完美运行！做得好。谢谢

【解决方案2】：

看看modify interaction (example)。虽然还不支持旋转。

【讨论】：

【解决方案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);

【讨论】：