[OpenLayers] 檢查線段是否自相交

Check if LineString is self-interaction

前言

當一線段畫完後，如何知道這條線有發生自相交？看過 OpenLayers 官方文件，沒有對應的 API 可以檢查這件事。所以來記錄一下，檢查線段自相交吧！

Check if LineString is self-interaction

一些工具

IDE ： Visual Studio Code

CDN：

• openlayers v6.5.0
• jquery v3.5.1
• bootstrap v4.5.2
• turf.js v6.3.0

動手實作

拆解步驟：

畫完線 → 取得線段上，單一片段開頭與結尾的經緯度 → 檢查所有單一片段倆倆是否交於一點 → 該點座標是否為任單一片段之開頭或結尾的經緯度（假如是，則判斷不相交；反之）

檢查所有單一片段倆倆是否交於一點，這個步驟會用到套件 turf.js 中的 turf.lineIntersect。本來有想用 math.js 算出交點座標，但會有小數點誤差，所以改用該套件。

關於 forEachSegment

第 136 行用到 forEachSegment，取得每一線段開頭與結尾的經緯度，如果單純取 from 和 to，而非 from.slice(0) 和 to.slice(0) 會踩到一個雷。我有開 bug issue，紀錄於 openlayers 的 git: The values in array returning from lineSting forEachSegment are wrong。