如何利用js根據坐標判斷構成單個多邊形是否合法
前言
需求:在高德地圖中判斷用戶繪制的圍欄是否合法。
核心解決點:倒序依次判斷如果是相鄰的二根線段,判斷是否有交點,非相鄰的線段不相交。
安裝
npm install @turf/helpers @turf/line-intersect
代碼
/** * geometric 幾何工具庫 * @author maybe * @license https://gitee.com/null_639_5368 */ import * as turf from "@turf/helpers" import lineIntersect from "@turf/line-intersect" /** * 坐標轉線段 * @param {*} path * @returns {arr} */ export function pathToLines(path) { const lines = []; path.forEach((p, pi) => { let line; if (pi == path.length - 1) { line = turf.lineString([path[pi], path[0]]); lines.push(line) return; } line = turf.lineString([path[pi], path[pi + 1]]); lines.push(line) }) // console.log(JSON.stringify(lines)) return lines; } /** * 判斷坐標組成的單個多邊形是否合法 * @param {*} path * @description 請傳入[[1,2],[2,2],[3,3]] 類似的二維數組 * @returns {boolean} */ export function isTruePolygon(path) { // 判斷數組且數組的長度小於3不構成滿足一個面的必要條件終止 if (!Array.isArray(path) || path.length < 3) return false; // 具體坐標也需是一個一維數組,並且數組的長度等於2 if (!path.every(item => Array.isArray(item) && item.length == 2)) return false; // 將坐標轉成線段 const lines = pathToLines(path); // 是否合法標志 let isTrue = true; // 驗證函數 function check() { // 倒序循環 for (let i = lines.length - 1; i >= 0; i--) { // 基準線段 const line = lines[i]; const lineNextIndex = i == 0 ? lines.length - 1 : i - 1; const lineLastIndex = i == lines.length - 1 ? 0 : i + 1; const lineNext = lines[lineNextIndex]; const lineLast = lines[lineLastIndex]; // 相鄰二根線段必須要有交點 if ( !isIntersect(line, lineNext) || !isIntersect(line, lineLast) ) { console.log('相鄰二根線段必須要有交點', line, lineNext, lineLast, isIntersect(line, lineNext), isIntersect(line, lineLast)) isTrue = false; return; } // 非相鄰的線段必須無交點 const noNearLines = lines.filter((item, i) => i !== lineNextIndex && i !== lineLastIndex); noNearLines.forEach(le => { if (isIntersect(line, le)) { console.log('非相鄰的線段必須無交點') isTrue = false; return; } }) } } check(); isTrue ? console.info('多邊形合法') : console.log("多邊形不合法") return isTrue; } function isIntersect(line1, line2) { return lineIntersect(line1, line2).features.length > 0; } export default { pathToLines, isTruePolygon, }
測試
import { isTruePolygon } from './geometric' const path_false = [ [116.403322, 39.920255], [116.385726, 39.909893], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365] ] const path_true = [ [116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365] ] console.log(isTruePolygon(path_true)); // true console.log(isTruePolygon(path_false)); // false
總結
到此這篇關於如何利用js根據坐標判斷構成單個多邊形是否合法的文章就介紹到這瞭,更多相關js根據坐標判斷多邊形內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS中ESModule和commonjs介紹及使用區別
- Js模塊打包exports require import的用法和區別
- Vue3.0利用vue-grid-layout插件實現拖拽佈局
- 使用three.js 繪制三維帶箭頭線的詳細過程
- 從未有過的JavaScript運算符詳細解釋