如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
前言
需求:在高德地圖中判斷用戶繪制的圍欄是否合法。
核心解決點(diǎn):倒序依次判斷如果是相鄰的二根線段,判斷是否有交點(diǎn),非相鄰的線段不相交。

安裝
npm install @turf/helpers @turf/line-intersect
代碼
/**
* geometric 幾何工具庫(kù)
* @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)組成的單個(gè)多邊形是否合法
* @param {*} path
* @description 請(qǐng)傳入[[1,2],[2,2],[3,3]] 類似的二維數(shù)組
* @returns {boolean}
*/
export function isTruePolygon(path) {
// 判斷數(shù)組且數(shù)組的長(zhǎng)度小于3不構(gòu)成滿足一個(gè)面的必要條件終止
if (!Array.isArray(path) || path.length < 3) return false;
// 具體坐標(biāo)也需是一個(gè)一維數(shù)組,并且數(shù)組的長(zhǎng)度等于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;
// 驗(yàn)證函數(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];
// 相鄰二根線段必須要有交點(diǎn)
if (
!isIntersect(line, lineNext)
|| !isIntersect(line, lineLast)
) {
console.log('相鄰二根線段必須要有交點(diǎn)', line, lineNext, lineLast, isIntersect(line, lineNext), isIntersect(line, lineLast))
isTrue = false;
return;
}
// 非相鄰的線段必須無(wú)交點(diǎn)
const noNearLines = lines.filter((item, i) => i !== lineNextIndex && i !== lineLastIndex);
noNearLines.forEach(le => {
if (isIntersect(line, le)) {
console.log('非相鄰的線段必須無(wú)交點(diǎn)')
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,
}測(cè)試
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)成單個(gè)多邊形是否合法的文章就介紹到這了,更多相關(guān)js根據(jù)坐標(biāo)判斷多邊形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
- JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
- JavaScript使用canvas繪制坐標(biāo)和線
- JavaScript 空間坐標(biāo)的使用
- JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
- js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
- JS圖形編輯器場(chǎng)景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換
相關(guān)文章
基于javascript實(shí)現(xiàn)按圓形排列DIV元素(三)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹怎樣實(shí)現(xiàn)圖片按橢圓形轉(zhuǎn)動(dòng),需要的朋友來(lái)看下吧2016-12-12
JS實(shí)現(xiàn)元素上下左右移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)元素上下左右移動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
JavaScript改變this指向的四種方法(bind、call、apply 和箭頭函數(shù))
JavaScript中的this是一個(gè)非常重要且容易困惑的概念,主要用于引用執(zhí)行上下文,然而,this的指向經(jīng)常因?yàn)椴煌膱?zhí)行環(huán)境而改變,為了解決這個(gè)問(wèn)題,JavaScript提供了多種方法來(lái)明確指定this的指向,本文將詳細(xì)介紹JavaScript中常用的四種改變this指向的方法2025-03-03
又一款js時(shí)鐘!transform實(shí)現(xiàn)時(shí)鐘效果
又一款js時(shí)鐘!這篇文章主要為大家詳細(xì)介紹了transform實(shí)現(xiàn)的時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
Javascript讓DEDECMS告別手寫(xiě)Tag
dedecms在編輯修改內(nèi)容時(shí),TAG標(biāo)簽需要手動(dòng)輸,中文的Tag, 中間還得用半角字符','分隔, 輸入法切來(lái)切去很不方便, 于是動(dòng)手改后臺(tái)代碼, 利用后臺(tái)的tags_main.php, 讓dedecms添加內(nèi)容時(shí)能去tags_main里去選擇.2014-09-09
用javascript實(shí)現(xiàn)截取字符串包含中文處理的函數(shù)
一直不知道js可以截取中文字符,呵呵,原理用正則表達(dá)式,匹配中文的長(zhǎng)度,中文算兩個(gè),因?yàn)樗阋粋€(gè),是個(gè)好東西,推薦大家收藏2008-04-04

