通过拖动移动矢量要素

Question

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

我在哪里，我可以...

Select 要移动的要素

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

一旦进入select拖动地图项的模式，除了重新加载地图之外别无他法...我不知道如何也没有在文档中看到如何捕捉“拖动完成”

我的代码

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.

}

更新： 我找到了 'translateend'

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

...但这不仅会在最后触发，还会随着点击向下和向上点击触发？我很困惑为什么要这样做，这个功能看起来像一个脊状框架？...我可能是错的，但有限的文档和示例让人很难理解翻译的能力。

非常感谢任何帮助

Answer 1

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

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

这样，您将忽略对所选特征的简单“点击”，而只关心其几何形状是否发生了变化。

现场演示

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

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

通过拖动移动矢量要素

Move vector features by dragging

openlayers

openlayers-3

openlayers-5

现场演示