如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個多邊形是否合法
前言
需求:在高德地圖中判斷用戶繪制的圍欄是否合法。
核心解決點:倒序依次判斷如果是相鄰的二根線段,判斷是否有交點,非相鄰的線段不相交。
安裝
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" /** * 坐標(biāo)轉(zhuǎn)線段 * @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; } /** * 判斷坐標(biāo)組成的單個多邊形是否合法 * @param {*} path * @description 請傳入[[1,2],[2,2],[3,3]] 類似的二維數(shù)組 * @returns {boolean} */ export function isTruePolygon(path) { // 判斷數(shù)組且數(shù)組的長度小于3不構(gòu)成滿足一個面的必要條件終止 if (!Array.isArray(path) || path.length < 3) return false; // 具體坐標(biāo)也需是一個一維數(shù)組,并且數(shù)組的長度等于2 if (!path.every(item => Array.isArray(item) && item.length == 2)) return false; // 將坐標(biāo)轉(zhuǎn)成線段 const lines = pathToLines(path); // 是否合法標(biāo)志 let isTrue = true; // 驗證函數(shù) function check() { // 倒序循環(huán) for (let i = lines.length - 1; i >= 0; i--) { // 基準(zhǔn)線段 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
總結(jié)
到此這篇關(guān)于如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個多邊形是否合法的文章就介紹到這了,更多相關(guān)js根據(jù)坐標(biāo)判斷多邊形內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于JavaScript實現(xiàn)數(shù)值型坐標(biāo)軸刻度計算算法(echarts的y軸刻度計算)
- JavaScript offset實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動
- JavaScript使用canvas繪制坐標(biāo)和線
- JavaScript 空間坐標(biāo)的使用
- JavaScript實現(xiàn)捕獲鼠標(biāo)坐標(biāo)
- js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法示例
- JS圖形編輯器場景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換
相關(guān)文章
Javascript實現(xiàn)Web顏色值轉(zhuǎn)換
這篇文章主要介紹了Javascript實現(xiàn)Web顏色值轉(zhuǎn)換,需要的朋友可以參考下2015-02-02textarea不能通過maxlength屬性來限制字?jǐn)?shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字?jǐn)?shù),為此必須尋求其他方法來加以限制以達(dá)到預(yù)設(shè)的需求2014-09-09js實現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼
這篇文章主要介紹了js實現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼,涉及javascript操作頁面元素的布局及屬性的動態(tài)變換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09如何讓一個層關(guān)閉之后,就算刷新頁面了也不顯示。除非關(guān)閉頁面再次打開
這個功能,一般可用于廣告的顯示,當(dāng)關(guān)閉后,就不顯示,除非重新關(guān)閉打開,增加用戶體驗2008-09-09游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理
這篇文章主要介紹了游戲開發(fā)中如何使用CocosCreator進(jìn)行音效處理,并對音效組件進(jìn)行封裝,方便以后使用,同學(xué)們看完之后,一定要親手實驗一下2021-04-04微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件,滾動選項卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-02-02