通過拖動移動矢量特征

Question

如果我在圖層上有多邊形、線、文本和點，我希望能夠使用 select 1 功能，右鍵單擊 select “移動”，然后能夠將功能拖動到 Z1D78DC8ED5ED51214E5AEZEB 上的另一個位置並釋放 I141214E5AEZ24鼠標按鈕將新位置保存到我的數據庫中。

我在哪里，我可以...

Select 移動功能

右鍵單擊 select 並執行“移動”操作，該操作用於調用添加 Translate 和 Select ol 對象的代碼。 這不是 select 我傳遞給翻譯的功能...我仍然需要單擊該功能，然后我才能拖動它。 即使我只向翻譯添加了一項功能，我也可以單擊並拖動任何功能（我認為這樣做是不允許的。

一旦進入選擇要拖動的功能的模式，除了重新加載 map 之外別無他法......我不知道如何，也沒有在文檔中看到如何捕捉“拖動完成”

我的代碼

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 觸發？ 我很困惑為什么要這樣做，以及這個功能看起來像是一個脊梁框架？...我可能是錯的，但是有限的文檔和示例使得很難理解翻譯的功能。

任何幫助是極大的贊賞

Answer 1

據我了解，一旦 Translate 交互具有可以與之交互的功能（即功能集合中具有功能），那么即使單擊它也足以觸發“translatestart”和“translateend”事件。

您可以做的一件事是注意該功能的集合“添加”和“刪除”事件。 在“添加”時，在幾何 object 本身上注冊一個“更改”事件，以檢測在“translateend”事件觸發時幾何是否已更改（在“translateend”事件的處理程序方法中，您會將功能標記為已更改）。 在“刪除”上，撤消該功能的標記。

這樣，您將忽略對所選特征的簡單“點擊”，而只關心其幾何形狀是否已更改。

現場演示

我創建了一個小演示，說明我在 OpenLayers Translate 示例中的意思。 看：

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