通过拖动移动矢量特征答案

【问题标题】：Move vector features by dragging通过拖动移动矢量特征
【发布时间】：2021-03-31 16:31:51
【问题描述】：

如果我在图层上有多边形、线、文本和点，我希望能够选择 1 个要素，右键单击选择“移动”，然后能够将该要素拖动到地图上的另一个位置，然后当我释放鼠标按钮将新位置保存到我的数据库中。

我在哪里，我可以...

选择要移动的特征

右键单击并选择用于调用代码的“移动”操作添加 Translate 和 Select ol 对象。这不会选择我传递给的功能翻译虽然...我仍然需要单击该功能，然后我才能拖动它。即使我仅向翻译添加了 1 个功能我可以单击并拖动任何功能（我没想到这样做可以。

一旦在选择要拖动的要素模式下，除了重新加载地图之外别无他法...I 不知道如何，也没有在文档中看到如何捕捉“拖动完成”

我的代码

moveObject(){ 
//first get the selected object
const selectedObject = new Array<number>();

  const selectedFeatures: Array<olFeature> = myFeatureLayer.getSource().getFeatures();
  selectedFeatures.forEach((feature: olFeature) => {
    selectedObject.push(feature.getId());
  });

  //get the feature
  let selectedFeatures = this.myFeatureService.getFeature(selectedObject);

  let select = new Select();
  let translate = new Translate({
  features: selectedFeatures,  (this should restrict the move to just the feature passed in,but it 
                                doesn't)    
  });
  MapValues.map.addInteraction(translate);
  MapValues.map.addInteraction(select); 
  //Here I want to automatically select the feature given and put it into "Move" mode.

 // Here once move is done I want to catch "Dropping" the feature and add to the data base and 
    remove the Interactions.

}

更新： 我找到了“翻译结束”

 translate.on('translateend', evt => {
    evt.features.forEach(feat => {
      // process every feature
    })
 })

...但这不只是在最后触发，它会随着 clickdown 和 upclick 触发？我很困惑为什么要这样做，以及这个功能看起来像是一个脊梁框架？...我可能是错的，但有限的文档和示例使我们很难理解翻译的功能。

非常感谢任何帮助

【问题讨论】：

标签： openlayers openlayers-3 openlayers-5

【解决方案1】：

据我了解，一旦 Translate 交互具有可以与之交互的功能（即功能集合中包含功能），那么即使单击它也足以触发“translatestart”和“translateend”事件。

您可以做的一件事是注意该功能的集合“添加”和“删除”事件。在“添加”时，在几何对象本身上注册一个“更改”事件，以检测在“translateend”事件触发时几何是否已更改（在“translateend”事件的处理程序方法中，您会将特征标记为已更改）。在“删除”时，撤消该功能的标记。

这样，您将忽略对所选要素的简单“点击”，而只关心其几何形状是否已更改。

现场演示

我创建了一个小演示，说明我在 OpenLayers Translate 示例中的意思。见：

https://codesandbox.io/s/translate-features-forked-p7kum?file=/index.html

【讨论】：