[OpenLayers] 將被選取線段或面狀回上一步

Undo the selected lines and polygons

前言

OpenLayers v6.5.0 官方文件的範例中，其實有看過 Undo 的按鈕，但實際按過沒有效果，也查過 API 文件，並沒有找到可以將已畫好的線，回上一步的方法。所以這篇是來介紹如何自刻 Undo function ，以達到將編輯過後的線段或面狀，回到上一步的經緯度。

Undo the selected line

一些工具

IDE ： Visual Studio Code

CDN：

• openlayers v6.5.0
• jquery v3.5.1
• bootstrap v4.5.2

動手實作

其實本來想在畫完線段或面狀後，也就是

draw.on('drawend', (evt) => {
// Todo list
})

記下 feature 的經緯度座標，當要回上一步的時候，直接改變原 feature 的經緯度，回復到前一個儲存的座標即可。但實作後，無法如預期改變同一個feature 的座標。

因此想到另一種方式，是當選擇一線狀或面狀時，同樣記下其座標，按下回上一步的按鈕，會先刪除所選擇 feature ，再用原先的座標產生新的 feature。

從上面的過程，可以拆解出以下步驟：

開啟選取功能 → 記下選取 feature 座標 → 呼叫回上一步方法 → 刪除原 feature → 新增 feature

參考

• OpenLayers
• events — OpenLayers 3如何在OpenLayer 2中将功能修改事件注册为“功能修改”