如何利用js根据坐标判断构成单个多边形是否合法

 更新时间:2022年01月09日 11:39:23   作者:或许丶Kakui  
这篇文章主要给大家介绍了关于如何利用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根据坐标判断多边形内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于javascript实现按圆形排列DIV元素(三)

    基于javascript实现按圆形排列DIV元素(三)

    本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法,此文着重于介绍怎样实现图片按椭圆形转动,需要的朋友来看下吧
    2016-12-12
  • 前端页面禁止别人调试的方法

    前端页面禁止别人调试的方法

    这篇文章主要介绍了前端页面禁止别人调试的方法的相关资料,需要的朋友可以参考下
    2023-03-03
  • JS实现元素上下左右移动效果

    JS实现元素上下左右移动效果

    这篇文章主要为大家详细介绍了JS实现元素上下左右移动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JavaScript改变this指向的四种方法(bind、call、apply 和箭头函数)

    JavaScript改变this指向的四种方法(bind、call、apply 和箭头函数)

    JavaScript中的this是一个非常重要且容易困惑的概念,主要用于引用执行上下文,然而,this的指向经常因为不同的执行环境而改变,为了解决这个问题,JavaScript提供了多种方法来明确指定this的指向,本文将详细介绍JavaScript中常用的四种改变this指向的方法
    2025-03-03
  • 微信小程序swiper轮播图组件使用方法详解

    微信小程序swiper轮播图组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序swiper轮播图组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 微信小程序实现底部弹出框封装

    微信小程序实现底部弹出框封装

    这篇文章主要为大家详细介绍了微信小程序底部弹出框封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • MySQL SUM Function函数使用详解

    MySQL SUM Function函数使用详解

    这篇文章主要为大家介绍了MySQL SUM Function函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 又一款js时钟!transform实现时钟效果

    又一款js时钟!transform实现时钟效果

    又一款js时钟!这篇文章主要为大家详细介绍了transform实现的时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript让DEDECMS告别手写Tag

    Javascript让DEDECMS告别手写Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让dedecms添加内容时能去tags_main里去选择.
    2014-09-09
  • 用javascript实现截取字符串包含中文处理的函数

    用javascript实现截取字符串包含中文处理的函数

    一直不知道js可以截取中文字符,呵呵,原理用正则表达式,匹配中文的长度,中文算两个,因为算一个,是个好东西,推荐大家收藏
    2008-04-04

最新评论